Merge pull request #15 from SeeThruHead/raf

adds request animation frame option

Author: ShinyChang

package.json

@@ -30,6 +30,7 @@
     "babel-loader": "^6.2.0",
     "babel-plugin-add-module-exports": "^0.1.2",
     "babel-plugin-react-transform": "^1.1.1",
+    "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",

src/App.js

@@ -10,7 +10,8 @@ export class App extends Component {
             truncateText: '…',
             showTitle: true,
             textTruncateChild: <a className='pull-right' onClick={this.showAll}>show more</a>,
-            showAll: false
+            showAll: false,
+            raf: true
         };
     }
 

src/TextTruncate.js

@@ -16,10 +16,6 @@ export default class TextTruncate extends Component {
         showTitle: true
     };
 
-    constructor() {
-        super();
-        this.onResize = this.onResize.bind(this);
-    }
     componentWillMount() {
         let canvas = document.createElement('canvas');
         let docFragment = document.createDocumentFragment();
@@ -35,14 +31,33 @@ export default class TextTruncate extends Component {
         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);
+        }
     }
     componentWillUnmount() {
-        window.removeEventListener('resize', this.onResize);
+        if (this.props.raf) {
+            window.cancelAnimationFrame(this.loopId);
+        } else {
+            window.removeEventListener('resize', this.onResize);
+        }
     }
-    onResize() {
+    animationStep = timeStamp => {
+        if ((timeStamp - this.lastTime) < 150) {
+          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;
     }