diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 051f974822..b6a2f5ee1a 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -19,18 +19,19 @@ export interface TransferItem { export interface TransferProps { dataSource: TransferItem[]; targetKeys: string[]; - render?: (record: TransferItem) => any; - onChange?: (targetKeys: TransferItem[], direction: string, moveKeys: any) => void; + selectedKeys: string[]; + render?: (record: TransferItem) => React.ReactNode; + onChange?: (targetKeys: string[], direction: string, moveKeys: any) => void; onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void; listStyle?: React.CSSProperties; - className?: string; prefixCls?: string; + className?: string; titles?: string[]; operations?: string[]; showSearch?: boolean; searchPlaceholder?: string; notFoundContent?: React.ReactNode; - footer?: (props: any) => any; + footer?: (props: any) => React.ReactNode; style?: React.CSSProperties; filterOption: (inputValue: any, item: any) => boolean; body?: (props: any) => any; @@ -46,6 +47,7 @@ export interface TransferContext { const defaultTitles = ['源列表', '目的列表']; export default class Transfer extends React.Component { + // For high-level customized Transfer @dqaria static List = List; static Operation = Operation; static Search = Search; @@ -89,13 +91,13 @@ export default class Transfer extends React.Component { this.state = { leftFilter: '', rightFilter: '', - leftCheckedKeys: [], - rightCheckedKeys: [], + sourceSelectedKeys: [], + targetSelectedKeys: [], }; } componentWillReceiveProps(nextProps) { - const { leftCheckedKeys, rightCheckedKeys } = this.state; + const { sourceSelectedKeys, targetSelectedKeys } = this.state; if (nextProps.targetKeys !== this.props.targetKeys || nextProps.dataSource !== this.props.dataSource) { // clear cached splited dataSource @@ -108,9 +110,9 @@ export default class Transfer extends React.Component { // clear key nolonger existed // clear checkedKeys according to targetKeys this.setState({ - leftCheckedKeys: leftCheckedKeys.filter(existInDateSourcekey) + sourceSelectedKeys: sourceSelectedKeys.filter(existInDateSourcekey) .filter(data => targetKeys.filter(key => key === data).length === 0), - rightCheckedKeys: rightCheckedKeys.filter(existInDateSourcekey) + targetSelectedKeys: targetSelectedKeys.filter(existInDateSourcekey) .filter(data => targetKeys.filter(key => key === data).length > 0), }); } @@ -146,8 +148,8 @@ export default class Transfer extends React.Component { moveTo = (direction) => { const { targetKeys = [], onChange } = this.props; - const { leftCheckedKeys, rightCheckedKeys } = this.state; - const moveKeys = direction === 'right' ? leftCheckedKeys : rightCheckedKeys; + const { sourceSelectedKeys, targetSelectedKeys } = this.state; + const moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys; // move items to target box const newTargetKeys = direction === 'right' ? moveKeys.concat(targetKeys) @@ -156,7 +158,7 @@ export default class Transfer extends React.Component { // empty checked keys const oppositeDirection = direction === 'right' ? 'left' : 'right'; this.setState({ - [`${oppositeDirection}CheckedKeys`]: [], + [this.getSelectedKeysName(oppositeDirection)]: [], }); this.handleSelectChange(oppositeDirection, []); @@ -169,23 +171,23 @@ export default class Transfer extends React.Component { moveToRight = () => this.moveTo('right') handleSelectChange(direction: string, holder: string[]) { - const { leftCheckedKeys, rightCheckedKeys } = this.state; + const { sourceSelectedKeys, targetSelectedKeys } = this.state; const onSelectChange = this.props.onSelectChange; if (!onSelectChange) { return; } if (direction === 'left') { - onSelectChange(holder, rightCheckedKeys); + onSelectChange(holder, targetSelectedKeys); } else { - onSelectChange(leftCheckedKeys, holder); + onSelectChange(sourceSelectedKeys, holder); } } handleSelectAll = (direction, filteredDataSource, checkAll) => { const holder = checkAll ? [] : filteredDataSource.map(item => item.key); this.setState({ - [`${direction}CheckedKeys`]: holder, + [this.getSelectedKeysName(direction)]: holder, }); this.handleSelectChange(direction, holder); } @@ -217,8 +219,8 @@ export default class Transfer extends React.Component { handleRightClear = () => this.handleClear('right') handleSelect = (direction, selectedItem, checked) => { - const { leftCheckedKeys, rightCheckedKeys } = this.state; - const holder = direction === 'left' ? [...leftCheckedKeys] : [...rightCheckedKeys]; + const { sourceSelectedKeys, targetSelectedKeys } = this.state; + const holder = direction === 'left' ? [...sourceSelectedKeys] : [...targetSelectedKeys]; let index; holder.forEach((key, i) => { if (key === selectedItem.key) { @@ -232,7 +234,7 @@ export default class Transfer extends React.Component { holder.push(selectedItem.key); } this.setState({ - [`${direction}CheckedKeys`]: holder, + [this.getSelectedKeysName(direction)]: holder, }); this.handleSelectChange(direction, holder); } @@ -253,17 +255,21 @@ export default class Transfer extends React.Component { return defaultTitles; } + getSelectedKeysName(direction) { + return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys'; + } + render() { const { prefixCls = 'ant-transfer', operations = [], showSearch, notFoundContent, searchPlaceholder, body, footer, listStyle, className = '', filterOption, render, lazy, } = this.props; - const { leftFilter, rightFilter, leftCheckedKeys, rightCheckedKeys } = this.state; + const { leftFilter, rightFilter, sourceSelectedKeys, targetSelectedKeys } = this.state; const { leftDataSource, rightDataSource } = this.splitDataSource(this.props); - const leftActive = rightCheckedKeys.length > 0; - const rightActive = leftCheckedKeys.length > 0; + const leftActive = targetSelectedKeys.length > 0; + const rightActive = sourceSelectedKeys.length > 0; const cls = classNames({ [className]: !!className, @@ -279,7 +285,7 @@ export default class Transfer extends React.Component { filter={leftFilter} filterOption={filterOption} style={listStyle} - checkedKeys={leftCheckedKeys} + checkedKeys={sourceSelectedKeys} handleFilter={this.handleLeftFilter} handleClear={this.handleLeftClear} handleSelect={this.handleLeftSelect} @@ -308,7 +314,7 @@ export default class Transfer extends React.Component { filter={rightFilter} filterOption={filterOption} style={listStyle} - checkedKeys={rightCheckedKeys} + checkedKeys={targetSelectedKeys} handleFilter={this.handleRightFilter} handleClear={this.handleRightClear} handleSelect={this.handleRightSelect}