refactor select all logic

ant-design · Apr 11, 2019 · 00a507b · 00a507b
1 parent 409910d
commit 00a507b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 26 deletions.
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
@@ -216,21 +216,26 @@ class Transfer extends React.Component<TransferProps, any> {
     checkAll: boolean,
   ) => {
     const originalSelectedKeys = this.state[this.getSelectedKeysName(direction)] || [];
-    const currentKeys = filteredDataSource.map(item => item.key);
-    // Only operate current keys from original selected keys
-    const newKeys1 = originalSelectedKeys.filter((key: string) => currentKeys.indexOf(key) === -1);
-    const newKeys2 = [...originalSelectedKeys];
-    currentKeys.forEach(key => {
-      if (newKeys2.indexOf(key) === -1) {
-        newKeys2.push(key);
-      }
-    });
-    const holder = checkAll ? newKeys1 : newKeys2;
-    this.handleSelectChange(direction, holder);
+
+    // Get all item keys
+    const selectedKeys = filteredDataSource.map(item => item.key);
+
+    let mergedCheckedKeys = [];
+    if (checkAll) {
+      // Merge current keys with origin key
+      mergedCheckedKeys = Array.from(
+        new Set([...originalSelectedKeys, ...selectedKeys])
+      );
+    } else {
+      // Remove current keys from origin keys
+      mergedCheckedKeys = originalSelectedKeys.filter((key: string) => selectedKeys.indexOf(key) !== -1);
+    }
+
+    this.handleSelectChange(direction, mergedCheckedKeys);
 
     if (!this.props.selectedKeys) {
       this.setState({
-        [this.getSelectedKeysName(direction)]: holder,
+        [this.getSelectedKeysName(direction)]: mergedCheckedKeys,
       });
     }
   };

diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx
@@ -77,11 +77,11 @@ export default class TransferList extends React.Component<TransferListProps, Tra
     return PureRenderMixin.shouldComponentUpdate.apply(this, args);
   }
 
-  getCheckStatus(filteredDataSource: TransferItem[]) {
+  getCheckStatus(filteredItems: TransferItem[]) {
     const { checkedKeys } = this.props;
     if (checkedKeys.length === 0) {
       return 'none';
-    } else if (filteredDataSource.every(item => checkedKeys.indexOf(item.key) >= 0)) {
+    } else if (filteredItems.every(item => checkedKeys.indexOf(item.key) >= 0 || !!item.disabled)) {
       return 'all';
     }
     return 'part';
@@ -142,7 +142,6 @@ export default class TransferList extends React.Component<TransferListProps, Tra
       dataSource,
       titleText,
       checkedKeys,
-      lazy,
       disabled,
       body,
       footer,
@@ -153,6 +152,7 @@ export default class TransferList extends React.Component<TransferListProps, Tra
       itemUnit,
       itemsUnit,
       renderList = ListBody,
+      handleSelectAll,
     } = this.props;
 
     // Custom Layout
@@ -258,22 +258,25 @@ export default class TransferList extends React.Component<TransferListProps, Tra
 
     const listFooter = footerDom ? <div className={`${prefixCls}-footer`}>{footerDom}</div> : null;
 
-    // const checkStatus = this.getCheckStatus(filteredDataSource);
-    // const checkedAll = checkStatus === 'all';
-    // const checkAllCheckbox = (
-    //   <Checkbox
-    //     disabled={disabled}
-    //     checked={checkedAll}
-    //     indeterminate={checkStatus === 'part'}
-    //     onChange={() => this.props.handleSelectAll(filteredDataSource, checkedAll)}
-    //   />
-    // );
+    const checkStatus = this.getCheckStatus(filteredItems);
+    const checkedAll = checkStatus === 'all';
+    const checkAllCheckbox = (
+      <Checkbox
+        disabled={disabled}
+        checked={checkedAll}
+        indeterminate={checkStatus === 'part'}
+        onChange={() => {
+          // Only select enabled items
+          handleSelectAll(filteredItems.filter(item => !item.disabled), !checkedAll);
+        }}
+      />
+    );
 
     return (
       <div className={listCls} style={style}>
         {/* Header */}
         <div className={`${prefixCls}-header`}>
-          {/* {checkAllCheckbox} */}
+          {checkAllCheckbox}
           <span className={`${prefixCls}-header-selected`}>
             <span>
               {(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + filteredItems.length}{' '}