2.0.17

2020-09-09 16:36:47 +08:00 · 2020-09-09 16:36:47 +08:00 · a24fa8483b
parent f7088d967e
commit a24fa8483b
6 changed files with 161 additions and 97 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,19 @@
+<a name="2.0.17"></a>
+## [2.0.17](https://github.com/tinper-bee/bee-transfer/compare/v2.0.16...v2.0.17) (2020-09-09)
+
+
+
+<a name="2.0.16"></a>
+## [2.0.16](https://github.com/tinper-bee/bee-transfer/compare/v2.0.15...v2.0.16) (2020-09-09)
+
+
+### Bug Fixes
+
+* enable to drag multiple items ([05c6abb](https://github.com/tinper-bee/bee-transfer/commit/05c6abb))
+* 自动化 ([d2143aa](https://github.com/tinper-bee/bee-transfer/commit/d2143aa))
+
+
+
 <a name="2.0.13"></a>
 ## [2.0.13](https://github.com/tinper-bee/bee-transfer/compare/v2.0.12...v2.0.13) (2020-04-14)

--- a/build/Transfer.css
+++ b/build/Transfer.css
@ -74,7 +74,8 @@
        .u-transfer-list-content.delbtn-backdrop.uf-del {
          color: #fff; }
      .u-transfer-list-content-item {
-        overflow: hidden;
+        position: relative;
+        overflow: visible;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 7px 15px;
@ -83,6 +84,18 @@
        color: #212121; }
        .u-transfer-list-content-item .u-checkbox {
          margin-right: 0; }
+        .u-transfer-list-content-item .multi-drag-count {
+          position: absolute;
+          right: -11px;
+          top: -8px;
+          z-index: 999;
+          width: 26px;
+          height: 26px;
+          line-height: 26px;
+          border-radius: 99px;
+          text-align: center;
+          background: #FFD700;
+          color: #999; }
      .u-transfer-list-content-item:not(.u-transfer-list-content-item-disabled):hover {
        cursor: pointer;
        background-color: rgb(235, 236, 240); }
--- a/build/Transfer.js
+++ b/build/Transfer.js
@ -115,7 +115,8 @@ var Transfer = function (_React$Component) {
      }),
      leftDataSource: [],
      rightDataSource: [],
-      droppableId: ''
+      droppableId: '',
+      draggingItemId: ''
    };
    _this.cacheTargetKeys = [].concat(_toConsumableArray(targetKeys));
    return _this;
@ -245,19 +246,17 @@ var Transfer = function (_React$Component) {
    var targetKeys = newTargetKeys || this.props.targetKeys;
    //异步加载数据源时/移除已选时
    var sourceDataSource = this.props.dataSource;
-
    newDataSource = this.addUniqueKey(newDataSource);
    sourceDataSource = this.addUniqueKey(sourceDataSource);
-
    var leftDataSource = sourceDataSource.filter(function (_ref3) {
      var key = _ref3.key;
      return targetKeys.indexOf(key) === -1;
    });
-    var rightDataSource = newDataSource.filter(function (_ref4) {
-      var key = _ref4.key;
-      return targetKeys.indexOf(key) > -1;
+    var rightDataSource = targetKeys.map(function (key) {
+      return newDataSource.find(function (data) {
+        return data.key === key;
+      });
    });
-
    this.splitedDataSource = {
      leftDataSource: leftDataSource,
      rightDataSource: rightDataSource
@ -362,7 +361,8 @@ var Transfer = function (_React$Component) {
        targetSelectedKeys = _state3.targetSelectedKeys,
        leftDataSource = _state3.leftDataSource,
        rightDataSource = _state3.rightDataSource,
-        droppableId = _state3.droppableId;
+        droppableId = _state3.droppableId,
+        draggingItemId = _state3.draggingItemId;

    // const { leftDataSource, rightDataSource } = this.splitDataSource(this.props);

@ -400,7 +400,8 @@ var Transfer = function (_React$Component) {
          showCheckbox: showCheckbox,
          draggable: draggable,
          id: '1',
-          droppableId: droppableId
+          droppableId: droppableId,
+          draggingItemId: draggingItemId
        }),
        !draggable ? _react2["default"].createElement(_operation2["default"], {
          rightActive: rightActive,
@ -456,7 +457,7 @@ var _initialiseProps = function _initialiseProps() {
    return dataSource;
  };

-  this.moveTo = function (direction) {
+  this.moveTo = function (direction, insertIndex) {
    var _props2 = _this3.props,
        _props2$targetKeys = _props2.targetKeys,
        targetKeys = _props2$targetKeys === undefined ? [] : _props2$targetKeys,
@ -470,7 +471,16 @@ var _initialiseProps = function _initialiseProps() {
        droppableId = _state4.droppableId;

    var moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
-    var temp = appendToBottom ? targetKeys.concat(moveKeys) : moveKeys.concat(targetKeys);
+    // let temp = appendToBottom ? targetKeys.concat(moveKeys) : moveKeys.concat(targetKeys); // 在这里
+    var temp = [];
+    if (appendToBottom) {
+      temp = targetKeys.concat(moveKeys);
+    } else if (insertIndex) {
+      targetKeys.splice.apply(targetKeys, [insertIndex, 0].concat(_toConsumableArray(moveKeys)));
+      temp = targetKeys;
+    } else {
+      temp = moveKeys.concat(targetKeys);
+    }
    // move items to target box
    var newTargetKeys = direction === 'right' ? temp : targetKeys.filter(function (targetKey) {
      return moveKeys.indexOf(targetKey) === -1;
@ -493,8 +503,8 @@ var _initialiseProps = function _initialiseProps() {
    return _this3.moveTo('left');
  };

-  this.moveToRight = function () {
-    return _this3.moveTo('right');
+  this.moveToRight = function (insertIndex) {
+    return _this3.moveTo('right', insertIndex);
  };

  this.handleSelectAll = function (direction, filteredDataSource, checkAll) {
@ -589,6 +599,9 @@ var _initialiseProps = function _initialiseProps() {
  };

  this.onDragEnd = function (result) {
+    _this3.setState({
+      draggingItemId: ''
+    });
    var source = result.source,
        destination = result.destination,
        draggableId = result.draggableId;
@ -626,8 +639,13 @@ var _initialiseProps = function _initialiseProps() {
      }
    } else {
      // case5：从左往右拖拽（添加已选）
-      var _result = (0, _utils.move)(_this3.getList(source.droppableId), _this3.getList(destination.droppableId), source, destination, targetKeys);
+      if (_this3.state.sourceSelectedKeys.length > 1) {
+        return _this3.moveToRight(destination.index);
+      }
+      var _result = (0, _utils.move)( // 一次移动的方法
+      _this3.getList(source.droppableId), _this3.getList(destination.droppableId), source, destination, targetKeys);
      if (onChange) {
+        // onChange事件
        onChange(_result.newTargetKeys, "", draggableId);
      }
      _this3.setState({
@ -652,7 +670,8 @@ var _initialiseProps = function _initialiseProps() {
      _this3.handleRightSelect(selectedItem);
    }
    _this3.setState({
-      droppableId: source.droppableId
+      droppableId: source.droppableId,
+      draggingItemId: result.draggableId
    });
  };
 };
--- a/build/item.js
+++ b/build/item.js
@ -82,9 +82,13 @@ var Item = function (_React$Component) {
        onClick = _props.onClick,
        renderedText = _props.renderedText,
        renderedEl = _props.renderedEl,
-        showCheckbox = _props.showCheckbox;
+        showCheckbox = _props.showCheckbox,
+        checkedKeys = _props.checkedKeys,
+        isMultiDragSource = _props.isMultiDragSource,
+        draggingItemId = _props.draggingItemId;

-    var className = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, prefixCls + '-content-item', true), _defineProperty(_classNames, prefixCls + '-content-item-disabled', item.disabled), _defineProperty(_classNames, prefixCls + '-content-item-selected', checked), _classNames));
+    var isAttachedDraggingItem = checked && !isMultiDragSource && draggingItemId;
+    var className = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, prefixCls + '-content-item', true), _defineProperty(_classNames, prefixCls + '-content-item-disabled', item.disabled || isAttachedDraggingItem), _defineProperty(_classNames, prefixCls + '-content-item-selected', checked && !isAttachedDraggingItem), _classNames));

    var lazyProps = (0, _objectAssign2["default"])({
      height: 32,
@ -97,7 +101,6 @@ var Item = function (_React$Component) {
    if (lazy && lazy.container == "modal") {
      lazyFlag = false;
    }
-
    if (!lazyFlag) {
      return _react2["default"].createElement(
        'li',
@ -130,13 +133,22 @@ var Item = function (_React$Component) {
              return onClick(item);
            }
          },
-          showCheckbox ? _react2["default"].createElement(_beeCheckbox2["default"], { checked: checked, disabled: item.disabled, onClick: item.disabled ? undefined : function () {
+          showCheckbox ? _react2["default"].createElement(_beeCheckbox2["default"], {
+            checked: checked && !isAttachedDraggingItem,
+            disabled: item.disabled || isAttachedDraggingItem,
+            onClick: item.disabled ? undefined : function () {
              return onClick(item);
-            } }) : '',
+            }
+          }) : '',
          _react2["default"].createElement(
            'span',
            null,
            renderedEl
+          ),
+          isMultiDragSource && checkedKeys.length > 1 && _react2["default"].createElement(
+            'span',
+            { className: 'multi-drag-count' },
+            checkedKeys.length
          )
        )
      );
--- a/build/list.js
+++ b/build/list.js
@ -250,7 +250,8 @@ var TransferList = function (_React$Component) {
        id = _props.id,
        showCheckbox = _props.showCheckbox,
        draggable = _props.draggable,
-        droppableId = _props.droppableId;
+        droppableId = _props.droppableId,
+        draggingItemId = _props.draggingItemId;
    var _props2 = this.props,
        searchPlaceholder = _props2.searchPlaceholder,
        notFoundContent = _props2.notFoundContent;
@ -313,9 +314,12 @@ var TransferList = function (_React$Component) {
              filter: filter,
              filterOption: filterOption,
              checked: checked,
+              checkedKeys: checkedKeys,
              prefixCls: prefixCls,
              onClick: _this4.handleSelect,
-              showCheckbox: showCheckbox
+              showCheckbox: showCheckbox,
+              isMultiDragSource: draggingItemId === item.key,
+              draggingItemId: draggingItemId
            })
          );
        }
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 "name": "bee-transfer",
-  "version": "2.0.14",
+ "version": "2.0.17",
 "description": "Transfer ui component for react",
 "keywords": [
  "react",