@hi-ui/hiui 3.9.0-rc.8 → 4.0.0-beta.1

package/es/transfer/Transfer.js

@@ -1,562 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _button = _interopRequireDefault(require("../button"));
-
-var _checkbox = _interopRequireDefault(require("../checkbox"));
-
-var _icon = _interopRequireDefault(require("../icon"));
-
-var _input = _interopRequireDefault(require("../input"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Item = _interopRequireDefault(require("./Item"));
-
-var _shallowequal = _interopRequireDefault(require("shallowequal"));
-
-var _context = _interopRequireDefault(require("../context"));
-
-require("./style/index");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-var Transfer = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(Transfer, _Component);
-
-  var _super = _createSuper(Transfer);
-
-  function Transfer(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Transfer);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setPosition", function (x, y) {
-      var _this$state = _this.state,
-          positionX = _this$state.positionX,
-          positionY = _this$state.positionY;
-
-      if (!(x === positionX && y === positionY)) {
-        _this.setState({
-          positionX: x,
-          positionY: y
-        });
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clickItemEvent", function (item, index, dir) {
-      var _this$props = _this.props,
-          mode = _this$props.mode,
-          type = _this$props.type;
-      var limited = _this.state.limited;
-
-      if (item.disabled) {
-        return;
-      }
-
-      if (mode === 'basic' && type === 'default') {
-        !(dir === 'left' && limited) && _this.parseSelectedKeys(dir, item.id, function () {
-          _this.moveTo(dir);
-        });
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "allCheckboxEvent", function (dir) {
-      var _this$setState;
-
-      var _this$state2 = _this.state,
-          sourceList = _this$state2.sourceList,
-          targetList = _this$state2.targetList,
-          leftFilter = _this$state2.leftFilter,
-          rightFilter = _this$state2.rightFilter;
-      var originDatas = dir === 'left' ? sourceList : targetList;
-      var filterText = dir === 'left' ? leftFilter : rightFilter;
-      var checkedKey = dir + 'Checked';
-      var arr = [];
-
-      if (!_this.state[checkedKey]) {
-        originDatas.forEach(function (data) {
-          data.content.includes(filterText) && !data.disabled && arr.push(data.id);
-        });
-      }
-
-      _this.setState((_this$setState = {}, (0, _defineProperty2["default"])(_this$setState, _this.getSelectedKeysByDir(dir), arr), (0, _defineProperty2["default"])(_this$setState, checkedKey, !_this.state[checkedKey]), _this$setState), function () {
-        _this.isLimited(dir);
-      });
-    });
-    _this.state = {
-      sourceList: [],
-      targetList: [],
-      sourceSelectedKeys: [],
-      targetSelectedKeys: [],
-      leftFilter: '',
-      rightFilter: '',
-      leftChecked: false,
-      rightChecked: false,
-      limited: false,
-      targetNode: null,
-      sourceNode: null,
-      positionX: null,
-      positionY: null,
-      dividerPosition: null
-    };
-    return _this;
-  }
-
-  (0, _createClass2["default"])(Transfer, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.parseDatas(this.props);
-    }
-  }, {
-    key: "parseDatas",
-    value: function parseDatas(props) {
-      var data = props.data,
-          targetKeys = props.targetKeys,
-          targetIds = props.targetIds;
-      var sourceList = [];
-      var targetList = [];
-      var _dataObj = {};
-      data.forEach(function (item) {
-        _dataObj[item.id] = item;
-
-        if (!(targetIds || targetKeys).includes(item.id)) {
-          sourceList.push(item);
-        }
-      });
-      (targetIds || targetKeys).forEach(function (item) {
-        _dataObj[item] && targetList.push(_dataObj[item]);
-      });
-      this.setState({
-        sourceList: sourceList,
-        targetList: targetList
-      });
-    } // eslint-disable-next-line camelcase
-
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(props) {
-      this.parseDatas(props);
-    }
-  }, {
-    key: "getSelectedKeysByDir",
-    value: function getSelectedKeysByDir(dir) {
-      return dir === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys';
-    }
-  }, {
-    key: "parseSelectedKeys",
-    value: function parseSelectedKeys(dir, key, callback) {
-      var _this$setState2,
-          _this2 = this;
-
-      var _this$state3 = this.state,
-          sourceSelectedKeys = _this$state3.sourceSelectedKeys,
-          targetSelectedKeys = _this$state3.targetSelectedKeys,
-          sourceList = _this$state3.sourceList,
-          targetList = _this$state3.targetList,
-          leftFilter = _this$state3.leftFilter,
-          rightFilter = _this$state3.rightFilter;
-      var selectedItem = dir === 'left' ? (0, _toConsumableArray2["default"])(sourceSelectedKeys) : (0, _toConsumableArray2["default"])(targetSelectedKeys);
-      var checkedKey = dir + 'Checked';
-      var originDatas = dir === 'left' ? sourceList : targetList;
-      var filterText = dir === 'left' ? leftFilter : rightFilter;
-      var selectedIndex = selectedItem.indexOf(key);
-
-      if (selectedIndex > -1) {
-        selectedItem.splice(selectedIndex, 1);
-      } else {
-        selectedItem.push(key);
-      }
-
-      var filterResult = [];
-      originDatas.forEach(function (item) {
-        item.content.includes(filterText) && filterResult.push(item.id);
-      });
-      var checkoutStatue = filterText.length ? filterResult.every(function (item) {
-        return selectedItem.includes(item);
-      }) : (0, _shallowequal["default"])(selectedItem.sort(), filterResult.sort());
-      this.setState((_this$setState2 = {}, (0, _defineProperty2["default"])(_this$setState2, this.getSelectedKeysByDir(dir), selectedItem), (0, _defineProperty2["default"])(_this$setState2, checkedKey, checkoutStatue), _this$setState2), function () {
-        callback && callback();
-
-        _this2.isLimited(dir);
-      });
-    }
-  }, {
-    key: "checkboxEvent",
-    value: function checkboxEvent(dir, value, isChecked) {
-      this.parseSelectedKeys(dir, value, null);
-    }
-  }, {
-    key: "moveTo",
-    value: function moveTo(dir) {
-      var _this$setState3,
-          _this3 = this;
-
-      var _this$props2 = this.props,
-          targetKeys = _this$props2.targetKeys,
-          targetIds = _this$props2.targetIds,
-          data = _this$props2.data,
-          targetSortType = _this$props2.targetSortType;
-      var _this$state4 = this.state,
-          sourceSelectedKeys = _this$state4.sourceSelectedKeys,
-          targetSelectedKeys = _this$state4.targetSelectedKeys;
-      var selectedItem = dir === 'left' ? (0, _toConsumableArray2["default"])(sourceSelectedKeys) : (0, _toConsumableArray2["default"])(targetSelectedKeys);
-
-      var _concatTargetKeys = targetSortType === 'queue' ? (targetIds || targetKeys).concat(selectedItem) : selectedItem.concat(targetIds || targetKeys);
-
-      var newTargetKeys = dir === 'left' ? _concatTargetKeys : (targetIds || targetKeys).filter(function (tk) {
-        return !selectedItem.includes(tk);
-      });
-      this.setState((_this$setState3 = {}, (0, _defineProperty2["default"])(_this$setState3, this.getSelectedKeysByDir(dir), newTargetKeys), (0, _defineProperty2["default"])(_this$setState3, "leftChecked", false), (0, _defineProperty2["default"])(_this$setState3, "rightChecked", false), _this$setState3), function () {
-        var _this3$setState;
-
-        var moveDatas = [];
-        selectedItem.forEach(function (key) {
-          data.forEach(function (item) {
-            item.id === key && moveDatas.push(item);
-          });
-        });
-
-        _this3.props.onChange(newTargetKeys, dir === 'left' ? 'right' : 'left', moveDatas);
-
-        _this3.setState((_this3$setState = {}, (0, _defineProperty2["default"])(_this3$setState, _this3.getSelectedKeysByDir(dir), []), (0, _defineProperty2["default"])(_this3$setState, dir + 'Filter', ''), _this3$setState), function () {
-          _this3.isLimited(dir);
-        });
-      });
-    }
-  }, {
-    key: "isLimited",
-    value: function isLimited(dir) {
-      var _this$state5 = this.state,
-          targetList = _this$state5.targetList,
-          sourceSelectedKeys = _this$state5.sourceSelectedKeys;
-      var _this$props3 = this.props,
-          targetLimit = _this$props3.targetLimit,
-          type = _this$props3.type;
-      var defaultLimited = sourceSelectedKeys.length > targetLimit || sourceSelectedKeys.length + targetList.length > targetLimit;
-
-      var _limited = type === 'default' ? defaultLimited || targetList.length >= targetLimit : defaultLimited;
-
-      this.setState({
-        limited: _limited
-      });
-    }
-  }, {
-    key: "searchEvent",
-    value: function searchEvent(dir, e) {
-      var _this$setState4;
-
-      var _this$state6 = this.state,
-          sourceList = _this$state6.sourceList,
-          targetList = _this$state6.targetList,
-          sourceSelectedKeys = _this$state6.sourceSelectedKeys,
-          targetSelectedKeys = _this$state6.targetSelectedKeys;
-      var originDatas = dir === 'left' ? sourceList : targetList;
-      var filterResult = [];
-      var filterText = e.target.value;
-      originDatas.forEach(function (item) {
-        item.content.includes(filterText) && filterResult.push(item.id);
-      });
-      var selectedKeys = dir === 'left' ? sourceSelectedKeys : targetSelectedKeys;
-      var checkedKey = dir + 'Checked';
-      var checkoutStatue = e.target.value.length ? filterResult.every(function (item) {
-        return selectedKeys.includes(item);
-      }) : (0, _shallowequal["default"])(selectedKeys.sort(), filterResult.sort());
-      this.setState((_this$setState4 = {}, (0, _defineProperty2["default"])(_this$setState4, dir + 'Filter', e.target.value), (0, _defineProperty2["default"])(_this$setState4, checkedKey, checkoutStatue), _this$setState4));
-    }
-  }, {
-    key: "move",
-    value: function move(sourceItem, targetItem) {
-      var _this$state7 = this.state,
-          targetList = _this$state7.targetList,
-          dividerPosition = _this$state7.dividerPosition;
-
-      var _targetList = (0, _toConsumableArray2["default"])(targetList);
-
-      var sIdx;
-      var tIdx;
-      targetList.forEach(function (item, index) {
-        if (item.id === targetItem.id) {
-          var position = dividerPosition === 'down' ? index + 1 : index;
-
-          _targetList.splice(position, 0, sourceItem);
-
-          tIdx = index;
-        }
-
-        if (item.id === sourceItem.id) {
-          sIdx = index;
-        }
-      });
-
-      if (sIdx < tIdx) {
-        _targetList.splice(sIdx, 1);
-      } else {
-        _targetList.splice(sIdx + 1, 1);
-      }
-
-      this.props.onDragEnd(_targetList);
-      this.setState({
-        targetList: _targetList
-      });
-    }
-  }, {
-    key: "setTargetNode",
-    value: function setTargetNode(id, dividerPosition) {
-      this.setState({
-        targetNode: id,
-        dividerPosition: dividerPosition
-      });
-    }
-  }, {
-    key: "removeTargetNode",
-    value: function removeTargetNode() {
-      this.setState({
-        targetNode: null
-      });
-    }
-  }, {
-    key: "setSourceNode",
-    value: function setSourceNode(id) {
-      this.setState({
-        sourceNode: id
-      });
-    }
-  }, {
-    key: "removeSourceNode",
-    value: function removeSourceNode() {
-      this.setState({
-        sourceNode: null
-      });
-    }
-  }, {
-    key: "renderContainer",
-    value: function renderContainer(dir, datas) {
-      var _this4 = this;
-
-      var _this$props4 = this.props,
-          mode = _this$props4.mode,
-          type = _this$props4.type,
-          showCheckAll = _this$props4.showCheckAll,
-          showAllSelect = _this$props4.showAllSelect,
-          searchable = _this$props4.searchable,
-          draggable = _this$props4.draggable,
-          propsEmptyContent = _this$props4.emptyContent,
-          title = _this$props4.title,
-          disabled = _this$props4.disabled,
-          theme = _this$props4.theme,
-          localeDatas = _this$props4.localeDatas,
-          onDragStart = _this$props4.onDragStart,
-          onDrop = _this$props4.onDrop,
-          render = _this$props4.render;
-      var _this$state8 = this.state,
-          sourceSelectedKeys = _this$state8.sourceSelectedKeys,
-          targetSelectedKeys = _this$state8.targetSelectedKeys,
-          leftFilter = _this$state8.leftFilter,
-          rightFilter = _this$state8.rightFilter,
-          leftChecked = _this$state8.leftChecked,
-          rightChecked = _this$state8.rightChecked,
-          limited = _this$state8.limited,
-          targetNode = _this$state8.targetNode,
-          sourceNode = _this$state8.sourceNode,
-          positionX = _this$state8.positionX,
-          positionY = _this$state8.positionY,
-          dividerPosition = _this$state8.dividerPosition;
-      var localeMap = localeDatas.transfer || {};
-      var emptyContent = propsEmptyContent || [localeMap.emptyContent, localeMap.emptyContent];
-      var selectedKeys = dir === 'left' ? sourceSelectedKeys : targetSelectedKeys;
-      var filterText = dir === 'left' ? leftFilter : rightFilter;
-      var filterResult = datas.filter(function (item) {
-        return item.content.includes(filterText);
-      });
-
-      var _isChecked = dir === 'left' ? leftChecked : rightChecked;
-
-      var _title = dir === 'left' ? title[0] : title[1] || title[0];
-
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-transfer__container"
-      }, disabled && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-transfer__mask"
-      }), _title && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-transfer__title"
-      }, _title), searchable && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-transfer__searchbar"
-      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-        name: "search"
-      }), /*#__PURE__*/_react["default"].createElement(_input["default"], {
-        bordered: false,
-        placeholder: localeMap.searchPlaceholder,
-        clearable: "true",
-        clearableTrigger: "always",
-        onInput: this.searchEvent.bind(this, dir),
-        onChange: this.searchEvent.bind(this, dir),
-        value: filterText
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-transfer__body ".concat(filterResult.length === 0 ? 'hi-transfer__body--empty' : '')
-      }, filterResult.length > 0 ? /*#__PURE__*/_react["default"].createElement("ul", {
-        className: "hi-transfer__list"
-      }, dir === 'left' && limited && /*#__PURE__*/_react["default"].createElement("li", {
-        key: "limit-tips",
-        className: "hi-transfer__item hi-transfer__item--limit"
-      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-        name: "info-circle-o",
-        style: {
-          fontSize: 16,
-          color: '#D4A145',
-          marginRight: 9
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", null, localeMap.limit)), filterResult.map(function (item, index) {
-        return /*#__PURE__*/_react["default"].createElement(_Item["default"], {
-          dir: dir,
-          dividerPosition: dividerPosition,
-          draggable: draggable,
-          key: index,
-          theme: theme,
-          render: render,
-          onClick: function onClick(e) {
-            return _this4.clickItemEvent(item, index, dir);
-          },
-          mode: mode === 'basic' && type === 'default' ? 'basic' : 'multiple',
-          item: item,
-          checked: selectedKeys.includes(item.id),
-          checkboxOnChange: _this4.checkboxEvent.bind(_this4, dir),
-          move: _this4.move.bind(_this4),
-          setTargetNode: _this4.setTargetNode.bind(_this4),
-          removeTargetNode: _this4.removeTargetNode.bind(_this4),
-          targetNode: targetNode,
-          setSourceNode: _this4.setSourceNode.bind(_this4),
-          removeSourceNode: _this4.removeSourceNode.bind(_this4),
-          sourceNode: sourceNode,
-          setPosition: _this4.setPosition,
-          positionX: positionX,
-          positionY: positionY,
-          onDragStart: onDragStart,
-          onDrop: onDrop
-        });
-      })) : dir === 'left' ? emptyContent[0] : emptyContent[1] || emptyContent[0]), (mode !== 'basic' || type !== 'default') && (showAllSelect || showCheckAll) && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-transfer__footer",
-        onClick: function onClick() {}
-      }, /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
-        indeterminate: !!selectedKeys.length && !_isChecked,
-        checked: _isChecked && !!filterResult.length,
-        onChange: function onChange() {
-          _this4.allCheckboxEvent(dir);
-        }
-      }, localeMap.checkAll), /*#__PURE__*/_react["default"].createElement("span", null, selectedKeys.length + '/', filterResult.length, " ", localeMap.items)));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this5 = this;
-
-      var _this$props5 = this.props,
-          mode = _this$props5.mode,
-          type = _this$props5.type,
-          theme = _this$props5.theme;
-      var _this$state9 = this.state,
-          sourceList = _this$state9.sourceList,
-          targetList = _this$state9.targetList,
-          sourceSelectedKeys = _this$state9.sourceSelectedKeys,
-          targetSelectedKeys = _this$state9.targetSelectedKeys,
-          limited = _this$state9.limited;
-      var operCls = (0, _classnames["default"])('hi-transfer__operation', mode === 'basic' && type === 'default' && 'hi-transfer__operation--basic');
-      var isLeftDisabled = targetSelectedKeys.length === 0;
-      var isRightDisabled = sourceSelectedKeys.length === 0 || limited;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-transfer theme__".concat(theme)
-      }, this.renderContainer('left', sourceList), /*#__PURE__*/_react["default"].createElement("div", {
-        className: operCls
-      }, (mode !== 'basic' || type !== 'default') && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
-        type: isRightDisabled ? 'default' : 'primary',
-        icon: "right",
-        onClick: function onClick() {
-          if (!isRightDisabled) {
-            _this5.moveTo('left');
-          }
-        },
-        disabled: isRightDisabled
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        className: "hi-transfer__split"
-      }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
-        type: isLeftDisabled ? 'default' : 'primary',
-        icon: "left",
-        onClick: function onClick() {
-          if (!isLeftDisabled) {
-            _this5.moveTo('right');
-          }
-        },
-        disabled: isLeftDisabled
-      }))), this.renderContainer('right', targetList));
-    }
-  }]);
-  return Transfer;
-}(_react.Component);
-
-var _default = (0, _context["default"])(Transfer);
-
-exports["default"] = _default;
-Transfer.defaultProps = {
-  mode: 'basic',
-  type: 'default',
-  targetKeys: [],
-  // TODO:废弃，使用 targetIds
-  showAllSelect: false,
-  showCheckAll: false,
-  searchable: false,
-  draggable: false,
-  title: ['', ''],
-  disabled: false,
-  onDragStart: function onDragStart() {
-    return true;
-  },
-  onDragEnd: function onDragEnd() {},
-  onDrop: function onDrop() {
-    return true;
-  },
-  onChange: function onChange() {}
-};
-Transfer.propTypes = {
-  mode: _propTypes["default"].oneOf(['basic', 'multiple']),
-  // TODO: 废弃，使用 type
-  type: _propTypes["default"].oneOf(['default', 'multiple']),
-  showAllSelect: _propTypes["default"].bool,
-  // TODO: 废弃，使用 showCheckAll
-  showCheckAll: _propTypes["default"].bool,
-  searchable: _propTypes["default"].bool,
-  draggable: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  targetLimit: _propTypes["default"].number,
-  onDragStart: _propTypes["default"].func,
-  onDragEnd: _propTypes["default"].func,
-  onDrop: _propTypes["default"].func,
-  onChange: _propTypes["default"].func
-};