Merge pull request #31 from lamhieu-vk/master

rewrite to optimize performance

lib/components/ResizeDetector.js

@@ -53,15 +53,20 @@ var ResizeDetector = function (_PureComponent) {
     var _this = _possibleConstructorReturn(this, (ResizeDetector.__proto__ || Object.getPrototypeOf(ResizeDetector)).call(this, props));
 
     _this.createResizeObserver = function (entries) {
+      var _this$props = _this.props,
+          handleWidth = _this$props.handleWidth,
+          handleHeight = _this$props.handleHeight,
+          onResize = _this$props.onResize;
+
       entries.forEach(function (entry) {
         var _entry$contentRect = entry.contentRect,
             width = _entry$contentRect.width,
             height = _entry$contentRect.height;
 
-        var notifyWidth = _this.props.handleWidth && _this.width !== width;
-        var notifyHeight = _this.props.handleHeight && _this.height !== height;
+        var notifyWidth = handleWidth && _this.width !== width;
+        var notifyHeight = handleHeight && _this.height !== height;
         if (!_this.skipOnMount && (notifyWidth || notifyHeight)) {
-          _this.props.onResize(width, height);
+          onResize(width, height);
         }
         _this.width = width;
         _this.height = height;
@@ -87,11 +92,10 @@ var ResizeDetector = function (_PureComponent) {
   _createClass(ResizeDetector, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
-      if (this.props.resizableElementId !== '') {
-        this.ro.observe(document.getElementById(this.props.resizableElementId));
-      } else {
-        this.ro.observe(this.el.parentElement);
-      }
+      var resizableElementId = this.props.resizableElementId;
+
+      var resizableElement = resizableElementId ? document.getElementById(resizableElementId) : this.el.parentElement;
+      this.ro.observe(resizableElement);
     }
   }, {
     key: 'render',

package.json

@@ -28,26 +28,33 @@
     "example": "example"
   },
   "homepage": "https://github.com/maslianok/react-resize-detector",
-  "keywords": [
-    "react",
-    "resize",
-    "detector"
-  ],
+  "keywords": ["react", "resize", "detector"],
   "license": "MIT",
   "main": "lib/index.js",
   "maintainers": [
-    "maslianok <[email protected]>"
+    {
+      "name": "maslianok",
+      "email": "[email protected]"
+    }
   ],
   "contributors": [
-    "James J. Womack (@james_womack)"
+    {
+      "name": "James J. Womack (@james_womack)"
+    },
+    {
+      "name": "Lam Hieu",
+      "email": "[email protected]",
+      "url": "https://lamhieu.info"
+    }
   ],
   "name": "react-resize-detector",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/maslianok/react-resize-detector.git"
   },
   "scripts": {
-    "build": "babel --presets=react,es2015 --plugins=transform-object-assign,transform-class-properties src --out-dir lib",
+    "build":
+      "babel --presets=react,es2015 --plugins=transform-object-assign,transform-class-properties src --out-dir lib",
     "clean": "rimraf lib",
     "lint": "eslint -c .eslintrc src",
     "prepublishOnly": "npm run lint && npm run clean && npm run build"

src/components/ResizeDetector.js

@@ -32,20 +32,21 @@ export default class ResizeDetector extends PureComponent {
   }
 
   componentDidMount() {
-    if (this.props.resizableElementId !== '') {
-      this.ro.observe(document.getElementById(this.props.resizableElementId));
-    } else {
-      this.ro.observe(this.el.parentElement);
-    }
+    const { resizableElementId } = this.props;
+    const resizableElement = resizableElementId ? document.getElementById(resizableElementId) : this.el.parentElement;
+    this.ro.observe(resizableElement);
   }
 
   createResizeObserver = (entries) => {
+    const {
+      handleWidth, handleHeight, onResize,
+    } = this.props;
     entries.forEach((entry) => {
       const { width, height } = entry.contentRect;
-      const notifyWidth = this.props.handleWidth && this.width !== width;
-      const notifyHeight = this.props.handleHeight && this.height !== height;
+      const notifyWidth = handleWidth && this.width !== width;
+      const notifyHeight = handleHeight && this.height !== height;
       if (!this.skipOnMount && (notifyWidth || notifyHeight)) {
-        this.props.onResize(width, height);
+        onResize(width, height);
       }
       this.width = width;
       this.height = height;