react-dynamic-font - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

browser/react-dynamic-font.min.js

@@ -1,1 +0,20 @@
-var ReactDynamicFont=function(t){"use strict";function e(t){var e=window.getComputedStyle(t),r=t.offsetWidth,n=parseFloat(e.borderLeftWidth);return r-parseFloat(e.borderRightWidth)-n-parseFloat(e.paddingLeft)-parseFloat(e.paddingRight)}var r="default"in t?t.default:t,n=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},i=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},o=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},s={main:{display:"inline-block",whiteSpace:"nowrap",msTransformOrigin:"0 50%",WebkitTransformOrigin:"0 50%",OTransformOrigin:"0 50%",MozTransformOrigin:"0 50%",transformOrigin:"0 50%"},animate:{msTransition:"-ms-transform 400ms",WebkitTransition:"-webkit-transform 400ms",OTransition:"-o-transform 400ms",MozTransition:"-moz-transform 400ms",transition:"transform 400ms"}},a=function(t){function a(){var r,i,s;n(this,a);for(var c=arguments.length,f=Array(c),m=0;m<c;m++)f[m]=arguments[m];return r=i=o(this,t.call.apply(t,[this].concat(f))),i.state={scale:1},i.getMaxWidth=function(){return e(i.node.parentNode)},i.getCurrentWidth=function(){return e(i.node)},i.retryTimmer=null,i.timesOfRetryGetWidth=0,i.fixWidth=function(){var t=i.getMaxWidth(),e=i.getCurrentWidth();e<=0?i.setRetryTimmer():e>t?i.setState({scale:t/e}):i.setState({scale:1})},s=r,o(i,s)}return i(a,t),a.prototype.componentDidMount=function(){this.props.content&&this.props.content.length&&this.fixWidth()},a.prototype.componentDidUpdate=function(t){t.content!==this.props.content&&this.props.content.length&&this.fixWidth()},a.prototype.setRetryTimmer=function(){null!=this.retryTimmer&&(clearTimeout(this.retryTimmer),this.retryTimmer=null),this.timesOfRetryGetWidth<=a.maxRetryTimes&&(this.retryTimmer=setTimeout(this.fixWidth,a.retryDelayMillisecond))},a.prototype.render=function(){var t=this,e=void 0;if(1===this.state.scale)e=void 0;else{var n="scale("+this.state.scale+", "+this.state.scale+")";e={msTransform:n,WebkitTransform:n,OTransform:n,MozTransform:n,transform:n}}var i=Object.assign({},s.main,this.props.smooth?s.animate:void 0,e);return r.createElement("span",{style:i,ref:function(e){t.node=e}},this.props.content)},a}(t.Component);return a.defaultProps={content:"",smooth:!1},a.retryDelayMillisecond=300,a.maxRetryTimes=5,a}(React);
+/*
+ *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+*****************************************************************************/
+'use strict';var ReactDynamicFont=function(e){function l(c,b){function a(){this.constructor=c}f(c,b);c.prototype=null===b?Object.create(b):(a.prototype=b.prototype,new a)}function k(c){var b=window.getComputedStyle(c);c=c.offsetWidth;var a=parseFloat(b.borderLeftWidth),g=parseFloat(b.borderRightWidth),d=parseFloat(b.paddingLeft);b=parseFloat(b.paddingRight);return c-g-a-d-b}var f=function(c,b){f=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(a,b){a.__proto__=b}||function(a,b){for(var c in b)b.hasOwnProperty(c)&&
+(a[c]=b[c])};return f(c,b)},h=function(){h=Object.assign||function(c){for(var b,a=1,g=arguments.length;a<g;a++){b=arguments[a];for(var d in b)Object.prototype.hasOwnProperty.call(b,d)&&(c[d]=b[d])}return c};return h.apply(this,arguments)},m={display:"inline-block",whiteSpace:"nowrap",msTransformOrigin:"0 50%",WebkitTransformOrigin:"0 50%",OTransformOrigin:"0 50%",MozTransformOrigin:"0 50%",transformOrigin:"0 50%"},n={WebkitTransition:"-webkit-transform 400ms",OTransition:"-o-transform 400ms",MozTransition:"-moz-transform 400ms",
+transition:"transform 400ms"};return function(c){function b(){var a=null!==c&&c.apply(this,arguments)||this;a.state={scale:1};a.spanRef=e.createRef();a.getMaxWidth=function(){return k(a.spanRef.current.parentElement)};a.getCurrentWidth=function(){return k(a.spanRef.current)};a.retryTimmer=null;a.timesOfRetryGetWidth=0;a.fixWidth=function(){var b=a.getMaxWidth(),c=a.getCurrentWidth();0>=c?a.setRetryTimmer():(a.timesOfRetryGetWidth=0,c>b?a.setState({scale:b/c}):a.setState({scale:1}))};return a}l(b,
+c);b.prototype.componentDidMount=function(){this.props.content&&this.props.content.length&&this.fixWidth()};b.prototype.componentDidUpdate=function(a){a.content!==this.props.content&&(this.props.content||"").length&&this.fixWidth()};b.prototype.setRetryTimmer=function(){null!=this.retryTimmer&&(clearTimeout(this.retryTimmer),this.retryTimmer=null);this.timesOfRetryGetWidth<=b.maxRetryTimes&&(this.retryTimmer=window.setTimeout(this.fixWidth,b.retryDelayMillisecond))};b.prototype.render=function(){if(1===
+this.state.scale)var a=void 0;else a="scale("+this.state.scale+", "+this.state.scale+")",a={msTransform:a,WebkitTransform:a,OTransform:a,MozTransform:a,transform:a};a=h({},m,null!=this.props.smooth&&this.props.smooth?n:void 0,a);return e.createElement("span",{style:a,ref:this.spanRef},this.props.content)};b.retryDelayMillisecond=300;b.maxRetryTimes=5;return b}(e.Component)}(React);

