@pisell/materials 6.7.4 → 6.8.2

package/lib/components/PisellTabbar/types.d.ts

@@ -0,0 +1,111 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * Tabbar 数据源项类型
+ */
+export interface TabbarDataSource {
+    /** 唯一标识 */
+    id: string | number;
+    /** 店铺ID */
+    shop_id?: number;
+    /** 父级ID */
+    parent_id?: number;
+    /** 显示名称 */
+    name: string;
+    /** URL slug */
+    slug?: string;
+    /** 图标 URL 或图标名称 */
+    icon?: string;
+    /** 子级数据 */
+    children?: TabbarDataSource[];
+    /** 自定义点击事件标识 */
+    customClick?: boolean;
+    /** 唯一 key */
+    key?: string;
+}
+/**
+ * 层级配置
+ */
+export interface TabbarLevelConfig {
+    /** SuperTabs 背景色 */
+    superTabsBg: string;
+    /** 卡片宽度 */
+    cardWidth: number;
+    /** 卡片高度 */
+    cardHeight: number;
+    /** 左侧缩进 */
+    paddingLeft?: number;
+}
+/**
+ * 展开配置
+ */
+export interface ExpandConfig {
+    /** 激活状态配置 */
+    active: {
+        icon: string;
+        text: string;
+    };
+    /** 未激活状态配置 */
+    inactive: {
+        icon: string;
+        text: string;
+    };
+}
+/**
+ * 展开状态
+ */
+export interface ExpandState {
+    level1: boolean;
+    level2: boolean;
+    level3: boolean;
+}
+/**
+ * 层级类型
+ */
+export declare type LevelType = 'level1' | 'level2' | 'level3';
+/**
+ * TabbarLevel 组件属性
+ */
+export interface TabbarLevelProps {
+    /** SKU ID */
+    skuId: string;
+    /** 数据源 */
+    dataSource: TabbarDataSource[];
+    /** 当前激活的面板 key */
+    activePanelKey: string | number;
+    /** 层级 */
+    level: LevelType;
+    /** 设置激活面板 key */
+    setActivePanelKey: (key: string | number, item?: TabbarDataSource) => void;
+    /** 是否展开 */
+    expand: boolean;
+    /** 展开处理函数 */
+    handleExpand: () => void;
+    /** 渲染子级内容 */
+    renderChildren?: (panelProps: any) => ReactNode;
+    /** 层级配置 */
+    levelConfig?: TabbarLevelConfig;
+    /** 展开配置 */
+    expandConfig?: ExpandConfig;
+}
+/**
+ * PisellTabbar 组件属性
+ */
+export interface PisellTabbarProps {
+    /** 数据源 */
+    dataSource?: TabbarDataSource[];
+    /** 当前选中的值（多层级 key 数组） */
+    value?: (string | number)[];
+    /** 值变化回调 */
+    onChange?: (value: (string | number)[]) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 层级配置（可按层级自定义） */
+    levelConfig?: Partial<Record<LevelType, Partial<TabbarLevelConfig>>>;
+    /** 展开配置 */
+    expandConfig?: ExpandConfig;
+    /** 最大层级数 */
+    maxLevel?: 1 | 2 | 3;
+    __designMode?: boolean;
+}

package/lib/components/PisellTabbar/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellTabbar/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/PisellTabbar/utils/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * PisellTabbar 工具函数
+ */
+import { TabbarDataSource } from '../types';
+/**
+ * 向数据源添加特殊项（如 all、search、expand 按钮）
+ *
+ * @param dataSource - 原始数据源
+ * @param keys - 要添加的特殊项 key 数组
+ * @returns 添加了特殊项的新数据源
+ *
+ * @example
+ * ```tsx
+ * const newData = addDataSourceItemsByKey(categoryData, ['expand', 'all']);
+ * // 返回: [expandItem, allItem, ...categoryData]
+ * ```
+ */
+export declare const addDataSourceItemsByKey: (dataSource: TabbarDataSource[], keys: ('all' | 'search' | 'expand')[]) => TabbarDataSource[];
+/**
+ * 获取默认激活的 key 数组
+ *
+ * @param dataSource - 数据源
+ * @param rowKey - 用作唯一标识的字段名
+ * @returns 默认激活的 key 数组（多层级）
+ *
+ * @description
+ * 默认选中第一项，如果第一项有子级，同时选中第一个子级
+ *
+ * @example
+ * ```tsx
+ * const defaultKeys = getDefaultActiveKey(categoryData, 'id');
+ * // 返回: [1, 0] (第一层级的第一项ID，第二层级的第一项ID)
+ * ```
+ */
+export declare const getDefaultActiveKey: (dataSource: TabbarDataSource[], rowKey: string) => (string | number)[];

