Bump to 0.5.0

Add new prop: raf (request animation frame)

Author: ShinyChang

README.md

@@ -20,13 +20,16 @@ var TextTruncate = require('react-text-truncate'); // CommonJS or UMD
 	line={1}
 	truncateText="…"
 	text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
-	showTitle={true} />
+	showTitle={true}
+    raf={true}
+    />
 ```
 
 [Demo](http://shinychang.github.io/React-Text-Truncate/)
 
 
 ## Changelog
+* 0.5.0 Add request animation frame
 * 0.4.0 New property `textTruncateChild` for show more or others.
 * 0.3.7 Support CommonJS and UMD module loader
 * 0.3.5 Fix window resize issue

lib/index.js

@@ -1,6 +1,18 @@
 function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj; }
 
-define(['module', 'exports', 'react'], function (module, exports, _react) {
+(function (global, factory) {
+    if (typeof define === "function" && define.amd) {
+        define(['module', 'exports', 'react'], factory);
+    } else if (typeof exports !== "undefined") {
+        factory(module, exports, require('react'));
+    } else {
+        var mod = {
+            exports: {}
+        };
+        factory(mod, mod.exports, global.react);
+        global.TextTruncate = mod.exports;
+    }
+})(this, function (module, exports, _react) {
     'use strict';
 
     Object.defineProperty(exports, "__esModule", {
@@ -67,12 +79,28 @@ define(['module', 'exports', 'react'], function (module, exports, _react) {
         _inherits(TextTruncate, _Component);
 
         function TextTruncate() {
+            var _Object$getPrototypeO;
+
+            var _temp, _this, _ret;
+
             _classCallCheck(this, TextTruncate);
 
-            var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(TextTruncate).call(this));
+            for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+            }
+
+            return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TextTruncate)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.animationStep = function (timeStamp) {
+                if (timeStamp - _this.lastTime < 150) {
+                    _this.loopId = window.requestAnimationFrame(_this.animationStep);
+                    return;
+                }
 
-            _this.onResize = _this.onResize.bind(_this);
-            return _this;
+                _this.lastTime = timeStamp;
+                _this.onResize();
+                _this.loopId = window.requestAnimationFrame(_this.animationStep);
+            }, _this.onResize = function () {
+                _this.forceUpdate();
+            }, _temp), _possibleConstructorReturn(_this, _ret);
         }
 
         _createClass(TextTruncate, [{
@@ -94,17 +122,21 @@ define(['module', 'exports', 'react'], function (module, exports, _react) {
                 font.push(style['font-family']);
                 this.canvas.font = font.join(' ');
                 this.forceUpdate();
-                window.addEventListener('resize', this.onResize);
+
+                if (this.props.raf) {
+                    this.loopId = window.requestAnimationFrame(this.animationStep);
+                } else {
+                    window.addEventListener('resize', this.onResize);
+                }
             }
         }, {
             key: 'componentWillUnmount',
             value: function componentWillUnmount() {
-                window.removeEventListener('resize', this.onResize);
-            }
-        }, {
-            key: 'onResize',
-            value: function onResize() {
-                this.forceUpdate();
+                if (this.props.raf) {
+                    window.cancelAnimationFrame(this.loopId);
+                } else {
+                    window.removeEventListener('resize', this.onResize);
+                }
             }
         }, {
             key: 'measureWidth',
@@ -185,13 +217,15 @@ define(['module', 'exports', 'react'], function (module, exports, _react) {
         truncateText: _react2.default.PropTypes.string,
         line: _react2.default.PropTypes.number,
         showTitle: _react2.default.PropTypes.bool,
-        textTruncateChild: _react2.default.PropTypes.node
+        textTruncateChild: _react2.default.PropTypes.node,
+        raf: _react2.default.PropTypes.bool
     };
     TextTruncate.defaultProps = {
         text: '',
         truncateText: '…',
         line: 1,
-        showTitle: true
+        showTitle: true,
+        raf: true
     };
     exports.default = TextTruncate;
     ;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-text-truncate",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Truncate text for React.js",
   "main": "lib/index.js",
   "scripts": {
@@ -25,29 +25,29 @@
   },
   "homepage": "https://github.com/ShinyChang/react-text-truncate",
   "devDependencies": {
-    "babel": "^6.1.18",
-    "babel-core": "^6.2.1",
-    "babel-loader": "^6.2.0",
+    "babel": "^6.5.2",
+    "babel-core": "^6.7.4",
+    "babel-loader": "^6.2.4",
     "babel-plugin-add-module-exports": "^0.1.2",
-    "babel-plugin-react-transform": "^1.1.1",
+    "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-es2015-modules-umd": "^6.6.5",
-    "babel-preset-es2015": "^6.1.18",
-    "babel-preset-react": "^6.1.18",
-    "babel-preset-stage-0": "^6.1.18",
-    "express": "^4.13.3",
-    "react-transform-catch-errors": "^1.0.0",
-    "react-transform-hmr": "^1.0.1",
-    "redbox-react": "^1.1.1",
-    "webpack": "^1.12.2",
-    "webpack-dev-middleware": "^1.2.0",
-    "webpack-hot-middleware": "^2.3.0"
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "express": "^4.13.4",
+    "react-transform-catch-errors": "^1.0.2",
+    "react-transform-hmr": "^1.0.4",
+    "redbox-react": "^1.2.2",
+    "webpack": "^1.12.14",
+    "webpack-dev-middleware": "^1.5.1",
+    "webpack-hot-middleware": "^2.10.0"
   },
   "peerDependencies": {
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3"
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7"
   },
   "dependencies": {
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3"
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7"
   }
 }

src/TextTruncate.js

@@ -6,14 +6,16 @@ export default class TextTruncate extends Component {
         truncateText: React.PropTypes.string,
         line: React.PropTypes.number,
         showTitle: React.PropTypes.bool,
-        textTruncateChild: React.PropTypes.node
+        textTruncateChild: React.PropTypes.node,
+        raf: React.PropTypes.bool
     };
 
     static defaultProps = {
         text: '',
         truncateText: '…',
         line: 1,
-        showTitle: true
+        showTitle: true,
+        raf: true
     };
 
     componentWillMount() {
@@ -22,6 +24,7 @@ export default class TextTruncate extends Component {
         docFragment.appendChild(canvas);
         this.canvas = canvas.getContext('2d');
     }
+
     componentDidMount() {
         let style = window.getComputedStyle(this.refs.scope);
         let font = [];
@@ -38,29 +41,34 @@ export default class TextTruncate extends Component {
           window.addEventListener('resize', this.onResize);
         }
     }
+
     componentWillUnmount() {
         if (this.props.raf) {
             window.cancelAnimationFrame(this.loopId);
         } else {
             window.removeEventListener('resize', this.onResize);
         }
     }
-    animationStep = timeStamp => {
+
+    animationStep = (timeStamp) => {
         if ((timeStamp - this.lastTime) < 150) {
-          this.loopId = window.requestAnimationFrame(this.animationStep);
-          return;
+            this.loopId = window.requestAnimationFrame(this.animationStep);
+            return;
         }
 
         this.lastTime = timeStamp;
         this.onResize();
         this.loopId = window.requestAnimationFrame(this.animationStep);
     };
+
     onResize = () => {
         this.forceUpdate();
     };
+
     measureWidth(text) {
         return this.canvas.measureText(text).width;
     }
+
     getRenderText() {
         let textWidth = this.measureWidth(this.props.text);
         let ellipsisWidth = this.measureWidth(this.props.truncateText);
@@ -100,6 +108,7 @@ export default class TextTruncate extends Component {
                       : this.props.text.substr(0, startPos - 1) + this.props.truncateText;
         }
     }
+
     render() {
         let text = '';
         if (this.refs.scope) {