diff --git a/components/transfer/index.jsx b/components/transfer/index.jsx index ed683e3e15..f0b53026b8 100644 --- a/components/transfer/index.jsx +++ b/components/transfer/index.jsx @@ -130,40 +130,16 @@ export default class Transfer extends React.Component { moveToLeft = () => this.moveTo('left') moveToRight = () => this.moveTo('right') - getGlobalCheckStatus(direction) { - const { leftDataSource, rightDataSource } = this.splitDataSource(this.props); - const { leftCheckedKeys, rightCheckedKeys } = this.state; - - const dataSource = direction === 'left' ? leftDataSource : rightDataSource; - const checkedKeys = direction === 'left' ? leftCheckedKeys : rightCheckedKeys; - - let globalCheckStatus; - - if (checkedKeys.length > 0) { - if (checkedKeys.length < dataSource.length) { - globalCheckStatus = 'part'; - } else { - globalCheckStatus = 'all'; - } - } else { - globalCheckStatus = 'none'; - } - return globalCheckStatus; - } - - handleSelectAll = (direction) => { - const { leftDataSource, rightDataSource } = this.splitDataSource(this.props); - const dataSource = direction === 'left' ? leftDataSource : rightDataSource; - const checkStatus = this.getGlobalCheckStatus(direction); - const holder = (checkStatus === 'all') ? [] : dataSource.map(item => item.key); + handleSelectAll = (direction, filteredDataSource, checkAll) => { + const holder = checkAll ? [] : filteredDataSource.map(item => item.key); this.setState({ [`${direction}CheckedKeys`]: holder, }); } - handleLeftSelectAll = () => this.handleSelectAll('left') - handleRightSelectAll = () => this.handleSelectAll('right') + handleLeftSelectAll = (...args) => this.handleSelectAll('left', ...args) + handleRightSelectAll = (...args) => this.handleSelectAll('right', ...args) handleFilter = (direction, e) => { this.setState({ @@ -219,9 +195,6 @@ export default class Transfer extends React.Component { const leftActive = rightCheckedKeys.length > 0; const rightActive = leftCheckedKeys.length > 0; - const leftCheckStatus = this.getGlobalCheckStatus('left'); - const rightCheckStatus = this.getGlobalCheckStatus('right'); - const cls = classNames({ [className]: !!className, [prefixCls]: true, @@ -234,7 +207,6 @@ export default class Transfer extends React.Component { filter={leftFilter} style={listStyle} checkedKeys={leftCheckedKeys} - checkStatus={leftCheckStatus} handleFilter={this.handleLeftFilter} handleClear={this.handleLeftClear} handleSelect={this.handleLeftSelect} @@ -260,7 +232,6 @@ export default class Transfer extends React.Component { filter={rightFilter} style={listStyle} checkedKeys={rightCheckedKeys} - checkStatus={rightCheckStatus} handleFilter={this.handleRightFilter} handleClear={this.handleRightClear} handleSelect={this.handleRightSelect} diff --git a/components/transfer/list.jsx b/components/transfer/list.jsx index 58ca179d74..6fef21668a 100644 --- a/components/transfer/list.jsx +++ b/components/transfer/list.jsx @@ -71,8 +71,14 @@ export default class TransferList extends React.Component { return PureRenderMixin.shouldComponentUpdate.apply(this, args); } - handleSelectAll = () => { - this.props.handleSelectAll(); + getCheckStatus(filteredDataSource) { + const { checkedKeys } = this.props; + if (checkedKeys.length === 0) { + return 'none'; + } else if (filteredDataSource.every(item => checkedKeys.indexOf(item.key) >= 0)) { + return 'all'; + } + return 'part'; } handleSelect = (selectedItem) => { @@ -89,24 +95,23 @@ export default class TransferList extends React.Component { this.props.handleClear(); } - renderCheckbox(props) { - const { prefixCls } = props; + renderCheckbox({ prefixCls, filteredDataSource, checked, checkPart, disabled, checkable }) { + const checkAll = (!checkPart) && checked; + const checkboxCls = classNames({ [`${prefixCls}-checkbox`]: true, - [`${prefixCls}-checkbox-indeterminate`]: props.checkPart, - [`${prefixCls}-checkbox-checked`]: (!props.checkPart) && props.checked, - [`${prefixCls}-checkbox-disabled`]: !!props.disabled, + [`${prefixCls}-checkbox-indeterminate`]: checkPart, + [`${prefixCls}-checkbox-checked`]: checkAll, + [`${prefixCls}-checkbox-disabled`]: disabled, }); - let customEle = null; - if (typeof props.checkable !== 'boolean') { - customEle = props.checkable; - } + return ( - this.props.handleSelectAll(filteredDataSource, checkAll)} > - {customEle} + {(typeof checkable !== 'boolean') ? checkable : null} ); } @@ -117,7 +122,7 @@ export default class TransferList extends React.Component { render() { const { prefixCls, dataSource, titleText, filter, checkedKeys, - checkStatus, body, footer, showSearch, render, style } = this.props; + body, footer, showSearch, render, style } = this.props; let { searchPlaceholder, notFoundContent } = this.props; @@ -130,7 +135,9 @@ export default class TransferList extends React.Component { [`${prefixCls}-with-footer`]: !!footerDom, }); - const showItems = dataSource.map((item) => { + const filteredDataSource = []; + + const showItems = dataSource.map(item => { const renderResult = render(item); let renderedText; let renderedEl; @@ -147,6 +154,8 @@ export default class TransferList extends React.Component { return null; } + filteredDataSource.push(item); + return (
  • this.handleSelect(item)} key={item.key} title={renderedText}> key === item.key)} /> @@ -167,6 +176,8 @@ export default class TransferList extends React.Component { || this.context.antLocale.Transfer.notFoundContent; } + const checkStatus = this.getCheckStatus(filteredDataSource); + return (
    @@ -175,6 +186,7 @@ export default class TransferList extends React.Component { checked: checkStatus === 'all', checkPart: checkStatus === 'part', checkable: , + filteredDataSource, })}