package/lib/components/PisellTabbar/utils/index.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellTabbar/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  addDataSourceItemsByKey: () => addDataSourceItemsByKey,
+  getDefaultActiveKey: () => getDefaultActiveKey
+});
+module.exports = __toCommonJS(utils_exports);
+var defaultItems = {
+  all: {
+    id: 0,
+    shop_id: 9,
+    parent_id: 0,
+    name: "All",
+    slug: "All",
+    icon: ""
+  },
+  search: {
+    id: -1,
+    shop_id: 9,
+    parent_id: 0,
+    name: "Search",
+    slug: "Search",
+    key: "search",
+    icon: "",
+    customClick: true
+  },
+  expand: {
+    id: -2,
+    shop_id: 9,
+    parent_id: 0,
+    key: "expand",
+    icon: "pisell2-expand-01",
+    name: "Expand",
+    slug: "expand",
+    customClick: true
+  }
+};
+var addDataSourceItemsByKey = (dataSource, keys) => {
+  return [...keys.map((key) => defaultItems[key]), ...dataSource];
+};
+var getDefaultActiveKey = (dataSource, rowKey) => {
+  var _a;
+  const _activeKey = [];
+  if (dataSource.length) {
+    _activeKey.push(dataSource[0][rowKey]);
+    if ((_a = dataSource[0].children) == null ? void 0 : _a.length) {
+      _activeKey.push(0);
+    }
+  }
+  return _activeKey;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  addDataSourceItemsByKey,
+  getDefaultActiveKey
+});

package/lib/components/PisellTabbar2/PisellTabbar.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { getDefaultActiveKey } from './utils';
+import { PisellTabbarProps } from './types';
+import './PisellTabbar.less';
+/**
+ * PisellTabbar - 多层级 Tabbar 组件
+ *
+ * 支持最多 3 层级的 Tab 导航，每层级可独立展开/收起
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PisellTabbar
+ *   dataSource={categoryData}
+ *   value={[1, 10, 100]}
+ *   onChange={(value) => console.log('当前选中:', value)}
+ * />
+ * ```
+ */
+declare const PisellTabbar: React.FC<PisellTabbarProps> & {
+    getDefaultActiveKey: typeof getDefaultActiveKey;
+};
+export default PisellTabbar;

package/lib/components/PisellTabbar2/PisellTabbar.js

