@pisell/materials 3.3.84 → 3.3.86

package/lib/components/pisellRecordBoard/PisellRecordBoard.js

@@ -0,0 +1,263 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellRecordBoard/PisellRecordBoard.tsx
+var PisellRecordBoard_exports = {};
+__export(PisellRecordBoard_exports, {
+  default: () => PisellRecordBoard_default
+});
+module.exports = __toCommonJS(PisellRecordBoard_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_RecordBoardProvider = require("./context/RecordBoardProvider");
+var import_recordBoardColumns = require("./utils/recordBoardColumns");
+var defaultPagination = { pageNumber: 1, pageSize: 50 };
+function mergeChildComponentProps(props) {
+  const hasAny = props.grid != null || props.toolBar != null || props.search != null || props.paginationConfig != null || props.batchActionBar != null || props.cardList != null;
+  if (!hasAny) return void 0;
+  return {
+    ...props.grid != null && { grid: props.grid },
+    ...props.toolBar != null && { toolBar: props.toolBar },
+    ...props.search != null && { search: props.search },
+    ...props.paginationConfig != null && {
+      pagination: props.paginationConfig
+    },
+    ...props.batchActionBar != null && {
+      batchActionBar: props.batchActionBar
+    },
+    ...props.cardList != null && { cardList: props.cardList }
+  };
+}
+function getDefaultRecordBoardContext(layoutType, selection, rowKey) {
+  return {
+    data: [],
+    loading: false,
+    total: 0,
+    pagination: defaultPagination,
+    onPageChange: () => {
+    },
+    searchParams: {},
+    onSearch: () => {
+    },
+    onReset: () => {
+    },
+    layoutType,
+    selectedKeys: selection.selectedKeys,
+    selectedRows: selection.selectedRows,
+    onSelectionChange: selection.onSelectionChange,
+    rowKey,
+    childComponentProps: void 0,
+    scrollAreaHeight: null,
+    setScrollAreaHeight: void 0,
+    filterResetKey: void 0,
+    setFilterResetKey: void 0
+  };
+}
+var PisellRecordBoard = (props) => {
+  const {
+    children,
+    layoutType = "grid",
+    rowKey: rowKeyProp,
+    data: dataProp,
+    loading: loadingProp,
+    total: totalProp,
+    pagination: paginationProp,
+    onPageChange: onPageChangeProp,
+    searchParams: searchParamsProp,
+    onSearch: onSearchProp,
+    onReset: onResetProp,
+    ...rest
+  } = props;
+  const fillHeight = true;
+  const columnVisibilityStorageKey = props.columnVisibilityStorageKey ?? props.__id;
+  const mergedChildComponentProps = (0, import_react.useMemo)(
+    () => mergeChildComponentProps(props),
+    [
+      props.grid,
+      props.toolBar,
+      props.search,
+      props.paginationConfig,
+      props.batchActionBar,
+      props.cardList
+    ]
+  );
+  const [internalSelectedKeys, setInternalSelectedKeys] = (0, import_react.useState)(
+    []
+  );
+  const [internalSelectedRows, setInternalSelectedRows] = (0, import_react.useState)([]);
+  const [scrollAreaHeight, setScrollAreaHeight] = (0, import_react.useState)(null);
+  const [filterResetKey, setFilterResetKey] = (0, import_react.useState)(0);
+  const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react.useState)(() => {
+    var _a, _b;
+    const fromConfig = ((_a = props.grid) == null ? void 0 : _a.defaultHiddenColumnKeys) ?? [];
+    const fromColumns = (((_b = props.grid) == null ? void 0 : _b.columns) ?? []).filter(
+      (col) => col.hidden === true
+    ).map((col) => (0, import_recordBoardColumns.getRecordBoardColumnKey)(col)).filter(Boolean);
+    const allHiddenKeys = Array.from(/* @__PURE__ */ new Set([...fromConfig, ...fromColumns]));
+    const defaultVis = {};
+    allHiddenKeys.forEach((k) => {
+      defaultVis[k] = false;
+    });
+    if (typeof columnVisibilityStorageKey === "string" && columnVisibilityStorageKey) {
+      if (typeof import_utils.getRecordBoardColumnSettingFromLocal === "function") {
+        const saved = (0, import_utils.getRecordBoardColumnSettingFromLocal)(columnVisibilityStorageKey);
+        if ((saved == null ? void 0 : saved.columnVisibility) && Object.keys(saved.columnVisibility).length > 0) {
+          return { ...defaultVis, ...saved.columnVisibility };
+        }
+      } else if (typeof import_utils.getColumnVisibilityFromLocal === "function") {
+        const savedVis = (0, import_utils.getColumnVisibilityFromLocal)(columnVisibilityStorageKey);
+        if (savedVis && Object.keys(savedVis).length > 0) {
+          return { ...defaultVis, ...savedVis };
+        }
+      }
+    }
+    return defaultVis;
+  });
+  const [internalColumnOrder, setInternalColumnOrder] = (0, import_react.useState)(
+    () => {
+      if (typeof columnVisibilityStorageKey === "string" && columnVisibilityStorageKey && typeof import_utils.getRecordBoardColumnSettingFromLocal === "function") {
+        const saved = (0, import_utils.getRecordBoardColumnSettingFromLocal)(columnVisibilityStorageKey);
+        return (saved == null ? void 0 : saved.columnOrder) ?? null;
+      }
+      return null;
+    }
+  );
+  (0, import_react.useEffect)(() => {
+    if (typeof columnVisibilityStorageKey !== "string" || !columnVisibilityStorageKey)
+      return;
+    (0, import_utils.saveColumnVisibilityToLocal)({
+      componentId: columnVisibilityStorageKey,
+      columnVisibility: internalColumnVisibility,
+      columnOrder: internalColumnOrder ?? void 0
+    });
+  }, [columnVisibilityStorageKey, internalColumnVisibility, internalColumnOrder]);
+  const onSelectionChangeInternal = (0, import_react.useCallback)(
+    (keys, rows) => {
+      setInternalSelectedKeys(keys);
+      setInternalSelectedRows(rows);
+    },
+    []
+  );
+  const onColumnVisibilityChangeInternal = (0, import_react.useCallback)(
+    (visibility) => {
+      setInternalColumnVisibility((prev) => ({ ...prev, ...visibility }));
+    },
+    []
+  );
+  const onColumnOrderChangeInternal = (0, import_react.useCallback)((columnKeys) => {
+    setInternalColumnOrder(columnKeys);
+  }, []);
+  const contextValue = (0, import_react.useMemo)(() => {
+    const defaultCtx = getDefaultRecordBoardContext(
+      layoutType,
+      {
+        selectedKeys: internalSelectedKeys,
+        selectedRows: internalSelectedRows,
+        onSelectionChange: onSelectionChangeInternal
+      },
+      rowKeyProp
+    );
+    const data = dataProp !== void 0 ? dataProp : defaultCtx.data;
+    const loading = loadingProp !== void 0 ? loadingProp : defaultCtx.loading;
+    const total = totalProp !== void 0 ? totalProp : defaultCtx.total;
+    const pagination = paginationProp !== void 0 ? paginationProp : defaultCtx.pagination;
+    const onPageChange = onPageChangeProp ?? defaultCtx.onPageChange;
+    const searchParams = searchParamsProp !== void 0 ? searchParamsProp : defaultCtx.searchParams;
+    const onSearch = onSearchProp ?? defaultCtx.onSearch;
+    const onReset = onResetProp ?? defaultCtx.onReset;
+    const rowKey = rowKeyProp ?? defaultCtx.rowKey;
+    const gridSelection = props.grid;
+    const hasControlledSelection = (gridSelection == null ? void 0 : gridSelection.selectedKeys) != null && Array.isArray(gridSelection.selectedKeys) && typeof gridSelection.onSelectionChange === "function";
+    const selectedKeys = hasControlledSelection ? gridSelection.selectedKeys : internalSelectedKeys;
+    const selectedRows = hasControlledSelection ? gridSelection.selectedRows ?? [] : internalSelectedRows;
+    const onSelectionChange = hasControlledSelection ? gridSelection.onSelectionChange : onSelectionChangeInternal;
+    return {
+      ...defaultCtx,
+      layoutType,
+      rowKey,
+      data,
+      loading,
+      total,
+      pagination,
+      onPageChange,
+      searchParams,
+      onSearch,
+      onReset,
+      selectedKeys,
+      selectedRows,
+      onSelectionChange,
+      columnVisibility: internalColumnVisibility,
+      onColumnVisibilityChange: onColumnVisibilityChangeInternal,
+      columnOrder: internalColumnOrder,
+      onColumnOrderChange: onColumnOrderChangeInternal,
+      childComponentProps: mergedChildComponentProps ?? defaultCtx.childComponentProps,
+      fillHeight,
+      scrollAreaHeight,
+      setScrollAreaHeight,
+      filterResetKey,
+      setFilterResetKey
+    };
+  }, [
+    layoutType,
+    rowKeyProp,
+    dataProp,
+    loadingProp,
+    totalProp,
+    paginationProp,
+    onPageChangeProp,
+    searchParamsProp,
+    onSearchProp,
+    onResetProp,
+    mergedChildComponentProps,
+    internalSelectedKeys,
+    internalSelectedRows,
+    onSelectionChangeInternal,
+    internalColumnVisibility,
+    onColumnVisibilityChangeInternal,
+    internalColumnOrder,
+    onColumnOrderChangeInternal,
+    fillHeight,
+    scrollAreaHeight,
+    filterResetKey
+  ]);
+  const content = /* @__PURE__ */ import_react.default.createElement(import_RecordBoardProvider.RecordBoardProvider, { value: contextValue }, children);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-record-board-root",
+      style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0
+      }
+    },
+    content
+  );
+};
+var PisellRecordBoard_default = PisellRecordBoard;

