@rainbow-oh/yee-c 0.8.12 → 0.8.14

package/src/Table/hooks/useSorter.ts

@@ -1,106 +1,260 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ColumnProps } from '../interface';
 
-type SortState = {
-  [dataIndex: string]: 0 | 1 | -1;
+type SortOrder = 1 | -1;
+type SortState = Record<string, SortOrder>;
+type SorterConfig = Exclude<ColumnProps['sorter'], boolean | undefined>;
+type SortQueueItem = {
+  dataIndex: string;
+  order: SortOrder;
 };
-
-export default function useSorter({
-  data,
-  columns,
-}: {
+type SortChangeResult = {
   data: Array<Record<string, unknown>>;
-  columns: Array<ColumnProps>;
-}) {
-  const getDefaultSorters = useCallback(() => {
-    const sorters: SortState = {};
-    columns.forEach((column) => {
-      const { dataIndex, sorter } = column;
-      if (!sorter) return;
-      const { defaultSortOrder } =
-        typeof sorter === 'boolean' ? ({} as any) : sorter;
-      if (dataIndex && sorter) {
-        if (defaultSortOrder === 'ascend') {
-          sorters[dataIndex] = 1;
-        } else if (defaultSortOrder === 'descend') {
-          sorters[dataIndex] = -1;
-        } else {
-          sorters[dataIndex] = 0;
-        }
-      }
-    });
-    return sorters;
-  }, [columns]);
+  sorters: SortState;
+};
 
-  const [sorters, setSorters] = useState<SortState>(getDefaultSorters());
+const getSorterConfig = (column?: ColumnProps): SorterConfig | undefined =>
+  column && typeof column.sorter === 'object' ? column.sorter : undefined;
 
-  // when columns changed, reset sorters
-  useEffect(() => {
-    setSorters(getDefaultSorters());
-  }, [getDefaultSorters]);
-
-  // handle sort on column title click
-  const onSort = (dataIndex: string) => {
-    setSorters((prev) => {
-      const newSorters = { ...prev };
-      const currentOrder = newSorters[dataIndex] ?? 0;
-
-      if (currentOrder === 0) {
-        newSorters[dataIndex] = 1;
-      } else if (currentOrder === 1) {
-        newSorters[dataIndex] = -1;
-      } else {
-        newSorters[dataIndex] = 0;
-      }
+const toSortOrder = (
+  order: 'ascend' | 'descend' | null | undefined,
+): SortOrder | 0 => {
+  if (order === 'ascend') return 1;
+  if (order === 'descend') return -1;
+  return 0;
+};
 
-      // is multiple sort
-      const isMultipleSort = undefined;
+const getNextSortOrder = (order: SortOrder | 0): SortOrder | 0 => {
+  if (order === 0) return 1;
+  if (order === 1) return -1;
+  return 0;
+};
 
-      if (isMultipleSort) {
-      } else {
-        Object.keys(newSorters).forEach((key) => {
-          if (key !== dataIndex) {
-            delete newSorters[key];
-          }
-        });
-      }
+const isMultipleSorter = (column?: ColumnProps) =>
+  Boolean(getSorterConfig(column)?.multiple);
 
-      return newSorters;
-    });
-  };
+const applySortChange = (
+  queue: SortQueueItem[],
+  column: ColumnProps,
+  order: SortOrder | 0,
+  columnMap: Map<string, ColumnProps>,
+): SortQueueItem[] => {
+  const { dataIndex } = column;
+  if (!dataIndex) return queue;
+  if (order === 0) {
+    return queue.filter((item) => item.dataIndex !== dataIndex);
+  }
+
+  const multiple = getSorterConfig(column)?.multiple;
+  const nextItem = { dataIndex, order };
+  if (!multiple) {
+    return [nextItem];
+  }
+
+  const next = queue.filter(
+    (item) =>
+      item.dataIndex === dataIndex ||
+      isMultipleSorter(columnMap.get(item.dataIndex)),
+  );
+  const currentIndex = next.findIndex((item) => item.dataIndex === dataIndex);
+  if (currentIndex === -1) {
+    next.push(nextItem);
+  } else {
+    next[currentIndex] = nextItem;
+  }
+
+  if (typeof multiple === 'number') {
+    const limit = Math.max(1, Math.floor(multiple));
+    while (next.length > limit) {
+      const removeIndex = next.findIndex(
+        (item) => item.dataIndex !== dataIndex,
+      );
+      if (removeIndex === -1) break;
+      next.splice(removeIndex, 1);
+    }
+  }
+
+  return next;
+};
+
+const normalizeQueue = (
+  queue: SortQueueItem[],
+  columnMap: Map<string, ColumnProps>,
+) =>
+  queue.reduce<SortQueueItem[]>((next, item) => {
+    const column = columnMap.get(item.dataIndex);
+    return column ? applySortChange(next, column, item.order, columnMap) : next;
+  }, []);
 
-  const sorted = useMemo(() => {
-    const activeSorters = Object.entries(sorters).filter(
-      ([, order]) => order !== 0,
+const areQueuesEqual = (a: SortQueueItem[], b: SortQueueItem[]) =>
+  a.length === b.length &&
+  a.every(
+    (item, index) =>
+      item.dataIndex === b[index]?.dataIndex && item.order === b[index]?.order,
+  );
+
+const createColumnMap = (columns: ColumnProps[]) =>
+  new Map(
+    columns
+      .filter((column) => Boolean(column.dataIndex && column.sorter))
+      .map((column) => [column.dataIndex as string, column]),
+  );
+
+const createInitialQueue = (
+  columns: ColumnProps[],
+  columnMap: Map<string, ColumnProps>,
+) =>
+  columns.reduce<SortQueueItem[]>((queue, column) => {
+    const config = getSorterConfig(column);
+    const order = toSortOrder(
+      config?.sortOrder !== undefined
+        ? config.sortOrder
+        : config?.defaultSortOrder,
     );
+    return order ? applySortChange(queue, column, order, columnMap) : queue;
+  }, []);
 
-    if (activeSorters.length === 0) {
-      return data;
+const mergeControlledSorters = (
+  queue: SortQueueItem[],
+  columns: ColumnProps[],
+  columnMap: Map<string, ColumnProps>,
+) => {
+  const controlledOrders = new Map<string, SortOrder | 0>();
+  columns.forEach((column) => {
+    const config = getSorterConfig(column);
+    if (column.dataIndex && config?.sortOrder !== undefined) {
+      controlledOrders.set(column.dataIndex, toSortOrder(config.sortOrder));
     }
+  });
 
-    const sortedData = [...data].sort((a, b) => {
-      for (const [dataIndex, order] of activeSorters) {
-        const aValue = a[dataIndex];
-        const bValue = b[dataIndex];
+  const uncontrolledQueue = queue.filter(
+    (item) => !controlledOrders.has(item.dataIndex),
+  );
+  const controlledQueue: SortQueueItem[] = [];
+  queue.forEach((item) => {
+    const controlledOrder = controlledOrders.get(item.dataIndex);
+    if (controlledOrder === undefined) return;
+    controlledOrders.delete(item.dataIndex);
+    if (controlledOrder) {
+      controlledQueue.push({
+        dataIndex: item.dataIndex,
+        order: controlledOrder,
+      });
+    }
+  });
 
-        // Handle undefined/null values
-        if (aValue === null && bValue === null) continue;
-        if (aValue === null || aValue === undefined) return 1;
-        if (bValue === null || bValue === undefined) return -1;
+  columns.forEach((column) => {
+    const { dataIndex } = column;
+    if (!dataIndex) return;
+    const controlledOrder = controlledOrders.get(dataIndex);
+    if (controlledOrder) {
+      controlledQueue.push({ dataIndex, order: controlledOrder });
+    }
+  });
 
-        // Compare values
-        if (aValue < bValue) {
-          return order === -1 ? 1 : -1;
-        }
-        if (aValue > bValue) {
-          return order === -1 ? -1 : 1;
+  return normalizeQueue([...uncontrolledQueue, ...controlledQueue], columnMap);
+};
+
+const queueToSortState = (queue: SortQueueItem[]): SortState =>
+  Object.fromEntries(
+    queue.map(({ dataIndex, order }) => [dataIndex, order]),
+  ) as SortState;
+
+const compareValues = (a: unknown, b: unknown) => {
+  if (Object.is(a, b)) return 0;
+  if (typeof a === 'number' && typeof b === 'number') return a - b;
+  if (typeof a === 'bigint' && typeof b === 'bigint') return a < b ? -1 : 1;
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  if (typeof a === 'boolean' && typeof b === 'boolean') {
+    return Number(a) - Number(b);
+  }
+  return String(a).localeCompare(String(b));
+};
+
+const sortData = (
+  data: Array<Record<string, unknown>>,
+  queue: SortQueueItem[],
+  columnMap: Map<string, ColumnProps>,
+) => {
+  if (!queue.length) return data;
+
+  return [...data].sort((a, b) => {
+    for (const { dataIndex, order } of queue) {
+      const aValue = a[dataIndex];
+      const bValue = b[dataIndex];
+
+      const compare = getSorterConfig(columnMap.get(dataIndex))?.sort;
+      if (compare) {
+        const result = compare(a, b);
+        if (result !== 0) {
+          return order === -1 ? -result : result;
         }
+        continue;
       }
-      return 0;
+
+      if (aValue === null && bValue === null) continue;
+      if (aValue === null || aValue === undefined) return 1;
+      if (bValue === null || bValue === undefined) return -1;
+
+      const result = compareValues(aValue, bValue);
+      if (result !== 0) {
+        return order === -1 ? -result : result;
+      }
+    }
+    return 0;
+  });
+};
+
+export default function useSorter({
+  data,
+  columns,
+}: {
+  data: Array<Record<string, unknown>>;
+  columns: Array<ColumnProps>;
+}) {
+  const columnMap = useMemo(() => createColumnMap(columns), [columns]);
+  const [internalQueue, setInternalQueue] = useState<SortQueueItem[]>(() =>
+    createInitialQueue(columns, columnMap),
+  );
+
+  useEffect(() => {
+    setInternalQueue((current) => {
+      const next = normalizeQueue(current, columnMap);
+      return areQueuesEqual(current, next) ? current : next;
     });
+  }, [columnMap]);
+
+  const activeQueue = useMemo(
+    () => mergeControlledSorters(internalQueue, columns, columnMap),
+    [internalQueue, columns, columnMap],
+  );
+  const sorters = useMemo(() => queueToSortState(activeQueue), [activeQueue]);
+  const sorted = useMemo(
+    () => sortData(data, activeQueue, columnMap),
+    [data, activeQueue, columnMap],
+  );
+
+  const onSort = useCallback(
+    (dataIndex: string): SortChangeResult => {
+      const column = columnMap.get(dataIndex);
+      if (!column) return { data: sorted, sorters };
+
+      const currentOrder =
+        activeQueue.find((item) => item.dataIndex === dataIndex)?.order ?? 0;
+      const nextQueue = applySortChange(
+        activeQueue,
+        column,
+        getNextSortOrder(currentOrder),
+        columnMap,
+      );
+      const nextSorters = queueToSortState(nextQueue);
+      const nextData = sortData(data, nextQueue, columnMap);
 
-    return sortedData;
-  }, [data, sorters]);
+      setInternalQueue(nextQueue);
+      return { data: nextData, sorters: nextSorters };
+    },
+    [activeQueue, columnMap, data, sorted, sorters],
+  );
 
   return {
     data: sorted,

package/src/Table/interface.ts

@@ -24,7 +24,7 @@ export interface ExpandableType {
   /**
    * Default expanded rows
    */
-  defaultExpandedRowKeys?: string[]; // Default expanded rows
+  defaultExpandedRowKeys?: SelectionKeyType[]; // Default expanded rows
   /**
    * Expanded rows
    */
@@ -57,6 +57,7 @@ export interface ExpandableType {
 }
 
 export type SelectionKeyType = string | number;
+export type FilterValue = string | number;
 
 export type ColumnSemanticType = 'inner' | 'action';
 
@@ -210,7 +211,7 @@ export interface ColumnProps {
     /**
      * Filter callback function
      */
-    onFilter?: (value: string, record: Record<string, any>) => boolean;
+    onFilter?: (value: FilterValue, record: Record<string, any>) => boolean;
   };
   /**
    * Sorter config
@@ -221,9 +222,13 @@ export interface ColumnProps {
         /**
          * Sort function
          */
-        sort?: () => number | boolean;
+        sort?: (
+          a: Record<string, unknown>,
+          b: Record<string, unknown>,
+        ) => number;
         /**
-         * Whether to support multi-column sort, if set to a number, it indicates the number of sortable columns
+         * Enable multi-column sorting. A positive number limits the active
+         * sorters; when exceeded, the earliest activated sorter is removed.
          */
         multiple?: boolean | number;
         /**
@@ -405,6 +410,7 @@ export interface TableRowProps {
   pageSize: number;
   index: number;
   record: Record<string, any>;
+  rowKeyValue: SelectionKeyType;
   columns: ColumnProps[];
   expandable?: ExpandableType;
   expandedRowKeys?: Array<string | number>;
@@ -436,7 +442,10 @@ export interface TableRowProps {
     index: number;
   }) => void;
   // Checkbox or Radio onChange event
-  onSelectionChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onSelectionChange: (
+    event: ChangeEvent<HTMLInputElement>,
+    key: SelectionKeyType,
+  ) => void;
 }
 
 type LazyLoadType = {
@@ -452,7 +461,10 @@ export interface LazyRowProps extends TableRowProps {
   lazyLoad?: boolean | LazyLoadType;
 }
 
-export interface TableBodyProps extends Omit<LazyRowProps, 'index' | 'record'> {
+export interface TableBodyProps extends Omit<
+  LazyRowProps,
+  'index' | 'record' | 'rowKeyValue'
+> {
   pageData: Array<Record<string, any>>;
   noData?: React.ReactNode;
 }
@@ -619,7 +631,7 @@ export interface TableProps
    * Set the unique key for rows
    * @default id
    */
-  rowKey?: string | ((record: Record<string, any>) => string);
+  rowKey?: string | ((record: Record<string, any>) => SelectionKeyType);
   /**
    * Summary bar
    */

package/src/Table/table.tsx

@@ -83,15 +83,28 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
   });
 
   // Filter
-  const { data: filteredData, onFilter: onFilterInternal } = useFilter({
+  const {
+    data: filteredData,
+    filterRecords,
+    onFilter: onFilterInternal,
+  } = useFilter({
     data: dataSource,
+    columns: wrapedColumns,
   });
 
+  const filters = useMemo(
+    () =>
+      Object.fromEntries(
+        filterRecords.map(({ dataIndex, value }) => [dataIndex, value]),
+      ),
+    [filterRecords],
+  );
+
   // Sort
   const {
     data: sortedData,
     sorters,
-    onSort,
+    onSort: onSortInternal,
   } = useSorter({ data: filteredData, columns: wrapedColumns });
   // Pagination
   const { pageData, current, pageSize, pagination } = usePagination({
@@ -102,7 +115,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
           onChange({
             pagination: info,
             sorter: sorters,
-            filters: undefined, // TODO: Extract filter info from onFilterInternal
+            filters,
             currentDataSource: sortedData,
             action: 'paginate',
           });
@@ -110,6 +123,20 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
       : undefined,
   });
 
+  const handleSort = React.useCallback(
+    (dataIndex: string) => {
+      const next = onSortInternal(dataIndex);
+      onChange?.({
+        pagination: pagination === false ? undefined : { current, pageSize },
+        sorter: next.sorters,
+        filters,
+        currentDataSource: next.data,
+        action: 'sort',
+      });
+    },
+    [onSortInternal, onChange, pagination, current, pageSize, filters],
+  );
+
   // Expanded row data
   const { expandedRowKeys, onExpand } = useExpand(
     expandable,
@@ -124,8 +151,8 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     onChange: onSelectionChange,
   } = useSelection({ pageData, dataSource, getRowKey, rowSelection, allKeys });
 
-  // Track previous values to determine what action triggered onChange
-  const prevSortersRef = useRef<typeof sorters>({});
+  // Track filter changes to emit onChange after filtered data is recalculated
+  const prevFilterRecordsRef = useRef(filterRecords);
   const contentWrapperRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const [horizontalScroll, setHorizontalScroll] = React.useState({
@@ -156,51 +183,29 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     );
   }, []);
 
-  // Wrap onFilter to trigger onChange
-  const onFilter = React.useCallback(
-    (...args: Parameters<typeof onFilterInternal>) => {
-      onFilterInternal(...args);
-      // Trigger onChange for filter action
-      if (onChange) {
-        onChange({
-          pagination: pagination === false ? undefined : { current, pageSize },
-          sorter: sorters,
-          filters: undefined, // TODO: Extract filter info from args
-          currentDataSource: filteredData,
-          action: 'filter',
-        });
-      }
-    },
-    [
-      onChange,
-      pagination,
-      current,
-      pageSize,
-      sorters,
-      filteredData,
-      onFilterInternal,
-    ],
-  );
-
-  // Trigger onChange when sorter, pagination, or filter changes
   useEffect(() => {
+    if (prevFilterRecordsRef.current === filterRecords) return;
+
+    prevFilterRecordsRef.current = filterRecords;
     if (!onChange) return;
 
-    // Check if sorters changed
-    const sortersChanged =
-      JSON.stringify(prevSortersRef.current) !== JSON.stringify(sorters);
-    if (sortersChanged && prevSortersRef.current !== sorters) {
-      prevSortersRef.current = sorters;
-      onChange({
-        pagination: pagination === false ? undefined : { current, pageSize },
-        sorter: sorters,
-        filters: undefined,
-        currentDataSource: sortedData,
-        action: 'sort',
-      });
-      return;
-    }
-  }, [sorters, current, pageSize, pageData, sortedData, onChange]);
+    onChange({
+      pagination: pagination === false ? undefined : { current, pageSize },
+      sorter: sorters,
+      filters,
+      currentDataSource: sortedData,
+      action: 'filter',
+    });
+  }, [
+    filterRecords,
+    filters,
+    sortedData,
+    pagination,
+    current,
+    pageSize,
+    sorters,
+    onChange,
+  ]);
 
   useEffect(() => {
     updateHorizontalScroll();
@@ -245,9 +250,9 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
         headerRows={headerRows}
         checkedAll={checkedAll}
         sorters={sorters}
-        onSort={onSort}
+        onSort={handleSort}
         onCheckAll={onCheckAll}
-        onInternalFilter={onFilter}
+        onInternalFilter={onFilterInternal}
       />
     );
   };

package/src/Table/tbody/index.tsx

@@ -31,19 +31,27 @@ const TableBody: React.FC<TableBodyProps> = (props) => {
 
   const getRenderRows = () => {
     if (lazyLoad) {
-      return <LazyRow {...rest} pageData={pageData} columns={columns} />;
+      return (
+        <LazyRow
+          {...rest}
+          pageData={pageData}
+          columns={columns}
+          resolveRowKey={resolveRowKey}
+        />
+      );
     }
     return pageData.map((record: Record<string, any>, index: number) => {
+      const resolvedRowKey = resolveRowKey(record);
+
       // 整行接管：由外部组件渲染 <tr> + 单元格（可放拖拽手柄等）
       if (RowRenderer) {
-        const rk = resolveRowKey(record);
         return (
           <RowRenderer
-            key={rk ?? index}
+            key={resolvedRowKey ?? index}
             record={record}
             index={index}
             columns={columns}
-            rowKey={rk}
+            rowKey={resolvedRowKey}
           />
         );
       }
@@ -52,8 +60,9 @@ const TableBody: React.FC<TableBodyProps> = (props) => {
           {...rest}
           columns={columns}
           record={record}
+          rowKeyValue={resolvedRowKey}
           index={index}
-          key={`row-${record.key || index}`}
+          key={resolvedRowKey ?? `row-${index}`}
         />
       );
     });

package/src/Table/tbody/lazy-row.tsx

@@ -6,7 +6,7 @@ const createBlank = (size: number, key: string) => {
     : [];
 };
 const LazyRow = (props: any) => {
-  const { range, pageData, columns, ...rest } = props;
+  const { range, pageData, columns, resolveRowKey, ...rest } = props;
   const { start, end } = range;
   let result: any = [];
   const pl = pageData.length;
@@ -14,13 +14,16 @@ const LazyRow = (props: any) => {
   result = result.concat(startBlank);
 
   for (let i = start; i < (end > pl ? pl : end); i++) {
+    const record = pageData[i];
+    const rowKeyValue = resolveRowKey(record);
     result.push(
       <TableRow
         {...rest}
         columns={columns}
-        record={pageData[i]}
+        record={record}
+        rowKeyValue={rowKeyValue}
         index={i}
-        key={'row-' + i}
+        key={rowKeyValue ?? `row-${i}`}
       />,
     );
   }

package/src/Table/tbody/row.tsx

@@ -14,6 +14,7 @@ const TableRow: React.FC<TableRowProps> = (props) => {
   const {
     index,
     record,
+    rowKeyValue,
     columns,
     highlight,
     stripe,
@@ -30,10 +31,10 @@ const TableRow: React.FC<TableRowProps> = (props) => {
     ...rest
   } = props;
 
-  const { prefixCls, rowKey } = useContext(TableCtx);
+  const { prefixCls } = useContext(TableCtx);
 
   const expanded = expandedRowKeys?.includes(
-    expandedKeyType === 'index' ? index + 1 : record[rowKey],
+    expandedKeyType === 'index' ? index + 1 : rowKeyValue,
   );
 
   const high = React.useMemo(() => {
@@ -57,7 +58,6 @@ const TableRow: React.FC<TableRowProps> = (props) => {
 
   const getSelection = (column: WrapedColumnProps) => {
     const { type, disabled: colDisabled, onCell } = column;
-    const rowKeyValue = record[rowKey];
     const props = (onCell?.(record, index) || {}) as Record<string, unknown>;
     const checked = selectedRowKeys?.includes(rowKeyValue);
 
@@ -75,7 +75,8 @@ const TableRow: React.FC<TableRowProps> = (props) => {
     const commonProps = {
       checked,
       value: rowKeyValue,
-      onChange: onSelectionChange,
+      onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
+        onSelectionChange(event, rowKeyValue),
       disabled,
       ...props,
     };