@@ -0,0 +1,260 @@
+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/PisellTabbar2/PisellTabbar.tsx
+var PisellTabbar_exports = {};
+__export(PisellTabbar_exports, {
+  default: () => PisellTabbar_default
+});
+module.exports = __toCommonJS(PisellTabbar_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_components = require("./components");
+var import_hooks = require("./hooks");
+var import_utils = require("./utils");
+var import_constants = require("./constants");
+var import_mock = __toESM(require("./mock"));
+var import_PisellTabbar = require("./PisellTabbar.less");
+var PisellTabbar = (props) => {
+  const {
+    dataSource = (props == null ? void 0 : props.__designMode) ? import_mock.default : import_mock.default,
+    value,
+    onChange,
+    className,
+    style,
+    levelConfig: customLevelConfig,
+    expandConfig,
+    maxLevel = 3
+  } = props;
+  const { setActiveKey, getActiveKey, _setActiveKey, panelVisible, activeKey } = (0, import_hooks.useActiveKey)({
+    initialActiveKey: value || (0, import_utils.getDefaultActiveKey)(dataSource, "id"),
+    onChange
+  });
+  const { expand, toggleExpand, getExpand } = (0, import_hooks.useExpand)();
+  console.log("panelVisiblepanelVisible", panelVisible);
+  (0, import_react.useEffect)(() => {
+    if (value) {
+      _setActiveKey(value);
+    }
+  }, [JSON.stringify(value)]);
+  const getLevelConfig = (0, import_react.useCallback)(
+    (level) => {
+      return {
+        ...import_constants.DEFAULT_LEVEL_CONFIG[level],
+        ...customLevelConfig == null ? void 0 : customLevelConfig[level]
+      };
+    },
+    [customLevelConfig]
+  );
+  const handleLevel1Change = (0, import_react.useCallback)(
+    (key, item) => {
+      var _a, _b;
+      if (item.childrenMaxLevel !== void 0 && item.childrenMaxLevel < 2) {
+        setActiveKey(0, key, 0);
+      } else {
+        setActiveKey(
+          0,
+          key,
+          ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? (_b = item == null ? void 0 : item.children[0]) == null ? void 0 : _b.id : void 0
+        );
+      }
+    },
+    [setActiveKey]
+  );
+  const handleLevel2Change = (0, import_react.useCallback)(
+    (key, item) => {
+      var _a;
+      setActiveKey(1, key, ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? 0 : void 0);
+    },
+    [setActiveKey]
+  );
+  const handleLevel3Change = (0, import_react.useCallback)(
+    (key) => {
+      setActiveKey(2, key);
+    },
+    [setActiveKey]
+  );
+  const level1DataSource = (0, import_react.useMemo)(
+    () => (0, import_utils.addDataSourceItemsByKey)(dataSource, import_constants.LEVEL_ADD_ITEMS.level1),
+    [dataSource]
+  );
+  const renderLevel2 = (0, import_react.useCallback)(
+    (panelProps) => {
+      if (maxLevel < 2) return null;
+      const childrenMaxLevel = panelProps.dataSource.childrenMaxLevel || 2;
+      if (childrenMaxLevel < 2) {
+        return renderLevel3(panelProps, true);
+      }
+      let _dataSource = panelProps.dataSource.children || [];
+      if (_dataSource.length) {
+        _dataSource = (0, import_utils.addDataSourceItemsByKey)(
+          _dataSource,
+          import_constants.LEVEL_ADD_ITEMS.level2
+        );
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.TabbarLevel,
+        {
+          skuId: `sku-list-tabbar-${panelProps.dataSource.id}`,
+          dataSource: _dataSource,
+          activePanelKey: getActiveKey(1),
+          level: "level2",
+          setActivePanelKey: handleLevel2Change,
+          expand: getExpand("level2"),
+          handleExpand: () => toggleExpand("level2"),
+          renderChildren: renderLevel3,
+          levelConfig: getLevelConfig("level2"),
+          expandConfig,
+          positionId: getLevelConfig("level2").positionId,
+          superTabsProps: {
+            className: "pisell-tabbar-level-2",
+            style: {
+              width: "104px"
+            },
+            gridProps: {
+              direction: "vertical",
+              style: {
+                padding: "16px 4px"
+              },
+              gap: 12
+            },
+            startSlot: null,
+            scrollViewProps: {
+              overflow: "y",
+              width: "100%",
+              height: "100%",
+              style: {
+                padding: 0
+              },
+              scrollActionsConfig: {
+                type: "tbArrows",
+                show: true
+              }
+            }
+          }
+        }
+      );
+    },
+    [
+      maxLevel,
+      getActiveKey,
+      handleLevel2Change,
+      getExpand,
+      toggleExpand,
+      getLevelConfig,
+      expandConfig
+    ]
+  );
+  const renderLevel3 = (0, import_react.useCallback)(
+    (panelProps2, isLevel2) => {
+      if (maxLevel < 3) return null;
+      let _dataSource2 = panelProps2.dataSource.children || [];
+      if (_dataSource2.length) {
+        _dataSource2 = (0, import_utils.addDataSourceItemsByKey)(
+          _dataSource2,
+          import_constants.LEVEL_ADD_ITEMS.level3
+        );
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.TabbarLevel,
+        {
+          skuId: `sku-list-tabbar-${panelProps2.dataSource.id}`,
+          dataSource: _dataSource2,
+          activePanelKey: getActiveKey(isLevel2 ? 1 : 2),
+          level: "level3",
+          setActivePanelKey: isLevel2 ? handleLevel2Change : handleLevel3Change,
+          expand: getExpand(isLevel2 ? "level2" : "level3"),
+          handleExpand: () => toggleExpand(isLevel2 ? "level2" : "level3"),
+          levelConfig: getLevelConfig("level3"),
+          expandConfig,
+          positionId: getLevelConfig(isLevel2 ? "level2" : "level3").positionId
+        }
+      );
+    },
+    [
+      maxLevel,
+      getActiveKey,
+      handleLevel3Change,
+      getExpand,
+      toggleExpand,
+      getLevelConfig,
+      expandConfig
+    ]
+  );
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, []);
+  console.log("activeKeyactiveKey", activeKey);
+  return dataSource.length ? /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-tabbar2", className), style }, /* @__PURE__ */ import_react.default.createElement(
+    import_components.TabbarLevel,
+    {
+      skuId: "sku-list-tabbar",
+      dataSource: level1DataSource,
+      activePanelKey: getActiveKey(0),
+      level: "level1",
+      setActivePanelKey: handleLevel1Change,
+      expand: getExpand("level1"),
+      handleExpand: () => toggleExpand("level1"),
+      renderChildren: renderLevel2,
+      levelConfig: getLevelConfig("level1"),
+      expandConfig,
+      superTabsProps: {
+        gridProps: {
+          direction: "vertical",
+          style: {
+            padding: "16px 4px"
+          },
+          gap: 12
+        },
+        panelStyle: {
+          height: "100%",
+          transition: "0.3s ease-in-out"
+        },
+        startSlot: null,
+        scrollViewProps: {
+          overflow: "y",
+          width: "100%",
+          height: "100%",
+          style: {
+            padding: 0
+          },
+          scrollActionsConfig: {
+            type: "tbArrows",
+            show: true
+          }
+        }
+      },
+      positionId: getLevelConfig("level1").positionId,
+      level2PositionId: getLevelConfig("level2").positionId,
+      panelVisible
+    }
+  )) : null;
+};
+PisellTabbar.displayName = "PisellTabbar";
+PisellTabbar.getDefaultActiveKey = import_utils.getDefaultActiveKey;
+var PisellTabbar_default = PisellTabbar;

package/lib/components/PisellTabbar2/PisellTabbar.less

@@ -0,0 +1,25 @@
+/**
+ * PisellTabbar 组件样式
+ */
+.pisell-tabbar2 {
+  // height: 100vh;
+  width: 96px;
+  // position: fixed;
+  // top: 0;
+  // right: 0;
+  // z-index: 1000;
+}
+
+
+.pisell-tabbar-level-2 {
+  width: 104px;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 8px 0 0 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.30);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.30);
+  border-left: 1px solid rgba(255, 255, 255, 0.30);
+  background: rgba(52, 64, 84, 0.80);
+  box-shadow: -2px -1px 4px 0 rgba(0, 0, 0, 0.55), -2px 2px 4px 0 rgba(255, 255, 255, 0.45);
+  backdrop-filter: blur(12px);
+}

package/lib/components/PisellTabbar2/components/TabbarLevel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TabbarLevelProps } from '../types';
+/**
+ * Tabbar 层级组件
+ * 负责渲染单个层级的 Tab 导航
+ */
+declare const TabbarLevel: React.FC<TabbarLevelProps>;
+export default TabbarLevel;