Fix Transfer search and check all behavious, close #2396

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}

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 (
-      <span ref="checkbox"
+      <span
+        ref="checkbox"
         className={checkboxCls}
-        onClick={(!props.disabled) && this.handleSelectAll}
+        onClick={() => this.props.handleSelectAll(filteredDataSource, checkAll)}
       >
-        {customEle}
+        {(typeof checkable !== 'boolean') ? checkable : null}
       </span>
     );
   }
@@ -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 (
         <li onClick={() => this.handleSelect(item)} key={item.key} title={renderedText}>
           <Checkbox checked={checkedKeys.some(key => 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 (
       <div className={listCls} style={style}>
         <div className={`${prefixCls}-header`}>
@@ -175,6 +186,7 @@ export default class TransferList extends React.Component {
             checked: checkStatus === 'all',
             checkPart: checkStatus === 'part',
             checkable: <span className={'ant-transfer-checkbox-inner'}></span>,
+            filteredDataSource,
           })}
           <span className={`${prefixCls}-header-selected`}>
             <span>