@pisell/materials 6.11.3 → 6.11.5

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

@@ -0,0 +1,47 @@
+import { TabbarLevelConfig, ExpandConfig, LevelType } from './types';
+/**
+ * 默认层级配置
+ */
+export declare const DEFAULT_LEVEL_CONFIG: Record<LevelType, TabbarLevelConfig>;
+/**
+ * 获取展开配置
+ */
+export declare const getExpandConfig: () => ExpandConfig;
+/**
+ * 默认数据项配置
+ */
+export declare const DEFAULT_ITEMS: {
+    all: {
+        id: string;
+        shop_id: number;
+        parent_id: number;
+        name: any;
+        slug: string;
+        icon: string;
+    };
+    search: {
+        id: string;
+        shop_id: number;
+        parent_id: number;
+        name: any;
+        text: any;
+        slug: string;
+        key: string;
+        icon: string;
+        customClick: boolean;
+    };
+    expand: {
+        id: string;
+        shop_id: number;
+        parent_id: number;
+        key: string;
+        icon: string;
+        name: string;
+        slug: string;
+        customClick: boolean;
+    };
+};
+/**
+ * 获取层级对应的添加项配置
+ */
+export declare const LEVEL_ADD_ITEMS: Record<LevelType, ('all' | 'search' | 'expand')[]>;

package/lib/components/PisellTabbar/constants.js

