@pisell/materials 1.0.983 → 1.0.988

package/lib/components/PisellTabbar/PisellTabbar.js

@@ -0,0 +1,186 @@
+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/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_PisellTabbar2 = __toESM(require("../PisellTabbar2"));
+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 } = (0, import_hooks.useActiveKey)({
+    initialActiveKey: value || (0, import_utils.getDefaultActiveKey)(dataSource, "id"),
+    onChange
+  });
+  const { expand, toggleExpand, getExpand } = (0, import_hooks.useExpand)();
+  (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]
+  );
+  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;
+      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
+        }
+      );
+    },
+    [
+      maxLevel,
+      getActiveKey,
+      handleLevel2Change,
+      getExpand,
+      toggleExpand,
+      getLevelConfig,
+      expandConfig
+    ]
+  );
+  const renderLevel3 = (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
+        );
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.TabbarLevel,
+        {
+          skuId: `sku-list-tabbar-${panelProps2.dataSource.id}`,
+          dataSource: _dataSource2,
+          activePanelKey: getActiveKey(2),
+          level: "level3",
+          setActivePanelKey: handleLevel3Change,
+          expand: getExpand("level3"),
+          handleExpand: () => toggleExpand("level3"),
+          levelConfig: getLevelConfig("level3"),
+          expandConfig
+        }
+      );
+    },
+    [
+      maxLevel,
+      getActiveKey,
+      handleLevel3Change,
+      getExpand,
+      toggleExpand,
+      getLevelConfig,
+      expandConfig
+    ]
+  );
+  return dataSource.length ? /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-tabbar", 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
+    }
+  )) : null;
+};
+PisellTabbar.displayName = "PisellTabbar";
+var PisellTabbar_default = import_PisellTabbar2.default;

package/lib/components/PisellTabbar/PisellTabbar.less

@@ -0,0 +1,26 @@
+/**
+ * PisellTabbar 组件样式
+ */
+.pisell-tabbar {
+  width: 100%;
+  position: relative;
+
+  /* 层级容器样式 */
+  &-level {
+    &-wrapper {
+      position: relative;
+    }
+  }
+
+  /* 响应式适配 */
+  @media (max-width: 768px) {
+    .pisell-tabbar-level {
+      font-size: 14px;
+    }
+  }
+
+  /* 过渡动画 */
+  .pisell-super-tabs {
+    transition: all 0.3s ease;
+  }
+}

package/lib/components/PisellTabbar/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/PisellTabbar/components/TabbarLevel.js

