From d25fee85cb25b1cd0fea3dd6a6c59d2830b9dec5 Mon Sep 17 00:00:00 2001 From: Lam Hieu Date: Wed, 7 Mar 2018 16:13:28 +0700 Subject: [PATCH 1/3] shorthand setup observe function --- src/components/ResizeDetector.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/ResizeDetector.js b/src/components/ResizeDetector.js index 9f24986..2a2cadd 100644 --- a/src/components/ResizeDetector.js +++ b/src/components/ResizeDetector.js @@ -32,11 +32,10 @@ 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 resizableElement = this.props.resizableElementId + ? document.getElementById(this.props.resizableElementId) + : this.el.parentElement; + this.ro.observe(resizableElement); } createResizeObserver = (entries) => { From 2831fd8ef03a90bf6f875667891106e769e53da8 Mon Sep 17 00:00:00 2001 From: Lam Hieu Date: Wed, 7 Mar 2018 16:35:59 +0700 Subject: [PATCH 2/3] clean up code --- src/components/ResizeDetector.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/ResizeDetector.js b/src/components/ResizeDetector.js index 2a2cadd..1dce384 100644 --- a/src/components/ResizeDetector.js +++ b/src/components/ResizeDetector.js @@ -32,19 +32,21 @@ export default class ResizeDetector extends PureComponent { } componentDidMount() { - const resizableElement = this.props.resizableElementId - ? document.getElementById(this.props.resizableElementId) - : 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; From f68dc3f5ff3a5056df2611c97dc634c80a17e390 Mon Sep 17 00:00:00 2001 From: Lam Hieu Date: Wed, 7 Mar 2018 16:54:59 +0700 Subject: [PATCH 3/3] update info and build latest file --- lib/components/ResizeDetector.js | 20 ++++++++++++-------- package.json | 23 +++++++++++++++-------- 2 files changed, 27 insertions(+), 16 deletions(-) diff --git a/lib/components/ResizeDetector.js b/lib/components/ResizeDetector.js index 8f78fa9..9af98ff 100644 --- a/lib/components/ResizeDetector.js +++ b/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', diff --git a/package.json b/package.json index f4e8759..76b1c61 100644 --- a/package.json +++ b/package.json @@ -28,18 +28,24 @@ "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 " + { + "name": "maslianok", + "email": "maslianok@gmail.com" + } ], "contributors": [ - "James J. Womack (@james_womack)" + { + "name": "James J. Womack (@james_womack)" + }, + { + "name": "Lam Hieu", + "email": "lamhieu.vk@gmail.com", + "url": "https://lamhieu.info" + } ], "name": "react-resize-detector", "repository": { @@ -47,7 +53,8 @@ "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"