es/index.js

@@ -1,162 +0,143 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { createRef, createElement, Component } from 'react';
 
-function getNodeWidth(node) {
-  var nodeStyles = window.getComputedStyle(node);
-  var width = node.offsetWidth;
-  var borderLeftWidth = parseFloat(nodeStyles.borderLeftWidth);
-  var borderRightWidth = parseFloat(nodeStyles.borderRightWidth);
-  var paddingLeft = parseFloat(nodeStyles.paddingLeft);
-  var paddingRight = parseFloat(nodeStyles.paddingRight);
-  return width - borderRightWidth - borderLeftWidth - paddingLeft - paddingRight;
-}
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
 
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
 };
 
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
 
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 
-// eslint-disable-next-line import/no-unresolved, import/extensions
+function getNodeWidth(node) {
+    var nodeStyles = window.getComputedStyle(node);
+    var width = node.offsetWidth;
+    var borderLeftWidth = parseFloat(nodeStyles.borderLeftWidth);
+    var borderRightWidth = parseFloat(nodeStyles.borderRightWidth);
+    var paddingLeft = parseFloat(nodeStyles.paddingLeft);
+    var paddingRight = parseFloat(nodeStyles.paddingRight);
+    return width - borderRightWidth - borderLeftWidth - paddingLeft - paddingRight;
+}
 
 var styles = {
-  main: {
-    display: 'inline-block',
-    whiteSpace: 'nowrap',
-    msTransformOrigin: '0 50%',
-    WebkitTransformOrigin: '0 50%',
-    OTransformOrigin: '0 50%',
-    MozTransformOrigin: '0 50%',
-    transformOrigin: '0 50%'
-  },
-  animate: {
-    msTransition: '-ms-transform 400ms',
-    WebkitTransition: '-webkit-transform 400ms',
-    OTransition: '-o-transform 400ms',
-    MozTransition: '-moz-transform 400ms',
-    transition: 'transform 400ms'
-  }
+    main: {
+        display: 'inline-block',
+        whiteSpace: 'nowrap',
+        msTransformOrigin: '0 50%',
+        WebkitTransformOrigin: '0 50%',
+        OTransformOrigin: '0 50%',
+        MozTransformOrigin: '0 50%',
+        transformOrigin: '0 50%',
+    },
+    animate: {
+        // msTransition: '-ms-transform 400ms',
+        WebkitTransition: '-webkit-transform 400ms',
+        OTransition: '-o-transform 400ms',
+        MozTransition: '-moz-transform 400ms',
+        transition: 'transform 400ms',
+    },
 };