@@ -29,7 +29,7 @@ var import_locales = require("../../locales");
 var DEFAULT_LEVEL_CONFIG = {
   level1: {
     superTabsBg: "#3b2865",
-    cardWidth: 100,
+    cardWidth: 106,
     cardHeight: 60,
     paddingLeft: 0
   },
@@ -69,8 +69,9 @@ var DEFAULT_ITEMS = {
     id: "-1",
     shop_id: 9,
     parent_id: 0,
-    name: "Search",
-    slug: "Search",
+    name: (0, import_locales.getText)("table-filter-search"),
+    text: (0, import_locales.getText)("table-filter-search"),
+    slug: "search",
     key: "search",
     icon: "",
     customClick: true
@@ -87,7 +88,7 @@ var DEFAULT_ITEMS = {
   }
 };
 var LEVEL_ADD_ITEMS = {
-  level1: ["expand"],
+  level1: ["search", "expand"],
   level2: ["expand", "all"],
   level3: ["expand", "all"]
 };

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

@@ -0,0 +1,2 @@
+export { default as useActiveKey } from './useActiveKey';
+export { default as useExpand } from './useExpand';

package/lib/components/PisellTabbar/hooks/useActiveKey.d.ts

@@ -0,0 +1,55 @@
+/**
+ * useActiveKey Hook 参数
+ */
+interface UseActiveKeyProps {
+    /** 初始激活的 key 数组（对应多层级） */
+    initialActiveKey?: (string | number)[];
+    /** key 变化回调 */
+    onChange?: (value: (string | number)[]) => void;
+}
+/**
+ * useActiveKey Hook 返回值
+ */
+interface UseActiveKeyReturn {
+    /** 当前激活的 key 数组 */
+    activeKey: (string | number)[];
+    /** 设置指定层级的激活 key */
+    setActiveKey: (level: number, key: string | number, cKey?: string | number) => void;
+    /** 获取指定层级的激活 key */
+    getActiveKey: (level: number) => string | number;
+    /** 内部设置方法（用于同步外部值） */
+    _setActiveKey: (value: (string | number)[]) => void;
+    /** 设置缓存key */
+    setCacheActiveKey: (val: (string | number)[]) => void;
+    /** 重置value为缓存key */
+    resetActiveKey: () => void;
+    /** 获取缓存key */
+    getCacheActiveKey: () => (string | number)[];
+}
+/**
+ * Tabbar 激活状态管理 Hook
+ *
+ * 用于管理多层级 Tabbar 的激活状态，支持级联选择
+ *
+ * @param props - Hook 配置参数
+ * @returns 激活状态和操作方法
+ *
+ * @example
+ * ```tsx
+ * const { activeKey, setActiveKey, getActiveKey } = useActiveKey({
+ *   initialActiveKey: [1, 10],
+ *   onChange: (value) => console.log('当前选中:', value)
+ * });
+ *
+ * // 设置第 0 层级的 key，并清除后续层级
+ * setActiveKey(0, '2');
+ *
+ * // 设置第 0 层级的 key，并同时设置第 1 层级
+ * setActiveKey(0, '2', '20');
+ *
+ * // 获取第 0 层级的 key
+ * const level0Key = getActiveKey(0);
+ * ```
+ */
+declare const useActiveKey: (props: UseActiveKeyProps) => UseActiveKeyReturn;
+export default useActiveKey;

package/lib/components/PisellTabbar/hooks/useActiveKey.js

@@ -26,6 +26,16 @@ var import_react = require("react");
 var useActiveKey = (props) => {
   const { initialActiveKey = [], onChange } = props;
   const [activeKey, _setActiveKey] = (0, import_react.useState)(initialActiveKey);
+  const cacheActiveKey = (0, import_react.useRef)([]);
+  const setCacheActiveKey = (val) => {
+    cacheActiveKey.current = [...val];
+  };
+  const resetActiveKey = () => {
+    let val = cacheActiveKey.current;
+    _setActiveKey(val);
+    onChange == null ? void 0 : onChange(val);
+    cacheActiveKey.current = [];
+  };
   const setActiveKey = (level, key, cKey) => {
     const newActiveKey = [...activeKey];
     newActiveKey.splice(level + 1);
@@ -37,12 +47,15 @@ var useActiveKey = (props) => {
     onChange == null ? void 0 : onChange(newActiveKey);
   };
   const getActiveKey = (level) => {
-    return activeKey[level];
+    return activeKey == null ? void 0 : activeKey[level];
   };
   return {
     activeKey,
     setActiveKey,
     getActiveKey,
+    resetActiveKey,
+    getCacheActiveKey: () => cacheActiveKey.current,
+    setCacheActiveKey,
     /**
      * 内部设置方法，用于同步外部传入的 value
      * 会进行深比较，避免不必要的更新

package/lib/components/PisellTabbar/hooks/useExpand.d.ts

@@ -0,0 +1,42 @@
+import { ExpandState, LevelType } from '../types';
+/**
+ * useExpand Hook 参数
+ */
+interface UseExpandProps {
+    /** 初始展开状态 */
+    initialExpand?: Partial<ExpandState>;
+}
+/**
+ * useExpand Hook 返回值
+ */
+interface UseExpandReturn {
+    /** 展开状态 */
+    expand: ExpandState;
+    /** 设置展开状态 */
+    setExpand: (state: ExpandState) => void;
+    /** 切换指定层级的展开状态 */
+    toggleExpand: (level: LevelType) => void;
+    /** 获取指定层级的展开状态 */
+    getExpand: (level: LevelType) => boolean;
+    closeAll: () => void;
+}
+/**
+ * Tabbar 展开状态管理 Hook
+ * 用于管理多层级的展开/收起状态
+ *
+ * @param props - Hook 配置参数
+ * @returns 展开状态和操作方法
+ *
+ * @example
+ * ```tsx
+ * const { expand, toggleExpand, getExpand } = useExpand({
+ *   initialExpand: { level1: false }
+ * });
+ *
+ * <button onClick={() => toggleExpand('level1')}>
+ *   {getExpand('level1') ? '收起' : '展开'}
+ * </button>
+ * ```
+ */
+declare const useExpand: (props?: UseExpandProps) => UseExpandReturn;
+export default useExpand;

package/lib/components/PisellTabbar/hooks/useExpand.js

@@ -37,6 +37,13 @@ var useExpand = (props = {}) => {
       [level]: !prev[level]
     }));
   }, []);
