@pisell/private-materials 3.4.81 → 3.4.83

package/lib/plus/pisellSalesGrid/PisellSalesGrid.stories.js

@@ -0,0 +1,455 @@
+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/plus/pisellSalesGrid/PisellSalesGrid.stories.tsx
+var PisellSalesGrid_stories_exports = {};
+__export(PisellSalesGrid_stories_exports, {
+  CurrentPerspectiveBrief: () => CurrentPerspectiveBrief,
+  CurrentPerspectiveFull: () => CurrentPerspectiveFull,
+  SinglePerspective: () => SinglePerspective,
+  WithColumnRenderers: () => WithColumnRenderers,
+  WithDefaultHiddenColumns: () => WithDefaultHiddenColumns,
+  WithToolbarFilter: () => WithToolbarFilter,
+  WithToolbarSort: () => WithToolbarSort,
+  WithToolbarSortAndFilter: () => WithToolbarSortAndFilter,
+  WithToolbarSortCustomOptions: () => WithToolbarSortCustomOptions,
+  default: () => PisellSalesGrid_stories_default
+});
+module.exports = __toCommonJS(PisellSalesGrid_stories_exports);
+var import_react = __toESM(require("react"));
+var import_index = require("./index");
+var meta = {
+  title: "Pro Components/PisellSalesGrid",
+  component: import_index.PisellSalesGrid,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: "RecordBoard 的上层组件，与 RecordBoard 一致采用打散传参（data、loading、total、pagination、onSearch、多选等）。根据 currentPerspective 选择对应的一组 RecordBoard 配置渲染，不提供 Tab 切换 UI。多选通过 props 传入，SalesGrid 会合并进 grid 再传给 RecordBoard。perspective 的 childComponentProps.grid 可含 columns、scroll、onRow、rowClassName 等 Table 透传。"
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    currentPerspective: { description: "当前 Perspective key", control: "text" },
+    perspectives: { control: false }
+  }
+};
+var PisellSalesGrid_stories_default = meta;
+var mockData = Array.from({ length: 20 }, (_, i) => ({
+  id: `id-${i + 1}`,
+  name: `商品 ${i + 1}`,
+  sku: `SKU${String(1e3 + i).padStart(4, "0")}`,
+  amount: 99 + i * 10,
+  status: ["在售", "下架", "待上架"][i % 3],
+  updateTime: `2024-02-${String(10 + i % 18).padStart(2, "0")}`
+}));
+var columnsFull = [
+  { title: "名称", dataIndex: "name", key: "name", width: 120 },
+  { title: "SKU", dataIndex: "sku", key: "sku", width: 100 },
+  { title: "金额", dataIndex: "amount", key: "amount", width: 100, type: "currency", fieldProps: { currencySymbol: "¥" } },
+  { title: "状态", dataIndex: "status", key: "status", width: 90 },
+  { title: "更新时间", dataIndex: "updateTime", key: "updateTime", width: 120 }
+];
+var columnsBrief = [
+  { title: "名称", dataIndex: "name", key: "name", width: 160 },
+  { title: "金额", dataIndex: "amount", key: "amount", width: 120, type: "currency", fieldProps: { currencySymbol: "¥" } },
+  { title: "状态", dataIndex: "status", key: "status", width: 100 }
+];
+var perspectives = [
+  {
+    key: "full",
+    label: "完整列表",
+    childComponentProps: {
+      grid: { columns: columnsFull }
+    }
+  },
+  {
+    key: "brief",
+    label: "简要",
+    childComponentProps: {
+      grid: { columns: columnsBrief }
+    }
+  }
+];
+function useMockDataSourceProps() {
+  const [page, setPage] = (0, import_react.useState)({ pageNumber: 1, pageSize: 10 });
+  const [searchParams, setSearchParams] = (0, import_react.useState)({});
+  const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+  const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+  return (0, import_react.useMemo)(
+    () => ({
+      data: mockData.slice((page.pageNumber - 1) * page.pageSize, page.pageNumber * page.pageSize),
+      loading: false,
+      total: mockData.length,
+      pagination: page,
+      onPageChange: (pageNumber, pageSize) => setPage({ pageNumber, pageSize }),
+      searchParams,
+      onSearch: (params) => {
+        setSearchParams(params);
+        setPage((p) => ({ ...p, pageNumber: 1 }));
+      },
+      onReset: () => setSearchParams({}),
+      selectedKeys,
+      selectedRows,
+      onSelectionChange: (keys, rows) => {
+        setSelectedKeys(keys);
+        setSelectedRows(rows);
+      },
+      rowKey: "id"
+    }),
+    [page, searchParams, selectedKeys, selectedRows]
+  );
+}
+var CurrentPerspectiveFull = {
+  render: function CurrentPerspectiveFullRender() {
+    const dataSourceProps = useMockDataSourceProps();
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellSalesGrid,
+      {
+        ...dataSourceProps,
+        perspectives,
+        currentPerspective: "full"
+      }
+    ));
+  }
+};
+var CurrentPerspectiveBrief = {
+  render: function CurrentPerspectiveBriefRender() {
+    const dataSourceProps = useMockDataSourceProps();
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellSalesGrid,
+      {
+        ...dataSourceProps,
+        perspectives,
+        currentPerspective: "brief"
+      }
+    ));
+  }
+};
+var SinglePerspective = {
+  render: function SinglePerspectiveRender() {
+    const dataSourceProps = useMockDataSourceProps();
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellSalesGrid,
+      {
+        ...dataSourceProps,
+        perspectives: [perspectives[0]],
+        currentPerspective: "full"
+      }
+    ));
+  }
+};
+var columnRenderers = [
+  {
+    type: "currency",
+    render: (value) => /* @__PURE__ */ import_react.default.createElement("span", { style: { color: "#52c41a", fontWeight: 600 } }, "¥ ", typeof value === "number" ? value.toFixed(2) : value)
+  }
+];
+var WithColumnRenderers = {
+  render: function WithColumnRenderersRender() {
+    const dataSourceProps = useMockDataSourceProps();
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellSalesGrid,
+      {
+        ...dataSourceProps,
+        perspectives,
+        currentPerspective: "full",
+        columnRenderers
+      }
+    ));
+  }
+};
+var perspectivesWithHiddenColumns = [
+  {
+    key: "full",
+    label: "完整列表",
+    childComponentProps: {
+      grid: {
+        columns: columnsFull,
+        defaultHiddenColumnKeys: ["sku", "updateTime"]
+      }
+    }
+  }
+];
+var WithDefaultHiddenColumns = {
+  render: function WithDefaultHiddenColumnsRender() {
+    const dataSourceProps = useMockDataSourceProps();
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellSalesGrid,
+      {
+        ...dataSourceProps,
+        perspectives: perspectivesWithHiddenColumns,
+        currentPerspective: "full"
+      }
+    ));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "perspectives[].childComponentProps.grid.defaultHiddenColumnKeys 配置默认隐藏的列（如 sku、updateTime），初始加载时这些列不展示，用户可通过工具栏列设置重新勾选显示。"
+      }
+    }
+  }
+};
+var perspectivesWithToolbarSort = [
+  {
+    key: "full",
+    label: "完整列表（工具栏配置排序）",
+    childComponentProps: {
+      grid: { columns: columnsFull },
+      toolBar: {
+        sort: {
+          list: [
+            { name: "amount", label: "按金额", type: "number", isCustom: false },
+            { name: "name", label: "按名称", type: "string", isCustom: false },
+            { name: "updateTime", label: "按更新时间", type: "date", isCustom: false }
+          ]
+        }
+      }
+    }
+  }
+];
+var WithToolbarSort = {
+  render: function WithToolbarSortRender() {
+    const dataSourceProps = useMockDataSourceProps();
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellSalesGrid,
+      {
+        ...dataSourceProps,
+        perspectives: perspectivesWithToolbarSort,
+        currentPerspective: "full"
+      }
+    ));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "通过 perspectives[].childComponentProps.toolBar.sort 直接配置排序：传 { list: [{ name, label, type }] }，工具栏展示排序按钮，选择后写入 searchParams.sort，由 onSearch 带回后端。"
+      }
+    }
+  }
+};
+var perspectivesWithCustomSortOptions = [
+  {
+    key: "full",
+    label: "完整列表（自定义排序文案）",
+    childComponentProps: {
+      grid: { columns: columnsFull },
+      toolBar: {
+        sort: {
+          list: [
+            {
+              name: "amount",
+              label: "按金额",
+              isCustom: true,
+              getSortItems: (fieldKey) => [
+                { key: `${fieldKey}:asc`, label: "从低到高" },
+                { key: `${fieldKey}:desc`, label: "从高到低" }
+              ]
+            },
+            {
+              name: "name",
+              label: "按名称",
+              isCustom: true,
+              getSortItems: (fieldKey) => [
+                { key: `${fieldKey}:asc`, label: "A → Z" },
+                { key: `${fieldKey}:desc`, label: "Z → A" }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  }
+];
+var WithToolbarSortCustomOptions = {
+  render: function WithToolbarSortCustomOptionsRender() {
+    const dataSourceProps = useMockDataSourceProps();
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellSalesGrid,
+      {
+        ...dataSourceProps,
+        perspectives: perspectivesWithCustomSortOptions,
+        currentPerspective: "full"
+      }
+    ));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "用 toolBar.sort.list[].getSortItems(fieldKey) 自定义排序选项：返回 { key, label }[]，key 写入 searchParams.sort，label 为下拉展示文案。可完全自定义文案（如「从低到高」「从高到低」）。"
+      }
+    }
+  }
+};
+var perspectivesWithToolbarFilter = [
+  {
+    key: "full",
+    label: "完整列表（工具栏配置筛选）",
+    childComponentProps: {
+      grid: { columns: columnsFull },
+      toolBar: {
+        filter: {
+          hiddenQuickFilter: true,
+          defaultFilterValue: {
+            quickFilter: [],
+            otherFilter: [
+              {
+                type: "single",
+                key: "status",
+                name: "status",
+                label: "状态",
+                props: {
+                  options: [
+                    { label: "全部", value: "all" },
+                    { label: "在售", value: "在售" },
+                    { label: "下架", value: "下架" },
+                    { label: "待上架", value: "待上架" }
+                  ]
+                },
+                other: {}
+              },
+              {
+                type: "input",
+                key: "keyword",
+                name: "keyword",
+                label: "关键词",
+                props: { placeholder: "名称 / SKU" },
+                other: {}
+              }
+            ],
+            values: {}
+          }
+        }
+      }
+    }
+  }
+];
+var WithToolbarFilter = {
+  render: function WithToolbarFilterRender() {
+    const dataSourceProps = useMockDataSourceProps();
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellSalesGrid,
+      {
+        ...dataSourceProps,
+        perspectives: perspectivesWithToolbarFilter,
+        currentPerspective: "full"
+      }
+    ));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "通过 perspectives[].childComponentProps.toolBar.filter 直接配置筛选：传 defaultFilterValue.{ quickFilter, otherFilter, values }，otherFilter 为 FilterItemProps[]（type: single/input/rangePicker/rangePickerNew 等，key/name/label/props）。选择后写入 searchParams.filter，由 onSearch 带回。"
+      }
+    }
+  }
+};
+var perspectivesWithToolbarSortAndFilter = [
+  {
+    key: "full",
+    label: "完整列表（排序 + 筛选）",
+    childComponentProps: {
+      grid: { columns: columnsFull },
+      toolBar: {
+        sort: {
+          list: [
+            { name: "amount", label: "按金额", type: "number", isCustom: false },
+            { name: "name", label: "按名称", type: "string", isCustom: false },
+            { name: "updateTime", label: "按更新时间", type: "date", isCustom: false }
+          ]
+        },
+        filter: {
+          hiddenQuickFilter: true,
+          defaultFilterValue: {
+            quickFilter: [],
+            otherFilter: [
+              {
+                type: "single",
+                key: "status",
+                name: "status",
+                label: "状态",
+                props: {
+                  options: [
+                    { label: "全部", value: "all" },
+                    { label: "在售", value: "在售" },
+                    { label: "下架", value: "下架" },
+                    { label: "待上架", value: "待上架" }
+                  ]
+                },
+                other: {}
+              },
+              {
+                type: "input",
+                key: "keyword",
+                name: "keyword",
+                label: "关键词",
+                props: { placeholder: "名称 / SKU" },
+                other: {}
+              }
+            ],
+            values: {}
+          }
+        }
+      }
+    }
+  }
+];
+var WithToolbarSortAndFilter = {
+  render: function WithToolbarSortAndFilterRender() {
+    const dataSourceProps = useMockDataSourceProps();
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellSalesGrid,
+      {
+        ...dataSourceProps,
+        perspectives: perspectivesWithToolbarSortAndFilter,
+        currentPerspective: "full"
+      }
+    ));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "在 toolBar 里同时配置排序与筛选：toolBar.sort 传 { list }，toolBar.filter 传 { defaultFilterValue }。排序写入 searchParams.sort，筛选写入 searchParams.filter，均由 onSearch 带回。"
+      }
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CurrentPerspectiveBrief,
+  CurrentPerspectiveFull,
+  SinglePerspective,
+  WithColumnRenderers,
+  WithDefaultHiddenColumns,
+  WithToolbarFilter,
+  WithToolbarSort,
+  WithToolbarSortAndFilter,
+  WithToolbarSortCustomOptions
+});

package/lib/plus/pisellSalesGrid/hooks/useActions.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface UseActionsOptions {
+    onRefresh?: () => void;
+    onClearSelection?: () => void;
+}
+declare const useActions: (options?: UseActionsOptions) => ({
+    key: string;
+    label: any;
+    icon: string;
+    loading: boolean;
+    onClick: (keys: React.Key[], rows?: any[]) => Promise<void>;
+} | {
+    key: string;
+    label: any;
+    icon: string;
+    onClick: (keys: React.Key[], rows?: any[]) => void;
+    loading?: undefined;
+})[];
+export default useActions;