@pisell/materials 6.8.9 → 6.8.11

package/lib/components/PisellSuperTabs/PisellSuperTabs.d.ts

@@ -1,12 +1,8 @@
+import React from 'react';
 import type { PisellSuperTabsProps } from './types';
 import './PisellSuperTabs.less';
-/**
- * PisellSuperTabs 组件
- * @description 通用导航框架封装的全能型 Tab 组件
- * @template T - 数据源项的类型
- */
-declare const PisellSuperTabs: {
-    <T>(props: PisellSuperTabsProps<T>): JSX.Element;
-    displayName: string;
-};
-export default PisellSuperTabs;
+interface PisellSuperTabsRef {
+    scrollItemByRowKey: (key: string) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<PisellSuperTabsProps<unknown> & React.RefAttributes<PisellSuperTabsRef>>;
+export default _default;

package/lib/components/PisellSuperTabs/PisellSuperTabs.js

@@ -37,9 +37,9 @@ var import_classnames = __toESM(require("classnames"));
 var import_hooks = require("./hooks");
 var import_utils = require("./utils");
 var import_PisellBasicGrid = __toESM(require("../PisellBasicGrid"));
-var import_PisellScrollView = require("../PisellScrollView");
+var import_PisellScrollView = __toESM(require("../PisellScrollView"));
 var import_PisellSuperTabs = require("./PisellSuperTabs.less");
-var PisellSuperTabs = (props) => {
+var PisellSuperTabs = (props, ref) => {
   const {
     // 基础属性
     className,
@@ -69,19 +69,37 @@ var PisellSuperTabs = (props) => {
     slotLeftStyle,
     slotRightStyle,
     slotTopStyle,
-    slotBottomStyle
+    slotBottomStyle,
+    __designMode
   } = props;
+  const containerRef = (0, import_react.useRef)(null);
   const { activeKey, handleTabChange } = (0, import_hooks.useTabsState)({
     value,
     defaultValue,
     onChange
   });
+  const scrollItemByRowKey = (key) => {
+    const item = document.querySelector(`.pisell-super-tabs-item-${id}-${key}`);
+    console.log(`.pisell-super-tabs-item-${id}-${key}`);
+    if (item) {
+      item.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+  (0, import_react.useImperativeHandle)(ref, () => {
+    if (__designMode) {
+      return containerRef.current;
+    }
+    return {
+      scrollItemByRowKey
+    };
+  });
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: (0, import_classnames.default)("pisell-super-tabs", className),
       style,
-      id
+      id,
+      ref: containerRef
     },
     /* @__PURE__ */ import_react.default.createElement(
       "div",
@@ -105,7 +123,7 @@ var PisellSuperTabs = (props) => {
       },
       slotLeft
     ),
-    /* @__PURE__ */ import_react.default.createElement(import_PisellScrollView.PisellScrollView, { ...scrollViewProps }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(import_PisellScrollView.default, { ...scrollViewProps }, /* @__PURE__ */ import_react.default.createElement(
       import_PisellBasicGrid.default,
       {
         ...gridProps,
@@ -147,6 +165,7 @@ var PisellSuperTabs = (props) => {
               key,
               className: (0, import_classnames.default)(
                 "pisell-super-tabs-item",
+                `pisell-super-tabs-item-${id}-${key}`,
                 {
                   "pisell-super-tabs-item--active": active
                 },
@@ -185,4 +204,4 @@ var PisellSuperTabs = (props) => {
   );
 };
 PisellSuperTabs.displayName = "PisellSuperTabs";
-var PisellSuperTabs_default = PisellSuperTabs;
+var PisellSuperTabs_default = (0, import_react.forwardRef)(PisellSuperTabs);

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

@@ -166,6 +166,7 @@ export interface PisellSuperTabsProps<T = any> {
     slotBottom?: ReactNode;
     slotBottomClassName?: string;
     slotBottomStyle?: CSSProperties;
+    __designMode?: boolean;
 }
 /**
  * 数据项基础类型

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

@@ -12,15 +12,15 @@ export declare const getExpandConfig: () => ExpandConfig;
  */
 export declare const DEFAULT_ITEMS: {
     all: {
-        id: number;
+        id: string;
         shop_id: number;
         parent_id: number;
-        name: string;
+        name: any;
         slug: string;
         icon: string;
     };
     search: {
-        id: number;
+        id: string;
         shop_id: number;
         parent_id: number;
         name: string;
@@ -30,7 +30,7 @@ export declare const DEFAULT_ITEMS: {
         customClick: boolean;
     };
     expand: {
-        id: number;
+        id: string;
         shop_id: number;
         parent_id: number;
         key: string;

package/lib/components/PisellTabbar/constants.js

@@ -58,15 +58,15 @@ var getExpandConfig = () => ({
 });
 var DEFAULT_ITEMS = {
   all: {
-    id: 0,
+    id: "0",
     shop_id: 9,
     parent_id: 0,
-    name: "All",
-    slug: "All",
+    name: (0, import_locales.getText)("pisell-tabbar-all"),
+    slug: "all",
     icon: ""
   },
   search: {
-    id: -1,
+    id: "-1",
     shop_id: 9,
     parent_id: 0,
     name: "Search",
@@ -76,7 +76,7 @@ var DEFAULT_ITEMS = {
     customClick: true
   },
   expand: {
-    id: -2,
+    id: "-2",
     shop_id: 9,
     parent_id: 0,
     key: "expand",

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

@@ -3,5 +3,7 @@
  * @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/index.js

@@ -29,8 +29,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/PisellTabbar/index.tsx
 var PisellTabbar_exports = {};
 __export(PisellTabbar_exports, {
+  PisellTabbarTemplate1: () => import_Template1.default,
   default: () => PisellTabbar_default
 });
 module.exports = __toCommonJS(PisellTabbar_exports);
 var import_PisellTabbar = __toESM(require("./PisellTabbar"));
+var import_Template1 = __toESM(require("./template/Template1"));
 var PisellTabbar_default = import_PisellTabbar.default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellTabbarTemplate1
+});

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/PisellTabbar.js

@@ -0,0 +1,437 @@
+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/PisellTabbar/template/Template1/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_PisellSuperTabs = __toESM(require("../../../PisellSuperTabs"));
+var import_PisellCards = __toESM(require("../../../PisellCards"));
+var import_iconfont = __toESM(require("../../../iconfont"));
+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: customExpandConfig,
+    maxLevel = 3
+  } = props;
+  const { setActiveKey, getActiveKey, _setActiveKey, activeKey } = (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)();
+  (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;
+      setActiveKey(0, key, ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? 0 : void 0);
+    },
+    [setActiveKey, activeKey]
+  );
+  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, activeKey]
+  );
+  const handleLevel3Change = (0, import_react.useCallback)(
+    (key) => {
+      setActiveKey(2, key);
+    },
+    [setActiveKey, activeKey]
+  );
+  const renderExpandCard = (0, import_react.useCallback)(
+    (cardProps, level, isExpanded) => {
+      var _a;
+      const config = expandConfig[isExpanded ? "active" : "inactive"];
+      const levelCfg = getLevelConfig(level);
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_PisellCards.default.TextCard,
+        {
+          ...cardProps,
+          text: config.text,
+          variant: "outlined",
+          widthMode: "auto",
+          prefixIcon: /* @__PURE__ */ import_react.default.createElement(
+            import_iconfont.default,
+            {
+              type: config.icon,
+              style: { color: "#000", fontSize: 20 }
+            }
+          ),
+          textConfig: {
+            textAlign: "center",
+            color: "#000000",
+            flex: "none"
+          },
+          style: {
+            borderRadius: "20px",
+            background: "#ffffff",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: levelCfg.cardHeight,
+            minWidth: 100
+          },
+          width: "auto",
+          active: {
+            ...cardProps.active,
+            style: {
+              ...(_a = cardProps.active) == null ? void 0 : _a.style,
+              color: "#ffffff",
+              background: "#7f56d9"
+            }
+          }
+        }
+      );
+    },
+    [expandConfig, activeKey, getLevelConfig]
+  );
+  const renderNormalCard = (0, import_react.useCallback)(
+    (cardProps, level) => {
+      var _a;
+      const { dataSource: itemData } = cardProps;
+      const levelCfg = getLevelConfig(level);
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_PisellCards.default.TextCard,
+        {
+          ...cardProps,
+          text: itemData.name,
+          variant: "outlined",
+          widthMode: "auto",
+          textConfig: {
+            textAlign: "center",
+            color: "#000",
+            maxLines: 2,
+            ellipsis: true
+          },
+          style: {
+            height: levelCfg.cardHeight,
+            borderRadius: "20px",
+            background: "#ffffff",
+            minWidth: 100
+          },
+          width: "auto",
+          active: {
+            ...cardProps.active,
+            style: {
+              ...(_a = cardProps.active) == null ? void 0 : _a.style,
+              color: "#fff",
+              background: "#7f56d9"
+            }
+          }
+        }
+      );
+    },
+    [getLevelConfig]
+  );
+  const level1DataSource = (0, import_react.useMemo)(
+    () => (0, import_utils.addDataSourceItemsByKey)(dataSource, import_constants.LEVEL_ADD_ITEMS.level1),
+    [dataSource]
+  );
+  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")
+          }
+        );
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_PisellCards.default.MultilevelCard,
+        {
+          ...itemProps,
+          card: (cardProps) => renderNormalCard(cardProps, "level1"),
+          panel: (panelProps) => {
+            var _a, _b;
+            if (((_b = (_a = panelProps == null ? void 0 : panelProps.dataSource) == null ? void 0 : _a.children) == null ? void 0 : _b.length) && maxLevel >= 2) {
+              return renderLevel2Panel(panelProps);
+            }
+            return null;
+          },
+          panelContainer: () => document.querySelector(
+            ".pisell-super-tabs-slot-bottom-sku-list-tabbar"
+          )
+        }
+      );
+    },
+    [getLevelConfig, getExpand, toggleExpand, maxLevel, activeKey]
+  );
+  const renderLevel2Panel = (0, import_react.useCallback)(
+    (panelProps) => {
+      if (maxLevel < 2) return null;
+      let _dataSource = panelProps.dataSource.children || [];
+      if (_dataSource.length) {
+        _dataSource = (0, import_utils.addDataSourceItemsByKey)(
+          _dataSource,
+          import_constants.LEVEL_ADD_ITEMS.level2
+        );
+      }
+      const level2Config = getLevelConfig("level2");
+      const isExpanded2 = getExpand("level2");
+      const skuId = `sku-list-tabbar-${panelProps.dataSource.id}`;
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_PisellSuperTabs.default,
+        {
+          id: skuId,
+          tabItemStyle: {},
+          dataSource: _dataSource,
+          value: String(getActiveKey(1)),
+          onChange: handleLevel2Change,
+          rowKey: "id",
+          style: {
+            flex: 1,
+            background: level2Config.superTabsBg
+          },
+          gridProps: {
+            direction: "horizontal",
+            gap: 4,
+            wrap: isExpanded2 ? "wrap" : "nowrap",
+            startSlot: /* @__PURE__ */ import_react.default.createElement("div", { style: { paddingLeft: level2Config.paddingLeft } }, /* @__PURE__ */ import_react.default.createElement(
+              import_iconfont.default,
+              {
+                type: "pisell2-trend-down-01",
+                style: { color: "#fff", fontSize: 24, marginRight: 8 }
+              }
+            ))
+          },
+          scrollViewProps: {
+            style: {
+              padding: "4px 8px"
+            },
+            overflow: !isExpanded2 ? "x" : "hidden",
+            scrollbarStyle: "none",
+            scrollActionsConfig: {
+              type: "lrArrows",
+              show: true
+            }
+          },
+          renderItem: (itemProps) => {
+            const { dataSource: itemData } = itemProps;
+            if (itemData == null ? void 0 : itemData.customClick) {
+              return /* @__PURE__ */ import_react.default.createElement(
+                import_PisellCards.default.MultilevelCard,
+                {
+                  ...itemProps,
+                  card: (cardProps) => renderExpandCard(cardProps, "level2", isExpanded2),
+                  onClick: () => toggleExpand("level2")
+                }
+              );
+            }
+            return /* @__PURE__ */ import_react.default.createElement(
+              import_PisellCards.default.MultilevelCard,
+              {
+                ...itemProps,
+                card: (cardProps) => renderNormalCard(cardProps, "level2"),
+                panel: (panelProps2) => {
+                  var _a, _b;
+                  if (((_b = (_a = panelProps2 == null ? void 0 : panelProps2.dataSource) == null ? void 0 : _a.children) == null ? void 0 : _b.length) && maxLevel >= 3) {
+                    return renderLevel3Panel(panelProps2);
+                  }
+                  return null;
+                },
+                panelContainer: () => document.querySelector(
+                  `.pisell-super-tabs-slot-bottom-${skuId}`
+                )
+              }
+            );
+          }
+        }
+      );
+    },
+    [
+      maxLevel,
+      activeKey,
+      getActiveKey,
+      handleLevel2Change,
+      getExpand,
+      toggleExpand,
+      getLevelConfig,
+      renderExpandCard,
+      renderNormalCard
+    ]
+  );
+  const renderLevel3Panel = (0, import_react.useCallback)(
+    (panelProps2) => {
+      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
+        );
+      }
+      const level3Config = getLevelConfig("level3");
+      const isExpanded3 = getExpand("level3");
+      const skuId = `sku-list-tabbar-${panelProps2.dataSource.id}`;
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_PisellSuperTabs.default,
+        {
+          id: skuId,
+          tabItemStyle: {},
+          dataSource: _dataSource2,
+          value: String(getActiveKey(2)),
+          onChange: handleLevel3Change,
+          rowKey: "id",
+          style: {
+            flex: 1,
+            background: level3Config.superTabsBg
+          },
+          gridProps: {
+            direction: "horizontal",
+            gap: 4,
+            wrap: isExpanded3 ? "wrap" : "nowrap",
+            startSlot: /* @__PURE__ */ import_react.default.createElement("div", { style: { paddingLeft: level3Config.paddingLeft } }, /* @__PURE__ */ import_react.default.createElement(
+              import_iconfont.default,
+              {
+                type: "pisell2-trend-down-01",
+                style: { color: "#fff", fontSize: 24, marginRight: 8 }
+              }
+            ))
+          },
+          scrollViewProps: {
+            style: {
+              padding: "4px 8px"
+            },
+            overflow: !isExpanded3 ? "x" : "hidden",
+            scrollbarStyle: "none",
+            scrollActionsConfig: {
+              type: "lrArrows",
+              show: true
+            }
+          },
+          renderItem: (itemProps) => {
+            const { dataSource: itemData } = itemProps;
+            if (itemData == null ? void 0 : itemData.customClick) {
+              return /* @__PURE__ */ import_react.default.createElement(
+                import_PisellCards.default.MultilevelCard,
+                {
+                  ...itemProps,
+                  card: (cardProps) => renderExpandCard(cardProps, "level3", isExpanded3),
+                  onClick: () => toggleExpand("level3")
+                }
+              );
+            }
+            return /* @__PURE__ */ import_react.default.createElement(
+              import_PisellCards.default.MultilevelCard,
+              {
+                ...itemProps,
+                card: (cardProps) => renderNormalCard(cardProps, "level3")
+              }
+            );
+          }
+        }
+      );
+    },
+    [
+      maxLevel,
+      activeKey,
+      getActiveKey,
+      handleLevel3Change,
+      getExpand,
+      toggleExpand,
+      getLevelConfig,
+      renderExpandCard,
+      renderNormalCard
+    ]
+  );
+  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,
+    {
+      id: "sku-list-tabbar",
+      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: {
+        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;

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')[]>;