-
-var ReactDynamicFont = function (_Component) {
-  inherits(ReactDynamicFont, _Component);
-
-  function ReactDynamicFont() {
-    var _temp, _this, _ret;
-
-    classCallCheck(this, ReactDynamicFont);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var ReactDynamicFont = /** @class */ (function (_super) {
+    __extends(ReactDynamicFont, _super);
+    function ReactDynamicFont() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            scale: 1,
+        };
+        _this.spanRef = createRef();
+        _this.getMaxWidth = function () { return getNodeWidth(_this.spanRef.current.parentElement); };
+        _this.getCurrentWidth = function () { return getNodeWidth(_this.spanRef.current); };
+        _this.retryTimmer = null;
+        _this.timesOfRetryGetWidth = 0;
+        _this.fixWidth = function () {
+            var maxWidth = _this.getMaxWidth();
+            var currentWidth = _this.getCurrentWidth();
+            if (currentWidth <= 0) {
+                _this.setRetryTimmer();
+            }
+            else {
+                _this.timesOfRetryGetWidth = 0;
+                if (currentWidth > maxWidth) {
+                    _this.setState({ scale: maxWidth / currentWidth });
+                }
+                else {
+                    _this.setState({ scale: 1 });
+                }
+            }
+        };
+        return _this;
     }
-
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
-      scale: 1
-    }, _this.getMaxWidth = function () {
-      return getNodeWidth(_this.node.parentNode);
-    }, _this.getCurrentWidth = function () {
-      return getNodeWidth(_this.node);
-    }, _this.retryTimmer = null, _this.timesOfRetryGetWidth = 0, _this.fixWidth = function () {
-      var maxWidth = _this.getMaxWidth();
-      var currentWidth = _this.getCurrentWidth();
-
-      if (currentWidth <= 0) {
-        _this.setRetryTimmer();
-      } else if (currentWidth > maxWidth) {
-        _this.setState({ scale: maxWidth / currentWidth });
-      } else {
-        _this.setState({ scale: 1 });
-      }
-    }, _temp), possibleConstructorReturn(_this, _ret);
-  }
-
-  ReactDynamicFont.prototype.componentDidMount = function componentDidMount() {
-    if (this.props.content && this.props.content.length) {
-      this.fixWidth();
-    }
-  };
-
-  ReactDynamicFont.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (prevProps.content !== this.props.content && this.props.content.length) {
-      this.fixWidth();
-    }
-  };
-
-  ReactDynamicFont.prototype.setRetryTimmer = function setRetryTimmer() {
-    if (this.retryTimmer != null) {
-      clearTimeout(this.retryTimmer);
-      this.retryTimmer = null;
-    }
-    if (this.timesOfRetryGetWidth <= ReactDynamicFont.maxRetryTimes) {
-      this.retryTimmer = setTimeout(this.fixWidth, ReactDynamicFont.retryDelayMillisecond);
-    }
-  };
-
-  ReactDynamicFont.prototype.render = function render() {
-    var _this2 = this;
-
-    var scaleStyle = void 0;
-    if (this.state.scale === 1) {
-      scaleStyle = undefined;
-    } else {
-      var transformValue = 'scale(' + this.state.scale + ', ' + this.state.scale + ')';
-      scaleStyle = {
-        msTransform: transformValue,
-        WebkitTransform: transformValue,
-        OTransform: transformValue,
-        MozTransform: transformValue,
-        transform: transformValue
-      };
-    }
-    var finalStyle = Object.assign({}, styles.main, this.props.smooth ? styles.animate : undefined, scaleStyle);
-    return React.createElement(
-      'span',
-      {
-        style: finalStyle,
-        ref: function ref(span) {
-          _this2.node = span;
+    ReactDynamicFont.prototype.componentDidMount = function () {
+        if (this.props.content && this.props.content.length) {
+            this.fixWidth();
         }
-      },
-      this.props.content
-    );
-  };
+    };
+    ReactDynamicFont.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.content !== this.props.content && (this.props.content || '').length) {
+            this.fixWidth();
+        }
+    };
+    ReactDynamicFont.prototype.setRetryTimmer = function () {
+        if (this.retryTimmer != null) {
+            clearTimeout(this.retryTimmer);
+            this.retryTimmer = null;
+        }
+        if (this.timesOfRetryGetWidth <= ReactDynamicFont.maxRetryTimes) {
+            this.retryTimmer = window.setTimeout(this.fixWidth, ReactDynamicFont.retryDelayMillisecond);
+        }
+    };
+    ReactDynamicFont.prototype.render = function () {
+        var scaleStyle;
+        if (this.state.scale === 1) {
+            scaleStyle = undefined;
+        }
+        else {
+            var transformValue = "scale(" + this.state.scale + ", " + this.state.scale + ")";
+            scaleStyle = {
+                msTransform: transformValue,
+                WebkitTransform: transformValue,
+                OTransform: transformValue,
+                MozTransform: transformValue,
+                transform: transformValue,
+            };
+        }
+        var finalStyle = __assign({}, styles.main, ((this.props.smooth != null ? this.props.smooth : false) ? styles.animate : undefined), scaleStyle);
+        return (createElement("span", { style: finalStyle, ref: this.spanRef }, this.props.content));
+    };
+    ReactDynamicFont.retryDelayMillisecond = 300;
+    ReactDynamicFont.maxRetryTimes = 5;
+    return ReactDynamicFont;
+}(Component));
 
