@rainbow-oh/yee-c 0.8.11 → 0.8.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.8.11",
+  "version": "0.8.13",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Table/col-group.tsx

@@ -39,4 +39,4 @@ const ColGroup = React.memo(({ columns }: TableColGroupProps) => {
 
 ColGroup.displayName = 'ColGroup';
 
-export default React.memo(ColGroup);
+export default ColGroup;

package/src/Table/demo/sorter-callback.tsx

@@ -23,8 +23,9 @@ export default () => {
       title: 'Score',
       dataIndex: 'score',
       key: 'score',
-      sorter: true,
-      defaultSortOrder: 'descend' as const,
+      sorter: {
+        defaultSortOrder: 'descend' as const,
+      },
     },
     {
       title: 'Address',

package/src/Table/demo/sorter.tsx

@@ -13,8 +13,9 @@ export default () => {
       title: 'Age',
       dataIndex: 'age',
       key: 'age',
-      sorter: true,
-      defaultSortOrder: 'descend' as const,
+      sorter: {
+        defaultSortOrder: 'descend' as const,
+      },
     },
     {
       title: 'Address',

package/src/Table/hooks/useExpand.ts

@@ -1,10 +1,10 @@
 import useMergedState from '../../hooks/useMergedState';
-import { ExpandableType } from '../interface';
+import { ExpandableType, SelectionKeyType } from '../interface';
 
 export default function useExpand(
   expandable: ExpandableType | undefined,
-  allKeys: string[],
-  getRowKey: (record: Record<string, any>) => string,
+  allKeys: SelectionKeyType[],
+  getRowKey: (record: Record<string, any>) => SelectionKeyType,
 ) {
   const {
     expandedRowKeys, // keys

package/src/Table/hooks/useFilter.ts

@@ -1,68 +1,101 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import type { ColumnProps, FilterValue } from '../interface';
+
+type FilterInput = FilterValue | FilterValue[];
 
 type FilterOptions = {
   dataIndex: string;
-  value: string;
+  value: FilterInput;
 };
 
 type FilterRecord = {
-  value: string;
+  value: FilterInput;
   dataIndex: string;
 };
 
+const isEmptyFilterValue = (value: FilterInput) =>
+  value === '' || (Array.isArray(value) && value.length === 0);
+
+const normalizeValue = (value: unknown) =>
+  value === null || value === undefined ? '' : String(value).toLowerCase();
+
 export default function useFilter({
   data,
+  columns,
 }: {
   data: Array<Record<string, unknown>>;
+  columns: ColumnProps[];
 }) {
   const [filterRecords, setFilterRecords] = useState<Array<FilterRecord>>([]);
+  const columnMap = useMemo(
+    () =>
+      new Map(
+        columns.flatMap((column) =>
+          column.dataIndex ? [[column.dataIndex, column] as const] : [],
+        ),
+      ),
+    [columns],
+  );
+
+  useEffect(() => {
+    setFilterRecords((current) => {
+      const next = current.filter(({ dataIndex }) => columnMap.has(dataIndex));
+      return next.length === current.length ? current : next;
+    });
+  }, [columnMap]);
+
   const onFilter = ({ value, dataIndex }: FilterOptions) => {
-    let newFilterMap = [...filterRecords];
-    if (!value || (Array.isArray(value) && !value.length)) {
-      newFilterMap = newFilterMap.filter(
-        (item) => item.dataIndex !== dataIndex,
-      );
-    } else {
-      let exited = false;
-      newFilterMap = newFilterMap.map((item) => {
-        if (item.dataIndex === dataIndex) {
-          exited = true;
-          return { ...item, value };
-        }
-        return item;
-      });
-      if (!exited) {
-        newFilterMap.push({ dataIndex, value });
+    setFilterRecords((current) => {
+      if (isEmptyFilterValue(value)) {
+        return current.filter((item) => item.dataIndex !== dataIndex);
       }
-    }
-    setFilterRecords(newFilterMap);
+
+      const index = current.findIndex((item) => item.dataIndex === dataIndex);
+      if (index === -1) {
+        return [...current, { dataIndex, value }];
+      }
+
+      return current.map((item, itemIndex) =>
+        itemIndex === index ? { ...item, value } : item,
+      );
+    });
   };
 
   const filtered = useMemo(() => {
     const handled = filterRecords.filter(
-      (item) => item.dataIndex && item.value,
+      ({ dataIndex, value }) =>
+        Boolean(dataIndex) &&
+        columnMap.has(dataIndex) &&
+        !isEmptyFilterValue(value),
     );
     if (!handled.length) {
       return data;
     }
     return data.filter((item) => {
-      return handled.find((o) => {
-        if (Array.isArray(o.value)) {
-          return o.value.some((v) => {
-            const t = item[o.dataIndex] || '';
-            return (t as string).toLowerCase() === v.toLowerCase();
-          });
-        } else {
-          const v = o.value.toLowerCase();
-          const t = item[o.dataIndex] || '';
-          return (t as string).toLowerCase().includes(v);
+      return handled.every(({ dataIndex, value }) => {
+        const customFilter = columnMap.get(dataIndex)?.filter?.onFilter;
+        if (customFilter) {
+          return Array.isArray(value)
+            ? value.some((filterValue) => customFilter(filterValue, item))
+            : customFilter(value, item);
         }
+
+        const targetValue = normalizeValue(item[dataIndex]);
+
+        if (Array.isArray(value)) {
+          return value.some(
+            (filterValue) => targetValue === normalizeValue(filterValue),
+          );
+        }
+
+        return targetValue.includes(normalizeValue(value));
       });
     });
-  }, [data, filterRecords]);
+  }, [columnMap, data, filterRecords]);
 
   return {
     data: filtered,
+    filterRecords,
     onFilter,
   };
 }

package/src/Table/hooks/usePagination.ts

@@ -81,16 +81,6 @@ export default function usePagination({
     });
   };
 
-  if (pagination === false) {
-    return {
-      pageData: data,
-      current: 1,
-      pageSize: data.length,
-      pagination: false,
-    };
-  }
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const pageData = useMemo(() => {
     const total = data.length;
     if (total <= mergedPageSize) return data;
@@ -103,6 +93,15 @@ export default function usePagination({
     return data.slice(start, start + mergedPageSize);
   }, [data, meregdCurrent, mergedPageSize]);
 
+  if (pagination === false) {
+    return {
+      pageData: data,
+      current: 1,
+      pageSize: data.length,
+      pagination: false,
+    };
+  }
+
   return {
     pageData,
     current: meregdCurrent,

package/src/Table/hooks/useSelection.ts

@@ -11,7 +11,7 @@ export default function useSelection({
 }: {
   pageData: Array<Record<string, unknown>>;
   dataSource: Array<Record<string, unknown>>;
-  getRowKey: (record: Record<string, unknown>) => string;
+  getRowKey: (record: Record<string, unknown>) => SelectionKeyType;
   allKeys: Array<SelectionKeyType>;
   rowSelection?: RowSelectionType;
 }) {
@@ -43,29 +43,25 @@ export default function useSelection({
     onChange?.(rowKeys as any, rowRecords);
   };
 
-  const getDisabledKeys = () => {
+  const getDisabledKeys = (): SelectionKeyType[] => {
+    if (disabled === true) {
+      return pageData.map((record) => getRowKey(record));
+    }
     if (Array.isArray(disabled)) {
-      return disabled;
+      return pageData
+        .filter((_, index) => disabled[index])
+        .map((record) => getRowKey(record));
     }
     if (typeof disabled === 'function') {
-      return (
-        Array.isArray(pageData) &&
-        pageData
-          .filter((record, index) => disabled(record, index))
-          .map((record) => getRowKey(record))
-      );
+      return pageData
+        .filter((record, index) => disabled(record, index))
+        .map((record) => getRowKey(record));
     }
     return [];
   };
 
-  const getPageDataRowKeys = () => {
-    return (
-      Array.isArray(pageData) && pageData.map((record) => getRowKey(record))
-    );
-  };
-
-  const disabledKeys = getDisabledKeys() as Array<string>;
-  const pageDataRowKeys = getPageDataRowKeys() as Array<string>;
+  const disabledKeys = getDisabledKeys();
+  const pageDataRowKeys = pageData.map((record) => getRowKey(record));
 
   const isCheckedAll = () => {
     const filtered = pageDataRowKeys.filter(
@@ -109,7 +105,7 @@ export default function useSelection({
     setMergedSelectedRowKeys(rowKeys);
 
     onChange?.(rowKeys, rowRecords);
-    onSelectAll?.(rowKeys as any, rowRecords as any, checked);
+    onSelectAll?.(checked, rowKeys, rowRecords);
   };
 
   const onRadioCheck = (checked: boolean, key: number | string) => {
@@ -118,8 +114,10 @@ export default function useSelection({
     onChange?.([key as any], record as any);
   };
 
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const key = event.target.value;
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement>,
+    key: SelectionKeyType,
+  ) => {
     const checked = event.target.checked;
     if (type === 'checkbox') {
       onCheck(checked, key);

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,