@hi-ui/hiui 2.15.11 → 2.15.12

package/es/transfer/Transfer.js

@@ -0,0 +1,558 @@
+"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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+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");
+
+var Transfer =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Transfer, _Component);
+
+  function Transfer(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Transfer);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Transfer).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), "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
+      });
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(props) {
+      this.parseDatas(props);
+    }
+  }, {
+    key: "getSelectedKeysByDir",
+    value: function getSelectedKeysByDir(dir) {
+      return dir === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys';
+    }
+  }, {
+    key: "clickItemEvent",
+    value: function clickItemEvent(item, index, dir) {
+      var _this2 = this;
+
+      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 () {
+          _this2.moveTo(dir);
+        });
+      }
+    }
+  }, {
+    key: "parseSelectedKeys",
+    value: function parseSelectedKeys(dir, key, callback) {
+      var _this$setState2,
+          _this3 = 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();
+
+        _this3.isLimited(dir);
+      });
+    }
+  }, {
+    key: "checkboxEvent",
+    value: function checkboxEvent(dir, value, isChecked) {
+      this.parseSelectedKeys(dir, value, null);
+    }
+  }, {
+    key: "moveTo",
+    value: function moveTo(dir) {
+      var _this$setState3,
+          _this4 = 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 _this4$setState;
+
+        var moveDatas = [];
+        selectedItem.forEach(function (key) {
+          data.forEach(function (item) {
+            item.id === key && moveDatas.push(item);
+          });
+        });
+
+        _this4.props.onChange(newTargetKeys, dir === 'left' ? 'right' : 'left', moveDatas);
+
+        _this4.setState((_this4$setState = {}, (0, _defineProperty2["default"])(_this4$setState, _this4.getSelectedKeysByDir(dir), []), (0, _defineProperty2["default"])(_this4$setState, dir + 'Filter', ''), _this4$setState), function () {
+          _this4.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 _this5 = 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,
+          emptyContent = _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 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 _react["default"].createElement("div", {
+        className: "hi-transfer__container"
+      }, disabled && _react["default"].createElement("div", {
+        className: "hi-transfer__mask"
+      }), _title && _react["default"].createElement("div", {
+        className: "hi-transfer__title"
+      }, _title), searchable && _react["default"].createElement("div", {
+        className: "hi-transfer__searchbar"
+      }, _react["default"].createElement(_icon["default"], {
+        name: "search"
+      }), _react["default"].createElement(_input["default"], {
+        placeholder: "\u641C\u7D22",
+        clearable: "true",
+        clearableTrigger: "always",
+        onInput: this.searchEvent.bind(this, dir),
+        onChange: this.searchEvent.bind(this, dir),
+        value: filterText
+      })), _react["default"].createElement("div", {
+        className: "hi-transfer__body ".concat(filterResult.length === 0 ? 'hi-transfer__body--empty' : '')
+      }, filterResult.length > 0 ? _react["default"].createElement("ul", {
+        className: "hi-transfer__list"
+      }, dir === 'left' && limited && _react["default"].createElement("li", {
+        key: "limit-tips",
+        className: "hi-transfer__item hi-transfer__item--limit"
+      }, _react["default"].createElement(_icon["default"], {
+        name: "info-circle-o",
+        style: {
+          fontSize: 16,
+          color: '#D4A145',
+          marginRight: 9
+        }
+      }), _react["default"].createElement("span", null, localeMap['limit'])), filterResult.map(function (item, index) {
+        return _react["default"].createElement(_Item["default"], {
+          dir: dir,
+          dividerPosition: dividerPosition,
+          draggable: draggable,
+          key: index,
+          theme: theme,
+          render: render,
+          onClick: _this5.clickItemEvent.bind(_this5, item, index, dir),
+          mode: mode === 'basic' && type === 'default' ? 'basic' : 'multiple',
+          item: item,
+          checked: selectedKeys.includes(item.id),
+          checkboxOnChange: _this5.checkboxEvent.bind(_this5, dir),
+          move: _this5.move.bind(_this5),
+          setTargetNode: _this5.setTargetNode.bind(_this5),
+          removeTargetNode: _this5.removeTargetNode.bind(_this5),
+          targetNode: targetNode,
+          setSourceNode: _this5.setSourceNode.bind(_this5),
+          removeSourceNode: _this5.removeSourceNode.bind(_this5),
+          sourceNode: sourceNode,
+          setPosition: _this5.setPosition,
+          positionX: positionX,
+          positionY: positionY,
+          onDragStart: onDragStart,
+          onDrop: onDrop
+        });
+      })) : dir === 'left' ? emptyContent[0] : emptyContent[1] || emptyContent[0]), (mode !== 'basic' || type !== 'default') && (showAllSelect || showCheckAll) && _react["default"].createElement("div", {
+        className: "hi-transfer__footer",
+        onClick: function onClick() {}
+      }, _react["default"].createElement(_checkbox["default"], {
+        indeterminate: !!selectedKeys.length && !_isChecked,
+        checked: _isChecked && !!filterResult.length,
+        onChange: function onChange() {
+          _this5.allCheckboxEvent(dir);
+        }
+      }, localeMap['checkAll']), _react["default"].createElement("span", null, selectedKeys.length + '/', filterResult.length, " ", localeMap['items'])));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this6 = 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 _react["default"].createElement("div", {
+        className: "hi-transfer theme__".concat(theme)
+      }, this.renderContainer('left', sourceList), _react["default"].createElement("div", {
+        className: operCls
+      }, (mode !== 'basic' || type !== 'default') && _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_button["default"], {
+        type: isRightDisabled ? 'default' : 'primary',
+        icon: "right",
+        onClick: function onClick() {
+          if (!isRightDisabled) {
+            _this6.moveTo('left');
+          }
+        },
+        disabled: isRightDisabled
+      }), _react["default"].createElement("span", {
+        className: "hi-transfer__split"
+      }), _react["default"].createElement(_button["default"], {
+        type: isLeftDisabled ? 'default' : 'primary',
+        icon: "left",
+        onClick: function onClick() {
+          if (!isLeftDisabled) {
+            _this6.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,
+  emptyContent: ['暂无数据', '暂无数据'],
+  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
+};