-  return ReactDynamicFont;
-}(Component);
-
-ReactDynamicFont.propTypes = {
-  content: PropTypes.string,
-  smooth: PropTypes.bool
-};
-ReactDynamicFont.defaultProps = {
-  content: '',
-  smooth: false
-};
-ReactDynamicFont.retryDelayMillisecond = 300;
-ReactDynamicFont.maxRetryTimes = 5;
-
 export default ReactDynamicFont;

lib/index.js

 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
 
-function getNodeWidth(node) {
-  var nodeStyles = window.getComputedStyle(node);
-  var width = node.offsetWidth;
-  var borderLeftWidth = parseFloat(nodeStyles.borderLeftWidth);
-  var borderRightWidth = parseFloat(nodeStyles.borderRightWidth);
-  var paddingLeft = parseFloat(nodeStyles.paddingLeft);
-  var paddingRight = parseFloat(nodeStyles.paddingRight);
-  return width - borderRightWidth - borderLeftWidth - paddingLeft - paddingRight;
-}
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
 
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
 };
 
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
 
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 
-// eslint-disable-next-line import/no-unresolved, import/extensions
+function getNodeWidth(node) {
+    var nodeStyles = window.getComputedStyle(node);
+    var width = node.offsetWidth;
+    var borderLeftWidth = parseFloat(nodeStyles.borderLeftWidth);
+    var borderRightWidth = parseFloat(nodeStyles.borderRightWidth);
+    var paddingLeft = parseFloat(nodeStyles.paddingLeft);
+    var paddingRight = parseFloat(nodeStyles.paddingRight);
+    return width - borderRightWidth - borderLeftWidth - paddingLeft - paddingRight;
+}
 
 var styles = {
-  main: {
-    display: 'inline-block',
-    whiteSpace: 'nowrap',
-    msTransformOrigin: '0 50%',
-    WebkitTransformOrigin: '0 50%',
-    OTransformOrigin: '0 50%',
-    MozTransformOrigin: '0 50%',
-    transformOrigin: '0 50%'
-  },
-  animate: {
-    msTransition: '-ms-transform 400ms',
-    WebkitTransition: '-webkit-transform 400ms',
-    OTransition: '-o-transform 400ms',
-    MozTransition: '-moz-transform 400ms',
-    transition: 'transform 400ms'
-  }
+    main: {
+        display: 'inline-block',
+        whiteSpace: 'nowrap',
+        msTransformOrigin: '0 50%',
+        WebkitTransformOrigin: '0 50%',
+        OTransformOrigin: '0 50%',
+        MozTransformOrigin: '0 50%',
+        transformOrigin: '0 50%',
+    },
+    animate: {
+        // msTransition: '-ms-transform 400ms',
+        WebkitTransition: '-webkit-transform 400ms',
+        OTransition: '-o-transform 400ms',
+        MozTransition: '-moz-transform 400ms',
+        transition: 'transform 400ms',
+    },
 };
