Skip to content

React 16.3 Compatibility; slight performance improvements #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lsadam0 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

React 16.3 Compatibility; slight performance improvements #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 55 additions & 32 deletions lib/DragScroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ return /******/ (function(modules) { // webpackBootstrap
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
'use strict';

Object.defineProperty(exports, "__esModule", {
value: true
Expand Down Expand Up @@ -83,56 +83,71 @@ 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);

var _this = _possibleConstructorReturn(this, (DragScroll.__proto__ || Object.getPrototypeOf(DragScroll)).call(this, 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);
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;
this.setState(this.state);
}
}
}, {
key: "mouseDownHandle",
key: 'mouseDownHandle',
value: function mouseDownHandle(e) {
if (!this.state.dragging) {
this.state.dragging = true;
Expand All @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": [
Expand All @@ -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",
Expand Down
57 changes: 37 additions & 20 deletions src/DragScroll.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <div className={this.props.className} {...sytle}
onMouseUp={this.mouseUpHandle.bind(this)}
onMouseMove={this.mouseMoveHandle.bind(this)}
ref="container">
return <div className={this.props.className} {...this.state.containerStyle}
onMouseUp={this.mouseUpHandle}
onMouseMove={this.mouseMoveHandle}
ref={(e) => {this.container = e;}}>
{this.props.children && this.renderChildren(this.props.children)}
</div>;
}

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) {
Expand All @@ -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));
}
}
Expand All @@ -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
});
}
}
Expand Down
Loading