feat(table): 新增 filter 與 sort 受控方式 (#9060)

* feat(table): 調整 filters 為受控組件

* feat(table): 調整 sort 為受控組件

* feat(table): 設置重置時將排序與篩選設回預設值

* fix(table): 修正未設置篩選項會出現 filteredValue 為 null 的狀況

* feat(table): 設置限定服務端排序與篩選默認值儲存

* tests(table/filter): 修正 table filter 測試問題

"filter test by namePath is array" 測試項
其 filters 與 onFilter 配置依照文件所示 其為本地篩選 將不會觸發 服務端請求
修正為正確服務端請求配置 onFilter => false

* fix(table): 修正 filter 使用自訂篩選項時無法被正確綁定值問題

* fix(table): 修正服務端排序清空時無法正確被設置問題

* tests(table/filter): 新增篩選排序測試

1. 新增篩選/排序本地端測試
2. 新增篩選/排序服務端測試
3. 新增服務端預設值重置測試

---------

Co-authored-by: mike <[email protected]>

Author: leadingtw273

packages/table/src/Table.tsx

@@ -134,29 +134,6 @@ function TableRender<T extends Record<string, any>, U, ValueType>(
     return loopFilter(tableColumns);
   }, [counter.columnsMap, tableColumns]);
 
-  /** 如果所有列中的 filters = true | undefined 说明是用的是本地筛选 任何一列配置 filters=false，就能绕过这个判断 */
-  const useLocaleFilter = useMemo(() => {
-    const _columns: any[] = [];
-    // 平铺所有columns, 用于判断是用的是本地筛选
-    const loopColumns = (data: any[]) => {
-      for (let i = 0; i < data.length; i++) {
-        const _curItem = data[i];
-        if (_curItem.children) {
-          loopColumns(_curItem.children);
-        } else {
-          _columns.push(_curItem);
-        }
-      }
-    };
-    loopColumns(columns);
-    return _columns?.every((column) => {
-      return (
-        (!!column.filters && !!column.onFilter) ||
-        (column.filters === undefined && column.onFilter === undefined)
-      );
-    });
-  }, [columns]);
-
   /**
    * 如果是分页的新增，总是加到最后一行
    *
@@ -226,9 +203,8 @@ function TableRender<T extends Record<string, any>, U, ValueType>(
       extra: TableCurrentDataSource<T>,
     ) => {
       rest.onChange?.(changePagination, filters, sorter, extra);
-      if (!useLocaleFilter) {
-        onFilterChange(omitUndefined<any>(filters));
-      }
+
+      onFilterChange(omitUndefined<any>(filters));
 
       // 制造筛选的数据
       // 制造一个排序的数据
@@ -240,7 +216,7 @@ function TableRender<T extends Record<string, any>, U, ValueType>(
           }),
           {},
         );
-        onSortChange(omitUndefined<any>(data));
+        onSortChange(omitUndefined<any>(data) ?? {});
       } else {
         const sorterOfColumn = sorter.column?.sorter;
         const isSortByField = sorterOfColumn?.toString() === sorterOfColumn;
@@ -249,7 +225,7 @@ function TableRender<T extends Record<string, any>, U, ValueType>(
           omitUndefined({
             [`${isSortByField ? sorterOfColumn : sorter.field}`]:
               sorter.order as SortOrder,
-          }),
+          }) ?? {},
         );
       }
     },
@@ -522,11 +498,44 @@ const ProTable = <
     {},
   );
 
-  /** 设置默认排序和筛选值 */
+  // 平铺所有columns, 用于判断是用的是本地筛选/排序
+  const loopColumns = useCallback((data: any[]) => {
+    const _columns: any[] = [];
+
+    for (let i = 0; i < data.length; i++) {
+      const _curItem = data[i];
+      if (_curItem.children) {
+        loopColumns(_curItem.children);
+      } else {
+        _columns.push(_curItem);
+      }
+    }
+
+    return _columns
+  }, []);
+
+  /** 如果所有列中的 filters = true | undefined 说明是用的是本地筛选 任何一列配置 filters=false，就能绕过这个判断 */
+  const useLocaleFilter = useMemo(() => {
+    const _columns: any[] = loopColumns(propsColumns);
+    return _columns?.every((column) => {
+      return (
+        (!!column.filters && !!column.onFilter) ||
+        (column.filters === undefined && column.onFilter === undefined)
+      );
+    });
+  }, [loopColumns, propsColumns]);
+
+  /** 如果所有列中的 sorter != true 说明是用的是本地排序 任何一列配置 sorter=true，就能绕过这个判断 */
+  const useLocaleSorter = useMemo(() => {
+    const _columns: any[] = loopColumns(propsColumns);
+    return _columns?.every((column) => column.sorter !== true);
+  }, [loopColumns, propsColumns]);
+
+  /** 设置默认的服務端排序和筛选值 */
   useEffect(() => {
     const { sort, filter } = parseDefaultColumnConfig(propsColumns);
-    setProFilter(filter);
-    setProSort(sort);
+    if(!useLocaleFilter) setProFilter(filter);
+    if(!useLocaleSorter) setProSort(sort);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -746,10 +755,13 @@ const ProTable = <
     resetAll: () => {
       // 清空选中行
       onCleanSelected();
+      
+      const { sort, filter } = parseDefaultColumnConfig(propsColumns);
       // 清空筛选
-      setProFilter({});
+      setProFilter(filter);
       // 清空排序
-      setProSort({});
+      setProSort(sort);
+
       // 清空 toolbar 搜索
       counter.setKeyWords(undefined);
       // 重置页码
@@ -778,6 +790,8 @@ const ProTable = <
       editableUtils,
       rowKey,
       childrenColumnName: props.expandable?.childrenColumnName,
+      proFilter,
+      proSort,
     }).sort(columnSort(counter.columnsMap));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -788,6 +802,8 @@ const ProTable = <
     type,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     editableUtils.editableKeys && editableUtils.editableKeys.join(','),
+    proFilter,
+    proSort,
   ]);
 
   /** Table Column 变化的时候更新一下，这个参数将会用于渲染 */
