2020-11-01 15:03:33 +08:00
|
|
|
|
import { defineComponent, inject } from 'vue';
|
2019-01-12 11:33:27 +08:00
|
|
|
|
import PropTypes from '../_util/vue-types';
|
2020-10-20 16:45:49 +08:00
|
|
|
|
import { hasProp, getOptionProps, getComponent } from '../_util/props-util';
|
|
|
|
|
import initDefaultProps from '../_util/props-util/initDefaultProps';
|
2019-01-12 11:33:27 +08:00
|
|
|
|
import BaseMixin from '../_util/BaseMixin';
|
2020-08-31 16:53:19 +08:00
|
|
|
|
import classNames from '../_util/classNames';
|
2019-01-12 11:33:27 +08:00
|
|
|
|
import List from './list';
|
|
|
|
|
import Operation from './operation';
|
|
|
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
|
|
|
|
import defaultLocale from '../locale-provider/default';
|
2021-06-26 09:35:40 +08:00
|
|
|
|
import type { RenderEmptyHandler } from '../config-provider';
|
|
|
|
|
import { defaultConfigProvider } from '../config-provider';
|
2020-11-01 15:03:33 +08:00
|
|
|
|
import { withInstall } from '../_util/type';
|
2019-01-12 11:33:27 +08:00
|
|
|
|
|
2020-10-20 16:45:49 +08:00
|
|
|
|
export type TransferDirection = 'left' | 'right';
|
2018-04-07 00:20:45 +08:00
|
|
|
|
|
2018-04-07 10:32:13 +08:00
|
|
|
|
export const TransferItem = {
|
2021-08-26 09:44:02 +08:00
|
|
|
|
key: PropTypes.string,
|
|
|
|
|
title: PropTypes.string,
|
2018-04-07 00:20:45 +08:00
|
|
|
|
description: PropTypes.string,
|
2020-10-10 18:16:28 +08:00
|
|
|
|
disabled: PropTypes.looseBool,
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|
2018-04-07 00:20:45 +08:00
|
|
|
|
|
|
|
|
|
export const TransferProps = {
|
|
|
|
|
prefixCls: PropTypes.string,
|
2018-04-07 10:41:09 +08:00
|
|
|
|
dataSource: PropTypes.arrayOf(PropTypes.shape(TransferItem).loose),
|
2020-10-12 18:46:05 +08:00
|
|
|
|
disabled: PropTypes.looseBool,
|
2018-04-07 00:20:45 +08:00
|
|
|
|
targetKeys: PropTypes.arrayOf(PropTypes.string),
|
|
|
|
|
selectedKeys: PropTypes.arrayOf(PropTypes.string),
|
|
|
|
|
render: PropTypes.func,
|
2020-03-07 19:45:13 +08:00
|
|
|
|
listStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
2018-09-05 21:28:54 +08:00
|
|
|
|
operationStyle: PropTypes.object,
|
2018-04-07 10:32:13 +08:00
|
|
|
|
titles: PropTypes.arrayOf(PropTypes.string),
|
|
|
|
|
operations: PropTypes.arrayOf(PropTypes.string),
|
2020-10-10 18:16:28 +08:00
|
|
|
|
showSearch: PropTypes.looseBool,
|
2018-04-07 00:20:45 +08:00
|
|
|
|
filterOption: PropTypes.func,
|
|
|
|
|
searchPlaceholder: PropTypes.string,
|
|
|
|
|
notFoundContent: PropTypes.any,
|
2018-12-05 20:00:13 +08:00
|
|
|
|
locale: PropTypes.object,
|
2018-04-07 10:41:09 +08:00
|
|
|
|
rowKey: PropTypes.func,
|
2020-10-10 18:16:28 +08:00
|
|
|
|
lazy: PropTypes.oneOfType([PropTypes.object, PropTypes.looseBool]),
|
|
|
|
|
showSelectAll: PropTypes.looseBool,
|
2020-07-19 22:40:35 +08:00
|
|
|
|
children: PropTypes.any,
|
2020-08-05 17:17:07 +08:00
|
|
|
|
onChange: PropTypes.func,
|
|
|
|
|
onSelectChange: PropTypes.func,
|
|
|
|
|
onSearchChange: PropTypes.func,
|
|
|
|
|
onSearch: PropTypes.func,
|
|
|
|
|
onScroll: PropTypes.func,
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|
2018-04-07 00:20:45 +08:00
|
|
|
|
|
2020-10-20 16:45:49 +08:00
|
|
|
|
export interface TransferLocale {
|
|
|
|
|
titles: string[];
|
|
|
|
|
notFoundContent: string;
|
|
|
|
|
searchPlaceholder: string;
|
|
|
|
|
itemUnit: string;
|
|
|
|
|
itemsUnit: string;
|
|
|
|
|
}
|
2018-04-07 00:20:45 +08:00
|
|
|
|
|
2020-10-20 16:45:49 +08:00
|
|
|
|
const Transfer = defineComponent({
|
2018-04-08 21:17:20 +08:00
|
|
|
|
name: 'ATransfer',
|
2018-04-07 00:20:45 +08:00
|
|
|
|
mixins: [BaseMixin],
|
2020-11-07 15:37:17 +08:00
|
|
|
|
inheritAttrs: false,
|
2018-04-07 10:41:09 +08:00
|
|
|
|
props: initDefaultProps(TransferProps, {
|
2018-04-07 00:20:45 +08:00
|
|
|
|
dataSource: [],
|
2018-12-05 20:00:13 +08:00
|
|
|
|
locale: {},
|
2018-04-07 00:20:45 +08:00
|
|
|
|
showSearch: false,
|
2020-03-07 19:45:13 +08:00
|
|
|
|
listStyle: () => {},
|
2018-04-07 00:20:45 +08:00
|
|
|
|
}),
|
2020-07-19 22:40:35 +08:00
|
|
|
|
setup() {
|
|
|
|
|
return {
|
2020-10-20 16:45:49 +08:00
|
|
|
|
separatedDataSource: null,
|
2020-09-30 10:47:18 +08:00
|
|
|
|
configProvider: inject('configProvider', defaultConfigProvider),
|
2020-07-19 22:40:35 +08:00
|
|
|
|
};
|
2019-03-28 20:56:06 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
data() {
|
2018-12-13 21:26:21 +08:00
|
|
|
|
// vue 中 通过slot,不方便传递,保留notFoundContent及searchPlaceholder
|
|
|
|
|
// warning(
|
2020-07-19 22:40:35 +08:00
|
|
|
|
// !(getComponent(this, 'notFoundContent') || hasProp(this, 'searchPlaceholder')),
|
2018-12-13 21:26:21 +08:00
|
|
|
|
// 'Transfer[notFoundContent] and Transfer[searchPlaceholder] will be removed, ' +
|
|
|
|
|
// 'please use Transfer[locale] instead.',
|
|
|
|
|
// )
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const { selectedKeys = [], targetKeys = [] } = this;
|
2018-04-07 00:20:45 +08:00
|
|
|
|
return {
|
|
|
|
|
leftFilter: '',
|
|
|
|
|
rightFilter: '',
|
|
|
|
|
sourceSelectedKeys: selectedKeys.filter(key => targetKeys.indexOf(key) === -1),
|
|
|
|
|
targetSelectedKeys: selectedKeys.filter(key => targetKeys.indexOf(key) > -1),
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
|
|
|
|
watch: {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
targetKeys() {
|
|
|
|
|
this.updateState();
|
2018-05-18 21:57:40 +08:00
|
|
|
|
if (this.selectedKeys) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const targetKeys = this.targetKeys || [];
|
2018-05-18 21:57:40 +08:00
|
|
|
|
this.setState({
|
|
|
|
|
sourceSelectedKeys: this.selectedKeys.filter(key => !targetKeys.includes(key)),
|
|
|
|
|
targetSelectedKeys: this.selectedKeys.filter(key => targetKeys.includes(key)),
|
2019-01-12 11:33:27 +08:00
|
|
|
|
});
|
2018-05-18 21:57:40 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
dataSource() {
|
|
|
|
|
this.updateState();
|
2018-05-18 21:57:40 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
selectedKeys() {
|
2018-05-18 21:57:40 +08:00
|
|
|
|
if (this.selectedKeys) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const targetKeys = this.targetKeys || [];
|
2018-05-18 21:57:40 +08:00
|
|
|
|
this.setState({
|
|
|
|
|
sourceSelectedKeys: this.selectedKeys.filter(key => !targetKeys.includes(key)),
|
|
|
|
|
targetSelectedKeys: this.selectedKeys.filter(key => targetKeys.includes(key)),
|
2019-01-12 11:33:27 +08:00
|
|
|
|
});
|
2018-05-18 21:57:40 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
2020-11-07 15:37:17 +08:00
|
|
|
|
mounted() {
|
|
|
|
|
// this.currentProps = { ...this.$props }
|
|
|
|
|
},
|
2018-04-07 00:20:45 +08:00
|
|
|
|
methods: {
|
2020-03-07 19:45:13 +08:00
|
|
|
|
getSelectedKeysName(direction) {
|
|
|
|
|
return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys';
|
|
|
|
|
},
|
|
|
|
|
|
2020-10-20 16:45:49 +08:00
|
|
|
|
getTitles(transferLocale: TransferLocale) {
|
2020-03-07 19:45:13 +08:00
|
|
|
|
if (this.titles) {
|
|
|
|
|
return this.titles;
|
|
|
|
|
}
|
|
|
|
|
return transferLocale.titles || ['', ''];
|
|
|
|
|
},
|
|
|
|
|
|
2020-10-20 16:45:49 +08:00
|
|
|
|
getLocale(transferLocale: TransferLocale, renderEmpty: RenderEmptyHandler) {
|
2020-03-07 19:45:13 +08:00
|
|
|
|
// Keep old locale props still working.
|
2020-10-20 16:45:49 +08:00
|
|
|
|
const oldLocale: { notFoundContent?: any; searchPlaceholder?: string } = {
|
2020-07-18 21:40:26 +08:00
|
|
|
|
notFoundContent: renderEmpty('Transfer'),
|
2020-03-07 19:45:13 +08:00
|
|
|
|
};
|
2020-07-19 22:40:35 +08:00
|
|
|
|
const notFoundContent = getComponent(this, 'notFoundContent');
|
2020-03-07 19:45:13 +08:00
|
|
|
|
if (notFoundContent) {
|
|
|
|
|
oldLocale.notFoundContent = notFoundContent;
|
|
|
|
|
}
|
|
|
|
|
if (hasProp(this, 'searchPlaceholder')) {
|
|
|
|
|
oldLocale.searchPlaceholder = this.$props.searchPlaceholder;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return { ...transferLocale, ...oldLocale, ...this.$props.locale };
|
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
updateState() {
|
|
|
|
|
const { sourceSelectedKeys, targetSelectedKeys } = this;
|
|
|
|
|
this.separatedDataSource = null;
|
2018-05-18 21:57:40 +08:00
|
|
|
|
if (!this.selectedKeys) {
|
|
|
|
|
// clear key nolonger existed
|
|
|
|
|
// clear checkedKeys according to targetKeys
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const { dataSource, targetKeys = [] } = this;
|
2018-05-18 21:57:40 +08:00
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const newSourceSelectedKeys = [];
|
|
|
|
|
const newTargetSelectedKeys = [];
|
2018-05-18 21:57:40 +08:00
|
|
|
|
dataSource.forEach(({ key }) => {
|
|
|
|
|
if (sourceSelectedKeys.includes(key) && !targetKeys.includes(key)) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
newSourceSelectedKeys.push(key);
|
2018-05-18 21:57:40 +08:00
|
|
|
|
}
|
|
|
|
|
if (targetSelectedKeys.includes(key) && targetKeys.includes(key)) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
newTargetSelectedKeys.push(key);
|
2018-05-18 21:57:40 +08:00
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
});
|
2018-05-18 21:57:40 +08:00
|
|
|
|
this.setState({
|
|
|
|
|
sourceSelectedKeys: newSourceSelectedKeys,
|
|
|
|
|
targetSelectedKeys: newTargetSelectedKeys,
|
2019-01-12 11:33:27 +08:00
|
|
|
|
});
|
2018-05-18 21:57:40 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
2018-04-07 00:20:45 +08:00
|
|
|
|
|
2020-10-20 16:45:49 +08:00
|
|
|
|
moveTo(direction: TransferDirection) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const { targetKeys = [], dataSource = [] } = this.$props;
|
|
|
|
|
const { sourceSelectedKeys, targetSelectedKeys } = this;
|
|
|
|
|
const moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
|
2018-04-07 00:20:45 +08:00
|
|
|
|
// filter the disabled options
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const newMoveKeys = moveKeys.filter(
|
|
|
|
|
key => !dataSource.some(data => !!(key === data.key && data.disabled)),
|
|
|
|
|
);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
// move items to target box
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const newTargetKeys =
|
|
|
|
|
direction === 'right'
|
|
|
|
|
? newMoveKeys.concat(targetKeys)
|
|
|
|
|
: targetKeys.filter(targetKey => newMoveKeys.indexOf(targetKey) === -1);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
|
|
|
|
|
// empty checked keys
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const oppositeDirection = direction === 'right' ? 'left' : 'right';
|
2018-04-07 00:20:45 +08:00
|
|
|
|
this.setState({
|
|
|
|
|
[this.getSelectedKeysName(oppositeDirection)]: [],
|
2019-01-12 11:33:27 +08:00
|
|
|
|
});
|
|
|
|
|
this.handleSelectChange(oppositeDirection, []);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
this.$emit('change', newTargetKeys, direction, newMoveKeys);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
moveToLeft() {
|
|
|
|
|
this.moveTo('left');
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
moveToRight() {
|
|
|
|
|
this.moveTo('right');
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
|
|
|
|
|
2020-10-20 16:45:49 +08:00
|
|
|
|
onItemSelectAll(direction: TransferDirection, selectedKeys: string[], checkAll: boolean) {
|
2020-03-07 19:45:13 +08:00
|
|
|
|
const originalSelectedKeys = this.$data[this.getSelectedKeysName(direction)] || [];
|
2018-04-07 00:20:45 +08:00
|
|
|
|
|
2020-03-07 19:45:13 +08:00
|
|
|
|
let mergedCheckedKeys = [];
|
|
|
|
|
if (checkAll) {
|
|
|
|
|
// Merge current keys with origin key
|
|
|
|
|
mergedCheckedKeys = Array.from(new Set([...originalSelectedKeys, ...selectedKeys]));
|
2018-04-07 00:20:45 +08:00
|
|
|
|
} else {
|
2020-03-07 19:45:13 +08:00
|
|
|
|
// Remove current keys from origin keys
|
|
|
|
|
mergedCheckedKeys = originalSelectedKeys.filter(key => selectedKeys.indexOf(key) === -1);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
}
|
|
|
|
|
|
2020-03-07 19:45:13 +08:00
|
|
|
|
this.handleSelectChange(direction, mergedCheckedKeys);
|
|
|
|
|
|
|
|
|
|
if (!this.$props.selectedKeys) {
|
2018-04-07 00:20:45 +08:00
|
|
|
|
this.setState({
|
2020-03-07 19:45:13 +08:00
|
|
|
|
[this.getSelectedKeysName(direction)]: mergedCheckedKeys,
|
2019-01-12 11:33:27 +08:00
|
|
|
|
});
|
2018-04-07 00:20:45 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2020-03-07 19:45:13 +08:00
|
|
|
|
handleSelectAll(direction, filteredDataSource, checkAll) {
|
|
|
|
|
this.onItemSelectAll(
|
|
|
|
|
direction,
|
|
|
|
|
filteredDataSource.map(({ key }) => key),
|
|
|
|
|
!checkAll,
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// [Legacy] Old prop `body` pass origin check as arg. It's confusing.
|
|
|
|
|
// TODO: Remove this in next version.
|
2019-01-12 11:33:27 +08:00
|
|
|
|
handleLeftSelectAll(filteredDataSource, checkAll) {
|
2020-03-07 19:45:13 +08:00
|
|
|
|
return this.handleSelectAll('left', filteredDataSource, !checkAll);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
2020-03-07 19:45:13 +08:00
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
handleRightSelectAll(filteredDataSource, checkAll) {
|
2020-03-07 19:45:13 +08:00
|
|
|
|
return this.handleSelectAll('right', filteredDataSource, !checkAll);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onLeftItemSelectAll(selectedKeys, checkAll) {
|
|
|
|
|
return this.onItemSelectAll('left', selectedKeys, checkAll);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onRightItemSelectAll(selectedKeys, checkAll) {
|
|
|
|
|
return this.onItemSelectAll('right', selectedKeys, checkAll);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
handleFilter(direction, e) {
|
|
|
|
|
const value = e.target.value;
|
2020-07-19 22:40:35 +08:00
|
|
|
|
// if (getListeners(this).searchChange) {
|
|
|
|
|
// warning(
|
|
|
|
|
// false,
|
|
|
|
|
// 'Transfer',
|
|
|
|
|
// '`searchChange` in Transfer is deprecated. Please use `search` instead.',
|
|
|
|
|
// );
|
|
|
|
|
// this.$emit('searchChange', direction, e);
|
|
|
|
|
// }
|
2019-01-12 11:33:27 +08:00
|
|
|
|
this.$emit('search', direction, value);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
handleLeftFilter(e) {
|
|
|
|
|
this.handleFilter('left', e);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
handleRightFilter(e) {
|
|
|
|
|
this.handleFilter('right', e);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
handleClear(direction) {
|
|
|
|
|
this.$emit('search', direction, '');
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
handleLeftClear() {
|
|
|
|
|
this.handleClear('left');
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
handleRightClear() {
|
|
|
|
|
this.handleClear('right');
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
|
|
|
|
|
2020-03-07 19:45:13 +08:00
|
|
|
|
onItemSelect(direction, selectedKey, checked) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const { sourceSelectedKeys, targetSelectedKeys } = this;
|
|
|
|
|
const holder = direction === 'left' ? [...sourceSelectedKeys] : [...targetSelectedKeys];
|
2020-03-07 19:45:13 +08:00
|
|
|
|
const index = holder.indexOf(selectedKey);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
if (index > -1) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
holder.splice(index, 1);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
}
|
|
|
|
|
if (checked) {
|
2020-03-07 19:45:13 +08:00
|
|
|
|
holder.push(selectedKey);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
this.handleSelectChange(direction, holder);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
|
|
|
|
|
if (!this.selectedKeys) {
|
|
|
|
|
this.setState({
|
|
|
|
|
[this.getSelectedKeysName(direction)]: holder,
|
2019-01-12 11:33:27 +08:00
|
|
|
|
});
|
2018-04-07 00:20:45 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2020-07-19 22:40:35 +08:00
|
|
|
|
// handleSelect(direction, selectedItem, checked) {
|
|
|
|
|
// warning(false, 'Transfer', '`handleSelect` will be removed, please use `onSelect` instead.');
|
|
|
|
|
// this.onItemSelect(direction, selectedItem.key, checked);
|
|
|
|
|
// },
|
2020-03-07 19:45:13 +08:00
|
|
|
|
|
2020-07-19 22:40:35 +08:00
|
|
|
|
// handleLeftSelect(selectedItem, checked) {
|
|
|
|
|
// return this.handleSelect('left', selectedItem, checked);
|
|
|
|
|
// },
|
2018-04-07 00:20:45 +08:00
|
|
|
|
|
2020-07-19 22:40:35 +08:00
|
|
|
|
// handleRightSelect(selectedItem, checked) {
|
|
|
|
|
// return this.handleSelect('right', selectedItem, checked);
|
|
|
|
|
// },
|
2018-04-07 00:20:45 +08:00
|
|
|
|
|
2020-03-07 19:45:13 +08:00
|
|
|
|
onLeftItemSelect(selectedKey, checked) {
|
|
|
|
|
return this.onItemSelect('left', selectedKey, checked);
|
|
|
|
|
},
|
|
|
|
|
onRightItemSelect(selectedKey, checked) {
|
|
|
|
|
return this.onItemSelect('right', selectedKey, checked);
|
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
handleScroll(direction, e) {
|
|
|
|
|
this.$emit('scroll', direction, e);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
handleLeftScroll(e) {
|
|
|
|
|
this.handleScroll('left', e);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
handleRightScroll(e) {
|
|
|
|
|
this.handleScroll('right', e);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
|
|
|
|
|
2020-10-20 16:45:49 +08:00
|
|
|
|
handleSelectChange(direction: TransferDirection, holder: string[]) {
|
2020-03-07 19:45:13 +08:00
|
|
|
|
const { sourceSelectedKeys, targetSelectedKeys } = this;
|
|
|
|
|
|
|
|
|
|
if (direction === 'left') {
|
|
|
|
|
this.$emit('selectChange', holder, targetSelectedKeys);
|
|
|
|
|
} else {
|
|
|
|
|
this.$emit('selectChange', sourceSelectedKeys, holder);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
2020-03-07 19:45:13 +08:00
|
|
|
|
handleListStyle(listStyle, direction) {
|
|
|
|
|
if (typeof listStyle === 'function') {
|
|
|
|
|
return listStyle({ direction });
|
|
|
|
|
}
|
|
|
|
|
return listStyle;
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
|
|
|
|
|
2020-03-07 19:45:13 +08:00
|
|
|
|
separateDataSource() {
|
|
|
|
|
const { dataSource, rowKey, targetKeys = [] } = this.$props;
|
2018-12-05 20:00:13 +08:00
|
|
|
|
|
2020-03-07 19:45:13 +08:00
|
|
|
|
const leftDataSource = [];
|
|
|
|
|
const rightDataSource = new Array(targetKeys.length);
|
|
|
|
|
dataSource.forEach(record => {
|
|
|
|
|
if (rowKey) {
|
|
|
|
|
record.key = rowKey(record);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// rightDataSource should be ordered by targetKeys
|
|
|
|
|
// leftDataSource should be ordered by dataSource
|
|
|
|
|
const indexOfKey = targetKeys.indexOf(record.key);
|
|
|
|
|
if (indexOfKey !== -1) {
|
|
|
|
|
rightDataSource[indexOfKey] = record;
|
|
|
|
|
} else {
|
|
|
|
|
leftDataSource.push(record);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
leftDataSource,
|
|
|
|
|
rightDataSource,
|
|
|
|
|
};
|
2018-12-05 20:00:13 +08:00
|
|
|
|
},
|
|
|
|
|
|
2020-10-20 16:45:49 +08:00
|
|
|
|
renderTransfer(transferLocale: TransferLocale) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const props = getOptionProps(this);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
const {
|
2019-03-28 20:56:06 +08:00
|
|
|
|
prefixCls: customizePrefixCls,
|
2018-12-05 20:00:13 +08:00
|
|
|
|
disabled,
|
2018-04-07 00:20:45 +08:00
|
|
|
|
operations = [],
|
|
|
|
|
showSearch,
|
|
|
|
|
listStyle,
|
2018-09-05 21:28:54 +08:00
|
|
|
|
operationStyle,
|
2018-04-07 00:20:45 +08:00
|
|
|
|
filterOption,
|
|
|
|
|
lazy,
|
2020-03-07 19:45:13 +08:00
|
|
|
|
showSelectAll,
|
2019-01-12 11:33:27 +08:00
|
|
|
|
} = props;
|
2020-07-19 22:40:35 +08:00
|
|
|
|
const { class: className, style } = this.$attrs;
|
|
|
|
|
const children = getComponent(this, 'children', {}, false);
|
2019-09-11 22:35:25 +08:00
|
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
2019-03-28 20:56:06 +08:00
|
|
|
|
const prefixCls = getPrefixCls('transfer', customizePrefixCls);
|
|
|
|
|
|
2019-09-11 22:35:25 +08:00
|
|
|
|
const renderEmpty = this.configProvider.renderEmpty;
|
2019-03-28 20:56:06 +08:00
|
|
|
|
const locale = this.getLocale(transferLocale, renderEmpty);
|
2020-07-19 22:40:35 +08:00
|
|
|
|
const { sourceSelectedKeys, targetSelectedKeys, $slots } = this;
|
|
|
|
|
const { body, footer } = $slots;
|
2020-08-05 17:17:07 +08:00
|
|
|
|
const renderItem = props.render || this.$slots.render;
|
2020-03-07 19:45:13 +08:00
|
|
|
|
const { leftDataSource, rightDataSource } = this.separateDataSource();
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const leftActive = targetSelectedKeys.length > 0;
|
|
|
|
|
const rightActive = sourceSelectedKeys.length > 0;
|
|
|
|
|
|
2020-07-19 22:40:35 +08:00
|
|
|
|
const cls = classNames(prefixCls, className, {
|
2020-03-07 19:45:13 +08:00
|
|
|
|
[`${prefixCls}-disabled`]: disabled,
|
|
|
|
|
[`${prefixCls}-customize-list`]: !!children,
|
|
|
|
|
});
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const titles = this.getTitles(locale);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
return (
|
2020-07-19 22:40:35 +08:00
|
|
|
|
<div class={cls} style={style}>
|
2018-04-07 00:20:45 +08:00
|
|
|
|
<List
|
2020-03-07 19:45:13 +08:00
|
|
|
|
key="leftList"
|
2018-04-07 00:20:45 +08:00
|
|
|
|
prefixCls={`${prefixCls}-list`}
|
|
|
|
|
titleText={titles[0]}
|
|
|
|
|
dataSource={leftDataSource}
|
|
|
|
|
filterOption={filterOption}
|
2020-03-07 19:45:13 +08:00
|
|
|
|
style={this.handleListStyle(listStyle, 'left')}
|
2018-04-07 00:20:45 +08:00
|
|
|
|
checkedKeys={sourceSelectedKeys}
|
|
|
|
|
handleFilter={this.handleLeftFilter}
|
|
|
|
|
handleClear={this.handleLeftClear}
|
2020-07-19 22:40:35 +08:00
|
|
|
|
// handleSelect={this.handleLeftSelect}
|
2018-04-07 00:20:45 +08:00
|
|
|
|
handleSelectAll={this.handleLeftSelectAll}
|
2020-03-07 19:45:13 +08:00
|
|
|
|
onItemSelect={this.onLeftItemSelect}
|
|
|
|
|
onItemSelectAll={this.onLeftItemSelectAll}
|
2018-04-07 00:20:45 +08:00
|
|
|
|
renderItem={renderItem}
|
|
|
|
|
showSearch={showSearch}
|
|
|
|
|
body={body}
|
2020-03-07 19:45:13 +08:00
|
|
|
|
renderList={children}
|
2018-04-07 00:20:45 +08:00
|
|
|
|
footer={footer}
|
|
|
|
|
lazy={lazy}
|
|
|
|
|
onScroll={this.handleLeftScroll}
|
2018-12-05 20:00:13 +08:00
|
|
|
|
disabled={disabled}
|
2020-03-07 19:45:13 +08:00
|
|
|
|
direction="left"
|
|
|
|
|
showSelectAll={showSelectAll}
|
2018-12-05 20:00:13 +08:00
|
|
|
|
itemUnit={locale.itemUnit}
|
|
|
|
|
itemsUnit={locale.itemsUnit}
|
|
|
|
|
notFoundContent={locale.notFoundContent}
|
|
|
|
|
searchPlaceholder={locale.searchPlaceholder}
|
2018-04-07 00:20:45 +08:00
|
|
|
|
/>
|
|
|
|
|
<Operation
|
2020-03-07 19:45:13 +08:00
|
|
|
|
key="operation"
|
2018-04-07 00:20:45 +08:00
|
|
|
|
class={`${prefixCls}-operation`}
|
|
|
|
|
rightActive={rightActive}
|
|
|
|
|
rightArrowText={operations[0]}
|
|
|
|
|
moveToRight={this.moveToRight}
|
|
|
|
|
leftActive={leftActive}
|
|
|
|
|
leftArrowText={operations[1]}
|
|
|
|
|
moveToLeft={this.moveToLeft}
|
2018-09-05 21:28:54 +08:00
|
|
|
|
style={operationStyle}
|
2018-12-05 20:00:13 +08:00
|
|
|
|
disabled={disabled}
|
2018-04-07 00:20:45 +08:00
|
|
|
|
/>
|
|
|
|
|
<List
|
2020-03-07 19:45:13 +08:00
|
|
|
|
key="rightList"
|
2018-04-07 00:20:45 +08:00
|
|
|
|
prefixCls={`${prefixCls}-list`}
|
|
|
|
|
titleText={titles[1]}
|
|
|
|
|
dataSource={rightDataSource}
|
|
|
|
|
filterOption={filterOption}
|
2020-03-07 19:45:13 +08:00
|
|
|
|
style={this.handleListStyle(listStyle, 'right')}
|
2018-04-07 00:20:45 +08:00
|
|
|
|
checkedKeys={targetSelectedKeys}
|
|
|
|
|
handleFilter={this.handleRightFilter}
|
|
|
|
|
handleClear={this.handleRightClear}
|
2020-07-19 22:40:35 +08:00
|
|
|
|
// handleSelect={this.handleRightSelect}
|
2018-04-07 00:20:45 +08:00
|
|
|
|
handleSelectAll={this.handleRightSelectAll}
|
2020-03-07 19:45:13 +08:00
|
|
|
|
onItemSelect={this.onRightItemSelect}
|
|
|
|
|
onItemSelectAll={this.onRightItemSelectAll}
|
2018-04-07 00:20:45 +08:00
|
|
|
|
renderItem={renderItem}
|
|
|
|
|
showSearch={showSearch}
|
|
|
|
|
body={body}
|
2020-03-07 19:45:13 +08:00
|
|
|
|
renderList={children}
|
2018-04-07 00:20:45 +08:00
|
|
|
|
footer={footer}
|
|
|
|
|
lazy={lazy}
|
|
|
|
|
onScroll={this.handleRightScroll}
|
2018-12-05 20:00:13 +08:00
|
|
|
|
disabled={disabled}
|
2020-03-07 19:45:13 +08:00
|
|
|
|
direction="right"
|
|
|
|
|
showSelectAll={showSelectAll}
|
2018-12-05 20:00:13 +08:00
|
|
|
|
itemUnit={locale.itemUnit}
|
|
|
|
|
itemsUnit={locale.itemsUnit}
|
|
|
|
|
notFoundContent={locale.notFoundContent}
|
|
|
|
|
searchPlaceholder={locale.searchPlaceholder}
|
2018-04-07 00:20:45 +08:00
|
|
|
|
/>
|
|
|
|
|
</div>
|
2019-01-12 11:33:27 +08:00
|
|
|
|
);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
render() {
|
2018-04-07 00:20:45 +08:00
|
|
|
|
return (
|
|
|
|
|
<LocaleReceiver
|
2019-01-12 11:33:27 +08:00
|
|
|
|
componentName="Transfer"
|
2018-04-07 00:20:45 +08:00
|
|
|
|
defaultLocale={defaultLocale.Transfer}
|
2020-07-19 22:40:35 +08:00
|
|
|
|
children={this.renderTransfer}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
/>
|
|
|
|
|
);
|
2018-04-07 00:20:45 +08:00
|
|
|
|
},
|
2020-10-20 16:45:49 +08:00
|
|
|
|
});
|
2018-09-19 13:21:57 +08:00
|
|
|
|
|
2020-11-01 15:03:33 +08:00
|
|
|
|
export default withInstall(Transfer);
|