From fda528755f91c64a884702890df167bd8c6e8a40 Mon Sep 17 00:00:00 2001 From: Vlad Date: Wed, 13 Feb 2019 15:54:29 +0200 Subject: [PATCH 1/5] Fix bad scale on load --- docs/react-scale-text.js | 2 ++ src/index.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/docs/react-scale-text.js b/docs/react-scale-text.js index cb95518..7175995 100644 --- a/docs/react-scale-text.js +++ b/docs/react-scale-text.js @@ -969,6 +969,7 @@ function (_Component) { if (this.shouldResize()) { this.resize(); window.addEventListener('resize', this._handleResize); + window.addEventListener('load', this._handleResize); } } }, { @@ -984,6 +985,7 @@ function (_Component) { value: function componentWillUnmount() { if (!this.shouldResize()) { window.removeEventListener('resize', this._handleResize); + window.removeEventListener('load', this._handleResize); } } }, { diff --git a/src/index.js b/src/index.js index b788435..65fd64b 100755 --- a/src/index.js +++ b/src/index.js @@ -39,6 +39,7 @@ class ScaleText extends Component { if (this.shouldResize()) { this.resize(); window.addEventListener('resize', this._handleResize); + window.addEventListener('load', this._handleResize); } } @@ -54,6 +55,7 @@ class ScaleText extends Component { componentWillUnmount() { if (!this.shouldResize()) { window.removeEventListener('resize', this._handleResize); + window.removeEventListener('load', this._handleResize); } } From e81620418b6b843dc3139c14b4a47c2661c1d089 Mon Sep 17 00:00:00 2001 From: Vlad Date: Thu, 14 Feb 2019 09:02:17 +0200 Subject: [PATCH 2/5] Add functionality Implementation of fit-content when font size don't scaled --- src/index.js | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 65fd64b..ed4b86f 100755 --- a/src/index.js +++ b/src/index.js @@ -95,11 +95,20 @@ class ScaleText extends Component { // Create copy of wrapper for sizing this.ruler = this._wrapper.cloneNode(true); this.ruler.id = shortId(); + let width = '' + if (this.props.fitParent) { + width = getStyle(this._wrapper.parentNode, 'width') + if (this.props.parentDiff != undefined) { + width = `calc(${width} - ${this.props.parentDiff})` + } + } else { + width = getStyle(this._wrapper, 'width') + } css(this.ruler, { position: 'absolute', top: '0px', left: 'calc(100vw * 2)', - width: getStyle(this._wrapper, 'width'), + width: width, height: getStyle(this._wrapper, 'height') }); document.body.appendChild(this.ruler); @@ -114,7 +123,7 @@ class ScaleText extends Component { render() { const { size: fontSize } = this.state; - const { children, widthOnly } = this.props; + const { children, widthOnly, maxFontSize } = this.props; const overflowStyle = widthOnly ? { overflowY: 'visible', overflowX: 'hidden', height: 'auto' } : @@ -124,9 +133,14 @@ class ScaleText extends Component { React.Children.only(children) : ({children}); + let width = '100%' + if (this.props.fitParent && fontSize && fontSize.toFixed(0) == maxFontSize) { + width = 'fit-content' + } + const style = { fontSize: fontSize ? `${fontSize.toFixed(2)}px` : 'inherit', - width: '100%', + width: width, height: '100%', ...overflowStyle // overflow: 'hidden' @@ -156,13 +170,15 @@ ScaleText.propTypes = { children: PropTypes.node.isRequired, minFontSize: PropTypes.number.isRequired, maxFontSize: PropTypes.number.isRequired, - widthOnly: PropTypes.bool + widthOnly: PropTypes.bool, + fitParent: PropTypes.bool }; ScaleText.defaultProps = { minFontSize: Number.NEGATIVE_INFINITY, maxFontSize: Number.POSITIVE_INFINITY, - widthOnly: false + widthOnly: false, + fitParent: false }; // export default ScaleText; From d9f6c1c24d2dd7379fc78eb7a46be4e7862cda08 Mon Sep 17 00:00:00 2001 From: Vlad Date: Thu, 14 Feb 2019 09:09:27 +0200 Subject: [PATCH 3/5] Fix eslint errors --- src/index.js | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/src/index.js b/src/index.js index ed4b86f..4b6ab06 100755 --- a/src/index.js +++ b/src/index.js @@ -95,20 +95,21 @@ class ScaleText extends Component { // Create copy of wrapper for sizing this.ruler = this._wrapper.cloneNode(true); this.ruler.id = shortId(); - let width = '' + let nodeWidth = ''; if (this.props.fitParent) { - width = getStyle(this._wrapper.parentNode, 'width') - if (this.props.parentDiff != undefined) { - width = `calc(${width} - ${this.props.parentDiff})` + nodeWidth = getStyle(this._wrapper.parentNode, 'width'); + if (this.props.parentDiff !== undefined) { + nodeWidth = `calc(${nodeWidth} - ${this.props.parentDiff})`; } - } else { - width = getStyle(this._wrapper, 'width') + } + else { + nodeWidth = getStyle(this._wrapper, 'width'); } css(this.ruler, { position: 'absolute', top: '0px', left: 'calc(100vw * 2)', - width: width, + width: nodeWidth, height: getStyle(this._wrapper, 'height') }); document.body.appendChild(this.ruler); @@ -133,14 +134,14 @@ class ScaleText extends Component { React.Children.only(children) : ({children}); - let width = '100%' - if (this.props.fitParent && fontSize && fontSize.toFixed(0) == maxFontSize) { - width = 'fit-content' + let nodeWidth = '100%'; + if (this.props.fitParent && fontSize && fontSize.toFixed(0) === maxFontSize) { + nodeWidth = 'fit-content'; } const style = { fontSize: fontSize ? `${fontSize.toFixed(2)}px` : 'inherit', - width: width, + width: nodeWidth, height: '100%', ...overflowStyle // overflow: 'hidden' @@ -171,14 +172,16 @@ ScaleText.propTypes = { minFontSize: PropTypes.number.isRequired, maxFontSize: PropTypes.number.isRequired, widthOnly: PropTypes.bool, - fitParent: PropTypes.bool + fitParent: PropTypes.bool, + parentDiff: PropTypes.string }; ScaleText.defaultProps = { minFontSize: Number.NEGATIVE_INFINITY, maxFontSize: Number.POSITIVE_INFINITY, widthOnly: false, - fitParent: false + fitParent: false, + parentDiff: undefined }; // export default ScaleText; From 4ef391f58469016decdc809579102463c280fcc0 Mon Sep 17 00:00:00 2001 From: Vlad Date: Thu, 14 Feb 2019 09:26:40 +0200 Subject: [PATCH 4/5] Bump build and update README --- README.md | 2 ++ docs/react-scale-text.js | 32 +++++++++++++++++++++++++++----- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 0974bbc..b0a7bad 100755 --- a/README.md +++ b/README.md @@ -69,3 +69,5 @@ There are two optional props that can be passed. * **minFontSize** - the minimum font size to scale down to (_floor_) - default `Number.NEGATIVE_INFINITY` * **maxFontSize** - the maximum font size to scale up to (_ceiling_) - default `Number.POSITIVE_INFINITY` * **widthOnly** - will scale the element based on the width of it's container only, not the height - default `false` +* **fitParent** - will calculcate width based on the parent div width and use fit-content when font don't scaled - default `false` +* **parentDiff** - diff for width when used **fitParent** \ No newline at end of file diff --git a/docs/react-scale-text.js b/docs/react-scale-text.js index 7175995..ce056e6 100644 --- a/docs/react-scale-text.js +++ b/docs/react-scale-text.js @@ -1029,11 +1029,23 @@ function (_Component) { // Create copy of wrapper for sizing this.ruler = this._wrapper.cloneNode(true); this.ruler.id = (0, _shortid.generate)(); + var nodeWidth = ''; + + if (this.props.fitParent) { + nodeWidth = (0, _domUtils.getStyle)(this._wrapper.parentNode, 'width'); + + if (this.props.parentDiff !== undefined) { + nodeWidth = "calc(".concat(nodeWidth, " - ").concat(this.props.parentDiff, ")"); + } + } else { + nodeWidth = (0, _domUtils.getStyle)(this._wrapper, 'width'); + } + (0, _domUtils.css)(this.ruler, { position: 'absolute', top: '0px', left: 'calc(100vw * 2)', - width: (0, _domUtils.getStyle)(this._wrapper, 'width'), + width: nodeWidth, height: (0, _domUtils.getStyle)(this._wrapper, 'height') }); document.body.appendChild(this.ruler); @@ -1055,7 +1067,8 @@ function (_Component) { var fontSize = this.state.size; var _props2 = this.props, children = _props2.children, - widthOnly = _props2.widthOnly; + widthOnly = _props2.widthOnly, + maxFontSize = _props2.maxFontSize; var overflowStyle = widthOnly ? { overflowY: 'visible', overflowX: 'hidden', @@ -1064,10 +1077,15 @@ function (_Component) { overflow: 'hidden' }; var child = _react.default.isValidElement(children) ? _react.default.Children.only(children) : _react.default.createElement("span", null, children); + var nodeWidth = '100%'; + + if (this.props.fitParent && fontSize && fontSize.toFixed(0) === maxFontSize) { + nodeWidth = 'fit-content'; + } var style = _extends({ fontSize: fontSize ? "".concat(fontSize.toFixed(2), "px") : 'inherit', - width: '100%', + width: nodeWidth, height: '100%' }, overflowStyle); @@ -1091,12 +1109,16 @@ ScaleText.propTypes = { children: _propTypes.default.node.isRequired, minFontSize: _propTypes.default.number.isRequired, maxFontSize: _propTypes.default.number.isRequired, - widthOnly: _propTypes.default.boolean + widthOnly: _propTypes.default.bool, + fitParent: _propTypes.default.bool, + parentDiff: _propTypes.default.string }; ScaleText.defaultProps = { minFontSize: Number.NEGATIVE_INFINITY, maxFontSize: Number.POSITIVE_INFINITY, - widthOnly: false + widthOnly: false, + fitParent: false, + parentDiff: undefined }; // export default ScaleText; module.exports = ScaleText; From 79edf12ee72116ae5c4c8de46395c8c284b2ce65 Mon Sep 17 00:00:00 2001 From: Vlad Date: Thu, 14 Feb 2019 09:51:05 +0200 Subject: [PATCH 5/5] Fix if --- docs/react-scale-text.js | 5 +++-- src/index.js | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/react-scale-text.js b/docs/react-scale-text.js index ce056e6..f6b1c68 100644 --- a/docs/react-scale-text.js +++ b/docs/react-scale-text.js @@ -1068,7 +1068,8 @@ function (_Component) { var _props2 = this.props, children = _props2.children, widthOnly = _props2.widthOnly, - maxFontSize = _props2.maxFontSize; + maxFontSize = _props2.maxFontSize, + fitParent = _props2.fitParent; var overflowStyle = widthOnly ? { overflowY: 'visible', overflowX: 'hidden', @@ -1079,7 +1080,7 @@ function (_Component) { var child = _react.default.isValidElement(children) ? _react.default.Children.only(children) : _react.default.createElement("span", null, children); var nodeWidth = '100%'; - if (this.props.fitParent && fontSize && fontSize.toFixed(0) === maxFontSize) { + if (fitParent && fontSize !== null && maxFontSize - fontSize < Number.EPSILON) { nodeWidth = 'fit-content'; } diff --git a/src/index.js b/src/index.js index 4b6ab06..08a68c5 100755 --- a/src/index.js +++ b/src/index.js @@ -124,7 +124,7 @@ class ScaleText extends Component { render() { const { size: fontSize } = this.state; - const { children, widthOnly, maxFontSize } = this.props; + const { children, widthOnly, maxFontSize, fitParent } = this.props; const overflowStyle = widthOnly ? { overflowY: 'visible', overflowX: 'hidden', height: 'auto' } : @@ -135,7 +135,7 @@ class ScaleText extends Component { ({children}); let nodeWidth = '100%'; - if (this.props.fitParent && fontSize && fontSize.toFixed(0) === maxFontSize) { + if (fitParent && fontSize !== null && (maxFontSize - fontSize) < Number.EPSILON) { nodeWidth = 'fit-content'; }