@rainbow-oh/yee-c 0.8.12 → 0.8.13

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,
     };

package/src/Table/theader/cell.tsx

@@ -46,6 +46,8 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
   const sortOrder = (dataIndex && sorters?.[dataIndex]) || 0;
   const displaySortOrder: 0 | 1 | 2 =
     sortOrder === -1 ? 2 : (sortOrder as 0 | 1);
+  const currentSortOrder =
+    sortOrder === 1 ? 'ascend' : sortOrder === -1 ? 'descend' : null;
 
   const handleSort = () => {
     if (dataIndex && onSort) {
@@ -54,6 +56,14 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
   };
 
   const renderSort = () => {
+    if (typeof sorter === 'object' && sorter.icon) {
+      return (
+        <span className={`${prefixCls}-column-sorter`}>
+          {sorter.icon(currentSortOrder)}
+        </span>
+      );
+    }
+
     const trigger = (
       <span className={`${prefixCls}-column-sorter`}>
         <ArrowIcon

package/src/Table/theader/filter.tsx

@@ -8,6 +8,7 @@ import Popover from '../../Popover';
 import Space from '../../Space';
 import Tree from '../../Tree';
 import { useLocale } from '../../locale';
+import type { FilterValue } from '../interface';
 import { TableCtx } from '../table';
 
 export interface TableFilterProps {
@@ -23,14 +24,37 @@ const getStrLower = (str: any) => {
   return str;
 };
 
+type FilterInput = FilterValue | FilterValue[];
+
+const areFilterValuesEqual = (a: FilterInput, b: FilterInput) => {
+  if (!Array.isArray(a) || !Array.isArray(b)) return a === b;
+  return a.length === b.length && a.every((value, index) => value === b[index]);
+};
+
+const hasFilterValue = (value: FilterInput) =>
+  Array.isArray(value) ? value.length > 0 : value !== '';
+
 const HeaderFilter = React.memo((props: any) => {
   const { filter, column, getPopupContainer, onInternalFilter } = props;
   const { prefixCls } = useContext(TableCtx);
   const { locale } = useLocale();
   const { table: tableLocale } = locale;
   const { dataIndex } = column;
+  const {
+    items,
+    icon,
+    searchable = true,
+    filterMode = 'menu',
+    filtered,
+    filterOnClose = true,
+    render,
+  } = filter;
 
   const inputRef = useRef<HTMLInputElement>(null);
+  const initialValue: FilterInput = items ? [] : '';
+  const committedValueRef = useRef<FilterInput>(initialValue);
+  const [committedValue, setCommittedValue] =
+    useState<FilterInput>(initialValue);
   const [open, setOpen] = useState(false);
   const [selectNodes, setSelectNodes] = useState<Array<string | number>>([]);
   const [searchValue, setSearchValue] = useState('');
@@ -53,34 +77,41 @@ const HeaderFilter = React.memo((props: any) => {
   //     setSelectNodes(node);
   //   };
 
-  const reset = () => {
-    setSearchValue('');
-    setSelectNodes([]);
-    onInternalFilter({ dataIndex, value: '', column });
+  const getCurrentValue = (type: 'filter' | 'search'): FilterInput =>
+    type === 'search' ? searchValue : selectNodes;
+
+  const commitValue = (value: FilterInput) => {
+    const committed = Array.isArray(value) ? [...value] : value;
+    committedValueRef.current = committed;
+    setCommittedValue(committed);
   };
 
-  const ok = (type?: 'filter' | 'search') => {
+  const applyFilter = (type: 'filter' | 'search') => {
+    const value = getCurrentValue(type);
+    commitValue(value);
     onInternalFilter({
       dataIndex,
-      value: type === 'search' ? searchValue : selectNodes,
-      type: type,
+      value,
+      type,
       column,
     });
+  };
+
+  const reset = () => {
+    const value: FilterInput = items ? [] : '';
+    setSearchValue('');
+    setSelectNodes([]);
+    commitValue(value);
+    onInternalFilter({ dataIndex, value, column });
+  };
+
+  const ok = (type: 'filter' | 'search') => {
+    applyFilter(type);
     setOpen(false);
   };
 
   let popup: React.ReactNode;
 
-  const {
-    items,
-    icon,
-    searchable = true,
-    filterMode = 'menu',
-    // filtered,
-    // filterOnClose,
-    // onFilter,
-  } = filter;
-
   const searchInputNode = searchable ? (
     <Input
       prefix={<Search size={14} strokeWidth={1.5} />}
@@ -96,7 +127,9 @@ const HeaderFilter = React.memo((props: any) => {
     />
   ) : null;
 
-  if (items) {
+  if (render) {
+    popup = render();
+  } else if (items) {
     let dataSource = [];
     const inputValue = getStrLower(searchValue);
 
@@ -160,14 +193,23 @@ const HeaderFilter = React.memo((props: any) => {
     return null;
   }
 
-  const handleOpenChange = (o: boolean) => {
-    setOpen(o);
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen && open && filterOnClose && !render) {
+      const type = items ? 'filter' : 'search';
+      const value = getCurrentValue(type);
+      if (!areFilterValuesEqual(value, committedValueRef.current)) {
+        applyFilter(type);
+      }
+    }
+    setOpen(nextOpen);
   };
 
+  const isFiltered = filtered ?? hasFilterValue(committedValue);
+
   const renderTrigger = () => {
     const trigger =
       typeof icon === 'function' ? (
-        icon()
+        icon(isFiltered)
       ) : (
         <Button
           icon={
@@ -177,7 +219,7 @@ const HeaderFilter = React.memo((props: any) => {
               <Search size={14} strokeWidth={1.5} />
             )
           }
-          variant={selectNodes.length || searchValue ? 'filled' : undefined}
+          variant={isFiltered ? 'filled' : undefined}
           type="text"
           size="small"
         />

package/src/Table/util/index.ts

@@ -9,7 +9,9 @@ export function handleColumns(columns: Array<WrapedColumnProps>) {
     if (col.fixed === true || col.fixed === 'left') {
       col.fixed = 'left';
       col.style = { ...col.style, left: leftWidthCount };
-      if (!columns[i + 1].fixed) {
+      const nextFixed = columns[i + 1]?.fixed;
+      const nextIsFixedLeft = nextFixed === true || nextFixed === 'left';
+      if (!nextIsFixedLeft) {
         col.isFixedLeftLast = true;
       }
       leftWidthCount =

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.8.12";
+export const version = "0.8.13";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;