-
-var ReactDynamicFont = function (_Component) {
-  inherits(ReactDynamicFont, _Component);
-
-  function ReactDynamicFont() {
-    var _temp, _this, _ret;
-
-    classCallCheck(this, ReactDynamicFont);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var ReactDynamicFont = /** @class */ (function (_super) {
+    __extends(ReactDynamicFont, _super);
+    function ReactDynamicFont() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            scale: 1,
+        };
+        _this.spanRef = React.createRef();
+        _this.getMaxWidth = function () { return getNodeWidth(_this.spanRef.current.parentElement); };
+        _this.getCurrentWidth = function () { return getNodeWidth(_this.spanRef.current); };
+        _this.retryTimmer = null;
+        _this.timesOfRetryGetWidth = 0;
+        _this.fixWidth = function () {
+            var maxWidth = _this.getMaxWidth();
+            var currentWidth = _this.getCurrentWidth();
+            if (currentWidth <= 0) {
+                _this.setRetryTimmer();
+            }
+            else {
+                _this.timesOfRetryGetWidth = 0;
+                if (currentWidth > maxWidth) {
+                    _this.setState({ scale: maxWidth / currentWidth });
+                }
+                else {
+                    _this.setState({ scale: 1 });
+                }
+            }
+        };
+        return _this;
     }
-
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
-      scale: 1
-    }, _this.getMaxWidth = function () {
-      return getNodeWidth(_this.node.parentNode);
-    }, _this.getCurrentWidth = function () {
-      return getNodeWidth(_this.node);
-    }, _this.retryTimmer = null, _this.timesOfRetryGetWidth = 0, _this.fixWidth = function () {
-      var maxWidth = _this.getMaxWidth();
-      var currentWidth = _this.getCurrentWidth();
-
-      if (currentWidth <= 0) {
-        _this.setRetryTimmer();
-      } else if (currentWidth > maxWidth) {
-        _this.setState({ scale: maxWidth / currentWidth });
-      } else {
-        _this.setState({ scale: 1 });
-      }
-    }, _temp), possibleConstructorReturn(_this, _ret);
-  }
-
-  ReactDynamicFont.prototype.componentDidMount = function componentDidMount() {
-    if (this.props.content && this.props.content.length) {
-      this.fixWidth();
-    }
-  };
-
-  ReactDynamicFont.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (prevProps.content !== this.props.content && this.props.content.length) {
-      this.fixWidth();
-    }
-  };
-
-  ReactDynamicFont.prototype.setRetryTimmer = function setRetryTimmer() {
-    if (this.retryTimmer != null) {
-      clearTimeout(this.retryTimmer);
-      this.retryTimmer = null;
-    }
-    if (this.timesOfRetryGetWidth <= ReactDynamicFont.maxRetryTimes) {
-      this.retryTimmer = setTimeout(this.fixWidth, ReactDynamicFont.retryDelayMillisecond);
-    }
-  };
-
-  ReactDynamicFont.prototype.render = function render() {
-    var _this2 = this;
-
-    var scaleStyle = void 0;
-    if (this.state.scale === 1) {
-      scaleStyle = undefined;
-    } else {
-      var transformValue = 'scale(' + this.state.scale + ', ' + this.state.scale + ')';
-      scaleStyle = {
-        msTransform: transformValue,
-        WebkitTransform: transformValue,
-        OTransform: transformValue,
-        MozTransform: transformValue,
-        transform: transformValue
-      };
-    }
-    var finalStyle = Object.assign({}, styles.main, this.props.smooth ? styles.animate : undefined, scaleStyle);
-    return React__default.createElement(
-      'span',
-      {
-        style: finalStyle,
-        ref: function ref(span) {
-          _this2.node = span;
+    ReactDynamicFont.prototype.componentDidMount = function () {
+        if (this.props.content && this.props.content.length) {
+            this.fixWidth();
         }
-      },
-      this.props.content
-    );
-  };
+    };
+    ReactDynamicFont.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.content !== this.props.content && (this.props.content || '').length) {
+            this.fixWidth();
+        }
+    };
+    ReactDynamicFont.prototype.setRetryTimmer = function () {
+        if (this.retryTimmer != null) {
+            clearTimeout(this.retryTimmer);
+            this.retryTimmer = null;
+        }
+        if (this.timesOfRetryGetWidth <= ReactDynamicFont.maxRetryTimes) {
+            this.retryTimmer = window.setTimeout(this.fixWidth, ReactDynamicFont.retryDelayMillisecond);
+        }
+    };
+    ReactDynamicFont.prototype.render = function () {
+        var scaleStyle;
+        if (this.state.scale === 1) {
+            scaleStyle = undefined;
+        }
+        else {
+            var transformValue = "scale(" + this.state.scale + ", " + this.state.scale + ")";
+            scaleStyle = {
+                msTransform: transformValue,
+                WebkitTransform: transformValue,
+                OTransform: transformValue,
+                MozTransform: transformValue,
+                transform: transformValue,
+            };
+        }
+        var finalStyle = __assign({}, styles.main, ((this.props.smooth != null ? this.props.smooth : false) ? styles.animate : undefined), scaleStyle);
+        return (React.createElement("span", { style: finalStyle, ref: this.spanRef }, this.props.content));
+    };
+    ReactDynamicFont.retryDelayMillisecond = 300;
+    ReactDynamicFont.maxRetryTimes = 5;
+    return ReactDynamicFont;
+}(React.Component));
 
