react-dynamic-font - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

browser/react-dynamic-font.min.js

@@ -1,1 +0,1 @@
-var ReactDynamicFont=function(t){"use strict";function n(t){var n=window.getComputedStyle(t),e=t.offsetWidth,r=parseFloat(n.borderLeftWidth);return e-parseFloat(n.borderRightWidth)-r-parseFloat(n.paddingLeft)-parseFloat(n.paddingRight)}var e="default"in t?t.default:t,r=(function(){function t(t){this.value=t}function n(n){function e(o,i){try{var a=n[o](i),s=a.value;s instanceof t?Promise.resolve(s.value).then(function(t){e("next",t)},function(t){e("throw",t)}):r(a.done?"return":"normal",a.value)}catch(t){r("throw",t)}}function r(t,n){switch(t){case"return":o.resolve({value:n,done:!0});break;case"throw":o.reject(n);break;default:o.resolve({value:n,done:!1})}(o=o.next)?e(o.key,o.arg):i=null}var o,i;this._invoke=function(t,n){return new Promise(function(r,a){var s={key:t,arg:n,resolve:r,reject:a,next:null};i?i=i.next=s:(o=i=s,e(t,n))})},"function"!=typeof n.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(n.prototype[Symbol.asyncIterator]=function(){return this}),n.prototype.next=function(t){return this._invoke("next",t)},n.prototype.throw=function(t){return this._invoke("throw",t)},n.prototype.return=function(t){return this._invoke("return",t)}}(),function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}),o=function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(t,n):t.__proto__=n)},i=function(t,n){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?t:n},a={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"}},s=function(t){function s(e){r(this,s);var o=i(this,t.call(this,e));return o.getMaxWidth=function(){return n(o.node.parentNode)},o.getCurrentWidth=function(){return n(o.node)},o.fixWidth=function(){var t=o.getMaxWidth(),n=o.getCurrentWidth();n>t?o.setState({scale:t/n}):o.setState({scale:1})},o.state={scale:1},o}return o(s,t),s.prototype.componentDidMount=function(){this.props.content&&this.props.content.length&&this.fixWidth()},s.prototype.componentDidUpdate=function(t){t.content!==this.props.content&&this.props.content.length&&this.fixWidth()},s.prototype.render=function(){var t=this,n=void 0;if(1===this.state.scale)n=void 0;else{var r="scale("+this.state.scale+", "+this.state.scale+")";n={msTransform:r,WebkitTransform:r,OTransform:r,MozTransform:r,transform:r}}var o=Object.assign({},a.main,this.props.smooth?a.animate:void 0,n);return e.createElement("span",{style:o,ref:function(n){t.node=n}},this.props.content)},s}(t.Component);return s.defaultProps={content:"",smooth:!1},s}(React);
+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);

es/index.js

@@ -14,119 +14,2 @@ import React, { Component } from 'react';
 
