@pisell/materials 6.7.4 → 6.8.2

package/es/components/PisellTabbar2/types.d.ts

@@ -0,0 +1,117 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * Tabbar 数据源项类型
+ */
+export interface TabbarDataSource {
+    /** 子级最大层级 */
+    childrenMaxLevel?: number;
+    /** 唯一标识 */
+    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;
+    /** 位置 ID */
+    positionId?: string;
+}
+/**
+ * 展开配置
+ */
+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;
+    positionId?: string;
+    panelVisible?: boolean;
+}
+/**
+ * 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/es/components/PisellTabbar2/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/PisellTabbar2/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/es/components/PisellTabbar2/utils/index.js

@@ -0,0 +1,113 @@
+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 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); }
+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 _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 _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 _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; }
+/**
+ * PisellTabbar 工具函数
+ */
+
+import { getText } from "../../../locales";
+
+/**
+ * 默认的特殊项配置
+ */
+var defaultItems = {
+  all: {
+    id: 0,
+    shop_id: 9,
+    parent_id: 0,
+    name: 'pisell-tabbar-all',
+    slug: 'All',
+    icon: ''
+  },
+  search: {
+    id: -1,
+    shop_id: 9,
+    parent_id: 0,
+    name: 'pisell-tabbar-search',
+    slug: 'Search',
+    key: 'search',
+    icon: '',
+    customClick: true
+  },
+  expand: {
+    id: -2,
+    shop_id: 9,
+    parent_id: 0,
+    key: 'expand',
+    icon: 'pisell2-expand-01',
+    name: 'pisell-tabbar-expand',
+    slug: 'expand',
+    customClick: true
+  }
+};
+
+/**
+ * 向数据源添加特殊项（如 all、search、expand 按钮）
+ * 
+ * @param dataSource - 原始数据源
+ * @param keys - 要添加的特殊项 key 数组
+ * @returns 添加了特殊项的新数据源
+ * 
+ * @example
+ * ```tsx
+ * const newData = addDataSourceItemsByKey(categoryData, ['expand', 'all']);
+ * // 返回: [expandItem, allItem, ...categoryData]
+ * ```
+ */
+export var addDataSourceItemsByKey = function addDataSourceItemsByKey(dataSource, keys) {
+  return [].concat(_toConsumableArray(keys.map(function (key) {
+    return _objectSpread(_objectSpread({}, defaultItems[key]), {}, {
+      name: getText(defaultItems[key].name)
+    });
+  })), _toConsumableArray(dataSource));
+};
+
+/**
+ * 获取默认激活的 key 数组
+ * 
+ * @param dataSource - 数据源
+ * @param rowKey - 用作唯一标识的字段名
+ * @returns 默认激活的 key 数组（多层级）
+ * 
+ * @description
+ * 默认选中第一项，如果第一项有子级，同时选中第一个子级
+ * 
+ * @example
+ * ```tsx
+ * const defaultKeys = getDefaultActiveKey(categoryData, 'id');
+ * // 返回: [1, 0] (第一层级的第一项ID，第二层级的第一项ID)
+ * ```
+ */
+export var getDefaultActiveKey = function getDefaultActiveKey(dataSource, rowKey) {
+  var _activeKey = [];
+  if (dataSource.length) {
+    var _level1Item$children;
+    var level1Item = dataSource[0];
+    // 添加第一层级的第一项
+    _activeKey.push(String(level1Item[rowKey]));
+
+    // 如果第一项有子级，添加第二层级的第一项
+    if ((_level1Item$children = level1Item.children) !== null && _level1Item$children !== void 0 && _level1Item$children.length) {
+      if (level1Item.childrenMaxLevel !== undefined && level1Item.childrenMaxLevel < 2) {
+        _activeKey.push(String(0));
+      } else {
+        var _level2Item$children;
+        var level2Item = level1Item.children[0];
+        _activeKey.push(String(level2Item[rowKey]));
+        if ((_level2Item$children = level2Item.children) !== null && _level2Item$children !== void 0 && _level2Item$children.length) {
+          _activeKey.push(String(0));
+        }
+      }
+    }
+  }
+  return _activeKey;
+};

package/es/components/PisellTabbar3/PisellTabbar.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+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>;
+export default PisellTabbar;