-  return ReactDynamicFont;
-}(React.Component);
-
-ReactDynamicFont.propTypes = {
-  content: PropTypes.string,
-  smooth: PropTypes.bool
-};
-ReactDynamicFont.defaultProps = {
-  content: '',
-  smooth: false
-};
-ReactDynamicFont.retryDelayMillisecond = 300;
-ReactDynamicFont.maxRetryTimes = 5;
-
 module.exports = ReactDynamicFont;

package.json

 {
   "name": "react-dynamic-font",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "make your text does not wrap and dynamically adjust the font size",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "nonmodule": "browser/react-dynamic-font.min.js",
+  "unpkg": "browser/react-dynamic-font.min.js",
   "files": [
     "lib",
     "es",
-    "browser"
+    "browser",
+    "types",
+    "styles.css",
+    "README.md"
   ],
+  "types": "./types/index.d.ts",
   "scripts": {
-    "start": "node ./demo/server.js",
-    "lint": "eslint src demo",
-    "clean": "rimraf lib es browser",
-    "build:rollup": "rollup -c",
-    "build": "run-s lint clean build:rollup",
-    "precommit": "run-s lint",
-    "prepush": "run-s lint",
+    "start": "run-s clean initDevBuildBeforeWatch dev",
+    "dev": "run-p watch example",
+    "build": "run-s clean build:rollup",
+    "build:rollup": "cross-env NODE_ENV=production rollup -c rollup.config.js",
+    "example": "parcel examples/public/index.html",
+    "initDevBuildBeforeWatch": "rollup -c rollup.config.js",
+    "watch": "rollup -w -c rollup.config.js",
+    "clean": "rimraf examples/src/lib es lib browser styles.css",
+    "test": "jest --watch",
+    "test:all": "jest",
+    "lint": "run-p lint:ts",
+    "lint:ts": "eslint --fix \"**/*.@(js|jsx|ts|tsx)\"",
+    "format": "prettier --write \"**/*.@(css|js|jsx|ts|tsx|json|md)\"",
+    "precommit": "lint-staged",
     "prepublishOnly": "run-s build"
   },
+  "lint-staged": {
+    "**/*.@(js|jsx|ts|tsx)": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ],
+    "**/*.@(css|json|md)": [
+      "prettier --write",
+      "git add"
+    ]
+  },
   "repository": {
@@ -41,41 +63,52 @@ "type": "git",
   "peerDependencies": {
-    "prop-types": "^15.5.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.1",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-external-helpers": "^6.22.0",
+    "@ampproject/rollup-plugin-closure-compiler": "^0.4.3",
+    "@types/enzyme": "^3.1.11",
+    "@types/enzyme-adapter-react-16": "^1.0.2",
+    "@types/jest": "^23.1.4",
+    "@types/react": "^16.4.6",
+    "@types/react-dom": "^16.0.6",
+    "autoprefixer": "^8.6.4",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.10",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-latest": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "classnames": "^2.2.5",
-    "cross-env": "^5.1.0",
-    "css-loader": "^0.28.7",
-    "eslint": "^4.9.0",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.4.0",
-    "extract-text-webpack-plugin": "^3.0.1",
+    "camelcase": "^5.0.0",
+    "cross-env": "^5.2.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^5.0.1",
+    "eslint-config-airbnb-base": "^13.0.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-jsx-a11y": "^6.1.0",
+    "eslint-plugin-promise": "^3.8.0",
+    "eslint-plugin-react": "^7.10.0",
+    "eslint-plugin-typescript": "^0.12.0",
     "husky": "^0.14.3",
-    "npm-run-all": "^4.1.1",
-    "prop-types": "^15.6.0",
-    "react": "^16.0.0",
-    "react-css-modules": "^4.7.1",
-    "react-dom": "^16.0.0",
-    "react-hot-loader": "^3.1.1",
+    "jest": "^23.2.0",
+    "lint-staged": "^7.2.0",
+    "normalize.css": "^8.0.0",
+    "npm-run-all": "^4.1.3",
+    "parcel-bundler": "^1.9.4",
+    "prettier": "^1.13.7",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
     "rimraf": "^2.6.2",
-    "rollup": "^0.60.1",
-    "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-uglify": "^2.0.1",
-    "style-loader": "^0.19.0",
-    "webpack": "^3.7.1",
-    "webpack-dev-server": "^2.9.2"
-  }
+    "rollup": "^0.62.0",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-postcss": "^1.6.2",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-typescript2": "^0.15.1",
+    "stylus": "^0.54.5",
+    "ts-jest": "^23.0.0",
+    "tslib": "^1.9.3",
+    "typescript": "^2.9.2",
+    "typescript-eslint-parser": "^16.0.1"
+  },
+  "browserslist": [
+    "> 1%",
+    "ie 10"
+  ]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21628

increased by21.85%

Dependency count

2

decreased by-33.33%

Number of package files

9

increased by50%

Lines of code

322

increased by9.52%

Worsened metrics

Dev dependency count

41

increased by24.24%

Number of low license alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes