@meta-1/design 0.0.210 → 0.0.211

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/design",
-  "version": "0.0.210",
+  "version": "0.0.211",
   "keywords": [
     "easykit",
     "design",

package/src/components/uix/data-grid/index.tsx

@@ -15,7 +15,6 @@ import { AgGridReact } from "ag-grid-react";
 import get from "lodash/get";
 import isArray from "lodash/isArray";
 import isFunction from "lodash/isFunction";
-import isString from "lodash/isString";
 import isUndefined from "lodash/isUndefined";
 import { useTheme } from "next-themes";
 
@@ -26,12 +25,10 @@ import {
   type DropdownMenuItemProps,
   Filters,
   type FiltersProps,
-  type Formatters,
   generateColumnStorageKey,
   Pagination,
   type PaginationProps,
   Spin,
-  ValueFormatter,
 } from "@meta-1/design";
 import { UIXContext } from "@meta-1/design/components/uix/config-provider";
 import { NoRowsOverlay } from "./overlays";
@@ -46,37 +43,8 @@ export interface StickyColumnProps {
   size: number;
 }
 
-export type DataGridColumn<TData> = Partial<ColDef<TData>> & {
-  /** 列的 ID，如果不提供则使用 accessorKey 或 field */
-  id?: string;
-  /** 数据字段路径，支持点号分隔的嵌套路径，如 "user.name" */
-  accessorKey?: string;
-  /** 列标题，可以是字符串或返回 React 元素的函数 */
-  header?: string | ((params: { column: any; header: any; table: any }) => React.ReactNode);
-  /** 自定义单元格渲染函数 */
-  cell?: (params: {
-    getValue: () => any;
-    row: { original: TData; getValue: (key: string) => any };
-    column: any;
-    table: any;
-  }) => React.ReactNode;
-  /** 是否启用排序 */
-  enableSorting?: boolean;
-  /** 是否启用调整大小 */
-  enableResizing?: boolean;
-  /** 是否启用隐藏 */
-  enableHiding?: boolean;
-  /** 列宽 */
-  size?: number;
-  /** 最小列宽 */
-  minSize?: number;
-  /** 最大列宽 */
-  maxSize?: number;
-  /** 单元格 CSS 类名 */
-  className?: string;
-  /** 格式化函数数组，按顺序应用 */
-  formatters?: Formatters;
-};
+/** DataGrid 列定义，直接使用 AG Grid 的 ColDef 规范 */
+export type DataGridColumn<TData> = ColDef<TData>;
 
 export interface DataGridProps<TData> {
   columns: DataGridColumn<TData>[];
@@ -136,109 +104,23 @@ const hasActions = (rowActions: DropdownMenuItemProps[] | ((cell: any) => Dropdo
   return false;
 };
 
-// 将 DataGridColumn 转换为 ag-grid 的 ColDef
-function convertColumnDefToAgGrid<TData>(
-  columnDef: DataGridColumn<TData>,
-  stickyColumns: StickyColumnProps[],
-): ColDef<TData> {
-  const accessorKey = columnDef.accessorKey;
-  const colId =
-    columnDef.id || columnDef.colId || (typeof accessorKey === "string" ? accessorKey.replace(/\./g, "_") : undefined);
-
-  // 检查是否是粘性列
-  // 支持通过 id、accessorKey 或 colId 匹配
+function applyStickyColumnConfig<TData>(columnDef: ColDef<TData>, stickyColumns: StickyColumnProps[]): ColDef<TData> {
+  const colId = columnDef.colId || columnDef.field;
+  if (!colId) return columnDef;
+
   const stickyCol = stickyColumns.find((sc) => {
     const key = sc.key;
-    // 直接匹配 colId
-    if (key === colId) return true;
-    // 匹配原始 accessorKey（如果 key 包含点号）
-    if (typeof accessorKey === "string" && key === accessorKey) return true;
-    // 匹配 id
-    if (columnDef.id && key === columnDef.id) return true;
-    return false;
+    return key === colId || key === columnDef.field;
   });
-  const pinned = stickyCol ? (stickyCol.position === "left" ? "left" : "right") : undefined;
 
-  // 从 columnDef 中提取 ag-grid 支持的属性
-  const agColDef: ColDef<TData> = {
+  if (!stickyCol) return columnDef;
+
+  const pinned = stickyCol.position === "left" ? "left" : "right";
+  return {
     ...columnDef,
-    colId: colId || columnDef.colId || String(Math.random()),
     pinned: pinned || columnDef.pinned,
-    sortable: columnDef.enableSorting !== false ? columnDef.sortable !== false : false,
-    filter: columnDef.filter ?? false,
-    resizable: columnDef.enableResizing !== false ? columnDef.resizable !== false : false,
-    hide: columnDef.enableHiding === false ? false : columnDef.hide,
-    cellClass: columnDef.className || columnDef.cellClass,
+    width: stickyCol.size || columnDef.width,
   };
-
-  if (pinned) {
-    if (columnDef.size) agColDef.width = columnDef.size;
-    if (columnDef.minSize) agColDef.minWidth = columnDef.minSize;
-    if (columnDef.maxSize) agColDef.maxWidth = columnDef.maxSize;
-  } else {
-    if (columnDef.size) {
-      agColDef.width = columnDef.size;
-      if (columnDef.minSize) agColDef.minWidth = columnDef.minSize;
-      if (columnDef.maxSize) agColDef.maxWidth = columnDef.maxSize;
-    } else if (!agColDef.width && !agColDef.flex) {
-      agColDef.flex = 1;
-      agColDef.minWidth = columnDef.minSize || 100;
-      if (columnDef.maxSize) agColDef.maxWidth = columnDef.maxSize;
-    }
-  }
-
-  if (!agColDef.field && typeof accessorKey === "string") {
-    agColDef.field = accessorKey as any;
-  }
-
-  if (isString(columnDef.header)) {
-    agColDef.headerName = columnDef.header;
-  } else if (isFunction(columnDef.header)) {
-    agColDef.headerComponent = (params: any) => {
-      const headerFn = columnDef.header as (params: { column: any; header: any; table: any }) => React.ReactNode;
-      const result = headerFn({
-        column: params.column,
-        header: params,
-        table: params.api,
-      });
-      if (typeof result === "string" || typeof result === "number") {
-        return result;
-      }
-      return result;
-    };
-  } else if (columnDef.headerName) {
-    agColDef.headerName = columnDef.headerName;
-  }
-
-  const formatters = columnDef.formatters || [];
-  const hasFormatters = formatters.length > 0;
-  const hasCustomCell = !!columnDef.cell;
-
-  if (hasCustomCell || hasFormatters) {
-    agColDef.cellRenderer = (params: any) => {
-      let cellContent: any;
-
-      if (hasCustomCell && isFunction(columnDef.cell)) {
-        const cellContext = {
-          getValue: () => params.value,
-          row: { original: params.data, getValue: (key: string) => get(params.data, key) },
-          column: params.column,
-          table: params.api,
-        };
-        cellContent = columnDef.cell(cellContext);
-      } else {
-        cellContent = params.value;
-      }
-
-      if (hasFormatters) {
-        return <ValueFormatter formatters={formatters} value={cellContent} />;
-      }
-
-      return cellContent;
-    };
-  }
-
-  return agColDef;
 }
 
 export function DataGrid<TData>(props: DataGridProps<TData>) {
@@ -271,7 +153,12 @@ export function DataGrid<TData>(props: DataGridProps<TData>) {
   const [columnVisibility, setColumnVisibility] = useState<Record<string, boolean>>({});
 
   const storageKey = useMemo(() => {
-    return generateColumnStorageKey(columns);
+    return generateColumnStorageKey(
+      columns.map((col) => ({
+        id: col.colId as string | undefined,
+        accessorKey: col.field as string | number | symbol | undefined,
+      })),
+    );
   }, [columns]);
 
   useEffect(() => {
@@ -301,45 +188,22 @@ export function DataGrid<TData>(props: DataGridProps<TData>) {
     }
   }, [columnVisibility, mounted]);
 
-  // 转换列定义
   const agGridColumns = useMemo<ColDef<TData>[]>(() => {
     const newColumns: ColDef<TData>[] = [];
 
-    // 添加 checkbox 列
-    if (checkbox) {
-      // 检查是否在 stickyColumns 中明确配置，如果没有则默认固定在左侧
-      const stickySelect = stickyColumns.find((sc) => sc.key === "select");
-      const pinnedSelect = stickySelect
-        ? stickySelect.position === "left"
-          ? "left"
-          : stickySelect.position === "right"
-            ? "right"
-            : undefined
-        : "left"; // 默认固定在左侧
-
-      newColumns.push({
-        colId: "select",
-        checkboxSelection: true,
-        headerCheckboxSelection: true,
-        width: 40,
-        pinned: pinnedSelect,
-        lockPosition: pinnedSelect === "left" ? "left" : pinnedSelect === "right" ? "right" : undefined,
-        suppressMovable: true,
-        resizable: false,
-        sortable: false,
-        filter: false,
-        headerName: "",
-      });
-    }
-
-    // 转换用户定义的列
     columns.forEach((col) => {
-      newColumns.push(convertColumnDefToAgGrid(col, stickyColumns));
+      const processedCol = applyStickyColumnConfig(col, stickyColumns);
+      if (!processedCol.colId && !processedCol.field) {
+        processedCol.colId = String(Math.random());
+      }
+      if (!processedCol.width && !processedCol.flex) {
+        processedCol.flex = 1;
+        processedCol.minWidth = processedCol.minWidth || 100;
+      }
+      newColumns.push(processedCol);
     });
 
-    // 添加 actions 列
     if (hasActions(rowActions!)) {
-      // 检查是否在 stickyColumns 中明确配置，如果没有则默认固定在右侧
       const stickyActions = stickyColumns.find((sc) => sc.key === "actions");
       const pinnedActions = stickyActions
         ? stickyActions.position === "left"
@@ -383,7 +247,31 @@ export function DataGrid<TData>(props: DataGridProps<TData>) {
     }
 
     return newColumns;
-  }, [columns, checkbox, rowActions, onRowActionClick, stickyColumns]);
+  }, [columns, rowActions, onRowActionClick, stickyColumns]);
+
+  const selectionColumnDef = useMemo<ColDef<TData> | undefined>(() => {
+    if (!checkbox) return undefined;
+
+    const stickySelect = stickyColumns.find((sc) => sc.key === "select");
+    const pinnedSelect = stickySelect
+      ? stickySelect.position === "left"
+        ? "left"
+        : stickySelect.position === "right"
+          ? "right"
+          : undefined
+      : "left";
+
+    return {
+      width: 40,
+      pinned: pinnedSelect,
+      lockPosition: pinnedSelect === "left" ? "left" : pinnedSelect === "right" ? "right" : undefined,
+      suppressMovable: true,
+      resizable: false,
+      sortable: false,
+      filter: false,
+      headerName: "",
+    };
+  }, [checkbox, stickyColumns]);
 
   // ag-grid 主题
   const gridTheme = useMemo(() => {
@@ -451,8 +339,10 @@ export function DataGrid<TData>(props: DataGridProps<TData>) {
     const allColumns = gridApiRef.current.getColumns() || [];
     const visibility: Record<string, boolean> = {};
     allColumns.forEach((col) => {
-      if (col.getColId() !== "select" && col.getColId() !== "actions") {
-        visibility[col.getColId()] = col.isVisible() ?? true;
+      const colId = col.getColId();
+      const isSelectionColumn = colId?.startsWith("ag-Grid-AutoColumn") || colId === "select";
+      if (!isSelectionColumn && colId !== "actions") {
+        visibility[colId] = col.isVisible() ?? true;
       }
     });
     setColumnVisibility(visibility);
@@ -466,24 +356,13 @@ export function DataGrid<TData>(props: DataGridProps<TData>) {
     return allColumns
       .filter((col) => {
         const colId = col.getColId();
-        return colId !== "select" && colId !== "actions" && col.getUserProvidedColDef()?.hide !== false;
+        const isSelectionColumn = colId?.startsWith("ag-Grid-AutoColumn") || colId === "select";
+        return !isSelectionColumn && colId !== "actions" && col.getUserProvidedColDef()?.hide !== false;
       })
       .map((col) => {
         const colId = col.getColId();
-        const columnDef = columns.find((c) => {
-          const accessorKey = (c as any).accessorKey;
-          const key = c.id || (typeof accessorKey === "string" ? accessorKey.replace(/\./g, "_") : undefined);
-          return key === colId;
-        });
-        let label = colId;
-        if (columnDef) {
-          if (isString(columnDef.header)) {
-            label = columnDef.header;
-          } else if (isFunction(columnDef.header)) {
-            // 简化处理，使用 colId 作为 label
-            label = colId;
-          }
-        }
+        const columnDef = columns.find((c) => c.colId === colId || c.field === colId);
+        const label = columnDef?.headerName || colId;
         const checked = columnVisibility[colId];
         return {
           id: colId,
@@ -582,11 +461,20 @@ export function DataGrid<TData>(props: DataGridProps<TData>) {
               onSelectionChanged={onSelectionChanged}
               rowData={data}
               rowHeight={autoRowHeight ? undefined : typeof rowHeight === "number" ? rowHeight : undefined}
-              rowSelection={checkbox ? "multiple" : undefined}
+              rowSelection={
+                checkbox
+                  ? {
+                      mode: "multiRow",
+                      checkboxes: true,
+                      headerCheckbox: true,
+                      enableClickSelection: false,
+                    }
+                  : undefined
+              }
+              selectionColumnDef={selectionColumnDef}
               suppressAnimationFrame={false}
               suppressColumnVirtualisation={false}
               suppressHorizontalScroll={false}
-              suppressRowClickSelection={!checkbox}
               suppressRowVirtualisation={gridHeight ? false : true}
               theme={gridTheme}
               tooltipHideDelay={200}