@@ -990,11 +1006,11 @@ const ProTable = <
       toolbarDom={toolbarDom}
       hideToolbar={hideToolbar}
       onSortChange={(sortConfig) => {
-        if (proSort === sortConfig) return;
-        setProSort(sortConfig ?? {});
+        if (useLocaleSorter || sortConfig === proSort) return;
+        setProSort(sortConfig);
       }}
       onFilterChange={(filterConfig) => {
-        if (filterConfig === proFilter) return;
+        if (useLocaleFilter || filterConfig === proFilter) return;
         setProFilter(filterConfig);
       }}
       editableUtils={editableUtils}

packages/table/src/utils/genProColumnToColumn.tsx

@@ -20,6 +20,7 @@ import {
   renderColumnsTitle,
 } from './columnRender';
 import { genColumnKey } from './index';
+import { SortOrder } from 'antd/lib/table/interface';
 
 type ColumnToColumnReturnType<T> = (TableColumnType<T> & {
   index?: number;
@@ -31,6 +32,8 @@ type ColumnToColumnParams<T> = {
   columnEmptyText: ProFieldEmptyText;
   type: ProSchemaComponentTypes;
   editableUtils: UseEditableUtilType;
+  proFilter: Record<string, (string | number)[] | null>; 
+  proSort: Record<string, SortOrder>;
 } & Pick<TableProps<T>, 'rowKey' | 'childrenColumnName'>;
 
 /**
@@ -53,6 +56,8 @@ export function genProColumnToColumn<T extends AnyObject>(
     marginSM,
     rowKey = 'id',
     childrenColumnName = 'children',
+    proFilter,
+    proSort,
   } = params;
 
   const subNameRecord = new Map();
@@ -69,6 +74,7 @@ export function genProColumnToColumn<T extends AnyObject>(
         children,
         onFilter,
         filters = [],
+        sorter,
       } = columnProps as ProColumns<T, any>;
       const columnKey = genColumnKey(
         key || dataIndex?.toString(),
@@ -94,6 +100,15 @@ export function genProColumnToColumn<T extends AnyObject>(
         return omitBoolean(onFilter);
       };
 
+      // 对应筛选值，用作双向绑定
+      const filteredValue = columnKey && proFilter[columnKey] !== undefined 
+        ? proFilter[columnKey] 
+        : null;
+      // 对应排序值，用作双向绑定
+      const sortOrder = columnKey && proSort[columnKey] !== undefined 
+      ? proSort[columnKey] 
+      : null;
+
       let keyName: string | number | symbol = rowKey as string;
 
       const tempColumns = {
@@ -109,6 +124,8 @@ export function genProColumnToColumn<T extends AnyObject>(
               ).filter((valueItem) => valueItem && valueItem.value !== 'all')
             : filters,
         onFilter: genOnFilter(),
+        filteredValue: filters && genOnFilter() == null? filteredValue : undefined,
+        sortOrder: sorter === true ? sortOrder : undefined,
         fixed: config.fixed,
         width: columnProps.width || (columnProps.fixed ? 200 : undefined),
         children: (columnProps as ProColumns<T, any>).children