fix(next): fix selected bug by search in SelectTable (#2923)

alibaba · Mar 11, 2022 · c672601 · c672601
1 parent addfcc0
commit c672601
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 20 deletions.
diff --git a/packages/next/src/select-table/index.tsx b/packages/next/src/select-table/index.tsx
@@ -135,6 +135,7 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
   }, [filteredDataSource, filterSort])
 
   const flatDataSource = useFlatOptions(dataSource)
+  const flatFilteredDataSource = useFlatOptions(filteredDataSource)
 
   // selected keys for Table UI
   const selected = getUISelected(
@@ -212,15 +213,17 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
       currentSelected,
       selected,
       primaryKey,
-      flatDataSource
+      flatDataSource,
+      flatFilteredDataSource
     )
     onInnerChange(selectedRowKeys, records)
   }
 
   // Table All Checkbox
   const titleAddon = useTitleAddon(
     selected,
-    useFlatOptions(filteredDataSource),
+    flatDataSource,
+    flatFilteredDataSource,
     primaryKey,
     mode,
     disabled,

diff --git a/packages/next/src/select-table/useCheckSlackly.tsx b/packages/next/src/select-table/useCheckSlackly.tsx
@@ -19,27 +19,31 @@ interface ICheckSlackly {
     currentSelected: any[],
     allSelected: any[],
     primaryKey: string,
-    flatDataSource: any[]
+    flatDataSource: any[],
+    flatFilteredDataSource: any[]
   ): {
     selectedRowKeys: any[]
     records: any[]
   }
 }
 
+// 父子节点（节点状态按全完整数据计算，节点操作按筛选数据计算）
 const useCheckSlackly: ICheckSlackly = (
   currentSelected, // onChange 返回的 keys
   allSelected, // Table UI 展示的 keys
   primaryKey,
-  flatDataSource
+  flatDataSource,
+  flatFilteredDataSource
 ) => {
   const isSelected = currentSelected.length > allSelected.length // 判断是选中还是取消
   const currentKey = [...currentSelected, ...allSelected].find(
     (key) => !(currentSelected.includes(key) && allSelected.includes(key)) // 当前变化key不同时存在于两个selected
   )
-  const currentRecords = flatDataSource.find(
+  // 从过滤后的数据中获取当前record
+  const currentRecord = flatFilteredDataSource.find(
     (item) => item[primaryKey] === currentKey
   )
-  const currentTreeKeys = getTreeKeys([currentRecords], primaryKey)
+  const currentTreeKeys = getTreeKeys([currentRecord], primaryKey)
   let newSelectedRowKeys = []
   if (isSelected) {
     // 选中当前key及其子keys

diff --git a/packages/next/src/select-table/useTitleAddon.tsx b/packages/next/src/select-table/useTitleAddon.tsx
@@ -1,42 +1,58 @@
 import React from 'react'
 import { Checkbox } from '@alifd/next'
 
-// 重写表格表头Checkbox
+// 重写表格表头Checkbox（节点状态按全完整数据计算，节点操作按筛选数据计算）
 const newCheckbox =
   (
     selected,
+    flatDataSource,
     filteredFlatDataSource,
     primaryKey,
     disabled,
     readOnly,
     onChange
   ) =>
   () => {
-    const currentDataSource = filteredFlatDataSource.filter(
-      (item) => !item.disabled
+    // 当前可全选的keys
+    const currentSelected = filteredFlatDataSource
+      .filter((item) => !item.disabled)
+      .map((item) => item?.[primaryKey])
+
+    // 点击全选的完整数据（筛选前后）
+    const newSelected = [...new Set([...selected, ...currentSelected])]
+    const newRecords = flatDataSource.filter((item) =>
+      newSelected.includes(item[primaryKey])
     )
-    const currentDataSourceKeys = currentDataSource.map(
-      (item) => item?.[primaryKey]
+
+    // 取消全选的剩余数据（筛选前后）
+    const restSelected = selected.filter(
+      (key) => !currentSelected.includes(key)
     )
-    const currentSelected = selected.filter((item) =>
-      currentDataSourceKeys.includes(item)
+    const restRecords = flatDataSource.filter((item) =>
+      restSelected.includes(item[primaryKey])
     )
-    const indeterminate = !!(
-      currentSelected?.length &&
-      currentSelected.length !== currentDataSource.length
+
+    // 全选框是否选中
+    const checked = Boolean(
+      selected?.length &&
+        selected?.length ===
+          flatDataSource.filter((item) => !item.disabled).length
     )
+    // 全选框是否未完全选中
+    const indeterminate = Boolean(selected?.length && !checked)
+
     return (
       <Checkbox
         key="titleAddons"
-        checked={!!currentSelected?.length}
         disabled={disabled}
+        checked={checked}
         indeterminate={indeterminate}
         onChange={(checked) => {
           if (!readOnly) {
-            if (checked || indeterminate) {
-              onChange?.(currentDataSourceKeys, currentDataSource)
+            if (checked) {
+              onChange?.(newSelected, newRecords)
             } else {
-              onChange?.([], [])
+              onChange?.(restSelected, restRecords)
             }
           }
         }}
@@ -46,6 +62,7 @@ const newCheckbox =
 
 const useTitleAddon = (
   selected: any[],
+  flatDataSource: any[],
   filteredFlatDataSource: any[],
   primaryKey: string,
   mode: string,
@@ -62,6 +79,7 @@ const useTitleAddon = (
     }),
     titleAddons: newCheckbox(
       selected,
+      flatDataSource,
       filteredFlatDataSource,
       primaryKey,
       disabled,