dlt-for-react 1.0.1 → 1.0.2

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

@@ -1,410 +0,0 @@
-'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;