dlt-for-react 1.0.1

package/lib/components/NHSelector/ListSort/index.js

@@ -0,0 +1,410 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _rcTweenOne = require('rc-tween-one');
+
+var _rcTweenOne2 = _interopRequireDefault(_rcTweenOne);
+
+var _rcQueueAnim = require('rc-queue-anim');
+
+var _rcQueueAnim2 = _interopRequireDefault(_rcQueueAnim);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function toArrayChildren(children) {
+  var ret = [];
+  _react2.default.Children.forEach(children, function (c) {
+    ret.push(c);
+  });
+  return ret;
+}
+
+function findChildInChildrenByKey(children, key) {
+  var ret = null;
+  if (children) {
+    children.forEach(function (c) {
+      if (ret || !c) {
+        return;
+      }
+      if (c.key === key) {
+        ret = c;
+      }
+    });
+  }
+  return ret;
+}
+
+function mergeChildren(prev, next) {
+  var ret = [];
+  // 保存更改后的顺序，新增的在新增时的位置插入。
+  prev.forEach(function (c) {
+    if (!c) {
+      return;
+    }
+    var newChild = findChildInChildrenByKey(next, c.key);
+    if (newChild) {
+      ret.push(newChild);
+    }
+  });
+
+  next.forEach(function (c, i) {
+    if (!c) {
+      return;
+    }
+    var newChild = findChildInChildrenByKey(prev, c.key);
+    if (!newChild) {
+      ret.splice(i, 0, c);
+    }
+  });
+  return ret;
+}
+
+var ListSort = function (_React$Component) {
+  (0, _inherits3.default)(ListSort, _React$Component);
+
+  function ListSort(props) {
+    (0, _classCallCheck3.default)(this, ListSort);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (ListSort.__proto__ || (0, _getPrototypeOf2.default)(ListSort)).call(this, props));
+
+    _this.onMouseDown = function (i, e) {
+      if (_this.isDrage) {
+        return;
+      }
+      var rect = _this.dom.getBoundingClientRect();
+      var mouseX = e.touches === undefined ? e.clientX : e.touches[0].clientX;
+      //如果是点击在了右边20px的访问之内，不能进行推拖拉排序
+      if (mouseX + 20 > rect.x + rect.width) {
+        return;
+      }
+      document.body.style.overflow = 'hidden';
+      _this.props.onEventChange(e, 'down');
+      var style = {
+        height: rect.height + 'px',
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+        MozUserSelect: 'none',
+        MsUserSelect: 'none'
+      };
+      _this.children = Array.prototype.slice.call(_this.dom.children);
+      _this.childStyle = [];
+      var childStyle = _this.children.map(function (item, ii) {
+        var cItem = _this.children[ii + 1];
+        var marginHeight = void 0;
+        var marginWidth = void 0;
+        if (cItem) {
+          marginHeight = cItem.offsetTop - item.offsetTop - item.clientHeight;
+          marginWidth = cItem.offsetLeft - item.offsetLeft - item.clientWidth;
+        } else {
+          var parentHeight = item.parentNode.clientHeight - parseFloat(getComputedStyle(item.parentNode).getPropertyValue('padding-bottom'));
+          var parentWidth = item.parentNode.clientWidth - parseFloat(getComputedStyle(item.parentNode).getPropertyValue('padding-right'));
+          marginHeight = parentHeight - item.offsetTop - item.clientHeight;
+          marginWidth = parentWidth - item.offsetLeft - item.clientWidth;
+        }
+        var d = {
+          width: item.clientWidth,
+          height: item.clientHeight,
+          top: item.offsetTop,
+          left: item.offsetLeft,
+          margin: 'auto',
+          marginHeight: marginHeight,
+          marginWidth: marginWidth,
+          position: 'absolute',
+          zIndex: ii === i ? 1 : 0
+        };
+        _this.childStyle.push((0, _extends3.default)({}, d));
+        return d;
+      });
+      var animation = _this.children.map(function (item, ii) {
+        return i === ii && (!_this.props.dragClassName ? { scale: 1.2, boxShadow: '0 10px 10px rgba(0,0,0,0.15)' } : null) || null;
+      });
+      _this.index = i;
+      _this.swapIndex = i;
+      _this.mouseXY = {
+        startX: e.touches === undefined ? e.clientX : e.touches[0].clientX,
+        startY: e.touches === undefined ? e.clientY : e.touches[0].clientY,
+        top: childStyle[i].top,
+        left: childStyle[i].left
+      };
+      if (_this.props.dragClassName) {
+        _this.listDom = e.currentTarget;
+        _this.listDom.className = _this.listDom.className.replace(_this.props.dragClassName, '').trim() + ' ' + _this.props.dragClassName;
+      }
+      _this.isDrage = true;
+      _this.setState({
+        style: style,
+        childStyle: childStyle,
+        animation: animation
+      });
+    };
+
+    _this.onMouseUp = function (e) {
+      if (!_this.mouseXY) {
+        return;
+      }
+      _this.mouseXY = null;
+      document.body.style.overflow = null;
+      _this.props.onEventChange(e, 'up');
+      var animation = _this.state.animation.map(function (item, i) {
+        if (_this.index === i) {
+          var animate = {};
+          var height = 0;
+          if (_this.props.animType === 'y') {
+            if (_this.swapIndex > _this.index) {
+              var start = _this.index + 1;
+              var end = _this.swapIndex + 1;
+              _this.childStyle.slice(start, end).forEach(function (_item) {
+                height += _item.height + _item.marginHeight;
+              });
+              animate.top = height + _this.childStyle[_this.index].top;
+            } else {
+              animate.top = _this.childStyle[_this.swapIndex].top;
+            }
+          }
+          var dragScale = !_this.props.dragClassName && {
+            scale: 1,
+            boxShadow: '0 0px 0px rgba(0,0,0,0)'
+          };
+          return (0, _extends3.default)({}, dragScale, animate, {
+            onComplete: function onComplete() {
+              var children = _this.sortArray(_this.state.children, _this.swapIndex, _this.index);
+              var callbackBool = _this.index !== _this.swapIndex;
+              _this.index = null;
+              _this.childStyle = [];
+              _this.swapIndex = null;
+              _this.setState({
+                style: {},
+                childStyle: [],
+                children: children,
+                animation: []
+              }, function () {
+                _this.isDrage = false;
+                if (callbackBool) {
+                  _this.props.onChange(children);
+                }
+              });
+            }
+          });
+        }
+        return item;
+      });
+      if (_this.props.dragClassName) {
+        _this.listDom.className = '' + _this.listDom.className.replace(_this.props.dragClassName, '').trim();
+      }
+      _this.setState({ animation: animation });
+    };
+
+    _this.onMouseMove = function (e) {
+      if (!_this.mouseXY) {
+        return;
+      }
+      _this.mouseXY.x = e.touches === undefined ? e.clientX : e.touches[0].clientX;
+      _this.mouseXY.y = e.touches === undefined ? e.clientY : e.touches[0].clientY;
+      var childStyle = _this.state.childStyle;
+      var animation = _this.state.animation;
+
+      if (_this.props.animType === 'x') {
+        // 懒得写现在没用。。。做成组件后加
+        childStyle[_this.index].left = _this.mouseXY.x - _this.mouseXY.startX + _this.mouseXY.left;
+      } else {
+        childStyle[_this.index].top = _this.mouseXY.y - _this.mouseXY.startY + _this.mouseXY.top;
+        _this.swapIndex = childStyle[_this.index].top < _this.childStyle[_this.index].top ? 0 : _this.index;
+        _this.swapIndex = childStyle[_this.index].top > _this.childStyle[_this.index].top + _this.childStyle[_this.index].height ? childStyle.length - 1 : _this.swapIndex;
+
+        var top = childStyle[_this.index].top;
+        _this.childStyle.forEach(function (item, i) {
+          var cTop = item.top;
+          var cHeight = item.height + item.marginHeight;
+          if (top > cTop && top < cTop + cHeight) {
+            _this.swapIndex = i;
+          }
+        });
+        animation = animation.map(function (item, i) {
+          // 到顶端
+          var height = _this.childStyle[_this.index].height;
+          if (_this.index < _this.swapIndex) {
+            if (i > _this.index && i <= _this.swapIndex && _this.swapIndex !== _this.index) {
+              var start = _this.index + 1;
+              var end = i;
+              height = 0;
+              _this.childStyle.slice(start, end).forEach(function (_item) {
+                height += _item.height + _item.marginHeight;
+              });
+              return { top: _this.childStyle[_this.index].top + height };
+            } else if ((i > _this.swapIndex || _this.swapIndex === _this.index) && i !== _this.index) {
+              return { top: _this.childStyle[i].top };
+            }
+          } else if (_this.index > _this.swapIndex) {
+            if (i < _this.index && i >= _this.swapIndex && _this.swapIndex !== _this.index) {
+              height = _this.childStyle[_this.index].height + _this.childStyle[_this.index].marginHeight;
+              return { top: _this.childStyle[i].top + height };
+            } else if ((i < _this.swapIndex || _this.swapIndex === _this.index) && i !== _this.index) {
+              return { top: _this.childStyle[i].top };
+            }
+          }
+          if (i !== _this.index) {
+            return { top: _this.childStyle[i].top };
+          }
+          if (item == null) {
+            return {};
+          }
+          return item;
+        });
+      }
+      _this.setState({ childStyle: childStyle, animation: animation });
+    };
+
+    _this.getChildren = function (item, i) {
+      var onMouseDown = _this.onMouseDown.bind(_this, i);
+      var style = (0, _extends3.default)({}, _this.state.childStyle[i]);
+      return _react2.default.createElement(_rcTweenOne2.default, (0, _extends3.default)({}, item.props, {
+        onMouseDown: onMouseDown,
+        onTouchStart: onMouseDown,
+        style: (0, _extends3.default)({}, item.style, style),
+        key: item.key,
+        animation: _this.state.animation[i],
+        component: item.type
+      }));
+    };
+
+    _this.sortArray = function (_array, nextNum, num) {
+      var current = _array[num];
+      var array = _array.map(function (item) {
+        return item;
+      });
+      array.splice(num, 1);
+      array.splice(nextNum, 0, current);
+      return array;
+    };
+
+    _this.state = {
+      children: _this.props.children,
+      style: {},
+      childStyle: [],
+      animation: []
+    };
+    _this.index = null;
+    _this.swapIndex = null;
+    _this.mouseXY = null;
+    _this.childStyle = [];
+    _this.children = [];
+    _this.isDrage = false;
+    return _this;
+  }
+
+  (0, _createClass3.default)(ListSort, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.dom = _reactDom2.default.findDOMNode(this);
+
+      if (window.addEventListener) {
+        window.addEventListener('mousemove', this.onMouseMove);
+        window.addEventListener('touchmove', this.onMouseMove);
+        window.addEventListener('mouseup', this.onMouseUp);
+        window.addEventListener('touchend', this.onMouseUp);
+      } else {
+        window.attachEvent('onmousemove', this.onMouseMove);
+        window.attachEvent('ontouchmove', this.onMouseMove);
+        window.attachEvent('onmouseup', this.onMouseUp);
+        window.attachEvent('ontouchend', this.onMouseUp);
+      }
+    }
+  }, {
+    key: 'UNSAFE_componentWillReceiveProps',
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var currentChildren = this.state.children;
+      var nextChildren = nextProps.children;
+      var newChildren = mergeChildren(currentChildren, nextChildren);
+      this.setState({ children: newChildren });
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (window.addEventListener) {
+        window.removeEventListener('mousemove', this.onMouseMove);
+        window.removeEventListener('touchmove', this.onMouseMove);
+        window.removeEventListener('mouseup', this.onMouseUp);
+        window.removeEventListener('touchend', this.onMouseUp);
+      } else {
+        window.detachEvent('onmousemove', this.onMouseMove);
+        window.detachEvent('ontouchmove', this.onMouseMove);
+        window.detachEvent('onmouseup', this.onMouseUp);
+        window.detachEvent('ontouchend', this.onMouseUp);
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var childrenToRender = toArrayChildren(this.state.children).map(this.getChildren);
+      var props = (0, _extends3.default)({}, this.props);
+      ['component', 'animType', 'dragClassName', 'appearAnim', 'onEventChange'].forEach(function (key) {
+        return delete props[key];
+      });
+      if (this.props.appearAnim) {
+        return _react2.default.createElement(_rcQueueAnim2.default, (0, _extends3.default)({}, props, this.props.appearAnim, {
+          style: (0, _extends3.default)({}, this.state.style)
+        }), childrenToRender);
+      }
+      return _react2.default.createElement(this.props.component, (0, _extends3.default)({}, props, {
+        style: (0, _extends3.default)({}, this.state.style)
+      }), childrenToRender);
+    }
+  }]);
+  return ListSort;
+}(_react2.default.Component);
+
+ListSort.propTypes = {
+  component: _propTypes2.default.any,
+  children: _propTypes2.default.any,
+  animType: _propTypes2.default.string,
+  onChange: _propTypes2.default.any,
+  dragClassName: _propTypes2.default.string,
+  appearAnim: _propTypes2.default.object,
+  onEventChange: _propTypes2.default.any
+};
+ListSort.defaultProps = {
+  component: 'div',
+  animType: 'y',
+  onChange: function onChange() {},
+  onEventChange: function onEventChange() {}
+};
+exports.default = ListSort;