-var asyncGenerator = function () {
-  function AwaitValue(value) {
-    this.value = value;
-  }
-
-  function AsyncGenerator(gen) {
-    var front, back;
-
-    function send(key, arg) {
-      return new Promise(function (resolve, reject) {
-        var request = {
-          key: key,
-          arg: arg,
-          resolve: resolve,
-          reject: reject,
-          next: null
-        };
-
-        if (back) {
-          back = back.next = request;
-        } else {
-          front = back = request;
-          resume(key, arg);
-        }
-      });
-    }
-
-    function resume(key, arg) {
-      try {
-        var result = gen[key](arg);
-        var value = result.value;
-
-        if (value instanceof AwaitValue) {
-          Promise.resolve(value.value).then(function (arg) {
-            resume("next", arg);
-          }, function (arg) {
-            resume("throw", arg);
-          });
-        } else {
-          settle(result.done ? "return" : "normal", result.value);
-        }
-      } catch (err) {
-        settle("throw", err);
-      }
-    }
-
-    function settle(type, value) {
-      switch (type) {
-        case "return":
-          front.resolve({
-            value: value,
-            done: true
-          });
-          break;
-
-        case "throw":
-          front.reject(value);
-          break;
-
-        default:
-          front.resolve({
-            value: value,
-            done: false
-          });
-          break;
-      }
-
-      front = front.next;
-
-      if (front) {
-        resume(front.key, front.arg);
-      } else {
-        back = null;
-      }
-    }
-
-    this._invoke = send;
-
-    if (typeof gen.return !== "function") {
-      this.return = undefined;
-    }
-  }
-
-  if (typeof Symbol === "function" && Symbol.asyncIterator) {
-    AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
-      return this;
-    };
-  }
-
-  AsyncGenerator.prototype.next = function (arg) {
-    return this._invoke("next", arg);
-  };
-
-  AsyncGenerator.prototype.throw = function (arg) {
-    return this._invoke("throw", arg);
-  };
-
-  AsyncGenerator.prototype.return = function (arg) {
-    return this._invoke("return", arg);
-  };
-
-  return {
-    wrap: function (fn) {
-      return function () {
-        return new AsyncGenerator(fn.apply(this, arguments));
-      };
-    },
-    await: function (value) {
-      return new AwaitValue(value);
-    }
-  };
-}();
-
-
-
-
-
 var classCallCheck = function (instance, Constructor) {
@@ -138,12 +21,2 @@ if (!(instance instanceof Constructor)) {
 
-
-
-
-
-
-
-
-
-
-
 var inherits = function (subClass, superClass) {
@@ -165,12 +38,2 @@ if (typeof superClass !== "function" && superClass !== null) {
 
-
-
-
-
-
-
-
-
-
-
 var possibleConstructorReturn = function (self, call) {
@@ -185,2 +48,3 @@ if (!self) {
 // eslint-disable-next-line import/no-unresolved, import/extensions
+
 var styles = {
@@ -205,22 +69,27 @@ main: {
 
-var ReactDynamicFont$1 = function (_Component) {
+var ReactDynamicFont = function (_Component) {
   inherits(ReactDynamicFont, _Component);
 
-  function ReactDynamicFont(props) {
+  function ReactDynamicFont() {
+    var _temp, _this, _ret;
+
     classCallCheck(this, ReactDynamicFont);
 
-    var _this = possibleConstructorReturn(this, _Component.call(this, props));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this.getMaxWidth = function () {
+    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 () {
+    }, _this.getCurrentWidth = function () {
       return getNodeWidth(_this.node);
-    };
-
-    _this.fixWidth = function () {
+    }, _this.retryTimmer = null, _this.timesOfRetryGetWidth = 0, _this.fixWidth = function () {
       var maxWidth = _this.getMaxWidth();
       var currentWidth = _this.getCurrentWidth();
-      if (currentWidth > maxWidth) {
+
+      if (currentWidth <= 0) {
+        _this.setRetryTimmer();
+      } else if (currentWidth > maxWidth) {
         _this.setState({ scale: maxWidth / currentWidth });
@@ -230,8 +99,3 @@ } else {
       }
-    };
-
-    _this.state = {
-      scale: 1
-    };
-    return _this;
+    }, _temp), possibleConstructorReturn(_this, _ret);
   }
@@ -251,2 +115,12 @@
 
+  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() {
@@ -284,11 +158,13 @@ var _this2 = this;
 
-ReactDynamicFont$1.propTypes = {
+ReactDynamicFont.propTypes = {
   content: PropTypes.string,
   smooth: PropTypes.bool
 };
-ReactDynamicFont$1.defaultProps = {
+ReactDynamicFont.defaultProps = {
   content: '',
   smooth: false
 };
+ReactDynamicFont.retryDelayMillisecond = 300;
+ReactDynamicFont.maxRetryTimes = 5;
 
-export default ReactDynamicFont$1;
+export default ReactDynamicFont;

lib/index.js

@@ -19,119 +19,2 @@ 'use strict';
 
-var asyncGenerator = function () {
-  function AwaitValue(value) {
-    this.value = value;
-  }
-
-  function AsyncGenerator(gen) {
-    var front, back;
-
-    function send(key, arg) {
-      return new Promise(function (resolve, reject) {
-        var request = {
-          key: key,
-          arg: arg,
-          resolve: resolve,
-          reject: reject,
-          next: null
-        };
-
-        if (back) {
-          back = back.next = request;
-        } else {
-          front = back = request;
-          resume(key, arg);
-        }
-      });
-    }
-
-    function resume(key, arg) {
-      try {
-        var result = gen[key](arg);
-        var value = result.value;
-
-        if (value instanceof AwaitValue) {
-          Promise.resolve(value.value).then(function (arg) {
-            resume("next", arg);
-          }, function (arg) {
-            resume("throw", arg);
-          });
-        } else {
-          settle(result.done ? "return" : "normal", result.value);
-        }
-      } catch (err) {
-        settle("throw", err);
-      }
-    }
-
-    function settle(type, value) {
-      switch (type) {
-        case "return":
-          front.resolve({
-            value: value,
-            done: true
-          });
-          break;
-
-        case "throw":
-          front.reject(value);
-          break;
-
-        default:
-          front.resolve({
-            value: value,
-            done: false
-          });
-          break;
-      }
-
-      front = front.next;
-
-      if (front) {
-        resume(front.key, front.arg);
-      } else {
-        back = null;
-      }
-    }
-
-    this._invoke = send;
-
-    if (typeof gen.return !== "function") {
-      this.return = undefined;
-    }
-  }
-
-  if (typeof Symbol === "function" && Symbol.asyncIterator) {
-    AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
-      return this;
-    };
-  }
-
-  AsyncGenerator.prototype.next = function (arg) {
-    return this._invoke("next", arg);
-  };
-
-  AsyncGenerator.prototype.throw = function (arg) {
-    return this._invoke("throw", arg);
-  };
-
-  AsyncGenerator.prototype.return = function (arg) {
-    return this._invoke("return", arg);
-  };
-
-  return {
-    wrap: function (fn) {
-      return function () {
-        return new AsyncGenerator(fn.apply(this, arguments));
-      };
-    },
-    await: function (value) {
-      return new AwaitValue(value);
-    }
-  };
-}();
-
-
-
-
-
 var classCallCheck = function (instance, Constructor) {
@@ -143,12 +26,2 @@ if (!(instance instanceof Constructor)) {
 
-
-
-
-
-
-
-
-
-
-
 var inherits = function (subClass, superClass) {
@@ -170,12 +43,2 @@ if (typeof superClass !== "function" && superClass !== null) {
 
-
-
-
-
-
-
-
-
-
-
 var possibleConstructorReturn = function (self, call) {
@@ -190,2 +53,3 @@ if (!self) {
 // eslint-disable-next-line import/no-unresolved, import/extensions
+
 var styles = {
@@ -210,22 +74,27 @@ main: {
 
-var ReactDynamicFont$1 = function (_Component) {
+var ReactDynamicFont = function (_Component) {
   inherits(ReactDynamicFont, _Component);
 
-  function ReactDynamicFont(props) {
+  function ReactDynamicFont() {
+    var _temp, _this, _ret;
+
     classCallCheck(this, ReactDynamicFont);
 
-    var _this = possibleConstructorReturn(this, _Component.call(this, props));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this.getMaxWidth = function () {
+    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 () {
+    }, _this.getCurrentWidth = function () {
       return getNodeWidth(_this.node);
-    };
-
-    _this.fixWidth = function () {
+    }, _this.retryTimmer = null, _this.timesOfRetryGetWidth = 0, _this.fixWidth = function () {
       var maxWidth = _this.getMaxWidth();
       var currentWidth = _this.getCurrentWidth();
-      if (currentWidth > maxWidth) {
+
+      if (currentWidth <= 0) {
+        _this.setRetryTimmer();
+      } else if (currentWidth > maxWidth) {
         _this.setState({ scale: maxWidth / currentWidth });
@@ -235,8 +104,3 @@ } else {
       }
-    };
-
-    _this.state = {
-      scale: 1
-    };
-    return _this;
+    }, _temp), possibleConstructorReturn(_this, _ret);
   }
@@ -256,2 +120,12 @@
 
+  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() {
@@ -289,11 +163,13 @@ var _this2 = this;
 
-ReactDynamicFont$1.propTypes = {
+ReactDynamicFont.propTypes = {
   content: PropTypes.string,
   smooth: PropTypes.bool
 };
-ReactDynamicFont$1.defaultProps = {
+ReactDynamicFont.defaultProps = {
   content: '',
   smooth: false
 };
+ReactDynamicFont.retryDelayMillisecond = 300;
+ReactDynamicFont.maxRetryTimes = 5;
 
-module.exports = ReactDynamicFont$1;
+module.exports = ReactDynamicFont;

package.json

 {
   "name": "react-dynamic-font",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "make your text does not wrap and dynamically adjust the font size",
@@ -73,3 +73,3 @@ "main": "lib/index.js",
     "rimraf": "^2.6.2",
-    "rollup": "^0.50.0",
+    "rollup": "^0.60.1",
     "rollup-plugin-babel": "^3.0.2",
@@ -76,0 +76,0 @@ "rollup-plugin-uglify": "^2.0.1",

README.md

@@ -8,2 +8,4 @@ # react-dynamic-font
 
+### [A simple live demo](https://codepen.io/hronro/full/wrVvKK/)
+
 ## Installation
@@ -21,2 +23,4 @@
 
+*For React v0.14 and below, try `yarn add react-dynamic-font@^0.0.6`*
+
 ## Usage
@@ -23,0 +27,0 @@ `ReactDynamicFont` use the width of its parent element as the fixed width, and remember to add the css style `overflow: hidden` to its parent element.

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

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

Number of lines in readme file

55

increased by7.84%

Worsened metrics

Total package byte prevSize

17750

decreased by-16.56%

Lines of code

294

decreased by-36.23%

No dependency changes