From a24fa8483b6bd5cb98a126e7144d3f6da0365a49 Mon Sep 17 00:00:00 2001 From: Gaox2025f Date: Wed, 9 Sep 2020 16:36:47 +0800 Subject: [PATCH] 2.0.17 --- CHANGELOG.md | 16 +++++ build/Transfer.css | 15 ++++- build/Transfer.js | 49 ++++++++++----- build/item.js | 22 +++++-- build/list.js | 8 ++- package.json | 148 ++++++++++++++++++++++----------------------- 6 files changed, 161 insertions(+), 97 deletions(-) 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