package/lib/components/pisellRecordBoard/PisellRecordBoard.stories.d.ts

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellRecordBoard from './index';
+declare const meta: Meta<typeof PisellRecordBoard>;
+export default meta;
+declare type Story = StoryObj<typeof PisellRecordBoard>;
+/**
+ * Grid 布局 - 带 Table、分页、多选；列 type 驱动列/筛选/排序；筛选在 Filter 弹层内；重置清空筛选与排序。
+ */
+export declare const GridLayoutWithTable: Story;
+/**
+ * Grid 布局 - 多页分页示例（至少 25 页：250 条数据，每页 10 条）
+ */
+export declare const GridWithMultiplePages: Story;
+/**
+ * Grid 布局 - 同值列折叠：当前页某列全部同值或全部为空时，该列隐藏并在表格上方展示总结区（列名 + 统一值/空数据）。
+ */
+export declare const GridLayoutWithCollapseUniformColumns: Story;
+/**
+ * Grid 布局 - uniformCompare 示例：列值为对象时，用 uniformCompare(value, record) 返回用于比较的 string/number，全同则折叠。
+ */
+export declare const GridLayoutWithUniformCompare: Story;
+/**
+ * Grid 布局 - grid 透传 antd Table props：onRow（行点击）、rowClassName 等
+ */
+export declare const GridWithOnRow: Story;
+/**
+ * Grid 布局 - 与 GridLayoutWithTable 类似，列 type 驱动列/筛选/排序，筛选在弹层内。
+ */
+export declare const GridLayoutWithColumnType: Story;
+/**
+ * Grid 布局 - ToolBar 内直接配置 sort 与 filter（不依赖列派生）
+ * toolBar.sort 用 getSortItems 手动配置选项，toolBar.filter 传 { defaultFilterValue }。
+ */
+export declare const GridLayoutToolBarSortAndFilter: Story;
+/**
+ * Grid 布局 - 快速筛选在 ToolBar 左侧内联展示（toolBar.quickFilter: true），右侧筛选弹层仅保留高级筛选。
+ */
+export declare const GridLayoutWithQuickFilterOnLeft: Story;
+/**
+ * 自定义左侧快速筛选 + Filter 弹层（高级筛选）+ 列自定义 render
+ */
+export declare const CustomQuickFilterAndColumnsRender: Story;
+/**
+ * 自定义 filter、自定义 sort、自定义 render
+ * 展示列上显式配置：筛选（订单状态 single 在高级筛选、下单时间 rangePickerNew + 自定义 placeholder/width 在快筛）、
+ * 排序（订单状态无 type，用 sort.getSortItems 自定义「状态 A-Z / Z-A」）、
+ * 以及列的自定义 render（订单号加粗蓝色、状态标签、买家加粗）。
+ */
+export declare const CustomFilterSortRender: Story;
+/**
+ * Grid 布局 - ToolBar 内使用 PisellFind（toolBar.search: true）
+ */
+export declare const GridLayoutWithPisellFindInToolBar: Story;
+/**
+ * Grid 布局 - ToolBar 内 PisellFind 透传（toolBar.search: { triggerType: 'input' }）
+ */
+export declare const GridLayoutToolBarSearchInput: Story;
+/**
+ * Grid 布局 - 完整示例（表格 + 多选 + BatchActionBar 批量操作）
+ */
+export declare const GridLayoutFull: Story;
+/**
+ * 占位 / 设计态（不传 value，无数据源）
+ */
+export declare const Placeholder: Story;
+/**
+ * Card 布局占位
+ */
+export declare const CardLayoutPlaceholder: Story;
+/**
+ * 自定义组合：单独挂 ToolBar / BatchActionBar / Grid / Pagination
+ */
+export declare const CustomComposition: Story;
+/**
+ * 使用 PisellFind 搜索槽：Search（PisellFind）+ ToolBar + Grid + Pagination
+ */
+export declare const WithPisellFindSearch: Story;
+/**
+ * 仅 Search + Grid + 分页（无 ToolBar）
+ */
+export declare const SearchAndGridOnly: Story;