异步加载问题
This commit is contained in:
yangchch6
parent
259d69d0cb
commit
a74db774cd
|
|
@ -1,14 +1,14 @@
|
|||
'use strict';
|
||||
|
||||
/**
|
||||
* Copyright 2013-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule ReactComponentWithPureRenderMixin
|
||||
/**
|
||||
* Copyright 2013-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule ReactComponentWithPureRenderMixin
|
||||
*/
|
||||
|
||||
var shallowEqual = require('shallowequal');
|
||||
|
|
@ -17,31 +17,31 @@ function shallowCompare(instance, nextProps, nextState) {
|
|||
return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState);
|
||||
}
|
||||
|
||||
/**
|
||||
* If your React component's render function is "pure", e.g. it will render the
|
||||
* same result given the same props and state, provide this mixin for a
|
||||
* considerable performance boost.
|
||||
*
|
||||
* Most React components have pure render functions.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* var ReactComponentWithPureRenderMixin =
|
||||
* require('ReactComponentWithPureRenderMixin');
|
||||
* React.createClass({
|
||||
* mixins: [ReactComponentWithPureRenderMixin],
|
||||
*
|
||||
* render: function() {
|
||||
* return <div className={this.props.className}>foo</div>;
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* Note: This only checks shallow equality for props and state. If these contain
|
||||
* complex data structures this mixin may have false-negatives for deeper
|
||||
* differences. Only mixin to components which have simple props and state, or
|
||||
* use `forceUpdate()` when you know deep data structures have changed.
|
||||
*
|
||||
* See https://facebook.github.io/react/docs/pure-render-mixin.html
|
||||
/**
|
||||
* If your React component's render function is "pure", e.g. it will render the
|
||||
* same result given the same props and state, provide this mixin for a
|
||||
* considerable performance boost.
|
||||
*
|
||||
* Most React components have pure render functions.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* var ReactComponentWithPureRenderMixin =
|
||||
* require('ReactComponentWithPureRenderMixin');
|
||||
* React.createClass({
|
||||
* mixins: [ReactComponentWithPureRenderMixin],
|
||||
*
|
||||
* render: function() {
|
||||
* return <div className={this.props.className}>foo</div>;
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* Note: This only checks shallow equality for props and state. If these contain
|
||||
* complex data structures this mixin may have false-negatives for deeper
|
||||
* differences. Only mixin to components which have simple props and state, or
|
||||
* use `forceUpdate()` when you know deep data structures have changed.
|
||||
*
|
||||
* See https://facebook.github.io/react/docs/pure-render-mixin.html
|
||||
*/
|
||||
var ReactComponentWithPureRenderMixin = {
|
||||
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
|
||||
|
|
|
|||
1690
build/Transfer.css
1690
build/Transfer.css
File diff suppressed because it is too large
Load Diff
|
|
@ -28,14 +28,18 @@ var _propTypes = require('prop-types');
|
|||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
var _reactBeautifulDnd = require('react-beautiful-dnd');
|
||||
|
||||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||
var _utils = require('./utils');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
||||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
|
@ -47,7 +51,11 @@ function noop() {}
|
|||
var defaultProps = {
|
||||
dataSource: [],
|
||||
render: noop,
|
||||
showSearch: false
|
||||
showSearch: false,
|
||||
searchPlaceholder: 'Search',
|
||||
notFoundContent: 'Not Found',
|
||||
showCheckbox: true,
|
||||
draggable: false
|
||||
};
|
||||
|
||||
var propTypes = {
|
||||
|
|
@ -68,7 +76,9 @@ var propTypes = {
|
|||
body: _propTypes2["default"].func,
|
||||
footer: _propTypes2["default"].func,
|
||||
rowKey: _propTypes2["default"].func,
|
||||
lazy: _propTypes2["default"].object
|
||||
lazy: _propTypes2["default"].object,
|
||||
showCheckbox: _propTypes2["default"].bool,
|
||||
draggable: _propTypes2["default"].bool
|
||||
};
|
||||
|
||||
var defaultTitles = ['', ''];
|
||||
|
|
@ -96,17 +106,24 @@ var Transfer = function (_React$Component) {
|
|||
}),
|
||||
targetSelectedKeys: selectedKeys.filter(function (key) {
|
||||
return targetKeys.indexOf(key) > -1;
|
||||
})
|
||||
}),
|
||||
leftDataSource: [],
|
||||
rightDataSource: []
|
||||
};
|
||||
_this.cacheTargetKeys = [].concat(_toConsumableArray(targetKeys));
|
||||
return _this;
|
||||
}
|
||||
|
||||
Transfer.prototype.componentDidMount = function componentDidMount() {
|
||||
this.splitDataSource();
|
||||
};
|
||||
|
||||
Transfer.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
var _state = this.state,
|
||||
sourceSelectedKeys = _state.sourceSelectedKeys,
|
||||
targetSelectedKeys = _state.targetSelectedKeys;
|
||||
|
||||
if (nextProps.targetKeys !== this.props.targetKeys || nextProps.dataSource !== this.props.dataSource) {
|
||||
if (nextProps.targetKeys !== this.props.targetKeys || nextProps.dataSource !== this.props.dataSource || nextProps.targetKeys !== this.cacheTargetKeys) {
|
||||
var existInDateSourcekey = function existInDateSourcekey(key) {
|
||||
return dataSource.filter(function (item) {
|
||||
return item.key === key;
|
||||
|
|
@ -134,6 +151,7 @@ var Transfer = function (_React$Component) {
|
|||
}).length > 0;
|
||||
})
|
||||
});
|
||||
this.splitDataSource(targetKeys, dataSource);
|
||||
}
|
||||
if (nextProps.selectedKeys) {
|
||||
var _targetKeys = nextProps.targetKeys;
|
||||
|
|
@ -147,18 +165,24 @@ var Transfer = function (_React$Component) {
|
|||
});
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 从dataSource中分离出leftDataSource和rightDataSource
|
||||
* @param {*} newTargetKeys 更新后的targetKeys
|
||||
* @param {*} newDataSource 异步加载数据源时，从nextProps中获取的dataSource
|
||||
*/
|
||||
|
||||
Transfer.prototype.splitDataSource = function splitDataSource() {
|
||||
|
||||
Transfer.prototype.splitDataSource = function splitDataSource(newTargetKeys, newDataSource) {
|
||||
// targetKeys：展示在右边列表的数据集
|
||||
if (this.splitedDataSource) {
|
||||
return this.splitedDataSource;
|
||||
}
|
||||
|
||||
var _props = this.props,
|
||||
rowKey = _props.rowKey,
|
||||
dataSource = _props.dataSource,
|
||||
_props$targetKeys2 = _props.targetKeys,
|
||||
targetKeys = _props$targetKeys2 === undefined ? [] : _props$targetKeys2;
|
||||
var rowKey = this.props.rowKey;
|
||||
|
||||
var targetKeys = newTargetKeys || this.props.targetKeys;
|
||||
//异步加载数据源时
|
||||
var dataSource = newDataSource || this.props.dataSource;
|
||||
if (rowKey) {
|
||||
dataSource.forEach(function (record) {
|
||||
record.key = rowKey(record);
|
||||
|
|
@ -169,25 +193,30 @@ var Transfer = function (_React$Component) {
|
|||
var key = _ref.key;
|
||||
return targetKeys.indexOf(key) === -1;
|
||||
});
|
||||
var rightDataSource = [];
|
||||
targetKeys.forEach(function (targetKey) {
|
||||
var targetItem = dataSource.filter(function (record) {
|
||||
return record.key === targetKey;
|
||||
})[0];
|
||||
if (targetItem) {
|
||||
rightDataSource.push(targetItem);
|
||||
}
|
||||
var rightDataSource = dataSource.filter(function (_ref2) {
|
||||
var key = _ref2.key;
|
||||
return targetKeys.indexOf(key) > -1;
|
||||
});
|
||||
|
||||
this.splitedDataSource = {
|
||||
leftDataSource: leftDataSource,
|
||||
rightDataSource: rightDataSource
|
||||
};
|
||||
this.setState({
|
||||
leftDataSource: leftDataSource,
|
||||
rightDataSource: rightDataSource
|
||||
});
|
||||
|
||||
return this.splitedDataSource;
|
||||
};
|
||||
|
||||
/**
|
||||
* List中的item选中/未选中状态改变时触发
|
||||
* @param {*} direction 'left' or 'right'
|
||||
* @param {*} holder 更新后的'sourceSelectedKeys' or 'targetSelectedKeys'
|
||||
*/
|
||||
Transfer.prototype.handleSelectChange = function handleSelectChange(direction, holder) {
|
||||
// onSelectChange：当选中的item发生改变时的回调 参数(sourceSelectedKeys, targetSelectedKeys)
|
||||
var _state2 = this.state,
|
||||
sourceSelectedKeys = _state2.sourceSelectedKeys,
|
||||
targetSelectedKeys = _state2.targetSelectedKeys;
|
||||
|
|
@ -204,36 +233,76 @@ var Transfer = function (_React$Component) {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 左侧列表全选事件
|
||||
* @param filteredDataSource dataSource中刨去设置为disabled的部分
|
||||
* @param checkAll 是否是全选状态 true：全选
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 搜索框值更改事件
|
||||
* @param direction 'left' or 'right'
|
||||
* @param value 输入的值
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 清空搜索框内容
|
||||
* @param direction 'left' or 'right'
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 点击list item，选中或取消选中
|
||||
* @param direction 'left' or 'right'
|
||||
* @param selectedItem 选中的item的信息，和dataSource数据源中的item信息一致
|
||||
* @param checked 是否已勾选，true：已勾选 false：未勾选
|
||||
*/
|
||||
|
||||
|
||||
Transfer.prototype.getSelectedKeysName = function getSelectedKeysName(direction) {
|
||||
return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys';
|
||||
};
|
||||
|
||||
/**
|
||||
* 拖拽结束时触发
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 拖拽开始时触发
|
||||
*/
|
||||
|
||||
|
||||
Transfer.prototype.render = function render() {
|
||||
var _props2 = this.props,
|
||||
_props2$prefixCls = _props2.prefixCls,
|
||||
prefixCls = _props2$prefixCls === undefined ? 'u-transfer' : _props2$prefixCls,
|
||||
_props2$operations = _props2.operations,
|
||||
operations = _props2$operations === undefined ? [] : _props2$operations,
|
||||
showSearch = _props2.showSearch,
|
||||
notFoundContent = _props2.notFoundContent,
|
||||
searchPlaceholder = _props2.searchPlaceholder,
|
||||
body = _props2.body,
|
||||
footer = _props2.footer,
|
||||
listStyle = _props2.listStyle,
|
||||
_props2$className = _props2.className,
|
||||
className = _props2$className === undefined ? '' : _props2$className,
|
||||
filterOption = _props2.filterOption,
|
||||
render = _props2.render,
|
||||
lazy = _props2.lazy;
|
||||
var _props = this.props,
|
||||
_props$prefixCls = _props.prefixCls,
|
||||
prefixCls = _props$prefixCls === undefined ? 'u-transfer' : _props$prefixCls,
|
||||
_props$operations = _props.operations,
|
||||
operations = _props$operations === undefined ? [] : _props$operations,
|
||||
showSearch = _props.showSearch,
|
||||
notFoundContent = _props.notFoundContent,
|
||||
searchPlaceholder = _props.searchPlaceholder,
|
||||
body = _props.body,
|
||||
footer = _props.footer,
|
||||
listStyle = _props.listStyle,
|
||||
_props$className = _props.className,
|
||||
className = _props$className === undefined ? '' : _props$className,
|
||||
filterOption = _props.filterOption,
|
||||
render = _props.render,
|
||||
lazy = _props.lazy,
|
||||
showCheckbox = _props.showCheckbox,
|
||||
draggable = _props.draggable;
|
||||
var _state3 = this.state,
|
||||
leftFilter = _state3.leftFilter,
|
||||
rightFilter = _state3.rightFilter,
|
||||
sourceSelectedKeys = _state3.sourceSelectedKeys,
|
||||
targetSelectedKeys = _state3.targetSelectedKeys;
|
||||
targetSelectedKeys = _state3.targetSelectedKeys,
|
||||
leftDataSource = _state3.leftDataSource,
|
||||
rightDataSource = _state3.rightDataSource;
|
||||
|
||||
var _splitDataSource = this.splitDataSource(this.props),
|
||||
leftDataSource = _splitDataSource.leftDataSource,
|
||||
rightDataSource = _splitDataSource.rightDataSource;
|
||||
// const { leftDataSource, rightDataSource } = this.splitDataSource(this.props);
|
||||
|
||||
var leftActive = targetSelectedKeys.length > 0;
|
||||
var rightActive = sourceSelectedKeys.length > 0;
|
||||
|
|
@ -244,55 +313,65 @@ var Transfer = function (_React$Component) {
|
|||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: cls },
|
||||
_react2["default"].createElement(_list2["default"], {
|
||||
titleText: titles[0],
|
||||
dataSource: leftDataSource,
|
||||
filter: leftFilter,
|
||||
filterOption: filterOption,
|
||||
style: listStyle,
|
||||
checkedKeys: sourceSelectedKeys,
|
||||
handleFilter: this.handleLeftFilter,
|
||||
handleClear: this.handleLeftClear,
|
||||
handleSelect: this.handleLeftSelect,
|
||||
handleSelectAll: this.handleLeftSelectAll,
|
||||
render: render,
|
||||
showSearch: showSearch,
|
||||
searchPlaceholder: searchPlaceholder,
|
||||
notFoundContent: notFoundContent,
|
||||
body: body,
|
||||
footer: footer,
|
||||
prefixCls: prefixCls + '-list',
|
||||
lazy: lazy
|
||||
}),
|
||||
_react2["default"].createElement(_operation2["default"], {
|
||||
rightActive: rightActive,
|
||||
rightArrowText: operations[0],
|
||||
moveToRight: this.moveToRight,
|
||||
leftActive: leftActive,
|
||||
leftArrowText: operations[1],
|
||||
moveToLeft: this.moveToLeft,
|
||||
className: prefixCls + '-operation'
|
||||
}),
|
||||
_react2["default"].createElement(_list2["default"], {
|
||||
titleText: titles[1],
|
||||
dataSource: rightDataSource,
|
||||
filter: rightFilter,
|
||||
filterOption: filterOption,
|
||||
style: listStyle,
|
||||
checkedKeys: targetSelectedKeys,
|
||||
handleFilter: this.handleRightFilter,
|
||||
handleClear: this.handleRightClear,
|
||||
handleSelect: this.handleRightSelect,
|
||||
handleSelectAll: this.handleRightSelectAll,
|
||||
render: render,
|
||||
showSearch: showSearch,
|
||||
searchPlaceholder: searchPlaceholder,
|
||||
notFoundContent: notFoundContent,
|
||||
body: body,
|
||||
footer: footer,
|
||||
prefixCls: prefixCls + '-list',
|
||||
lazy: lazy
|
||||
})
|
||||
_react2["default"].createElement(
|
||||
_reactBeautifulDnd.DragDropContext,
|
||||
{ onDragEnd: this.onDragEnd, onDragStart: this.onDragStart },
|
||||
_react2["default"].createElement(_list2["default"], {
|
||||
titleText: titles[0] //左侧标题
|
||||
, dataSource: leftDataSource //左侧数据源
|
||||
, filter: leftFilter //搜索框中输入的内容
|
||||
, filterOption: filterOption //搜索过滤方法 参数(inputValue, option)
|
||||
, style: listStyle //自定义的columns的样式表
|
||||
, checkedKeys: sourceSelectedKeys //左侧已勾选的item的keys
|
||||
, handleFilter: this.handleLeftFilter //左侧搜索框值更改事件
|
||||
, handleClear: this.handleLeftClear //清空左侧搜索框内容
|
||||
, handleSelect: this.handleLeftSelect //点击左侧列表中的item，改变选中或取消选中状态
|
||||
, handleSelectAll: this.handleLeftSelectAll //点击左侧全选
|
||||
, render: render,
|
||||
showSearch: showSearch //是否显示搜索框
|
||||
, searchPlaceholder: searchPlaceholder //搜索框placeholder
|
||||
, notFoundContent: notFoundContent //当没有相关内容的显示内容
|
||||
, body: body,
|
||||
footer: footer,
|
||||
prefixCls: prefixCls + '-list',
|
||||
lazy: lazy,
|
||||
showCheckbox: showCheckbox,
|
||||
draggable: draggable,
|
||||
id: '1'
|
||||
}),
|
||||
!draggable ? _react2["default"].createElement(_operation2["default"], {
|
||||
rightActive: rightActive,
|
||||
rightArrowText: operations[0],
|
||||
moveToRight: this.moveToRight,
|
||||
leftActive: leftActive,
|
||||
leftArrowText: operations[1],
|
||||
moveToLeft: this.moveToLeft,
|
||||
className: prefixCls + '-operation'
|
||||
}) : '',
|
||||
_react2["default"].createElement(_list2["default"], {
|
||||
titleText: titles[1] //右侧标题
|
||||
, dataSource: rightDataSource //右侧数据源
|
||||
, filter: rightFilter //搜索框中输入的内容
|
||||
, filterOption: filterOption //搜索过滤方法 参数(inputValue, option)
|
||||
, style: listStyle //自定义的columns的样式表
|
||||
, checkedKeys: targetSelectedKeys //右侧已勾选的item的keys
|
||||
, handleFilter: this.handleRightFilter //右侧搜索框值更改事件
|
||||
, handleClear: this.handleRightClear //清空右侧搜索框内容
|
||||
, handleSelect: this.handleRightSelect //点击右侧列表中的item，改变选中或取消选中状态
|
||||
, handleSelectAll: this.handleRightSelectAll //点击右侧全选
|
||||
, render: render,
|
||||
showSearch: showSearch //是否显示搜索框
|
||||
, searchPlaceholder: searchPlaceholder //搜索框placeholder
|
||||
, notFoundContent: notFoundContent //当没有相关内容的显示内容
|
||||
, body: body,
|
||||
footer: footer,
|
||||
prefixCls: prefixCls + '-list',
|
||||
lazy: lazy,
|
||||
showCheckbox: showCheckbox,
|
||||
draggable: draggable,
|
||||
id: '2'
|
||||
})
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -303,10 +382,12 @@ var _initialiseProps = function _initialiseProps() {
|
|||
var _this2 = this;
|
||||
|
||||
this.moveTo = function (direction) {
|
||||
var _props3 = _this2.props,
|
||||
_props3$targetKeys = _props3.targetKeys,
|
||||
targetKeys = _props3$targetKeys === undefined ? [] : _props3$targetKeys,
|
||||
onChange = _props3.onChange;
|
||||
var _props2 = _this2.props,
|
||||
_props2$targetKeys = _props2.targetKeys,
|
||||
targetKeys = _props2$targetKeys === undefined ? [] : _props2$targetKeys,
|
||||
onChange = _props2.onChange;
|
||||
// debugger
|
||||
|
||||
var _state4 = _this2.state,
|
||||
sourceSelectedKeys = _state4.sourceSelectedKeys,
|
||||
targetSelectedKeys = _state4.targetSelectedKeys;
|
||||
|
|
@ -320,11 +401,13 @@ var _initialiseProps = function _initialiseProps() {
|
|||
// empty checked keys
|
||||
var oppositeDirection = direction === 'right' ? 'left' : 'right';
|
||||
_this2.setState(_defineProperty({}, _this2.getSelectedKeysName(oppositeDirection), []));
|
||||
// debugger
|
||||
_this2.handleSelectChange(oppositeDirection, []);
|
||||
|
||||
if (onChange) {
|
||||
onChange(newTargetKeys, direction, moveKeys);
|
||||
}
|
||||
_this2.splitDataSource(newTargetKeys);
|
||||
};
|
||||
|
||||
this.moveToLeft = function () {
|
||||
|
|
@ -347,23 +430,23 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.handleLeftSelectAll = function (filteredDataSource, checkAll) {
|
||||
return _this2.handleSelectAll('left', filteredDataSource, checkAll);
|
||||
_this2.handleSelectAll('left', filteredDataSource, checkAll);
|
||||
};
|
||||
|
||||
this.handleRightSelectAll = function (filteredDataSource, checkAll) {
|
||||
return _this2.handleSelectAll('right', filteredDataSource, checkAll);
|
||||
};
|
||||
|
||||
this.handleFilter = function (direction, e) {
|
||||
_this2.setState(_defineProperty({}, direction + 'Filter', e));
|
||||
this.handleFilter = function (direction, value) {
|
||||
_this2.setState(_defineProperty({}, direction + 'Filter', value));
|
||||
};
|
||||
|
||||
this.handleLeftFilter = function (e) {
|
||||
return _this2.handleFilter('left', e);
|
||||
this.handleLeftFilter = function (v) {
|
||||
return _this2.handleFilter('left', value);
|
||||
};
|
||||
|
||||
this.handleRightFilter = function (e) {
|
||||
return _this2.handleFilter('right', e);
|
||||
this.handleRightFilter = function (v) {
|
||||
return _this2.handleFilter('right', value);
|
||||
};
|
||||
|
||||
this.handleClear = function (direction) {
|
||||
|
|
@ -385,10 +468,11 @@ var _initialiseProps = function _initialiseProps() {
|
|||
|
||||
var holder = direction === 'left' ? [].concat(_toConsumableArray(sourceSelectedKeys)) : [].concat(_toConsumableArray(targetSelectedKeys));
|
||||
var index = holder.indexOf(selectedItem.key);
|
||||
if (index > -1) {
|
||||
holder.splice(index, 1);
|
||||
}
|
||||
if (checked) {
|
||||
//已勾选
|
||||
holder.splice(index, 1);
|
||||
} else if (index === -1) {
|
||||
//未勾选
|
||||
holder.push(selectedItem.key);
|
||||
}
|
||||
_this2.handleSelectChange(direction, holder);
|
||||
|
|
@ -415,6 +499,81 @@ var _initialiseProps = function _initialiseProps() {
|
|||
}
|
||||
return defaultTitles;
|
||||
};
|
||||
|
||||
this.id2List = {
|
||||
droppable_1: 'leftDataSource',
|
||||
droppable_2: 'rightDataSource'
|
||||
};
|
||||
|
||||
this.getList = function (id) {
|
||||
return _this2.state[_this2.id2List[id]];
|
||||
};
|
||||
|
||||
this.onDragEnd = function (result) {
|
||||
var source = result.source,
|
||||
destination = result.destination,
|
||||
draggableId = result.draggableId;
|
||||
var _props3 = _this2.props,
|
||||
targetKeys = _props3.targetKeys,
|
||||
onChange = _props3.onChange;
|
||||
|
||||
var sourceIndex = source.index; //初始位置
|
||||
var disIndex = destination.index; //移动后的位置
|
||||
var temp = void 0; //拖拽的元素
|
||||
|
||||
// dropped outside the list
|
||||
if (!destination) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 从右往左拖拽 或 在左侧列表中拖拽
|
||||
if (destination.droppableId === 'droppable_1') {
|
||||
if (source.droppableId === destination.droppableId) return;
|
||||
_this2.moveToLeft();
|
||||
return;
|
||||
}
|
||||
|
||||
// 在右侧列表中上下拖拽进行排序
|
||||
if (source.droppableId === destination.droppableId) {
|
||||
var items = (0, _utils.reorder)(_this2.getList(source.droppableId), targetKeys, source.index, destination.index);
|
||||
var state = { leftDataSource: items.dataArr };
|
||||
if (source.droppableId === 'droppable_2') {
|
||||
state = { rightDataSource: items.dataArr };
|
||||
}
|
||||
state.sourceSelectedKeys = [];
|
||||
state.targetSelectedKeys = [];
|
||||
_this2.setState(state);
|
||||
if (onChange) {
|
||||
onChange(items.targetKeyArr, "", draggableId);
|
||||
}
|
||||
} else {
|
||||
// 从左往右拖拽
|
||||
var _result = (0, _utils.move)(_this2.getList(source.droppableId), _this2.getList(destination.droppableId), source, destination, targetKeys);
|
||||
if (onChange) {
|
||||
onChange(_result.newTargetKeys, "", draggableId);
|
||||
}
|
||||
_this2.setState({
|
||||
leftDataSource: _result.droppable_1,
|
||||
rightDataSource: _result.droppable_2,
|
||||
sourceSelectedKeys: [],
|
||||
targetSelectedKeys: []
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
this.onDragStart = function (result) {
|
||||
var selectedItem = {};
|
||||
var source = result.source;
|
||||
|
||||
selectedItem.key = result.draggableId;
|
||||
if (source.droppableId === 'droppable_1') {
|
||||
// leftMenu
|
||||
_this2.handleLeftSelect(selectedItem);
|
||||
} else if (source.droppableId === 'droppable_2') {
|
||||
// rightMenu
|
||||
_this2.handleRightSelect(selectedItem);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
Transfer.List = Transfer.List;
|
||||
|
|
|
|||
|
|
@ -48,34 +48,26 @@ var Item = function (_React$Component) {
|
|||
_inherits(Item, _React$Component);
|
||||
|
||||
function Item() {
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, Item);
|
||||
|
||||
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
|
||||
}
|
||||
|
||||
Item.prototype.shouldComponentUpdate = function shouldComponentUpdate() {
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.matchFilter = function (text) {
|
||||
var _this$props = _this.props,
|
||||
filter = _this$props.filter,
|
||||
filterOption = _this$props.filterOption,
|
||||
item = _this$props.item;
|
||||
|
||||
if (filterOption) {
|
||||
return filterOption(filter, item);
|
||||
}
|
||||
return text.indexOf(filter) >= 0;
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
Item.prototype.shouldComponentUpdate = function shouldComponentUpdate() {
|
||||
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
||||
args[_key2] = arguments[_key2];
|
||||
}
|
||||
|
||||
return _PureRenderMixin2["default"].shouldComponentUpdate.apply(this, args);
|
||||
};
|
||||
// matchFilter = (text) => {
|
||||
// const { filter, filterOption, item } = this.props;
|
||||
// if (filterOption) {
|
||||
// return filterOption(filter, item);
|
||||
// }
|
||||
// return text.indexOf(filter) >= 0;
|
||||
// }
|
||||
|
||||
|
||||
Item.prototype.render = function render() {
|
||||
var _classNames;
|
||||
|
|
@ -89,9 +81,10 @@ var Item = function (_React$Component) {
|
|||
prefixCls = _props.prefixCls,
|
||||
onClick = _props.onClick,
|
||||
renderedText = _props.renderedText,
|
||||
renderedEl = _props.renderedEl;
|
||||
renderedEl = _props.renderedEl,
|
||||
showCheckbox = _props.showCheckbox;
|
||||
|
||||
var className = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, prefixCls + '-content-item', true), _defineProperty(_classNames, prefixCls + '-content-item-disabled', item.disabled), _classNames));
|
||||
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 lazyProps = (0, _objectAssign2["default"])({
|
||||
height: 32,
|
||||
|
|
@ -137,9 +130,9 @@ var Item = function (_React$Component) {
|
|||
return onClick(item);
|
||||
}
|
||||
},
|
||||
_react2["default"].createElement(_beeCheckbox2["default"], { checked: checked, disabled: item.disabled, onClick: item.disabled ? undefined : function () {
|
||||
showCheckbox ? _react2["default"].createElement(_beeCheckbox2["default"], { checked: checked, disabled: item.disabled, onClick: item.disabled ? undefined : function () {
|
||||
return onClick(item);
|
||||
} }),
|
||||
} }) : '',
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
null,
|
||||
|
|
|
|||
164
build/list.js
164
build/list.js
|
|
@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
|
@ -38,6 +40,14 @@ var _beeCheckbox = require('bee-checkbox');
|
|||
|
||||
var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
|
||||
|
||||
var _beeIcon = require('bee-icon');
|
||||
|
||||
var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
||||
|
||||
var _reactBeautifulDnd = require('react-beautiful-dnd');
|
||||
|
||||
var _tinperBeeCore = require('tinper-bee-core');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
|
@ -71,6 +81,8 @@ var TransferList = function (_React$Component) {
|
|||
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
||||
|
||||
_this.matchFilter = function (text, item) {
|
||||
//filter：搜索框中的内容
|
||||
//filterOption：用户自定义的搜索过滤方法
|
||||
var _this$props = _this.props,
|
||||
filter = _this$props.filter,
|
||||
filterOption = _this$props.filterOption;
|
||||
|
|
@ -82,12 +94,14 @@ var TransferList = function (_React$Component) {
|
|||
};
|
||||
|
||||
_this.handleSelect = function (selectedItem) {
|
||||
// checkedKeys：已勾选的Keys数组
|
||||
// result：是否已勾选，true：已勾选 false：未勾选
|
||||
var checkedKeys = _this.props.checkedKeys;
|
||||
|
||||
var result = checkedKeys.some(function (key) {
|
||||
return key === selectedItem.key;
|
||||
});
|
||||
_this.props.handleSelect(selectedItem, !result);
|
||||
_this.props.handleSelect(selectedItem, result);
|
||||
};
|
||||
|
||||
_this.handleFilter = function (e) {
|
||||
|
|
@ -110,6 +124,29 @@ var TransferList = function (_React$Component) {
|
|||
};
|
||||
};
|
||||
|
||||
_this.onKeyDown = function (event, provided, snapshot, item) {
|
||||
if (provided.dragHandleProps) {
|
||||
provided.dragHandleProps.onKeyDown(event);
|
||||
}
|
||||
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (snapshot.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.keyCode !== _tinperBeeCore.KeyCode.ENTER) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 为了选择，我们使用此事件 we are using the event for selection
|
||||
event.preventDefault();
|
||||
|
||||
_this.performAction(event, item);
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
mounted: false
|
||||
};
|
||||
|
|
@ -138,19 +175,29 @@ var TransferList = function (_React$Component) {
|
|||
return _PureRenderMixin2["default"].shouldComponentUpdate.apply(this, args);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取Checkbox状态
|
||||
* @param {*} filteredDataSource dataSource中刨去设置为disabled的部分
|
||||
*/
|
||||
TransferList.prototype.getCheckStatus = function getCheckStatus(filteredDataSource) {
|
||||
var checkedKeys = this.props.checkedKeys;
|
||||
|
||||
if (checkedKeys.length === 0) {
|
||||
return 'none';
|
||||
return 'none'; //全部未选
|
||||
} else if (filteredDataSource.every(function (item) {
|
||||
return checkedKeys.indexOf(item.key) >= 0;
|
||||
})) {
|
||||
return 'all';
|
||||
return 'all'; //全部已选
|
||||
}
|
||||
return 'part';
|
||||
return 'part'; //部分已选
|
||||
};
|
||||
|
||||
/**
|
||||
* 点击list item，选中或取消选中
|
||||
* @param selectedItem 选中的item的信息，和dataSource数据源中的item信息一致
|
||||
*/
|
||||
|
||||
|
||||
TransferList.prototype.renderCheckbox = function renderCheckbox(_ref) {
|
||||
var _classNames,
|
||||
_this3 = this;
|
||||
|
|
@ -162,7 +209,7 @@ var TransferList = function (_React$Component) {
|
|||
disabled = _ref.disabled,
|
||||
checkable = _ref.checkable;
|
||||
|
||||
var checkAll = !checkPart && checked;
|
||||
var checkAll = !checkPart && checked; //非半选 && 全选
|
||||
prefixCls = "u";
|
||||
var checkboxCls = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, prefixCls + '-checkbox-indeterminate', checkPart), _defineProperty(_classNames, prefixCls + '-checkbox-disabled', disabled), _classNames));
|
||||
return _react2["default"].createElement(
|
||||
|
|
@ -181,7 +228,8 @@ var TransferList = function (_React$Component) {
|
|||
};
|
||||
|
||||
TransferList.prototype.render = function render() {
|
||||
var _this4 = this;
|
||||
var _classNames2,
|
||||
_this4 = this;
|
||||
|
||||
var _props = this.props,
|
||||
prefixCls = _props.prefixCls,
|
||||
|
|
@ -198,7 +246,10 @@ var TransferList = function (_React$Component) {
|
|||
showSearch = _props.showSearch,
|
||||
_props$render = _props.render,
|
||||
render = _props$render === undefined ? noop : _props$render,
|
||||
style = _props.style;
|
||||
style = _props.style,
|
||||
id = _props.id,
|
||||
showCheckbox = _props.showCheckbox,
|
||||
draggable = _props.draggable;
|
||||
var _props2 = this.props,
|
||||
searchPlaceholder = _props2.searchPlaceholder,
|
||||
notFoundContent = _props2.notFoundContent;
|
||||
|
|
@ -208,11 +259,11 @@ var TransferList = function (_React$Component) {
|
|||
var footerDom = footer((0, _objectAssign2["default"])({}, this.props));
|
||||
var bodyDom = body((0, _objectAssign2["default"])({}, this.props));
|
||||
|
||||
var listCls = (0, _classnames2["default"])(prefixCls, _defineProperty({}, prefixCls + '-with-footer', !!footerDom));
|
||||
var listCls = (0, _classnames2["default"])(prefixCls, (_classNames2 = {}, _defineProperty(_classNames2, prefixCls + '-with-footer', !!footerDom), _defineProperty(_classNames2, prefixCls + '-draggable', !!draggable), _classNames2));
|
||||
|
||||
var filteredDataSource = [];
|
||||
var totalDataSource = [];
|
||||
var showItems = dataSource.map(function (item) {
|
||||
var showItems = dataSource.map(function (item, index) {
|
||||
var _renderItem = _this4.renderItem(item),
|
||||
renderedText = _renderItem.renderedText,
|
||||
renderedEl = _renderItem.renderedEl;
|
||||
|
|
@ -229,19 +280,41 @@ var TransferList = function (_React$Component) {
|
|||
}
|
||||
|
||||
var checked = checkedKeys.indexOf(item.key) >= 0;
|
||||
return _react2["default"].createElement(_item2["default"], {
|
||||
key: item.key,
|
||||
item: item,
|
||||
lazy: lazy,
|
||||
render: render,
|
||||
renderedText: renderedText,
|
||||
renderedEl: renderedEl,
|
||||
filter: filter,
|
||||
filterOption: filterOption,
|
||||
checked: checked,
|
||||
prefixCls: prefixCls,
|
||||
onClick: _this4.handleSelect
|
||||
});
|
||||
return _react2["default"].createElement(
|
||||
_reactBeautifulDnd.Draggable,
|
||||
{ key: item.key, index: index, draggableId: '' + item.key, isDragDisabled: draggable ? item.disabled : !draggable },
|
||||
function (provided, snapshot) {
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
_extends({
|
||||
ref: provided.innerRef
|
||||
}, provided.draggableProps, provided.dragHandleProps, {
|
||||
// onClick={(event) =>this.handleDrag(event, provided, snapshot, item)}
|
||||
onKeyDown: function onKeyDown(event) {
|
||||
return _this4.onKeyDown(event, provided, snapshot, item);
|
||||
}
|
||||
// className={classnames({
|
||||
// ...getClass(this.props,snapshot.isDragging).drag
|
||||
// })}
|
||||
, style: _extends({}, provided.draggableProps.style) }),
|
||||
_react2["default"].createElement(_item2["default"]
|
||||
// ref={provided.innerRef} //Error: provided.innerRef has not been provided with a HTMLElement
|
||||
// key={item.key}
|
||||
, { item: item,
|
||||
lazy: lazy,
|
||||
render: render,
|
||||
renderedText: renderedText,
|
||||
renderedEl: renderedEl,
|
||||
filter: filter,
|
||||
filterOption: filterOption,
|
||||
checked: checked,
|
||||
prefixCls: prefixCls,
|
||||
onClick: _this4.handleSelect,
|
||||
showCheckbox: showCheckbox
|
||||
})
|
||||
);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
var unit = '';
|
||||
|
|
@ -262,7 +335,7 @@ var TransferList = function (_React$Component) {
|
|||
prefixCls: prefixCls + '-search',
|
||||
onChange: this.handleFilter,
|
||||
handleClear: this.handleClear,
|
||||
placeholder: searchPlaceholder || 'Search',
|
||||
placeholder: searchPlaceholder,
|
||||
value: filter
|
||||
})
|
||||
) : null;
|
||||
|
|
@ -272,19 +345,42 @@ var TransferList = function (_React$Component) {
|
|||
{ className: showSearch ? prefixCls + '-body ' + prefixCls + '-body-with-search' : prefixCls + '-body' },
|
||||
search,
|
||||
_react2["default"].createElement(
|
||||
_beeAnimate2["default"],
|
||||
{
|
||||
component: 'ul',
|
||||
className: prefixCls + '-content',
|
||||
transitionName: this.state.mounted ? prefixCls + '-content-item-highlight' : '',
|
||||
transitionLeave: false
|
||||
},
|
||||
showItems
|
||||
_reactBeautifulDnd.Droppable,
|
||||
{ droppableId: 'droppable_' + id, direction: 'vertical', isDropDisabled: !draggable },
|
||||
function (provided, snapshot) {
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ ref: provided.innerRef, isDraggingOver: snapshot.isDraggingOver, key: id, className: prefixCls + '-content' },
|
||||
_react2["default"].createElement(
|
||||
_beeAnimate2["default"],
|
||||
{
|
||||
component: 'ul',
|
||||
transitionName: _this4.state.mounted ? prefixCls + '-content-item-highlight' : '',
|
||||
transitionLeave: false
|
||||
},
|
||||
showItems
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
{ className: prefixCls + '-delete-selected ' + (snapshot.isDraggingOver && id === '1' ? 'show' : '') },
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
{ className: prefixCls + '-del-btn' },
|
||||
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-arrow-down-2' }),
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
null,
|
||||
'\u79FB\u9664\u5DF2\u9009'
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
{ className: prefixCls + '-body-not-found' },
|
||||
notFoundContent || 'Not Found'
|
||||
{ className: prefixCls + '-body-not-found ' + (dataSource.length == 0 ? "show" : "") },
|
||||
notFoundContent
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -309,7 +405,7 @@ var TransferList = function (_React$Component) {
|
|||
_react2["default"].createElement(
|
||||
'div',
|
||||
{ className: prefixCls + '-header' },
|
||||
renderedCheckbox,
|
||||
showCheckbox ? renderedCheckbox : '',
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
{ className: prefixCls + '-header-selected' },
|
||||
|
|
|
|||
|
|
@ -88,6 +88,7 @@ var Search = function (_React$Component) {
|
|||
'div',
|
||||
null,
|
||||
_react2["default"].createElement(_beeFormControl2["default"], {
|
||||
size: 'sm',
|
||||
placeholder: placeholder,
|
||||
className: prefixCls,
|
||||
value: value,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
|
||||
|
||||
/**
|
||||
* a little function to help us with reordering the result
|
||||
* @param {*} list
|
||||
* @param {*} targetKeys
|
||||
* @param {*} startIndex
|
||||
* @param {*} endIndex
|
||||
*/
|
||||
var reorder = function reorder(list, targetKeys, startIndex, endIndex) {
|
||||
var result1 = Array.from(list);
|
||||
|
||||
var _result1$splice = result1.splice(startIndex, 1),
|
||||
_result1$splice2 = _slicedToArray(_result1$splice, 1),
|
||||
removed1 = _result1$splice2[0];
|
||||
|
||||
result1.splice(endIndex, 0, removed1);
|
||||
|
||||
var result2 = Array.from(targetKeys);
|
||||
|
||||
var _result2$splice = result2.splice(startIndex, 1),
|
||||
_result2$splice2 = _slicedToArray(_result2$splice, 1),
|
||||
removed2 = _result2$splice2[0];
|
||||
|
||||
result2.splice(endIndex, 0, removed2);
|
||||
|
||||
var result = {};
|
||||
result.dataArr = result1;
|
||||
result.targetKeyArr = result2;
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* Moves an item from one list to another list.
|
||||
* @param {*} source
|
||||
* @param {*} destination
|
||||
* @param {*} droppableSource
|
||||
* @param {*} droppableDestination
|
||||
* @param {*} targetKeys
|
||||
*/
|
||||
var move = function move(source, destination, droppableSource, droppableDestination, targetKeys) {
|
||||
var sourceClone = Array.from(source);
|
||||
var destClone = Array.from(destination);
|
||||
|
||||
var _sourceClone$splice = sourceClone.splice(droppableSource.index, 1),
|
||||
_sourceClone$splice2 = _slicedToArray(_sourceClone$splice, 1),
|
||||
removed = _sourceClone$splice2[0];
|
||||
|
||||
destClone.splice(droppableDestination.index, 0, removed);
|
||||
targetKeys.splice(droppableDestination.index, 0, removed.key);
|
||||
|
||||
var result = {};
|
||||
result[droppableSource.droppableId] = sourceClone;
|
||||
result[droppableDestination.droppableId] = destClone;
|
||||
result.newTargetKeys = targetKeys;
|
||||
return result;
|
||||
};
|
||||
|
||||
exports.reorder = reorder;
|
||||
exports.move = move;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
*
|
||||
* @title 拖拽穿梭
|
||||
* @description 通过`draggable`参数设置是否可以通过拖拽进行穿梭和排序，`showCheckbox`设置是否隐藏复选框
|
||||
* @description 通过`draggable`参数设置是否可以通过拖拽进行穿梭和排序
|
||||
*
|
||||
*/
|
||||
|
||||
|
|
|
|||
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
|
|
@ -59,7 +59,7 @@ class Transfer extends React.Component{
|
|||
this.cacheTargetKeys = [...targetKeys];
|
||||
}
|
||||
componentDidMount(){
|
||||
const { leftDataSource, rightDataSource } = this.splitDataSource();
|
||||
this.splitDataSource();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
|
|
@ -82,6 +82,7 @@ class Transfer extends React.Component{
|
|||
targetSelectedKeys: targetSelectedKeys.filter(existInDateSourcekey)
|
||||
.filter(data => targetKeys.filter(key => key === data).length > 0),
|
||||
});
|
||||
this.splitDataSource(targetKeys,dataSource);
|
||||
}
|
||||
if (nextProps.selectedKeys) {
|
||||
const targetKeys = nextProps.targetKeys;
|
||||
|
|
@ -93,24 +94,27 @@ class Transfer extends React.Component{
|
|||
}
|
||||
/**
|
||||
* 从dataSource中分离出leftDataSource和rightDataSource
|
||||
* @param {*} newTargetKeys
|
||||
* @param {*} newTargetKeys 更新后的targetKeys
|
||||
* @param {*} newDataSource 异步加载数据源时，从nextProps中获取的dataSource
|
||||
*/
|
||||
splitDataSource(newTargetKeys) {
|
||||
splitDataSource(newTargetKeys, newDataSource) {
|
||||
// targetKeys：展示在右边列表的数据集
|
||||
if (this.splitedDataSource) {
|
||||
return this.splitedDataSource;
|
||||
}
|
||||
|
||||
const { rowKey, dataSource, targetKeys = [] } = this.props;
|
||||
const { rowKey } = this.props;
|
||||
let targetKeys = newTargetKeys || this.props.targetKeys;
|
||||
//异步加载数据源时
|
||||
let dataSource = newDataSource || this.props.dataSource;
|
||||
if (rowKey) {
|
||||
dataSource.forEach(record => {
|
||||
record.key = rowKey(record);
|
||||
});
|
||||
}
|
||||
|
||||
let tempTargetKeys = newTargetKeys ? newTargetKeys : targetKeys;
|
||||
const leftDataSource = dataSource.filter(({ key }) => tempTargetKeys.indexOf(key) === -1);
|
||||
const rightDataSource = dataSource.filter(({key}) => tempTargetKeys.indexOf(key) > -1);
|
||||
const leftDataSource = dataSource.filter(({ key }) => targetKeys.indexOf(key) === -1);
|
||||
const rightDataSource = dataSource.filter(({key}) => targetKeys.indexOf(key) > -1);
|
||||
|
||||
this.splitedDataSource = {
|
||||
leftDataSource,
|
||||
|
|
@ -277,7 +281,6 @@ class Transfer extends React.Component{
|
|||
* 拖拽结束时触发
|
||||
*/
|
||||
onDragEnd = result => {
|
||||
console.log(result);
|
||||
const { source, destination,draggableId } = result;
|
||||
let { targetKeys, onChange } = this.props;
|
||||
let sourceIndex = source.index; //初始位置
|
||||
|
|
@ -298,7 +301,6 @@ class Transfer extends React.Component{
|
|||
|
||||
// 在右侧列表中上下拖拽进行排序
|
||||
if (source.droppableId === destination.droppableId) {
|
||||
console.log(this.getList(source.droppableId),"==拖拽前==");
|
||||
const items = reorder(
|
||||
this.getList(source.droppableId),
|
||||
targetKeys,
|
||||
|
|
@ -309,16 +311,13 @@ class Transfer extends React.Component{
|
|||
if (source.droppableId === 'droppable_2'){
|
||||
state = { rightDataSource:items.dataArr }
|
||||
}
|
||||
console.log(items.dataArr,'==拖拽后==');
|
||||
state.sourceSelectedKeys = [];
|
||||
state.targetSelectedKeys = [];
|
||||
console.log(state)
|
||||
this.setState(state);
|
||||
if (onChange) {
|
||||
onChange(items.targetKeyArr, "", draggableId);
|
||||
}
|
||||
} else { // 从左往右拖拽
|
||||
console.log(this.getList(source.droppableId),"==拖拽前==");
|
||||
const result = move(
|
||||
this.getList(source.droppableId),
|
||||
this.getList(destination.droppableId),
|
||||
|
|
@ -326,7 +325,6 @@ class Transfer extends React.Component{
|
|||
destination,
|
||||
targetKeys
|
||||
)
|
||||
console.log(result,'==拖拽后==');
|
||||
if (onChange) {
|
||||
onChange(result.newTargetKeys, "", draggableId);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue