demo: simplify transfer table example (#48529)

* demo: simplify transfer table example

* demo: simplify transfer table example

components/transfer/demo/table-transfer.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Space, Switch, Table, Tag, Transfer } from 'antd';
 import type { GetProp, TableColumnsType, TableProps, TransferProps } from 'antd';
-import difference from 'lodash/difference';
 
 type TransferItem = GetProp<TransferProps, 'dataSource'>[number];
 type TableRowSelection<T extends object> = TableProps<T>['rowSelection'];
@@ -10,7 +9,6 @@ interface RecordType {
   key: string;
   title: string;
   description: string;
-  disabled: boolean;
   tag: string;
 }
 
@@ -18,7 +16,6 @@ interface DataType {
   key: string;
   title: string;
   description: string;
-  disabled: boolean;
   tag: string;
 }
 
@@ -34,28 +31,20 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }: TableTransfe
     {({
       direction,
       filteredItems,
-      onItemSelectAll,
       onItemSelect,
+      onItemSelectAll,
       selectedKeys: listSelectedKeys,
       disabled: listDisabled,
     }) => {
       const columns = direction === 'left' ? leftColumns : rightColumns;
 
       const rowSelection: TableRowSelection<TransferItem> = {
-        getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled }),
-        onSelectAll(selected, selectedRows) {
-          const treeSelectedKeys = selectedRows
-            .filter((item) => !item.disabled)
-            .map(({ key }) => key);
-          const diffKeys = selected
-            ? difference(treeSelectedKeys, listSelectedKeys)
-            : difference(listSelectedKeys, treeSelectedKeys);
-          onItemSelectAll(diffKeys as string[], selected);
-        },
-        onSelect({ key }, selected) {
-          onItemSelect(key as string, selected);
+        getCheckboxProps: () => ({ disabled: listDisabled }),
+        onChange(selectedRowKeys) {
+          onItemSelectAll(selectedRowKeys, 'replace');
         },
         selectedRowKeys: listSelectedKeys,
+        selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT, Table.SELECTION_NONE],
       };
 
       return (
@@ -70,7 +59,7 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }: TableTransfe
               if (itemDisabled || listDisabled) {
                 return;
               }
-              onItemSelect(key as string, !listSelectedKeys.includes(key as string));
+              onItemSelect(key, !listSelectedKeys.includes(key));
             },
           })}
         />
@@ -85,15 +74,10 @@ const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
   key: i.toString(),
   title: `content${i + 1}`,
   description: `description of content${i + 1}`,
-  disabled: i % 4 === 0,
   tag: mockTags[i % 3],
 }));
 
-const originTargetKeys = mockData
-  .filter((item) => Number(item.key) % 3 > 1)
-  .map((item) => item.key);
-
-const leftTableColumns: TableColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     dataIndex: 'title',
     title: 'Name',
@@ -101,7 +85,11 @@ const leftTableColumns: TableColumnsType<DataType> = [
   {
     dataIndex: 'tag',
     title: 'Tag',
-    render: (tag: string) => <Tag style={{ marginInlineEnd: 0 }}>{tag.toUpperCase()}</Tag>,
+    render: (tag: string) => (
+      <Tag style={{ marginInlineEnd: 0 }} color="cyan">
+        {tag.toUpperCase()}
+      </Tag>
+    ),
   },
   {
     dataIndex: 'description',
@@ -109,56 +97,39 @@ const leftTableColumns: TableColumnsType<DataType> = [
   },
 ];
 
-const rightTableColumns: TableColumnsType<DataType> = [
-  {
-    dataIndex: 'title',
-    title: 'Name',
-  },
-];
-
 const App: React.FC = () => {
-  const [targetKeys, setTargetKeys] = useState<TransferProps['targetKeys']>(originTargetKeys);
+  const [targetKeys, setTargetKeys] = useState<TransferProps['targetKeys']>([]);
   const [disabled, setDisabled] = useState(false);
-  const [showSearch, setShowSearch] = useState(false);
 
   const onChange: TableTransferProps['onChange'] = (nextTargetKeys) => {
     setTargetKeys(nextTargetKeys);
   };
 
-  const triggerDisable = (checked: boolean) => {
+  const toggleDisabled = (checked: boolean) => {
     setDisabled(checked);
   };
 
-  const triggerShowSearch = (checked: boolean) => {
-    setShowSearch(checked);
-  };
-
   return (
     <>
       <TableTransfer
         dataSource={mockData}
         targetKeys={targetKeys}
         disabled={disabled}
-        showSearch={showSearch}
+        showSearch
+        showSelectAll={false}
         onChange={onChange}
         filterOption={(inputValue, item) =>
           item.title!.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1
         }
-        leftColumns={leftTableColumns}
-        rightColumns={rightTableColumns}
+        leftColumns={columns}
+        rightColumns={columns}
       />
       <Space style={{ marginTop: 16 }}>
         <Switch
           unCheckedChildren="disabled"
           checkedChildren="disabled"
           checked={disabled}
-          onChange={triggerDisable}
-        />
-        <Switch
-          unCheckedChildren="showSearch"
-          checkedChildren="showSearch"
-          checked={showSearch}
-          onChange={triggerShowSearch}
+          onChange={toggleDisabled}
         />
       </Space>
     </>