@pisell/materials 1.8.6 → 1.8.8

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/useActiveKey.d.ts

@@ -19,6 +19,12 @@ interface UseActiveKeyReturn {
     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

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

@@ -18,6 +18,7 @@ interface UseExpandReturn {
     toggleExpand: (level: LevelType) => void;
     /** 获取指定层级的展开状态 */
     getExpand: (level: LevelType) => boolean;
+    closeAll: () => void;
 }
 /**
  * Tabbar 展开状态管理 Hook

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

@@ -1,20 +1,5 @@
 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;
+import { PisellTabbarProps } from '../../types';
+declare const _default: React.ForwardRefExoticComponent<PisellTabbarProps & React.RefAttributes<unknown>>;
+export default _default;

package/lib/components/PisellTabbar/template/Template1/PisellTabbar.js

@@ -32,18 +32,20 @@ __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_PisellSuperTabs = __toESM(require("../../../PisellSuperTabs"));
+var import_react = __toESM(require("react"));
+var import_locales = require("../../../../locales");
 var import_PisellCards = __toESM(require("../../../PisellCards"));
+var import_PisellSuperTabs = __toESM(require("../../../PisellSuperTabs"));
 var import_iconfont = __toESM(require("../../../iconfont"));
+var import_pisellFind = require("../../../pisellFind");
+var import_PisellTabbar = require("../../PisellTabbar.less");
 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 import_constants = require("./constants");
+var import_utils = require("./utils");
 var tabbarId = "sku-list-tabbar-temp1";
-var PisellTabbar = (props) => {
+var PisellTabbar = (props, ref) => {
   const {
     dataSource = (props == null ? void 0 : props.__designMode) ? import_mock.default : import_mock.default,
     value,
@@ -52,17 +54,52 @@ var PisellTabbar = (props) => {
     style,
     levelConfig: customLevelConfig,
     expandConfig: customExpandConfig,
-    maxLevel = 3
+    maxLevel = 3,
+    onSearch
   } = props;
-  const { setActiveKey, getActiveKey, _setActiveKey, activeKey } = (0, import_hooks.useActiveKey)(
-    {
-      initialActiveKey: value || (0, import_utils.getDefaultActiveKey)(dataSource, "id"),
-      onChange
-    }
-  );
+  const containerRef = (0, import_react.useRef)(null);
+  const searchRef = (0, import_react.useRef)(null);
+  const {
+    setActiveKey,
+    getActiveKey,
+    _setActiveKey,
+    activeKey,
+    setCacheActiveKey,
+    resetActiveKey
+  } = (0, import_hooks.useActiveKey)({
+    initialActiveKey: value || (0, import_utils.getDefaultActiveKey)(dataSource, "id"),
+    onChange
+  });
   console.log("getActiveKey", activeKey);
   const { expand, toggleExpand, getExpand } = (0, import_hooks.useExpand)();
   const expandConfig = customExpandConfig || (0, import_constants.getExpandConfig)();
+  const level1Value = (0, import_react.useMemo)(() => {
+    return getActiveKey(0);
+  }, [activeKey]);
+  const level2Value = (0, import_react.useMemo)(() => {
+    return getActiveKey(1);
+  }, [activeKey]);
+  const level3Value = (0, import_react.useMemo)(() => {
+    return getActiveKey(2);
+  }, [activeKey]);
+  const openSearchMode = () => {
+    setCacheActiveKey(activeKey);
+    _setActiveKey([]);
+    onChange == null ? void 0 : onChange([]);
+  };
+  const closeSearchMode = () => {
+    onSearch == null ? void 0 : onSearch("");
+    resetActiveKey();
+  };
+  (0, import_react.useImperativeHandle)(ref, () => {
+    var _a;
+    if (props == null ? void 0 : props.__designMode) {
+      return containerRef.current;
+    }
+    return {
+      closeSearchMode: (_a = searchRef == null ? void 0 : searchRef.current) == null ? void 0 : _a.close
+    };
+  });
   (0, import_react.useEffect)(() => {
     if (value) {
       _setActiveKey(value);
@@ -144,6 +181,67 @@ var PisellTabbar = (props) => {
     },
     [expandConfig, activeKey, getLevelConfig]
   );
+  const renderSearch = (0, import_react.useCallback)(
+    (itemProps, level) => {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_pisellFind.PisellFind,
+        {
+          showHistory: false,
+          modalWidth: "100%",
+          ref: searchRef,
+          onSearch: (e) => {
+            onSearch == null ? void 0 : onSearch(e);
+          },
+          getContainer: () => {
+            return document.querySelector(`#${tabbarId}`) || document.body;
+          },
+          modalStyle: {
+            width: "100%"
+          },
+          onOpen: openSearchMode,
+          onClose: closeSearchMode,
+          trigger: /* @__PURE__ */ import_react.default.createElement(
+            import_PisellCards.default.MultilevelCard,
+            {
+              ...itemProps,
+              card: (cardProps) => {
+                let _cardProps = {
+                  ...cardProps,
+                  text: /* @__PURE__ */ import_react.default.createElement(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 4
+                      }
+                    },
+                    /* @__PURE__ */ import_react.default.createElement(
+                      import_iconfont.default,
+                      {
+                        type: "pisell2-search-lg",
+                        style: { color: "#000", fontSize: 20 }
+                      }
+                    ),
+                    /* @__PURE__ */ import_react.default.createElement(
+                      import_iconfont.default,
+                      {
+                        type: "pisell2-scan",
+                        style: { color: "#000", fontSize: 20 }
+                      }
+                    ),
+                    /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_locales.getText)("table-filter-find"))
+                  )
+                };
+                return renderNormalCard(_cardProps, level);
+              }
+            }
+          )
+        }
+      );
+    },
+    [activeKey]
+  );
   const renderNormalCard = (0, import_react.useCallback)(
     (cardProps, level) => {
       var _a;
@@ -152,8 +250,8 @@ var PisellTabbar = (props) => {
       return /* @__PURE__ */ import_react.default.createElement(
         import_PisellCards.default.TextCard,
         {
-          ...cardProps,
           text: itemData.name,
+          ...cardProps,
           variant: "outlined",
           widthMode: "auto",
           textConfig: {
@@ -189,17 +287,22 @@ var PisellTabbar = (props) => {
   const renderLevel1Item = (0, import_react.useCallback)(
     (itemProps) => {
       const { dataSource: itemData } = itemProps;
-      const level1Config2 = getLevelConfig("level1");
       const isExpanded = getExpand("level1");
       if (itemData == null ? void 0 : itemData.customClick) {
-        return /* @__PURE__ */ import_react.default.createElement(
-          import_PisellCards.default.MultilevelCard,
-          {
-            ...itemProps,
-            card: (cardProps) => renderExpandCard(cardProps, "level1", isExpanded),
-            onClick: () => toggleExpand("level1")
-          }
-        );
+        if (itemProps.dataSource.key === "search") {
+          return renderSearch(itemProps, "level1");
+        }
+        if (itemProps.dataSource.key === "expand") {
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_PisellCards.default.MultilevelCard,
+            {
+              ...itemProps,
+              card: (cardProps) => renderExpandCard(cardProps, "level1", isExpanded),
+              onClick: () => toggleExpand("level1")
+            }
+          );
+        }
+        return null;
       }
       return /* @__PURE__ */ import_react.default.createElement(
         import_PisellCards.default.MultilevelCard,
@@ -236,9 +339,10 @@ var PisellTabbar = (props) => {
         import_PisellSuperTabs.default,
         {
           id: skuId,
+          isControlled: true,
           tabItemStyle: {},
           dataSource: _dataSource,
-          value: String(getActiveKey(1)),
+          value: level2Value,
           onChange: handleLevel2Change,
           rowKey: "id",
           style: {
@@ -302,6 +406,7 @@ var PisellTabbar = (props) => {
       );
     },
     [
+      level2Value,
       maxLevel,
       activeKey,
       getActiveKey,
@@ -330,9 +435,10 @@ var PisellTabbar = (props) => {
         import_PisellSuperTabs.default,
         {
           id: skuId,
+          isControlled: true,
           tabItemStyle: {},
           dataSource: _dataSource2,
-          value: String(getActiveKey(2)),
+          value: level3Value,
           onChange: handleLevel3Change,
           rowKey: "id",
           style: {
@@ -386,6 +492,7 @@ var PisellTabbar = (props) => {
       );
     },
     [
+      level3Value,
       maxLevel,
       activeKey,
       getActiveKey,
@@ -399,38 +506,47 @@ var PisellTabbar = (props) => {
   );
   const level1Config = getLevelConfig("level1");
   const isExpanded1 = getExpand("level1");
-  return dataSource.length ? /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-tabbar", className), style }, /* @__PURE__ */ import_react.default.createElement(
-    import_PisellSuperTabs.default,
+  return dataSource.length ? /* @__PURE__ */ import_react.default.createElement(
+    "div",
     {
-      id: tabbarId,
-      tabItemStyle: {},
-      dataSource: level1DataSource,
-      value: String(getActiveKey(0)),
-      onChange: handleLevel1Change,
-      rowKey: "id",
-      style: {
-        flex: 1,
-        background: level1Config.superTabsBg
-      },
-      gridProps: {
-        direction: "horizontal",
-        gap: 4,
-        wrap: isExpanded1 ? "wrap" : "nowrap"
-      },
-      scrollViewProps: {
+      className: (0, import_classnames.default)("pisell-tabbar", className),
+      style,
+      ref: containerRef
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_PisellSuperTabs.default,
+      {
+        isControlled: true,
+        id: tabbarId,
+        tabItemStyle: {},
+        dataSource: level1DataSource,
+        value: level1Value,
+        onChange: handleLevel1Change,
+        rowKey: "id",
         style: {
-          padding: "4px 8px"
+          flex: 1,
+          background: level1Config.superTabsBg
         },
-        overflow: !isExpanded1 ? "x" : "hidden",
-        scrollbarStyle: "none",
-        scrollActionsConfig: {
-          type: "lrArrows",
-          show: true
-        }
-      },
-      renderItem: renderLevel1Item
-    }
-  )) : null;
+        gridProps: {
+          direction: "horizontal",
+          gap: 4,
+          wrap: isExpanded1 ? "wrap" : "nowrap"
+        },
+        scrollViewProps: {
+          style: {
+            padding: "4px 8px"
+          },
+          overflow: !isExpanded1 ? "x" : "hidden",
+          scrollbarStyle: "none",
+          scrollActionsConfig: {
+            type: "lrArrows",
+            show: true
+          }
+        },
+        renderItem: renderLevel1Item
+      }
+    )
+  ) : null;
 };
 PisellTabbar.displayName = "PisellTabbar";
-var PisellTabbar_default = PisellTabbar;
+var PisellTabbar_default = (0, import_react.forwardRef)(PisellTabbar);

package/lib/components/PisellTabbar/template/Template1/constants.js

@@ -47,7 +47,7 @@ var DEFAULT_LEVEL_CONFIG = {
   }
 };
 var LEVEL_ADD_ITEMS = {
-  level1: ["all"],
+  level1: ["search", "all"],
   level2: ["expand", "all"],
   level3: ["expand", "all"]
 };

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

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties } from 'react';
 /**
  * Tabbar 数据源项类型
  */
@@ -62,31 +62,6 @@ export interface ExpandState {
  * 层级类型
  */
 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 组件属性
  */
@@ -107,5 +82,9 @@ export interface PisellTabbarProps {
     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

@@ -18,7 +18,8 @@ export declare const defaultItems: {
         id: number;
         shop_id: number;
         parent_id: number;
-        name: string;
+        name: any;
+        text: any;
         slug: string;
         key: string;
         icon: string;

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/hooks/index.d.ts

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

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

@@ -0,0 +1,50 @@
+/**
+ * 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;
+    panelVisible: boolean;
+}
+/**
+ * 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;