+  const closeAll = () => {
+    setExpand({
+      level1: false,
+      level2: false,
+      level3: false
+    });
+  };
   const getExpand = (0, import_react.useCallback)(
     (level) => {
       return expand[level];
@@ -47,7 +54,8 @@ var useExpand = (props = {}) => {
     expand,
     setExpand,
     toggleExpand,
-    getExpand
+    getExpand,
+    closeAll
   };
 };
 var useExpand_default = useExpand;

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

@@ -0,0 +1,9 @@
+/**
+ * PisellTabbar 组件导出文件
+ * @module PisellTabbar
+ */
+import PisellTabbar from './PisellTabbar';
+import PisellTabbarTemplate1 from './template/Template1';
+export type { PisellTabbarProps, TabbarDataSource, LevelType } from './types';
+export { PisellTabbarTemplate1 };
+export default PisellTabbar;

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

@@ -0,0 +1,15 @@
+declare const _default: {
+    en: {
+        expand: string;
+        minimize: string;
+    };
+    "zh-CN": {
+        expand: string;
+        minimize: string;
+    };
+    "zh-HK": {
+        expand: string;
+        minimize: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,47 @@
+declare const _default: {
+    id: number;
+    shop_id: number;
+    parent_id: number;
+    name: string;
+    slug: string;
+    icon: string;
+    status: string;
+    last_applicable_time: number;
+    sort: number;
+    create_account_id: number;
+    update_account_id: number;
+    created_at: string;
+    updated_at: string;
+    children: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        name: string;
+        slug: string;
+        icon: string;
+        status: string;
+        last_applicable_time: number;
+        sort: number;
+        create_account_id: number;
+        update_account_id: number;
+        created_at: string;
+        updated_at: string;
+        children: {
+            id: number;
+            shop_id: number;
+            parent_id: number;
+            name: string;
+            slug: string;
+            icon: string;
+            status: string;
+            last_applicable_time: number;
+            sort: number;
+            create_account_id: number;
+            update_account_id: number;
+            created_at: string;
+            updated_at: string;
+            children: never[];
+        }[];
+    }[];
+}[];
+export default _default;

package/lib/components/PisellTabbar/template/Template1/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;

package/lib/components/PisellTabbar/template/Template1/constants.d.ts

@@ -0,0 +1,10 @@
+import { TabbarLevelConfig, LevelType } from '../../types';
+export { getExpandConfig, DEFAULT_ITEMS } from '../../constants';
+/**
+ * 默认层级配置
+ */
+export declare const DEFAULT_LEVEL_CONFIG: Record<LevelType, TabbarLevelConfig>;
+/**
+ * 获取层级对应的添加项配置
+ */
+export declare const LEVEL_ADD_ITEMS: Record<LevelType, ('all' | 'search' | 'expand')[]>;

package/lib/components/PisellTabbar/template/Template1/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellTabbar 组件导出文件
+ * @module PisellTabbar
+ */
+import PisellTabbar from './PisellTabbar';
+export default PisellTabbar;

package/lib/components/PisellTabbar/template/Template1/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/types.d.ts

@@ -0,0 +1,90 @@
+import { CSSProperties } 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';
+/**
+ * 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;
+    onSearch?: (value: string) => void;
+    __designMode?: boolean;
+}
+export interface PisellTabbarRef {
+    closeSearchMode: () => void;
+}

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

@@ -0,0 +1,69 @@
+/**
+ * PisellTabbar 工具函数
+ */
+import { TabbarDataSource } from '../types';
+/**
+ * 默认的特殊项配置
+ */
+export declare const defaultItems: {
+    all: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        name: any;
+        slug: string;
+        icon: string;
+    };
+    search: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        name: any;
+        text: any;
+        slug: string;
+        key: string;
+        icon: string;
+        customClick: boolean;
+    };
+    expand: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        key: string;
+        icon: string;
+        name: string;
+        slug: string;
+        customClick: boolean;
+    };
+};
+/**
+ * 向数据源添加特殊项（如 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

@@ -38,7 +38,8 @@ var defaultItems = {
     id: -1,
     shop_id: 9,
     parent_id: 0,
-    name: "Search",
+    name: (0, import_locales.getText)("table-filter-find"),
+    text: (0, import_locales.getText)("table-filter-find"),
     slug: "Search",
     key: "search",
     icon: "",

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

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

@@ -0,0 +1 @@
+export { default as TabbarLevel } from './TabbarLevel';

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

@@ -0,0 +1,46 @@
+import { TabbarLevelConfig, ExpandConfig, LevelType } from './types';
+/**
+ * 默认层级配置
+ */
+export declare const DEFAULT_LEVEL_CONFIG: Record<LevelType, TabbarLevelConfig>;
+/**
+ * 获取展开配置
+ */
+export declare const getExpandConfig: () => ExpandConfig;
+/**
+ * 默认数据项配置
+ */
+export declare const DEFAULT_ITEMS: {
+    all: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        name: string;
+        slug: string;
+        icon: string;
+    };
+    search: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        name: string;
+        slug: string;
+        key: string;
+        icon: string;
+        customClick: boolean;
+    };
+    expand: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        key: string;
+        icon: string;
+        name: string;
+        slug: string;
+        customClick: boolean;
+    };
+};
+/**
+ * 获取层级对应的添加项配置
+ */
+export declare const LEVEL_ADD_ITEMS: Record<LevelType, ('all' | 'search' | 'expand')[]>;

package/lib/components/PisellTabbar2/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useActiveKey } from './useActiveKey';
+export { default as useExpand } from './useExpand';