From 2a64eb9841a371727162f987a380e11be9827084 Mon Sep 17 00:00:00 2001 From: Larry Adams Date: Fri, 30 Mar 2018 11:21:37 -0400 Subject: [PATCH] React 16.3 Compatibility; slight performance improvement by not recalculating style on every render --- lib/DragScroll.js | 87 ++++++++++++++++++++++++++--------------- package.json | 4 +- src/DragScroll.jsx | 57 +++++++++++++++++---------- yarn.lock | 97 ++++++++++++++++++---------------------------- 4 files changed, 132 insertions(+), 113 deletions(-) diff --git a/lib/DragScroll.js b/lib/DragScroll.js index 83625fb..d2d5c49 100644 --- a/lib/DragScroll.js +++ b/lib/DragScroll.js @@ -54,7 +54,7 @@ return /******/ (function(modules) { // webpackBootstrap /* 0 */ /***/ (function(module, exports, __webpack_require__) { - "use strict"; + 'use strict'; Object.defineProperty(exports, "__esModule", { value: true @@ -83,6 +83,16 @@ return /******/ (function(modules) { // webpackBootstrap var DragScroll = function (_React$Component) { _inherits(DragScroll, _React$Component); + _createClass(DragScroll, null, [{ + key: 'computeStyle', + value: function computeStyle(props) { + if (props.height && props.width) { + return { style: { height: props.height, width: props.width, overflow: 'auto' } }; + } + return null; + } + }]); + function DragScroll(props) { _classCallCheck(this, DragScroll); @@ -90,41 +100,46 @@ return /******/ (function(modules) { // webpackBootstrap _this.state = { data: props.dataSource, - dragging: false + dragging: false, + containerStyle: DragScroll.computeStyle(props) }; + + _this.mouseDownHandle = _this.mouseDownHandle.bind(_this); + _this.mouseMoveHandle = _this.mouseMoveHandle.bind(_this); + _this.mouseUpHandle = _this.mouseUpHandle.bind(_this); return _this; } _createClass(DragScroll, [{ - key: "render", + key: 'render', value: function render() { - var sytle = null; - if (this.props.height && this.props.width) { - sytle = { style: { height: this.props.height, width: this.props.width, overflow: 'auto' } }; - } + var _this2 = this; + return _react2.default.createElement( - "div", - _extends({ className: this.props.className }, sytle, { - onMouseUp: this.mouseUpHandle.bind(this), - onMouseMove: this.mouseMoveHandle.bind(this), - ref: "container" }), + 'div', + _extends({ className: this.props.className }, this.state.containerStyle, { + onMouseUp: this.mouseUpHandle, + onMouseMove: this.mouseMoveHandle, + ref: function ref(e) { + _this2.container = e; + } }), this.props.children && this.renderChildren(this.props.children) ); } }, { - key: "componentDidMount", + key: 'componentDidMount', value: function componentDidMount() { - window.addEventListener('mouseup', this.mouseUpHandle.bind(this)); - window.addEventListener('mousemove', this.mouseMoveHandle.bind(this)); + window.addEventListener('mouseup', this.mouseUpHandle); + window.addEventListener('mousemove', this.mouseMoveHandle); } }, { - key: "componentWillUnmount", + key: 'componentWillUnmount', value: function componentWillUnmount() { - window.removeEventListener('mouseup', this.mouseUpHandle.bind(this)); - window.removeEventListener('mousemove', this.mouseMoveHandle.bind(this)); + window.removeEventListener('mouseup', this.mouseUpHandle); + window.removeEventListener('mousemove', this.mouseMoveHandle); } }, { - key: "mouseUpHandle", + key: 'mouseUpHandle', value: function mouseUpHandle(e) { if (this.state.dragging) { this.state.dragging = false; @@ -132,7 +147,7 @@ return /******/ (function(modules) { // webpackBootstrap } } }, { - key: "mouseDownHandle", + key: 'mouseDownHandle', value: function mouseDownHandle(e) { if (!this.state.dragging) { this.state.dragging = true; @@ -143,40 +158,48 @@ return /******/ (function(modules) { // webpackBootstrap } } }, { - key: "mouseMoveHandle", + key: 'mouseMoveHandle', value: function mouseMoveHandle(e) { if (this.state.dragging) { - this.refs.container.scrollLeft -= -this.lastClientX + (this.lastClientX = e.clientX); - this.refs.container.scrollTop -= -this.lastClientY + (this.lastClientY = e.clientY); + this.container.scrollLeft -= -this.lastClientX + (this.lastClientX = e.clientX); + this.container.scrollTop -= -this.lastClientY + (this.lastClientY = e.clientY); } } }, { - key: "renderChildren", + key: 'renderChildren', value: function renderChildren(dom, type) { - var _this2 = this; + var _this3 = this; if (this.isArray(dom)) { return dom.map(function (item, index) { return _react2.default.cloneElement(item, { key: item.key || index, - onMouseUp: _this2.mouseUpHandle.bind(_this2), - onMouseDown: _this2.mouseDownHandle.bind(_this2) + onMouseUp: _this3.mouseUpHandle, + onMouseDown: _this3.mouseDownHandle }); }); - } else if ('object' == (typeof dom === "undefined" ? "undefined" : _typeof(dom))) { + } else if ('object' == (typeof dom === 'undefined' ? 'undefined' : _typeof(dom))) { return _react2.default.cloneElement(dom, { - onMouseUp: this.mouseUpHandle.bind(this), - onMouseDown: this.mouseDownHandle.bind(this) + onMouseUp: this.mouseUpHandle, + onMouseDown: this.mouseDownHandle }); } } }, { - key: "isArray", + key: 'isArray', value: function isArray(object) { - return object && (typeof object === "undefined" ? "undefined" : _typeof(object)) === 'object' && typeof object.length === 'number' && typeof object.splice === 'function' && + return object && (typeof object === 'undefined' ? 'undefined' : _typeof(object)) === 'object' && typeof object.length === 'number' && typeof object.splice === 'function' && //判断length属性是否是可枚举的 对于数组 将得到false !object.propertyIsEnumerable('length'); } + }], [{ + key: 'getDerivedStateFromProps', + value: function getDerivedStateFromProps(nextProps, prevState) { + if (!prevState.containerStyle || prevState.containerStyle.style.height !== nextProps.height || prevState.containerStyle.style.width !== nextProps.width) { + return { containerStyle: DragScroll.computeStyle(nextProps) }; + } + return null; + } }]); return DragScroll; diff --git a/package.json b/package.json index 7de4d11..e9e53a8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-dragscroll", - "version": "2.0.1", + "version": "2.0.2", "description": "React DragScroll is a React component which enables scrolling via holding the mouse button.", "main": "index.js", "files": [ @@ -26,7 +26,7 @@ }, "homepage": "https://github.com/qiaolb/react-dragscroll#readme", "dependencies": { - "react": "^16.1.1" + "react": "^16.3.0" }, "devDependencies": { "babel-core": "^6.26.0", diff --git a/src/DragScroll.jsx b/src/DragScroll.jsx index dd69be4..f57536a 100644 --- a/src/DragScroll.jsx +++ b/src/DragScroll.jsx @@ -5,35 +5,52 @@ import React from "react"; export default class DragScroll extends React.Component { + static computeStyle(props) { + if (props.height && props.width) { + return {style: {height: props.height, width: props.width, overflow: 'auto'}}; + } + return null; + } + container; constructor(props) { super(props); this.state = { data: props.dataSource, - dragging: false + dragging: false, + containerStyle: DragScroll.computeStyle(props), }; - } + this.mouseDownHandle = this.mouseDownHandle.bind(this); + this.mouseMoveHandle = this.mouseMoveHandle.bind(this); + this.mouseUpHandle = this.mouseUpHandle.bind(this); + } + render() { - let sytle = null; - if (this.props.height && this.props.width) { - sytle = {style: {height: this.props.height, width: this.props.width, overflow: 'auto'}}; - } - return
+ return
{this.container = e;}}> {this.props.children && this.renderChildren(this.props.children)}
; } componentDidMount() { - window.addEventListener('mouseup', this.mouseUpHandle.bind(this)); - window.addEventListener('mousemove', this.mouseMoveHandle.bind(this)); + window.addEventListener('mouseup', this.mouseUpHandle); + window.addEventListener('mousemove', this.mouseMoveHandle); + } + + static getDerivedStateFromProps(nextProps, prevState) { + if (!prevState.containerStyle + || (prevState.containerStyle.style.height !== nextProps.height + || prevState.containerStyle.style.width !== nextProps.width)) { + return { containerStyle: DragScroll.computeStyle(nextProps) }; + } + return null; } componentWillUnmount() { - window.removeEventListener('mouseup', this.mouseUpHandle.bind(this)); - window.removeEventListener('mousemove', this.mouseMoveHandle.bind(this)); + window.removeEventListener('mouseup', this.mouseUpHandle); + window.removeEventListener('mousemove', this.mouseMoveHandle); } mouseUpHandle(e) { @@ -55,9 +72,9 @@ export default class DragScroll extends React.Component { mouseMoveHandle(e) { if (this.state.dragging) { - this.refs.container.scrollLeft -= + this.container.scrollLeft -= (-this.lastClientX + (this.lastClientX = e.clientX)); - this.refs.container.scrollTop -= + this.container.scrollTop -= (-this.lastClientY + (this.lastClientY = e.clientY)); } } @@ -67,14 +84,14 @@ export default class DragScroll extends React.Component { return dom.map((item, index) => { return React.cloneElement(item, { key: item.key || index, - onMouseUp: this.mouseUpHandle.bind(this), - onMouseDown: this.mouseDownHandle.bind(this) + onMouseUp: this.mouseUpHandle, + onMouseDown: this.mouseDownHandle }); }); } else if ('object' == typeof dom) { return React.cloneElement(dom, { - onMouseUp: this.mouseUpHandle.bind(this), - onMouseDown: this.mouseDownHandle.bind(this) + onMouseUp: this.mouseUpHandle, + onMouseDown: this.mouseDownHandle }); } } diff --git a/yarn.lock b/yarn.lock index 4df5b87..eb9cf6c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -258,13 +258,14 @@ babel-helpers@^6.24.1: babel-runtime "^6.22.0" babel-template "^6.24.1" -babel-loader@^7.1.2: - version "7.1.2" - resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.2.tgz#f6cbe122710f1aa2af4d881c6d5b54358ca24126" +babel-loader@^6.2.5: + version "6.4.1" + resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.4.1.tgz#0b34112d5b0748a8dcdbf51acf6f9bd42d50b8ca" dependencies: - find-cache-dir "^1.0.0" - loader-utils "^1.0.2" + find-cache-dir "^0.1.1" + loader-utils "^0.2.16" mkdirp "^0.5.1" + object-assign "^4.0.1" babel-messages@^6.23.0: version "6.23.0" @@ -1107,19 +1108,20 @@ finalhandler@1.1.0: statuses "~1.3.1" unpipe "~1.0.0" -find-cache-dir@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f" +find-cache-dir@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9" dependencies: commondir "^1.0.1" - make-dir "^1.0.0" - pkg-dir "^2.0.0" + mkdirp "^0.5.1" + pkg-dir "^1.0.0" -find-up@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7" +find-up@^1.0.0: + version "1.1.2" + resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" dependencies: - locate-path "^2.0.0" + path-exists "^2.0.0" + pinkie-promise "^2.0.0" for-in@^1.0.1: version "1.0.2" @@ -1540,7 +1542,7 @@ lazy-cache@^1.0.3: version "1.0.4" resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e" -loader-utils@^0.2.11, loader-utils@^0.2.5: +loader-utils@^0.2.11, loader-utils@^0.2.16, loader-utils@^0.2.5: version "0.2.17" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348" dependencies: @@ -1549,21 +1551,6 @@ loader-utils@^0.2.11, loader-utils@^0.2.5: json5 "^0.5.0" object-assign "^4.0.1" -loader-utils@^1.0.2: - version "1.1.0" - resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd" - dependencies: - big.js "^3.1.3" - emojis-list "^2.0.0" - json5 "^0.5.0" - -locate-path@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e" - dependencies: - p-locate "^2.0.0" - path-exists "^3.0.0" - lodash@^4.17.2, lodash@^4.17.4, lodash@^4.6.1: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -1578,12 +1565,6 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: dependencies: js-tokens "^3.0.0" -make-dir@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.1.0.tgz#19b4369fe48c116f53c2af95ad102c0e39e85d51" - dependencies: - pify "^3.0.0" - media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" @@ -1836,16 +1817,6 @@ osenv@^0.1.4: os-homedir "^1.0.0" os-tmpdir "^1.0.0" -p-limit@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc" - -p-locate@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43" - dependencies: - p-limit "^1.1.0" - pako@~0.2.0: version "0.2.9" resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75" @@ -1867,9 +1838,11 @@ path-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a" -path-exists@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515" +path-exists@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b" + dependencies: + pinkie-promise "^2.0.0" path-is-absolute@^1.0.0, path-is-absolute@^1.0.1: version "1.0.1" @@ -1887,15 +1860,21 @@ performance-now@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5" -pify@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176" +pinkie-promise@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa" + dependencies: + pinkie "^2.0.0" -pkg-dir@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b" +pinkie@^2.0.0: + version "2.0.4" + resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870" + +pkg-dir@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4" dependencies: - find-up "^2.1.0" + find-up "^1.0.0" preserve@^0.2.0: version "0.2.0" @@ -2027,9 +2006,9 @@ react-proxy@^3.0.0-alpha.0: dependencies: lodash "^4.6.1" -react@^16.1.1: - version "16.2.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba" +react@^16.3.0: + version "16.3.0" + resolved "https://registry.yarnpkg.com/react/-/react-16.3.0.tgz#fc5a01c68f91e9b38e92cf83f7b795ebdca8ddff" dependencies: fbjs "^0.8.16" loose-envify "^1.1.0"