diff --git a/CHANGELOG.md b/CHANGELOG.md
index d66587e..27b408b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,19 @@
+
+## [2.0.17](https://github.com/tinper-bee/bee-transfer/compare/v2.0.16...v2.0.17) (2020-09-09)
+
+
+
+
+## [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))
+
+
+
## [2.0.13](https://github.com/tinper-bee/bee-transfer/compare/v2.0.12...v2.0.13) (2020-04-14)
diff --git a/build/Transfer.css b/build/Transfer.css
index 8982fb9..df7a87f 100644
--- 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); }
diff --git a/build/Transfer.js b/build/Transfer.js
index c5b666a..5628942 100644
--- 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
});
};
};
diff --git a/build/item.js b/build/item.js
index 3f67a5d..6a254b7 100644
--- 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
)
)
);
diff --git a/build/list.js b/build/list.js
index d645a92..3e272a1 100644
--- 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
})
);
}
diff --git a/package.json b/package.json
index 99814a7..00b2622 100644
--- a/package.json
+++ b/package.json
@@ -1,76 +1,76 @@
{
- "name": "bee-transfer",
- "version": "2.0.14",
- "description": "Transfer ui component for react",
- "keywords": [
- "react",
- "react-component",
- "bee-transfer",
- "iuap-design",
- "tinper-bee",
- "Transfer"
- ],
- "engines": {
- "node": ">=4.0.0"
- },
- "homepage": "https://github.com/tinper-bee/bee-transfer.git",
- "author": "Yonyou FED",
- "repository": "http://github.com/tinper-bee/bee-transfer",
- "bugs": "https://github.com/tinper-bee/bee-transfer.git/issues",
- "license": "MIT",
- "main": "./build/index.js",
- "config": {
- "port": 3000,
- "commitizen": {
- "path": "./node_modules/cz-conventional-changelog"
- }
- },
- "scripts": {
- "dev": "bee-tools run start",
- "build": "bee-tools run build",
- "lint": "bee-tools-test run lint",
- "test": "bee-tools-test run test",
- "chrome": "bee-tools-test run chrome",
- "coveralls": "bee-tools-test run coverage",
- "browsers": "bee-tools-test run browsers",
- "pub": "bee-tools run pub",
- "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
- "postversion": "git push --follow-tags",
- "prepublishOnly": "npm run build"
- },
- "dependencies": {
- "babel-runtime": "^6.23.0",
- "bee-animate": "^1.0.0",
- "bee-button": "latest",
- "bee-checkbox": "latest",
- "bee-form-control": "latest",
- "bee-icon": "latest",
- "classnames": "^2.2.5",
- "react-beautiful-dnd": "^9.0.2",
- "react-lazy-load": "^3.0.12",
- "shallowequal": "^1.0.2",
- "tinper-bee-core": "latest"
- },
- "peerDependencies": {
- "react": "^15.3.0 || ^16.0",
- "react-dom": "^15.3.0 || ^16.0",
- "prop-types": "15.6.0"
- },
- "devDependencies": {
- "bee-button": "latest",
- "bee-clipboard": "^2.0.0",
- "bee-drawer": "0.0.2",
- "bee-layout": "latest",
- "bee-panel": "latest",
- "bee-tree": "^2.0.11",
- "chai": "^3.5.0",
- "console-polyfill": "~0.2.1",
- "cz-conventional-changelog": "^2.1.0",
- "enzyme": "^2.4.1",
- "es5-shim": "~4.1.10",
- "react": "15.3.2",
- "react-addons-test-utils": "15.3.2",
- "react-dom": "15.3.2",
- "husky": "^4.2.5"
+ "name": "bee-transfer",
+ "version": "2.0.17",
+ "description": "Transfer ui component for react",
+ "keywords": [
+ "react",
+ "react-component",
+ "bee-transfer",
+ "iuap-design",
+ "tinper-bee",
+ "Transfer"
+ ],
+ "engines": {
+ "node": ">=4.0.0"
+ },
+ "homepage": "https://github.com/tinper-bee/bee-transfer.git",
+ "author": "Yonyou FED",
+ "repository": "http://github.com/tinper-bee/bee-transfer",
+ "bugs": "https://github.com/tinper-bee/bee-transfer.git/issues",
+ "license": "MIT",
+ "main": "./build/index.js",
+ "config": {
+ "port": 3000,
+ "commitizen": {
+ "path": "./node_modules/cz-conventional-changelog"
}
-}
+ },
+ "scripts": {
+ "dev": "bee-tools run start",
+ "build": "bee-tools run build",
+ "lint": "bee-tools-test run lint",
+ "test": "bee-tools-test run test",
+ "chrome": "bee-tools-test run chrome",
+ "coveralls": "bee-tools-test run coverage",
+ "browsers": "bee-tools-test run browsers",
+ "pub": "bee-tools run pub",
+ "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
+ "postversion": "git push --follow-tags",
+ "prepublishOnly": "npm run build"
+ },
+ "dependencies": {
+ "babel-runtime": "^6.23.0",
+ "bee-animate": "^1.0.0",
+ "bee-button": "latest",
+ "bee-checkbox": "latest",
+ "bee-form-control": "latest",
+ "bee-icon": "latest",
+ "classnames": "^2.2.5",
+ "react-beautiful-dnd": "^9.0.2",
+ "react-lazy-load": "^3.0.12",
+ "shallowequal": "^1.0.2",
+ "tinper-bee-core": "latest"
+ },
+ "peerDependencies": {
+ "react": "^15.3.0 || ^16.0",
+ "react-dom": "^15.3.0 || ^16.0",
+ "prop-types": "15.6.0"
+ },
+ "devDependencies": {
+ "bee-button": "latest",
+ "bee-clipboard": "^2.0.0",
+ "bee-drawer": "0.0.2",
+ "bee-layout": "latest",
+ "bee-panel": "latest",
+ "bee-tree": "^2.0.11",
+ "chai": "^3.5.0",
+ "console-polyfill": "~0.2.1",
+ "cz-conventional-changelog": "^2.1.0",
+ "enzyme": "^2.4.1",
+ "es5-shim": "~4.1.10",
+ "react": "15.3.2",
+ "react-addons-test-utils": "15.3.2",
+ "react-dom": "15.3.2",
+ "husky": "^4.2.5"
+ }
+}
\ No newline at end of file