@@ -0,0 +1,301 @@
+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/components/TabbarLevel.tsx
+var TabbarLevel_exports = {};
+__export(TabbarLevel_exports, {
+  default: () => TabbarLevel_default
+});
+module.exports = __toCommonJS(TabbarLevel_exports);
+var import_react = __toESM(require("react"));
+var import_PisellSuperTabs = __toESM(require("../../PisellSuperTabs"));
+var import_PisellCards = __toESM(require("../../PisellCards"));
+var import_iconfont = __toESM(require("../../iconfont"));
+var import_constants = require("../constants");
+var TabbarLevel = (0, import_react.memo)((props) => {
+  const {
+    skuId,
+    dataSource,
+    activePanelKey,
+    level,
+    setActivePanelKey,
+    expand,
+    handleExpand,
+    renderChildren,
+    levelConfig: customLevelConfig,
+    expandConfig: customExpandConfig
+  } = props;
+  const levelConfig = {
+    ...import_constants.DEFAULT_LEVEL_CONFIG[level],
+    ...customLevelConfig
+  };
+  const expandConfig = customExpandConfig || (0, import_constants.getExpandConfig)();
+  const renderLevel1Card = (cardProps) => {
+    var _a;
+    const { dataSource: itemData } = cardProps;
+    let _text = itemData.name;
+    let _icon = itemData.icon;
+    if (itemData.key === "expand") {
+      _text = expandConfig[expand ? "active" : "inactive"].text;
+      _icon = expandConfig[expand ? "active" : "inactive"].icon;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCards.default.GraphicTextCard,
+      {
+        ...cardProps,
+        text: _text,
+        icon: _icon,
+        variant: "vertical-image",
+        widthMode: "fixed",
+        width: levelConfig.cardWidth,
+        graphicConfig: {
+          width: "100%",
+          height: levelConfig.cardHeight,
+          background: "#fff",
+          iconSize: 30
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "#fff",
+          borderRadius: 8,
+          border: `4px solid ${levelConfig.superTabsBg}`
+        },
+        textConfig: {
+          textAlign: "center",
+          color: "#fff",
+          fontWeight: 400
+        },
+        active: {
+          value: true,
+          style: {
+            ...(_a = cardProps.active) == null ? void 0 : _a.style,
+            color: "#5D3F9F"
+          }
+        }
+      }
+    );
+  };
+  const renderLevel1NormalCard = (cardProps) => {
+    var _a;
+    const { dataSource: itemData } = cardProps;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCards.default.GraphicTextCard,
+      {
+        ...cardProps,
+        text: itemData.name,
+        image: itemData.icon,
+        variant: "card",
+        widthMode: "fixed",
+        width: levelConfig.cardWidth,
+        textConfig: {
+          color: "#FFF"
+        },
+        active: {
+          ...cardProps.active,
+          style: {
+            ...(_a = cardProps.active) == null ? void 0 : _a.style,
+            color: "#000000"
+          }
+        },
+        style: {
+          backgroundClip: "padding-box"
+        },
+        graphicConfig: {
+          width: "100%",
+          height: `${levelConfig.cardHeight}px`,
+          dataSource: {
+            alt: itemData.icon ? void 0 : itemData.name,
+            text: itemData.name === "All" ? "All" : void 0
+          }
+        }
+      }
+    );
+  };
+  const renderLevelNCard = (cardProps) => {
+    var _a;
+    const { dataSource: itemData } = cardProps;
+    let _text = itemData.name;
+    let _icon = itemData.icon;
+    if (itemData.key === "expand") {
+      _text = expandConfig[expand ? "active" : "inactive"].text;
+      _icon = expandConfig[expand ? "active" : "inactive"].icon;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCards.default.TextCard,
+      {
+        ...cardProps,
+        text: _text,
+        variant: "outlined",
+        widthMode: "fixed",
+        prefixIcon: itemData.key === "expand" ? /* @__PURE__ */ import_react.default.createElement(
+          import_iconfont.default,
+          {
+            type: expandConfig[expand ? "active" : "inactive"].icon,
+            style: { color: "#fff", fontSize: 20 }
+          }
+        ) : void 0,
+        textConfig: {
+          textAlign: "center",
+          color: "#FFF",
+          flex: "none"
+        },
+        style: {
+          borderRadius: "8px",
+          background: "rgba(0, 0, 0, 0.50)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: levelConfig.cardHeight
+        },
+        width: levelConfig.cardWidth,
+        active: {
+          ...cardProps.active,
+          style: {
+            ...(_a = cardProps.active) == null ? void 0 : _a.style,
+            color: "#000000",
+            background: "#ffffff"
+          }
+        }
+      }
+    );
+  };
+  const renderLevelNNormalCard = (cardProps) => {
+    var _a;
+    const { dataSource: itemData } = cardProps;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCards.default.TextCard,
+      {
+        ...cardProps,
+        text: itemData.name,
+        variant: "outlined",
+        widthMode: "fixed",
+        textConfig: {
+          textAlign: "center",
+          color: "#FFF",
+          maxLines: 2,
+          ellipsis: true
+        },
+        style: {
+          height: levelConfig.cardHeight,
+          borderRadius: "8px",
+          background: "rgba(0, 0, 0, 0.50)"
+        },
+        width: levelConfig.cardWidth,
+        active: {
+          ...cardProps.active,
+          style: {
+            ...(_a = cardProps.active) == null ? void 0 : _a.style,
+            color: "#000000",
+            background: "#ffffff"
+          }
+        }
+      }
+    );
+  };
+  const 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) => {
+            if (level === "level1") {
+              return renderLevel1Card(cardProps);
+            }
+            return renderLevelNCard(cardProps);
+          },
+          onClick: handleExpand
+        }
+      );
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCards.default.MultilevelCard,
+      {
+        ...itemProps,
+        card: (cardProps) => {
+          if (level === "level1") {
+            return renderLevel1NormalCard(cardProps);
+          }
+          return renderLevelNNormalCard(cardProps);
+        },
+        panel: (panelProps) => {
+          var _a, _b;
+          if ((_b = (_a = panelProps == null ? void 0 : panelProps.dataSource) == null ? void 0 : _a.children) == null ? void 0 : _b.length) {
+            return renderChildren == null ? void 0 : renderChildren(panelProps);
+          }
+          return null;
+        },
+        panelContainer: () => document.querySelector(`.pisell-super-tabs-slot-bottom-${skuId}`)
+      }
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_PisellSuperTabs.default,
+    {
+      id: skuId,
+      tabItemStyle: {},
+      dataSource,
+      value: activePanelKey,
+      onChange: setActivePanelKey,
+      rowKey: "id",
+      style: {
+        flex: 1,
+        background: levelConfig.superTabsBg
+      },
+      gridProps: {
+        direction: "horizontal",
+        gap: 4,
+        wrap: expand ? "wrap" : "nowrap",
+        startSlot: level === "level1" ? null : /* @__PURE__ */ import_react.default.createElement("div", { style: { paddingLeft: levelConfig.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: !expand ? "x" : "hidden",
+        scrollbarStyle: "none",
+        scrollActionsConfig: {
+          type: "lrArrows",
+          show: true
+        }
+      },
+      renderItem
+    }
+  );
+});
+TabbarLevel.displayName = "TabbarLevel";
+var TabbarLevel_default = TabbarLevel;

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

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

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

@@ -0,0 +1,39 @@
+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/components/index.tsx
+var components_exports = {};
+__export(components_exports, {
+  TabbarLevel: () => import_TabbarLevel.default
+});
+module.exports = __toCommonJS(components_exports);
+var import_TabbarLevel = __toESM(require("./TabbarLevel"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabbarLevel
+});

package/lib/components/PisellTabbar/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')[]>;