[Feature]支持自定义已选列表顺序、支持自定义已选添加位置
This commit is contained in:
yangchch6
parent
a1decb8c13
commit
f5e193ba6f
|
|
@ -83,6 +83,7 @@ import "./node_modules/bee-transfer/build/Transfer.css"
|
|||
|onSearchChange|当搜索域变化的回调函数 参数(direction: 'left'|'right', event: Event)|func|-|
|
||||
|showCheckbox|是否显示Checkbox复选框|bool|true|
|
||||
|draggable|是否可以通过拖拽进行穿梭和排序|bool|false|
|
||||
|appendToBottom|是否将已选项追加到右侧列表末尾|bool|false|
|
||||
|
||||
|
||||
#### 开发调试
|
||||
|
|
|
|||
|
|
@ -55,7 +55,8 @@ var defaultProps = {
|
|||
searchPlaceholder: 'Search',
|
||||
notFoundContent: 'Not Found',
|
||||
showCheckbox: true,
|
||||
draggable: false
|
||||
draggable: false,
|
||||
appendToBottom: false
|
||||
};
|
||||
|
||||
var propTypes = {
|
||||
|
|
@ -78,7 +79,8 @@ var propTypes = {
|
|||
rowKey: _propTypes2["default"].func,
|
||||
lazy: _propTypes2["default"].object,
|
||||
showCheckbox: _propTypes2["default"].bool,
|
||||
draggable: _propTypes2["default"].bool
|
||||
draggable: _propTypes2["default"].bool,
|
||||
appendToBottom: _propTypes2["default"].bool
|
||||
};
|
||||
|
||||
var defaultTitles = ['', ''];
|
||||
|
|
@ -181,6 +183,8 @@ var Transfer = function (_React$Component) {
|
|||
* @param {*} newDataSource 异步加载数据源时，从nextProps中获取的dataSource
|
||||
*/
|
||||
Transfer.prototype.splitDataSource = function splitDataSource(newTargetKeys, newDataSource) {
|
||||
var _this2 = this;
|
||||
|
||||
// targetKeys：展示在右边列表的数据集
|
||||
if (this.splitedDataSource) {
|
||||
return this.splitedDataSource;
|
||||
|
|
@ -191,14 +195,22 @@ var Transfer = function (_React$Component) {
|
|||
var dataSource = newDataSource || this.props.dataSource;
|
||||
|
||||
dataSource = this.addUniqueKey(dataSource);
|
||||
|
||||
var leftDataSource = dataSource.filter(function (_ref) {
|
||||
this.allSourceKeys = dataSource.map(function (_ref) {
|
||||
var key = _ref.key;
|
||||
return key;
|
||||
});
|
||||
|
||||
var leftDataSource = dataSource.filter(function (_ref2) {
|
||||
var key = _ref2.key;
|
||||
return targetKeys.indexOf(key) === -1;
|
||||
});
|
||||
var rightDataSource = dataSource.filter(function (_ref2) {
|
||||
var key = _ref2.key;
|
||||
return targetKeys.indexOf(key) > -1;
|
||||
// const rightDataSource = dataSource.filter(({key}) => targetKeys.indexOf(key) > -1);
|
||||
// 右侧数据源根据传入的targetKeys进行排序
|
||||
var rightDataSource = [];
|
||||
var tempIndex = -1;
|
||||
targetKeys.forEach(function (key) {
|
||||
tempIndex = _this2.allSourceKeys.indexOf(key);
|
||||
rightDataSource.push(dataSource[tempIndex]);
|
||||
});
|
||||
|
||||
this.splitedDataSource = {
|
||||
|
|
@ -425,10 +437,10 @@ var Transfer = function (_React$Component) {
|
|||
}(_react2["default"].Component);
|
||||
|
||||
var _initialiseProps = function _initialiseProps() {
|
||||
var _this2 = this;
|
||||
var _this3 = this;
|
||||
|
||||
this.addUniqueKey = function (dataSource) {
|
||||
var rowKey = _this2.props.rowKey;
|
||||
var rowKey = _this3.props.rowKey;
|
||||
|
||||
if (rowKey) {
|
||||
dataSource.forEach(function (record) {
|
||||
|
|
@ -439,13 +451,12 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.moveTo = function (direction) {
|
||||
var _props2 = _this2.props,
|
||||
var _props2 = _this3.props,
|
||||
_props2$targetKeys = _props2.targetKeys,
|
||||
targetKeys = _props2$targetKeys === undefined ? [] : _props2$targetKeys,
|
||||
onChange = _props2.onChange;
|
||||
// debugger
|
||||
|
||||
var _state4 = _this2.state,
|
||||
onChange = _props2.onChange,
|
||||
appendToBottom = _props2.appendToBottom;
|
||||
var _state4 = _this3.state,
|
||||
sourceSelectedKeys = _state4.sourceSelectedKeys,
|
||||
targetSelectedKeys = _state4.targetSelectedKeys,
|
||||
leftDataSource = _state4.leftDataSource,
|
||||
|
|
@ -453,78 +464,78 @@ var _initialiseProps = function _initialiseProps() {
|
|||
droppableId = _state4.droppableId;
|
||||
|
||||
var moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
|
||||
var temp = appendToBottom ? targetKeys.concat(moveKeys) : moveKeys.concat(targetKeys);
|
||||
// move items to target box
|
||||
var newTargetKeys = direction === 'right' ? moveKeys.concat(targetKeys) : targetKeys.filter(function (targetKey) {
|
||||
var newTargetKeys = direction === 'right' ? temp : targetKeys.filter(function (targetKey) {
|
||||
return moveKeys.indexOf(targetKey) === -1;
|
||||
});
|
||||
|
||||
// empty checked keys
|
||||
var oppositeDirection = direction === 'right' ? 'left' : 'right';
|
||||
_this2.setState(_defineProperty({}, _this2.getSelectedKeysName(oppositeDirection), []));
|
||||
// debugger
|
||||
_this2.handleSelectChange(oppositeDirection, []);
|
||||
_this3.setState(_defineProperty({}, _this3.getSelectedKeysName(oppositeDirection), []));
|
||||
_this3.handleSelectChange(oppositeDirection, []);
|
||||
|
||||
if (onChange) {
|
||||
onChange(newTargetKeys, direction, moveKeys);
|
||||
}
|
||||
// 区分拖拽穿梭还是点击穿梭
|
||||
var newDataSource = leftDataSource.concat(rightDataSource);
|
||||
droppableId ? _this2.splitDataSource2(newTargetKeys, newDataSource) : _this2.splitDataSource(newTargetKeys);
|
||||
droppableId ? _this3.splitDataSource2(newTargetKeys, newDataSource) : _this3.splitDataSource(newTargetKeys);
|
||||
};
|
||||
|
||||
this.moveToLeft = function () {
|
||||
return _this2.moveTo('left');
|
||||
return _this3.moveTo('left');
|
||||
};
|
||||
|
||||
this.moveToRight = function () {
|
||||
return _this2.moveTo('right');
|
||||
return _this3.moveTo('right');
|
||||
};
|
||||
|
||||
this.handleSelectAll = function (direction, filteredDataSource, checkAll) {
|
||||
var holder = checkAll ? [] : filteredDataSource.map(function (item) {
|
||||
return item.key;
|
||||
});
|
||||
_this2.handleSelectChange(direction, holder);
|
||||
_this3.handleSelectChange(direction, holder);
|
||||
|
||||
if (!_this2.props.selectedKeys) {
|
||||
_this2.setState(_defineProperty({}, _this2.getSelectedKeysName(direction), holder));
|
||||
if (!_this3.props.selectedKeys) {
|
||||
_this3.setState(_defineProperty({}, _this3.getSelectedKeysName(direction), holder));
|
||||
}
|
||||
};
|
||||
|
||||
this.handleLeftSelectAll = function (filteredDataSource, checkAll) {
|
||||
_this2.handleSelectAll('left', filteredDataSource, checkAll);
|
||||
_this3.handleSelectAll('left', filteredDataSource, checkAll);
|
||||
};
|
||||
|
||||
this.handleRightSelectAll = function (filteredDataSource, checkAll) {
|
||||
return _this2.handleSelectAll('right', filteredDataSource, checkAll);
|
||||
return _this3.handleSelectAll('right', filteredDataSource, checkAll);
|
||||
};
|
||||
|
||||
this.handleFilter = function (direction, value) {
|
||||
_this2.setState(_defineProperty({}, direction + 'Filter', value));
|
||||
_this3.setState(_defineProperty({}, direction + 'Filter', value));
|
||||
};
|
||||
|
||||
this.handleLeftFilter = function (v) {
|
||||
return _this2.handleFilter('left', v);
|
||||
return _this3.handleFilter('left', v);
|
||||
};
|
||||
|
||||
this.handleRightFilter = function (v) {
|
||||
return _this2.handleFilter('right', v);
|
||||
return _this3.handleFilter('right', v);
|
||||
};
|
||||
|
||||
this.handleClear = function (direction) {
|
||||
_this2.setState(_defineProperty({}, direction + 'Filter', ''));
|
||||
_this3.setState(_defineProperty({}, direction + 'Filter', ''));
|
||||
};
|
||||
|
||||
this.handleLeftClear = function () {
|
||||
return _this2.handleClear('left');
|
||||
return _this3.handleClear('left');
|
||||
};
|
||||
|
||||
this.handleRightClear = function () {
|
||||
return _this2.handleClear('right');
|
||||
return _this3.handleClear('right');
|
||||
};
|
||||
|
||||
this.handleSelect = function (direction, selectedItem, checked) {
|
||||
var _state5 = _this2.state,
|
||||
var _state5 = _this3.state,
|
||||
sourceSelectedKeys = _state5.sourceSelectedKeys,
|
||||
targetSelectedKeys = _state5.targetSelectedKeys;
|
||||
|
||||
|
|
@ -537,27 +548,27 @@ var _initialiseProps = function _initialiseProps() {
|
|||
//未勾选
|
||||
holder.push(selectedItem.key);
|
||||
}
|
||||
_this2.handleSelectChange(direction, holder);
|
||||
_this3.handleSelectChange(direction, holder);
|
||||
|
||||
if (!_this2.props.selectedKeys) {
|
||||
_this2.setState(_defineProperty({}, _this2.getSelectedKeysName(direction), holder));
|
||||
if (!_this3.props.selectedKeys) {
|
||||
_this3.setState(_defineProperty({}, _this3.getSelectedKeysName(direction), holder));
|
||||
}
|
||||
};
|
||||
|
||||
this.handleLeftSelect = function (selectedItem, checked) {
|
||||
return _this2.handleSelect('left', selectedItem, checked);
|
||||
return _this3.handleSelect('left', selectedItem, checked);
|
||||
};
|
||||
|
||||
this.handleRightSelect = function (selectedItem, checked) {
|
||||
return _this2.handleSelect('right', selectedItem, checked);
|
||||
return _this3.handleSelect('right', selectedItem, checked);
|
||||
};
|
||||
|
||||
this.getTitles = function () {
|
||||
if (_this2.props.titles) {
|
||||
return _this2.props.titles;
|
||||
if (_this3.props.titles) {
|
||||
return _this3.props.titles;
|
||||
}
|
||||
if (_this2.context && _this2.context.antLocale && _this2.context.antLocale.Transfer) {
|
||||
return _this2.context.antLocale.Transfer.titles || [];
|
||||
if (_this3.context && _this3.context.antLocale && _this3.context.antLocale.Transfer) {
|
||||
return _this3.context.antLocale.Transfer.titles || [];
|
||||
}
|
||||
return defaultTitles;
|
||||
};
|
||||
|
|
@ -568,14 +579,14 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.getList = function (id) {
|
||||
return _this2.state[_this2.id2List[id]];
|
||||
return _this3.state[_this3.id2List[id]];
|
||||
};
|
||||
|
||||
this.onDragEnd = function (result) {
|
||||
var source = result.source,
|
||||
destination = result.destination,
|
||||
draggableId = result.draggableId;
|
||||
var _props3 = _this2.props,
|
||||
var _props3 = _this3.props,
|
||||
targetKeys = _props3.targetKeys,
|
||||
onChange = _props3.onChange;
|
||||
|
||||
|
|
@ -592,14 +603,14 @@ var _initialiseProps = function _initialiseProps() {
|
|||
// case2：在左侧列表中拖拽
|
||||
if (source.droppableId === destination.droppableId) return;
|
||||
// case3：从右往左拖拽（移除已选）
|
||||
_this2.moveToLeft();
|
||||
_this3.moveToLeft();
|
||||
return;
|
||||
}
|
||||
|
||||
// case4：在右侧列表中拖拽改变items顺序
|
||||
if (source.droppableId === destination.droppableId) {
|
||||
var items = (0, _utils.reorder)(_this2.getList(source.droppableId), targetKeys, sourceIndex, disIndex);
|
||||
_this2.setState({
|
||||
var items = (0, _utils.reorder)(_this3.getList(source.droppableId), targetKeys, sourceIndex, disIndex);
|
||||
_this3.setState({
|
||||
rightDataSource: items.dataArr,
|
||||
sourceSelectedKeys: [],
|
||||
targetSelectedKeys: []
|
||||
|
|
@ -609,11 +620,11 @@ var _initialiseProps = function _initialiseProps() {
|
|||
}
|
||||
} else {
|
||||
// case5：从左往右拖拽（添加已选）
|
||||
var _result = (0, _utils.move)(_this2.getList(source.droppableId), _this2.getList(destination.droppableId), source, destination, targetKeys);
|
||||
var _result = (0, _utils.move)(_this3.getList(source.droppableId), _this3.getList(destination.droppableId), source, destination, targetKeys);
|
||||
if (onChange) {
|
||||
onChange(_result.newTargetKeys, "", draggableId);
|
||||
}
|
||||
_this2.setState({
|
||||
_this3.setState({
|
||||
leftDataSource: _result.droppable_1,
|
||||
rightDataSource: _result.droppable_2,
|
||||
sourceSelectedKeys: [],
|
||||
|
|
@ -629,12 +640,12 @@ var _initialiseProps = function _initialiseProps() {
|
|||
selectedItem.key = result.draggableId;
|
||||
if (source.droppableId === 'droppable_1') {
|
||||
// leftMenu
|
||||
_this2.handleLeftSelect(selectedItem);
|
||||
_this3.handleLeftSelect(selectedItem);
|
||||
} else if (source.droppableId === 'droppable_2') {
|
||||
// rightMenu
|
||||
_this2.handleRightSelect(selectedItem);
|
||||
_this3.handleRightSelect(selectedItem);
|
||||
}
|
||||
_this2.setState({
|
||||
_this3.setState({
|
||||
droppableId: source.droppableId
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -42,6 +42,13 @@ class Demo6 extends React.Component {
|
|||
console.log('direction: ', direction);
|
||||
console.log('moveKeys: ', moveKeys);
|
||||
}
|
||||
|
||||
handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
|
||||
this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
|
||||
|
||||
console.log('sourceSelectedKeys: ', sourceSelectedKeys);
|
||||
console.log('targetSelectedKeys: ', targetSelectedKeys);
|
||||
}
|
||||
|
||||
/**
|
||||
* 自定义渲染行数据
|
||||
|
|
@ -70,6 +77,7 @@ class Demo6 extends React.Component {
|
|||
targetKeys={targetKeys}
|
||||
selectedKeys={state.selectedKeys}
|
||||
onChange={this.handleChange}
|
||||
onSelectChange={this.handleSelectChange}
|
||||
render={this.renderItem}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,142 @@
|
|||
/**
|
||||
*
|
||||
* @title 自定义右侧已选列表的排列顺序
|
||||
* @description `appendToBottom` 参数控制是否将已选项追加到右侧列表末尾，其默认值为false（即将已选项添加到右侧列表最上方）。可在项目中动态改变参数数组targetKeys，穿梭框会根据targetKeys中的顺序进行排序。应用场景：通过上移/下移改变右侧数据顺序。
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Button from 'bee-button';
|
||||
import Icon from 'bee-icon';
|
||||
import Transfer from '../../src';
|
||||
|
||||
const AllTargetKeys = [];
|
||||
const mockData = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
mockData.push({
|
||||
key: i.toString(),
|
||||
title: `content${i + 1}`,
|
||||
description: `description of content${i + 1}`,
|
||||
});
|
||||
AllTargetKeys.push(i.toString());
|
||||
}
|
||||
|
||||
const targetKeys = mockData
|
||||
.filter(item => +item.key % 7 === 0)
|
||||
.map(item => item.key);
|
||||
|
||||
class Demo7 extends React.Component {
|
||||
state = {
|
||||
targetKeys,
|
||||
selectedKeys: [],
|
||||
showModal: false,
|
||||
modalSize: ''
|
||||
}
|
||||
|
||||
handleChange = (nextTargetKeys, direction, moveKeys) => {
|
||||
this.setState({ targetKeys: nextTargetKeys });
|
||||
|
||||
console.log('targetKeys: ', nextTargetKeys);
|
||||
console.log('direction: ', direction);
|
||||
console.log('moveKeys: ', moveKeys);
|
||||
}
|
||||
|
||||
handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
|
||||
this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
|
||||
|
||||
console.log('sourceSelectedKeys: ', sourceSelectedKeys);
|
||||
console.log('targetSelectedKeys: ', targetSelectedKeys);
|
||||
}
|
||||
|
||||
moveAllToRight = () => {
|
||||
this.setState({
|
||||
targetKeys: AllTargetKeys
|
||||
})
|
||||
}
|
||||
moveAllToLeft = () => {
|
||||
this.setState({
|
||||
targetKeys: []
|
||||
})
|
||||
}
|
||||
|
||||
swapItems(arr, index1, index2) {
|
||||
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
|
||||
return arr;
|
||||
};
|
||||
|
||||
scopeupRecord(arr, $index) {
|
||||
if ($index == 0) {
|
||||
return;
|
||||
}
|
||||
this.swapItems(arr, $index, $index - 1);
|
||||
};
|
||||
|
||||
scopedownRecord(arr, $index) {
|
||||
if ($index == arr.length - 1) {
|
||||
return;
|
||||
}
|
||||
this.swapItems(arr, $index, $index + 1);
|
||||
};
|
||||
|
||||
moveUp = () => {
|
||||
let { targetKeys, selectedKeys } = this.state
|
||||
let selectedTargetKeys = []
|
||||
targetKeys.forEach((v, i) => {
|
||||
selectedKeys.forEach((v2, i2) => {
|
||||
if (v2 == v) {
|
||||
selectedTargetKeys.push({ key: v, index: i })
|
||||
}
|
||||
})
|
||||
})
|
||||
if (selectedTargetKeys.length == 1) {
|
||||
this.scopeupRecord(targetKeys, selectedTargetKeys[0].index)
|
||||
this.setState({
|
||||
targetKeys
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
moveDown = () => {
|
||||
let { targetKeys, selectedKeys } = this.state
|
||||
let selectedTargetKeys = []
|
||||
targetKeys.forEach((v, i) => {
|
||||
selectedKeys.forEach((v2, i2) => {
|
||||
if (v2 == v) {
|
||||
selectedTargetKeys.push({ key: v, index: i })
|
||||
}
|
||||
})
|
||||
})
|
||||
console.log(targetKeys, selectedKeys, selectedTargetKeys)
|
||||
if (selectedTargetKeys.length == 1) {
|
||||
this.scopedownRecord(targetKeys, selectedTargetKeys[0].index)
|
||||
this.setState({
|
||||
targetKeys
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const state = this.state;
|
||||
const targetKeys = [...this.state.targetKeys];
|
||||
return (
|
||||
<div className="demo7">
|
||||
<Button onClick={this.moveUp} size="sm" className="moveUpBtn moveBtn"><Icon type="uf-arrow-up" /></Button>
|
||||
<Button onClick={this.moveDown} size="sm" className="moveDownBtn moveBtn"><Icon type="uf-arrow-down" /></Button>
|
||||
<Transfer
|
||||
appendToBottom={true}
|
||||
dataSource={mockData}
|
||||
titles={['Source', 'Target']}
|
||||
targetKeys={targetKeys}
|
||||
selectedKeys={state.selectedKeys}
|
||||
onChange={this.handleChange}
|
||||
onSelectChange={this.handleSelectChange}
|
||||
render={item => item.title}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default Demo7
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
.demo7{
|
||||
width: 476px;
|
||||
position: relative;
|
||||
.moveBtn{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 8px;
|
||||
min-width: 40px;
|
||||
z-index: 10;
|
||||
color: #86939E;
|
||||
cursor: pointer;
|
||||
&.moveUpBtn{
|
||||
margin-top: 69px;
|
||||
}
|
||||
&.moveDownBtn{
|
||||
margin-top: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
/**
|
||||
*
|
||||
* @title 树穿梭
|
||||
* @description 结合 Tree 和 Transfer 的使用示例，解决多级数据穿梭问题。
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Tree from 'bee-tree';
|
||||
import Transfer from '../../src';
|
||||
|
||||
const TreeNode = Tree.TreeNode;
|
||||
const valueField = "refcode";
|
||||
const AllTargetKeys = [];
|
||||
|
||||
const treeData = [{"children":[{"children":[],"pid":"lkp","refpk":"857c41b7-e1a3-11e5-aa70-0242ac11001d","refcode":"wujd","id":"wujd","isLeaf":"true","refname":"开发部"},{"children":[],"pid":"lkp","refpk":"780aca16-e1a3-11e5-aa70-0242ac11001d","refcode":"fzl","id":"fzl","isLeaf":"true","refname":"人事部"}],"pid":"","refpk":"708918f5-e1a3-11e5-aa70-0242ac11001d","refcode":"lkp","id":"lkp","refname":"总公司"}];
|
||||
|
||||
class Demo8 extends React.Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
targetKeys: [],
|
||||
selectedKeys: [],
|
||||
expandedKeys: [],//记录展开节点
|
||||
searchValue: '',//记录搜索内容
|
||||
autoExpandParent: true,
|
||||
dataList: [],
|
||||
transferData : [{"rownum_":1,"login_name":"43","name":"花43","refcode":"43","refpk":"718dda50629e4f8a8833b5d17de85280","id":"718dda50629e4f8a8833b5d17de85280","refname":"花43","key":"43","title":"花43-43"},{"rownum_":2,"login_name":"46","name":"花46","refcode":"46","refpk":"b595b95cf45348d7aadb7ae349a89a76","id":"b595b95cf45348d7aadb7ae349a89a76","refname":"花46","key":"46","title":"花46-46"},{"rownum_":3,"login_name":"48","name":"花48","refcode":"48","refpk":"62310dd3677440ef96042b9c3ad135e2","id":"62310dd3677440ef96042b9c3ad135e2","refname":"花48","key":"48","title":"花48-48"},{"rownum_":4,"login_name":"53","name":"花53","refcode":"53","refpk":"d64f7d6e6d014d40841415cd35a43dcf","id":"d64f7d6e6d014d40841415cd35a43dcf","refname":"花53","key":"53","title":"花53-53"},{"rownum_":5,"login_name":"70","name":"花70","refcode":"70","refpk":"2ff33db8d1e94bcbaf9ba45e1ad6ea9c","id":"2ff33db8d1e94bcbaf9ba45e1ad6ea9c","refname":"花70","key":"70","title":"花70-70"},{"rownum_":6,"login_name":"73","name":"花73","refcode":"73","refpk":"6d8328debfc94d5b8446f58d2b0b3cdc","id":"6d8328debfc94d5b8446f58d2b0b3cdc","refname":"花73","key":"73","title":"花73-73"},{"rownum_":7,"login_name":"76","name":"花76","refcode":"76","refpk":"7768b51dc14544669f2cffa840edb049","id":"7768b51dc14544669f2cffa840edb049","refname":"花76","key":"76","title":"花76-76"},{"rownum_":8,"login_name":"80","name":"花80","refcode":"80","refpk":"a89cc45ed1ec49f19bb608c18c958359","id":"a89cc45ed1ec49f19bb608c18c958359","refname":"花80","key":"80","title":"花80-80"},{"rownum_":9,"login_name":"78","name":"花78","refcode":"78","refpk":"438d0cce9ae442e586940a582c7ee054","id":"438d0cce9ae442e586940a582c7ee054","refname":"花78","key":"78","title":"花78-78"},{"rownum_":10,"login_name":"79","name":"花79","refcode":"79","refpk":"60adbcb7d4cb49449bc7879dd4fbf1f5","id":"60adbcb7d4cb49449bc7879dd4fbf1f5","refname":"花79","key":"79","title":"花79-79"},{"login_name":"zhao","refpk":"14e0220f-1a86-4861-8f74-f7134cb3235b","id":"14e0220f-1a86-4861-8f74-f7134cb3235b","refcode":"zhao","name":"赵宇","refname":"赵宇","key":"zhao","title":"赵宇-zhao"},{"login_name":"chen","refpk":"14e0220f-1a86-4861-8f74-f71343333b5b","id":"14e0220f-1a86-4861-8f74-f71343333b5b","refcode":"chen","name":"陈辉","refname":"陈辉","key":"chen","title":"陈辉-chen"},{"login_name":"yue","refpk":"14e0220f-1a86-4861-8f74-545454547489","id":"14e0220f-1a86-4861-8f74-545454547489","refcode":"yue","name":"岳明","refname":"岳明","key":"yue","title":"岳明-yue"},{"login_name":"xiao","refpk":"14e0220f-1a86-4861-8f74-543434537379","id":"14e0220f-1a86-4861-8f74-543434537379","refcode":"xiao","name":"小羽","refname":"小羽","key":"xiao","title":"小羽-xiao"},{"login_name":"123","refpk":"14e0220f-1a86-4861-8f74-334455643336","id":"14e0220f-1a86-4861-8f74-334455643336","refcode":"123","name":"123","refname":"123","key":"123","title":"123-123"},{"login_name":"huang","refpk":"14e0220f-1a86-4861-8f74-333387127390","id":"14e0220f-1a86-4861-8f74-333387127390","refcode":"huang","name":"黄东东","refname":"黄东东","key":"huang","title":"黄东东-huang"},{"login_name":"liu","refpk":"14e0220f-1a86-4861-8f74-3332332kjffo","id":"14e0220f-1a86-4861-8f74-3332332kjffo","refcode":"liu","name":"刘志鹏","refname":"刘志鹏","key":"liu","title":"刘志鹏-liu"},{"login_name":"liukunlin","refpk":"14e0220f-1a86-4861-8f74-23323e321263","id":"14e0220f-1a86-4861-8f74-23323e321263","refcode":"liukunlin","name":"刘坤琳","refname":"刘坤琳","key":"liukunlin","title":"刘坤琳-liukunlin"}]
|
||||
}
|
||||
this.transferData = [{"rownum_":1,"login_name":"43","name":"花43","refcode":"43","refpk":"718dda50629e4f8a8833b5d17de85280","id":"718dda50629e4f8a8833b5d17de85280","refname":"花43","key":"43","title":"花43-43"},{"rownum_":2,"login_name":"46","name":"花46","refcode":"46","refpk":"b595b95cf45348d7aadb7ae349a89a76","id":"b595b95cf45348d7aadb7ae349a89a76","refname":"花46","key":"46","title":"花46-46"},{"rownum_":3,"login_name":"48","name":"花48","refcode":"48","refpk":"62310dd3677440ef96042b9c3ad135e2","id":"62310dd3677440ef96042b9c3ad135e2","refname":"花48","key":"48","title":"花48-48"},{"rownum_":4,"login_name":"53","name":"花53","refcode":"53","refpk":"d64f7d6e6d014d40841415cd35a43dcf","id":"d64f7d6e6d014d40841415cd35a43dcf","refname":"花53","key":"53","title":"花53-53"},{"rownum_":5,"login_name":"70","name":"花70","refcode":"70","refpk":"2ff33db8d1e94bcbaf9ba45e1ad6ea9c","id":"2ff33db8d1e94bcbaf9ba45e1ad6ea9c","refname":"花70","key":"70","title":"花70-70"},{"rownum_":6,"login_name":"73","name":"花73","refcode":"73","refpk":"6d8328debfc94d5b8446f58d2b0b3cdc","id":"6d8328debfc94d5b8446f58d2b0b3cdc","refname":"花73","key":"73","title":"花73-73"},{"rownum_":7,"login_name":"76","name":"花76","refcode":"76","refpk":"7768b51dc14544669f2cffa840edb049","id":"7768b51dc14544669f2cffa840edb049","refname":"花76","key":"76","title":"花76-76"},{"rownum_":8,"login_name":"80","name":"花80","refcode":"80","refpk":"a89cc45ed1ec49f19bb608c18c958359","id":"a89cc45ed1ec49f19bb608c18c958359","refname":"花80","key":"80","title":"花80-80"},{"rownum_":9,"login_name":"78","name":"花78","refcode":"78","refpk":"438d0cce9ae442e586940a582c7ee054","id":"438d0cce9ae442e586940a582c7ee054","refname":"花78","key":"78","title":"花78-78"},{"rownum_":10,"login_name":"79","name":"花79","refcode":"79","refpk":"60adbcb7d4cb49449bc7879dd4fbf1f5","id":"60adbcb7d4cb49449bc7879dd4fbf1f5","refname":"花79","key":"79","title":"花79-79"},{"login_name":"zhao","refpk":"14e0220f-1a86-4861-8f74-f7134cb3235b","id":"14e0220f-1a86-4861-8f74-f7134cb3235b","refcode":"zhao","name":"赵宇","refname":"赵宇","key":"zhao","title":"赵宇-zhao"},{"login_name":"chen","refpk":"14e0220f-1a86-4861-8f74-f71343333b5b","id":"14e0220f-1a86-4861-8f74-f71343333b5b","refcode":"chen","name":"陈辉","refname":"陈辉","key":"chen","title":"陈辉-chen"},{"login_name":"yue","refpk":"14e0220f-1a86-4861-8f74-545454547489","id":"14e0220f-1a86-4861-8f74-545454547489","refcode":"yue","name":"岳明","refname":"岳明","key":"yue","title":"岳明-yue"},{"login_name":"xiao","refpk":"14e0220f-1a86-4861-8f74-543434537379","id":"14e0220f-1a86-4861-8f74-543434537379","refcode":"xiao","name":"小羽","refname":"小羽","key":"xiao","title":"小羽-xiao"},{"login_name":"123","refpk":"14e0220f-1a86-4861-8f74-334455643336","id":"14e0220f-1a86-4861-8f74-334455643336","refcode":"123","name":"123","refname":"123","key":"123","title":"123-123"},{"login_name":"huang","refpk":"14e0220f-1a86-4861-8f74-333387127390","id":"14e0220f-1a86-4861-8f74-333387127390","refcode":"huang","name":"黄东东","refname":"黄东东","key":"huang","title":"黄东东-huang"},{"login_name":"liu","refpk":"14e0220f-1a86-4861-8f74-3332332kjffo","id":"14e0220f-1a86-4861-8f74-3332332kjffo","refcode":"liu","name":"刘志鹏","refname":"刘志鹏","key":"liu","title":"刘志鹏-liu"},{"login_name":"liukunlin","refpk":"14e0220f-1a86-4861-8f74-23323e321263","id":"14e0220f-1a86-4861-8f74-23323e321263","refcode":"liukunlin","name":"刘坤琳","refname":"刘坤琳","key":"liukunlin","title":"刘坤琳-liukunlin"}];
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const dataList = [];
|
||||
const generateList = (data) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const node = data[i];
|
||||
const key = node[valueField];
|
||||
const title = node.refname;
|
||||
dataList.push({
|
||||
key,
|
||||
title
|
||||
});
|
||||
if (node.children) {
|
||||
generateList(node.children, node.key);
|
||||
}
|
||||
}
|
||||
};
|
||||
generateList(nextProps.data);
|
||||
this.setState({
|
||||
dataList
|
||||
})
|
||||
}
|
||||
|
||||
handleTransferChange = (nextTargetKeys, direction, moveKeys) => {
|
||||
this.setState({ targetKeys: nextTargetKeys });
|
||||
|
||||
console.log('targetKeys: ', nextTargetKeys);
|
||||
console.log('direction: ', direction);
|
||||
console.log('moveKeys: ', moveKeys);
|
||||
}
|
||||
|
||||
handleTransferSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
|
||||
this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
|
||||
|
||||
console.log('sourceSelectedKeys: ', sourceSelectedKeys);
|
||||
console.log('targetSelectedKeys: ', targetSelectedKeys);
|
||||
}
|
||||
|
||||
handleTreeSelect = (selectNode = {}) => {
|
||||
let {targetKeys,transferData} = this.state;
|
||||
let startFlag,endFlag;
|
||||
if(selectNode.refcode==="fzl"){
|
||||
startFlag = 10;
|
||||
endFlag = 18
|
||||
}else if(selectNode.refcode === 'wujd'){
|
||||
startFlag = 0;
|
||||
endFlag = 10;
|
||||
}else{
|
||||
startFlag=0;
|
||||
endFlag=18;
|
||||
}
|
||||
let selectedData = this.transferData.filter(v => {
|
||||
return targetKeys.some(key => key == v['refcode'])
|
||||
});
|
||||
let temp = this.transferData.slice(startFlag,endFlag)
|
||||
let tempTransferData = temp.concat(selectedData);
|
||||
console.log('=====',targetKeys,'=====')
|
||||
this.setState({
|
||||
transferData:tempTransferData,
|
||||
});
|
||||
}
|
||||
|
||||
onTreeSelect = (selectedKeys, e) => {
|
||||
if (selectedKeys.length === 0) {
|
||||
return
|
||||
}
|
||||
var fullInfo = {};
|
||||
const loopSearch = (arr, key) => {
|
||||
if (!arr) { return }
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i][valueField] == key) {
|
||||
fullInfo = arr[i];
|
||||
} else {
|
||||
loopSearch(arr[i].children, key)
|
||||
}
|
||||
}
|
||||
}
|
||||
loopSearch(treeData, selectedKeys[0])
|
||||
this.handleTreeSelect(fullInfo)
|
||||
}
|
||||
|
||||
onExpand = (expandedKeys) => {
|
||||
this.setState({
|
||||
expandedKeys,
|
||||
autoExpandParent: false,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
selectedKeys,
|
||||
expandedKeys,
|
||||
autoExpandParent,
|
||||
transferData,
|
||||
targetKeys
|
||||
} = this.state;
|
||||
const loop = treeData => treeData.map((item) => {
|
||||
if (item.children && item.children.length > 0) {
|
||||
return (
|
||||
<TreeNode key={item[valueField]} title={item.refname}>
|
||||
{loop(item.children)}
|
||||
</TreeNode>
|
||||
);
|
||||
}
|
||||
return <TreeNode key={item[valueField]} title={item.refname} isLeaf={true} />;
|
||||
});
|
||||
return (
|
||||
<div className="demo8">
|
||||
<Tree
|
||||
checkStrictly={false}
|
||||
multiple={false}
|
||||
onExpand={this.onExpand}
|
||||
defaultExpandAll={true}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={autoExpandParent}
|
||||
onSelect={this.onTreeSelect}
|
||||
>
|
||||
{loop(treeData)}
|
||||
</Tree>
|
||||
<Transfer
|
||||
dataSource={transferData}
|
||||
targetKeys={targetKeys}
|
||||
selectedKeys={selectedKeys}
|
||||
onChange={this.handleTransferChange}
|
||||
onSelectChange={this.handleTransferSelectChange}
|
||||
render={item => item.title}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default Demo8
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
.demo8{
|
||||
.u-tree{
|
||||
max-width: 220px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 220px;
|
||||
max-height: 525px;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
.u-transfer{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: calc(100% - 235px);
|
||||
max-height: 525px;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -200,4 +200,38 @@
|
|||
100% {
|
||||
background: transparent; } }
|
||||
|
||||
.demo7 {
|
||||
width: 476px;
|
||||
position: relative; }
|
||||
.demo7 .moveBtn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 8px;
|
||||
min-width: 40px;
|
||||
z-index: 10;
|
||||
color: #86939E;
|
||||
cursor: pointer; }
|
||||
.demo7 .moveBtn.moveUpBtn {
|
||||
margin-top: 69px; }
|
||||
.demo7 .moveBtn.moveDownBtn {
|
||||
margin-top: 100px; }
|
||||
|
||||
.demo8 .u-tree {
|
||||
max-width: 220px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 220px;
|
||||
max-height: 525px;
|
||||
box-sizing: border-box;
|
||||
text-align: left; }
|
||||
|
||||
.demo8 .u-transfer {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: calc(100% - 235px);
|
||||
max-height: 525px;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
overflow: auto; }
|
||||
|
||||
/*# sourceMappingURL=demo.css.map */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -44,6 +44,7 @@ import 'bee-transfer/build/Transfer.css';
|
|||
|onSearchChange|当搜索域变化的回调函数 参数(direction: 'left'|'right', event: Event)|func|-|
|
||||
|showCheckbox|是否显示Checkbox复选框|bool|true|
|
||||
|draggable|是否可以通过拖拽进行穿梭和排序|bool|false|
|
||||
|appendToBottom|是否将已选项追加到右侧列表末尾|bool|false|
|
||||
|
||||
## 注意事项
|
||||
按照 React 的规范，所有的组件数组必须绑定 key。在 Transfer 中，dataSource里的数据值需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。
|
||||
|
|
|
|||
|
|
@ -133,6 +133,7 @@
|
|||
"requires": {
|
||||
"babel-runtime": "^6.26.0",
|
||||
"bee-button": "^2.0.10",
|
||||
"bee-form-control": "^2.0.2",
|
||||
"bee-icon": "^1.0.10",
|
||||
"bee-locale": "^0.0.12",
|
||||
"bee-modal": "^2.0.2",
|
||||
|
|
@ -146,15 +147,17 @@
|
|||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
|
||||
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"core-js": "^2.4.0",
|
||||
"regenerator-runtime": "^0.11.0"
|
||||
}
|
||||
},
|
||||
"bee-form-control": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "http://172.20.58.69:8081/repository/ynpm-all/bee-form-control/-/bee-form-control-1.1.11.tgz",
|
||||
"integrity": "sha512-9E4jfLUlOz/TIt69bOEYrFiJPUSbBvB1rz1HEuZ0kkc5PGSeVlockX/TPAugfOL2xVA6wMJ8LTGkBRcREKcAeA==",
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npm.taobao.org/bee-form-control/download/bee-form-control-2.0.2.tgz",
|
||||
"integrity": "sha1-JdolzdeL0wuse0hRo89Y6g5lhXg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bee-icon": "^1.0.3",
|
||||
"classnames": "^2.2.5",
|
||||
|
|
@ -167,6 +170,7 @@
|
|||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/bee-icon/-/bee-icon-1.0.10.tgz",
|
||||
"integrity": "sha512-ceoBVYg3TmTElju2WSxB6aklhTtWjN/wLoQ3kzb/NuFPLPXBBSqIcGrjOXszhE32TpPzPSH7V0nhqaMniEpNBw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"babel-runtime": "^6.23.0",
|
||||
"classnames": "^2.2.5",
|
||||
|
|
@ -182,6 +186,7 @@
|
|||
"dev": true,
|
||||
"requires": {
|
||||
"bee-button": "^2.0.10",
|
||||
"bee-form-control": "^2.0.2",
|
||||
"bee-input-group": "^2.0.2",
|
||||
"classnames": "^2.2.5",
|
||||
"moment": "^2.17.1",
|
||||
|
|
@ -193,9 +198,10 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"bee-form-control": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "http://172.20.58.69:8081/repository/ynpm-all/bee-form-control/-/bee-form-control-1.1.11.tgz",
|
||||
"integrity": "sha512-9E4jfLUlOz/TIt69bOEYrFiJPUSbBvB1rz1HEuZ0kkc5PGSeVlockX/TPAugfOL2xVA6wMJ8LTGkBRcREKcAeA==",
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npm.taobao.org/bee-form-control/download/bee-form-control-2.0.2.tgz",
|
||||
"integrity": "sha1-JdolzdeL0wuse0hRo89Y6g5lhXg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bee-icon": "^1.0.3",
|
||||
"classnames": "^2.2.5",
|
||||
|
|
@ -206,6 +212,20 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"bee-dnd": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npm.taobao.org/bee-dnd/download/bee-dnd-1.1.2.tgz",
|
||||
"integrity": "sha1-l9JhuIW4Pj9lMt2pl8R+pgYu50M=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"babel-runtime": "^6.26.0",
|
||||
"classnames": "^2.2.5",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"react-beautiful-dnd": "^9.0.2",
|
||||
"react-draggable": "^3.0.2",
|
||||
"tinper-bee-core": "^2.0.30"
|
||||
}
|
||||
},
|
||||
"bee-drawer": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/bee-drawer/-/bee-drawer-0.0.2.tgz",
|
||||
|
|
@ -578,6 +598,58 @@
|
|||
"tinper-bee-core": "^2.0.30"
|
||||
}
|
||||
},
|
||||
"bee-tree": {
|
||||
"version": "2.0.11",
|
||||
"resolved": "https://registry.npm.taobao.org/bee-tree/download/bee-tree-2.0.11.tgz",
|
||||
"integrity": "sha1-MYDAcYIWmRjoO/+s33V0lsV0kck=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"babel-runtime": "^6.23.0",
|
||||
"bee-animate": "^1.0.0",
|
||||
"bee-checkbox": "^2.0.5",
|
||||
"bee-modal": "^2.0.8",
|
||||
"classnames": "^2.2.5",
|
||||
"tinper-bee-core": "^2.0.30"
|
||||
},
|
||||
"dependencies": {
|
||||
"bee-modal": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npm.taobao.org/bee-modal/download/bee-modal-2.0.8.tgz",
|
||||
"integrity": "sha1-krssC3PSkn16c0ETkW03EQKeIts=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bee-datepicker": "^2.0.6",
|
||||
"bee-dnd": "^1.1.2",
|
||||
"bee-loading": "^1.0.9",
|
||||
"bee-overlay": "^1.0.2",
|
||||
"bee-popconfirm": "^2.0.0",
|
||||
"bee-select": "^2.0.4",
|
||||
"bee-transition": "^0.2.2",
|
||||
"classnames": "^2.2.5",
|
||||
"dom-helpers": "3.0.0",
|
||||
"re-resizable": "^4.11.0",
|
||||
"tinper-bee-core": "^2.0.30"
|
||||
}
|
||||
},
|
||||
"bee-transition": {
|
||||
"version": "0.2.4",
|
||||
"resolved": "https://registry.npm.taobao.org/bee-transition/download/bee-transition-0.2.4.tgz",
|
||||
"integrity": "sha1-wwBNv1M5nUYnVu4Yn5TkmV3C0Xc=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"classnames": "^2.2.5",
|
||||
"dom-helpers": "^3.0.0",
|
||||
"tinper-bee-core": "^2.0.30"
|
||||
}
|
||||
},
|
||||
"dom-helpers": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/dom-helpers/download/dom-helpers-3.0.0.tgz",
|
||||
"integrity": "sha1-EkhpzqPwnb/4Qlb+3n82YWzP7iM=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"body-parser": {
|
||||
"version": "1.18.3",
|
||||
"resolved": "http://172.20.58.69:8081/repository/ynpm-all/body-parser/-/body-parser-1.18.3.tgz",
|
||||
|
|
@ -1693,6 +1765,12 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"re-resizable": {
|
||||
"version": "4.11.0",
|
||||
"resolved": "https://registry.npm.taobao.org/re-resizable/download/re-resizable-4.11.0.tgz",
|
||||
"integrity": "sha1-1d8QvaRFxOwJRXUaIjvxla+2GJA=",
|
||||
"dev": true
|
||||
},
|
||||
"react": {
|
||||
"version": "15.3.2",
|
||||
"resolved": "http://172.20.23.233:8081/repository/ynpm-all/react/-/react-15.3.2.tgz",
|
||||
|
|
@ -1732,6 +1810,16 @@
|
|||
"integrity": "sha1-xGsKpTgNe4OOelnEp77/LtMVUx8=",
|
||||
"dev": true
|
||||
},
|
||||
"react-draggable": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npm.taobao.org/react-draggable/download/react-draggable-3.3.0.tgz",
|
||||
"integrity": "sha1-LtfqP5Ln10LXR/nmMkhgYGzU2Zc=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"classnames": "^2.2.5",
|
||||
"prop-types": "^15.6.0"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.8.6",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@
|
|||
"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",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ const defaultProps = {
|
|||
searchPlaceholder: 'Search',
|
||||
notFoundContent: 'Not Found',
|
||||
showCheckbox: true,
|
||||
draggable: false
|
||||
draggable: false,
|
||||
appendToBottom: false
|
||||
};
|
||||
|
||||
const propTypes = {
|
||||
|
|
@ -39,7 +40,8 @@ const propTypes = {
|
|||
rowKey: PropTypes.func,
|
||||
lazy: PropTypes.object,
|
||||
showCheckbox: PropTypes.bool,
|
||||
draggable: PropTypes.bool
|
||||
draggable: PropTypes.bool,
|
||||
appendToBottom: PropTypes.bool
|
||||
};
|
||||
|
||||
const defaultTitles = ['', ''];
|
||||
|
|
@ -126,9 +128,17 @@ class Transfer extends React.Component{
|
|||
let dataSource = newDataSource || this.props.dataSource;
|
||||
|
||||
dataSource = this.addUniqueKey(dataSource);
|
||||
this.allSourceKeys = dataSource.map(({key}) => key);
|
||||
|
||||
const leftDataSource = dataSource.filter(({ key }) => targetKeys.indexOf(key) === -1);
|
||||
const rightDataSource = dataSource.filter(({key}) => targetKeys.indexOf(key) > -1);
|
||||
// const rightDataSource = dataSource.filter(({key}) => targetKeys.indexOf(key) > -1);
|
||||
// 右侧数据源根据传入的targetKeys进行排序
|
||||
let rightDataSource = [];
|
||||
let tempIndex = -1;
|
||||
targetKeys.forEach((key) => {
|
||||
tempIndex = this.allSourceKeys.indexOf(key);
|
||||
rightDataSource.push(dataSource[tempIndex]);
|
||||
})
|
||||
|
||||
this.splitedDataSource = {
|
||||
leftDataSource,
|
||||
|
|
@ -176,13 +186,13 @@ class Transfer extends React.Component{
|
|||
}
|
||||
|
||||
moveTo = (direction) => {
|
||||
const { targetKeys = [], onChange } = this.props;
|
||||
// debugger
|
||||
const { targetKeys = [], onChange, appendToBottom } = this.props;
|
||||
const { sourceSelectedKeys, targetSelectedKeys, leftDataSource, rightDataSource, droppableId } = this.state;
|
||||
const moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
|
||||
let temp = appendToBottom ? targetKeys.concat(moveKeys) : moveKeys.concat(targetKeys);
|
||||
// move items to target box
|
||||
const newTargetKeys = direction === 'right'
|
||||
? moveKeys.concat(targetKeys)
|
||||
? temp
|
||||
: targetKeys.filter(targetKey => moveKeys.indexOf(targetKey) === -1);
|
||||
|
||||
// empty checked keys
|
||||
|
|
@ -190,7 +200,6 @@ class Transfer extends React.Component{
|
|||
this.setState({
|
||||
[this.getSelectedKeysName(oppositeDirection)]: [],
|
||||
});
|
||||
// debugger
|
||||
this.handleSelectChange(oppositeDirection, []);
|
||||
|
||||
if (onChange) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue