@pisell/materials 3.3.84 → 3.3.86

package/es/components/pisellRecordBoard/PisellRecordBoard.js

@@ -0,0 +1,243 @@
+var _excluded = ["children", "layoutType", "rowKey", "data", "loading", "total", "pagination", "onPageChange", "searchParams", "onSearch", "onReset"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import { getColumnVisibilityFromLocal, getRecordBoardColumnSettingFromLocal, saveColumnVisibilityToLocal } from '@pisell/utils';
+import { RecordBoardProvider } from "./context/RecordBoardProvider";
+import { getRecordBoardColumnKey } from "./utils/recordBoardColumns";
+var defaultPagination = {
+  pageNumber: 1,
+  pageSize: 50
+};
+
+/**
+ * 从打散 props 合并出 childComponentProps（供 context 使用）。
+ */
+function mergeChildComponentProps(props) {
+  var hasAny = props.grid != null || props.toolBar != null || props.search != null || props.paginationConfig != null || props.batchActionBar != null || props.cardList != null;
+  if (!hasAny) return undefined;
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, 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
+  });
+}
+
+/**
+ * 默认的 context 值（用于无数据源时的占位 / 设计态）
+ */
+function getDefaultRecordBoardContext(layoutType, selection, rowKey) {
+  return {
+    data: [],
+    loading: false,
+    total: 0,
+    pagination: defaultPagination,
+    onPageChange: function onPageChange() {},
+    searchParams: {},
+    onSearch: function onSearch() {},
+    onReset: function onReset() {},
+    layoutType: layoutType,
+    selectedKeys: selection.selectedKeys,
+    selectedRows: selection.selectedRows,
+    onSelectionChange: selection.onSelectionChange,
+    rowKey: rowKey,
+    childComponentProps: undefined,
+    scrollAreaHeight: null,
+    setScrollAreaHeight: undefined,
+    filterResetKey: undefined,
+    setFilterResetKey: undefined
+  };
+}
+
+/**
+ * RecordBoard 容器：提供统一的 data / pagination / search 上下文。
+ * 仅接受打散 props：列表/分页/搜索/多选/列显隐、以及 grid/toolBar/search/paginationConfig/batchActionBar/cardList。
+ */
+var PisellRecordBoard = function PisellRecordBoard(props) {
+  var _props$columnVisibili;
+  var children = props.children,
+    _props$layoutType = props.layoutType,
+    layoutType = _props$layoutType === void 0 ? 'grid' : _props$layoutType,
+    rowKeyProp = props.rowKey,
+    dataProp = props.data,
+    loadingProp = props.loading,
+    totalProp = props.total,
+    paginationProp = props.pagination,
+    onPageChangeProp = props.onPageChange,
+    searchParamsProp = props.searchParams,
+    onSearchProp = props.onSearch,
+    onResetProp = props.onReset,
+    rest = _objectWithoutProperties(props, _excluded);
+
+  /** 默认占满父容器高度（父容器需有高度，如 height:100vh 或 height:100%） */
+  var fillHeight = true;
+
+  /** 列显隐持久化 key：优先 columnVisibilityStorageKey，其次 __id（与 DataSourceContainer 一致，复用 @pisell/utils 的 key 规则） */
+  var columnVisibilityStorageKey = (_props$columnVisibili = props.columnVisibilityStorageKey) !== null && _props$columnVisibili !== void 0 ? _props$columnVisibili : props.__id;
+  var mergedChildComponentProps = useMemo(function () {
+    return mergeChildComponentProps(props);
+  }, [props.grid, props.toolBar, props.search, props.paginationConfig, props.batchActionBar, props.cardList]);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalSelectedKeys = _useState2[0],
+    setInternalSelectedKeys = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalSelectedRows = _useState4[0],
+    setInternalSelectedRows = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    scrollAreaHeight = _useState6[0],
+    setScrollAreaHeight = _useState6[1];
+  /** 点击重置时递增，供 ToolBar 给 PisellFilter 设 key 以强制重挂载，清空弹窗内高级筛选表单 */
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    filterResetKey = _useState8[0],
+    setFilterResetKey = _useState8[1];
+  var _useState9 = useState(function () {
+      var _props$grid$defaultHi, _props$grid, _props$grid$columns, _props$grid2;
+      var fromConfig = (_props$grid$defaultHi = (_props$grid = props.grid) === null || _props$grid === void 0 ? void 0 : _props$grid.defaultHiddenColumnKeys) !== null && _props$grid$defaultHi !== void 0 ? _props$grid$defaultHi : [];
+      var fromColumns = ((_props$grid$columns = (_props$grid2 = props.grid) === null || _props$grid2 === void 0 ? void 0 : _props$grid2.columns) !== null && _props$grid$columns !== void 0 ? _props$grid$columns : []).filter(function (col) {
+        return col.hidden === true;
+      }).map(function (col) {
+        return getRecordBoardColumnKey(col);
+      }).filter(Boolean);
+      var allHiddenKeys = Array.from(new Set([].concat(_toConsumableArray(fromConfig), _toConsumableArray(fromColumns))));
+      var defaultVis = {};
+      allHiddenKeys.forEach(function (k) {
+        defaultVis[k] = false;
+      });
+      if (typeof columnVisibilityStorageKey === 'string' && columnVisibilityStorageKey) {
+        if (typeof getRecordBoardColumnSettingFromLocal === 'function') {
+          var saved = getRecordBoardColumnSettingFromLocal(columnVisibilityStorageKey);
+          if (saved !== null && saved !== void 0 && saved.columnVisibility && Object.keys(saved.columnVisibility).length > 0) {
+            return _objectSpread(_objectSpread({}, defaultVis), saved.columnVisibility);
+          }
+        } else if (typeof getColumnVisibilityFromLocal === 'function') {
+          var savedVis = getColumnVisibilityFromLocal(columnVisibilityStorageKey);
+          if (savedVis && Object.keys(savedVis).length > 0) {
+            return _objectSpread(_objectSpread({}, defaultVis), savedVis);
+          }
+        }
+      }
+      return defaultVis;
+    }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    internalColumnVisibility = _useState10[0],
+    setInternalColumnVisibility = _useState10[1];
+  var _useState11 = useState(function () {
+      if (typeof columnVisibilityStorageKey === 'string' && columnVisibilityStorageKey && typeof getRecordBoardColumnSettingFromLocal === 'function') {
+        var _saved$columnOrder;
+        var saved = getRecordBoardColumnSettingFromLocal(columnVisibilityStorageKey);
+        return (_saved$columnOrder = saved === null || saved === void 0 ? void 0 : saved.columnOrder) !== null && _saved$columnOrder !== void 0 ? _saved$columnOrder : null;
+      }
+      return null;
+    }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    internalColumnOrder = _useState12[0],
+    setInternalColumnOrder = _useState12[1];
+  useEffect(function () {
+    if (typeof columnVisibilityStorageKey !== 'string' || !columnVisibilityStorageKey) return;
+    saveColumnVisibilityToLocal({
+      componentId: columnVisibilityStorageKey,
+      columnVisibility: internalColumnVisibility,
+      columnOrder: internalColumnOrder !== null && internalColumnOrder !== void 0 ? internalColumnOrder : undefined
+    });
+  }, [columnVisibilityStorageKey, internalColumnVisibility, internalColumnOrder]);
+  var onSelectionChangeInternal = useCallback(function (keys, rows) {
+    setInternalSelectedKeys(keys);
+    setInternalSelectedRows(rows);
+  }, []);
+  var onColumnVisibilityChangeInternal = useCallback(function (visibility) {
+    setInternalColumnVisibility(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), visibility);
+    });
+  }, []);
+  var onColumnOrderChangeInternal = useCallback(function (columnKeys) {
+    setInternalColumnOrder(columnKeys);
+  }, []);
+  var contextValue = useMemo(function () {
+    var _gridSelection$select;
+    var defaultCtx = getDefaultRecordBoardContext(layoutType, {
+      selectedKeys: internalSelectedKeys,
+      selectedRows: internalSelectedRows,
+      onSelectionChange: onSelectionChangeInternal
+    }, rowKeyProp);
+    var data = dataProp !== undefined ? dataProp : defaultCtx.data;
+    var loading = loadingProp !== undefined ? loadingProp : defaultCtx.loading;
+    var total = totalProp !== undefined ? totalProp : defaultCtx.total;
+    var pagination = paginationProp !== undefined ? paginationProp : defaultCtx.pagination;
+    var onPageChange = onPageChangeProp !== null && onPageChangeProp !== void 0 ? onPageChangeProp : defaultCtx.onPageChange;
+    var searchParams = searchParamsProp !== undefined ? searchParamsProp : defaultCtx.searchParams;
+    var onSearch = onSearchProp !== null && onSearchProp !== void 0 ? onSearchProp : defaultCtx.onSearch;
+    var onReset = onResetProp !== null && onResetProp !== void 0 ? onResetProp : defaultCtx.onReset;
+    var rowKey = rowKeyProp !== null && rowKeyProp !== void 0 ? rowKeyProp : defaultCtx.rowKey;
+    var gridSelection = props.grid;
+    var hasControlledSelection = (gridSelection === null || gridSelection === void 0 ? void 0 : gridSelection.selectedKeys) != null && Array.isArray(gridSelection.selectedKeys) && typeof gridSelection.onSelectionChange === 'function';
+    var selectedKeys = hasControlledSelection ? gridSelection.selectedKeys : internalSelectedKeys;
+    var selectedRows = hasControlledSelection ? (_gridSelection$select = gridSelection.selectedRows) !== null && _gridSelection$select !== void 0 ? _gridSelection$select : [] : internalSelectedRows;
+    var onSelectionChange = hasControlledSelection ? gridSelection.onSelectionChange : onSelectionChangeInternal;
+    return _objectSpread(_objectSpread({}, defaultCtx), {}, {
+      layoutType: layoutType,
+      rowKey: rowKey,
+      data: data,
+      loading: loading,
+      total: total,
+      pagination: pagination,
+      onPageChange: onPageChange,
+      searchParams: searchParams,
+      onSearch: onSearch,
+      onReset: onReset,
+      selectedKeys: selectedKeys,
+      selectedRows: selectedRows,
+      onSelectionChange: onSelectionChange,
+      columnVisibility: internalColumnVisibility,
+      onColumnVisibilityChange: onColumnVisibilityChangeInternal,
+      columnOrder: internalColumnOrder,
+      onColumnOrderChange: onColumnOrderChangeInternal,
+      childComponentProps: mergedChildComponentProps !== null && mergedChildComponentProps !== void 0 ? mergedChildComponentProps : defaultCtx.childComponentProps,
+      fillHeight: fillHeight,
+      scrollAreaHeight: scrollAreaHeight,
+      setScrollAreaHeight: setScrollAreaHeight,
+      filterResetKey: filterResetKey,
+      setFilterResetKey: setFilterResetKey
+    });
+  }, [layoutType, rowKeyProp, dataProp, loadingProp, totalProp, paginationProp, onPageChangeProp, searchParamsProp, onSearchProp, onResetProp, mergedChildComponentProps, internalSelectedKeys, internalSelectedRows, onSelectionChangeInternal, internalColumnVisibility, onColumnVisibilityChangeInternal, internalColumnOrder, onColumnOrderChangeInternal, fillHeight, scrollAreaHeight, filterResetKey]);
+  var content = /*#__PURE__*/React.createElement(RecordBoardProvider, {
+    value: contextValue
+  }, children);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-record-board-root",
+    style: {
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      minHeight: 0
+    }
+  }, content);
+};
+export default PisellRecordBoard;

package/es/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;