@pisell/materials 6.7.4 → 6.8.2

package/lib/components/PisellTabbar3/PisellTabbar.js

@@ -0,0 +1,639 @@
+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/PisellTabbar3/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_locales = require("../../locales");
+var import_mock = __toESM(require("./mock"));
+var import_PisellTabbar = require("./PisellTabbar.less");
+var DEFAULT_LEVEL_CONFIG = {
+  level1: {
+    superTabsBg: "#3b2865",
+    cardWidth: 100,
+    cardHeight: 60,
+    paddingLeft: 0
+  },
+  level2: {
+    superTabsBg: "#7F56DA",
+    cardWidth: 120,
+    cardHeight: 56,
+    paddingLeft: 20
+  },
+  level3: {
+    superTabsBg: "#344054",
+    cardWidth: 120,
+    cardHeight: 56,
+    paddingLeft: 40
+  }
+};
+var getExpandConfig = () => ({
+  active: {
+    icon: "pisell2-minimize-01",
+    text: (0, import_locales.getText)("pisell-tabbar-minimize")
+  },
+  inactive: {
+    icon: "pisell2-expand-01",
+    text: (0, import_locales.getText)("pisell-tabbar-expand")
+  }
+});
+var DEFAULT_ITEMS = {
+  all: {
+    id: 0,
+    shop_id: 9,
+    parent_id: 0,
+    name: "All",
+    slug: "All",
+    icon: ""
+  },
+  search: {
+    id: -1,
+    shop_id: 9,
+    parent_id: 0,
+    name: "Search",
+    slug: "Search",
+    key: "search",
+    icon: "",
+    customClick: true
+  },
+  expand: {
+    id: -2,
+    shop_id: 9,
+    parent_id: 0,
+    key: "expand",
+    icon: "pisell2-expand-01",
+    name: "Expand",
+    slug: "expand",
+    customClick: true
+  }
+};
+var LEVEL_ADD_ITEMS = {
+  level1: ["expand"],
+  level2: ["expand", "all"],
+  level3: ["expand", "all"]
+};
+var addDataSourceItemsByKey = (dataSource, keys) => {
+  return [...keys.map((key) => DEFAULT_ITEMS[key]), ...dataSource];
+};
+var getDefaultActiveKey = (dataSource, rowKey) => {
+  var _a;
+  const _activeKey = [];
+  if (dataSource.length) {
+    _activeKey.push(
+      dataSource[0][rowKey]
+    );
+    if ((_a = dataSource[0].children) == null ? void 0 : _a.length) {
+      _activeKey.push(0);
+    }
+  }
+  return _activeKey;
+};
+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 [activeKey, _setActiveKey] = (0, import_react.useState)(
+    value || getDefaultActiveKey(dataSource, "id")
+  );
+  const [expand, setExpand] = (0, import_react.useState)({
+    level1: false,
+    level2: false,
+    level3: false
+  });
+  (0, import_react.useEffect)(() => {
+    if (value && JSON.stringify(value) !== JSON.stringify(activeKey)) {
+      _setActiveKey(value);
+    }
+  }, [JSON.stringify(value)]);
+  const expandConfig = customExpandConfig || getExpandConfig();
+  const level1Config = {
+    ...DEFAULT_LEVEL_CONFIG.level1,
+    ...customLevelConfig == null ? void 0 : customLevelConfig.level1
+  };
+  const level2Config = {
+    ...DEFAULT_LEVEL_CONFIG.level2,
+    ...customLevelConfig == null ? void 0 : customLevelConfig.level2
+  };
+  const level3Config = {
+    ...DEFAULT_LEVEL_CONFIG.level3,
+    ...customLevelConfig == null ? void 0 : customLevelConfig.level3
+  };
+  const setActiveKey = (0, import_react.useCallback)(
+    (level, key, cKey) => {
+      const newActiveKey = [...activeKey];
+      newActiveKey.splice(level + 1);
+      newActiveKey[level] = String(key);
+      if (cKey !== void 0) {
+        newActiveKey[level + 1] = String(cKey);
+      }
+      _setActiveKey(newActiveKey);
+      onChange == null ? void 0 : onChange(newActiveKey);
+    },
+    [activeKey, onChange]
+  );
+  const level1DataSource = (0, import_react.useMemo)(
+    () => addDataSourceItemsByKey(dataSource, LEVEL_ADD_ITEMS.level1),
+    [dataSource]
+  );
+  const renderLevel1ExpandCard = (cardProps) => {
+    var _a;
+    const isExpanded = expand.level1;
+    const _text = expandConfig[isExpanded ? "active" : "inactive"].text;
+    const _icon = expandConfig[isExpanded ? "active" : "inactive"].icon;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCards.default.GraphicTextCard,
+      {
+        ...cardProps,
+        text: _text,
+        icon: _icon,
+        variant: "vertical-image",
+        widthMode: "fixed",
+        width: level1Config.cardWidth,
+        graphicConfig: {
+          width: "100%",
+          height: level1Config.cardHeight,
+          background: "#fff",
+          iconSize: 30
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "#fff",
+          borderRadius: 8,
+          border: `4px solid ${level1Config.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: level1Config.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: `${level1Config.cardHeight}px`,
+          dataSource: {
+            alt: itemData.icon ? void 0 : itemData.name,
+            text: itemData.name === "All" ? "All" : void 0
+          }
+        }
+      }
+    );
+  };
+  const renderLevel1Item = (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) => renderLevel1ExpandCard(cardProps),
+          onClick: () => {
+            setExpand((prev) => ({ ...prev, level1: !prev.level1 }));
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCards.default.MultilevelCard,
+      {
+        ...itemProps,
+        card: (cardProps) => renderLevel1NormalCard(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) || maxLevel < 2) {
+            return null;
+          }
+          const level2Data = addDataSourceItemsByKey(
+            panelProps.dataSource.children,
+            LEVEL_ADD_ITEMS.level2
+          );
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_PisellSuperTabs.default,
+            {
+              id: `sku-list-tabbar-${panelProps.dataSource.id}`,
+              tabItemStyle: {},
+              dataSource: level2Data,
+              value: String(activeKey[1]),
+              onChange: (key, item) => {
+                var _a2;
+                setActiveKey(1, key, ((_a2 = item == null ? void 0 : item.children) == null ? void 0 : _a2.length) ? 0 : void 0);
+              },
+              rowKey: "id",
+              style: {
+                flex: 1,
+                background: level2Config.superTabsBg
+              },
+              gridProps: {
+                direction: "horizontal",
+                gap: 4,
+                wrap: expand.level2 ? "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: !expand.level2 ? "x" : "hidden",
+                scrollbarStyle: "none",
+                scrollActionsConfig: {
+                  type: "lrArrows",
+                  show: true
+                }
+              },
+              renderItem: (level2ItemProps) => {
+                const level2ItemData = level2ItemProps.dataSource;
+                if (level2ItemData == null ? void 0 : level2ItemData.customClick) {
+                  const isExpanded = expand.level2;
+                  const _text = expandConfig[isExpanded ? "active" : "inactive"].text;
+                  const _icon = expandConfig[isExpanded ? "active" : "inactive"].icon;
+                  return /* @__PURE__ */ import_react.default.createElement(
+                    import_PisellCards.default.MultilevelCard,
+                    {
+                      ...level2ItemProps,
+                      card: (cardProps) => {
+                        var _a2;
+                        return /* @__PURE__ */ import_react.default.createElement(
+                          import_PisellCards.default.TextCard,
+                          {
+                            ...cardProps,
+                            text: _text,
+                            variant: "outlined",
+                            widthMode: "fixed",
+                            prefixIcon: /* @__PURE__ */ import_react.default.createElement(
+                              import_iconfont.default,
+                              {
+                                type: expandConfig[isExpanded ? "active" : "inactive"].icon,
+                                style: { color: "#fff", fontSize: 20 }
+                              }
+                            ),
+                            textConfig: {
+                              textAlign: "center",
+                              color: "#FFF",
+                              flex: "none"
+                            },
+                            style: {
+                              borderRadius: "8px",
+                              background: "rgba(0, 0, 0, 0.50)",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              height: level2Config.cardHeight
+                            },
+                            width: level2Config.cardWidth,
+                            active: {
+                              ...cardProps.active,
+                              style: {
+                                ...(_a2 = cardProps.active) == null ? void 0 : _a2.style,
+                                color: "#000000",
+                                background: "#ffffff"
+                              }
+                            }
+                          }
+                        );
+                      },
+                      onClick: () => {
+                        setExpand((prev) => ({
+                          ...prev,
+                          level2: !prev.level2
+                        }));
+                      }
+                    }
+                  );
+                }
+                return /* @__PURE__ */ import_react.default.createElement(
+                  import_PisellCards.default.MultilevelCard,
+                  {
+                    ...level2ItemProps,
+                    card: (cardProps) => {
+                      var _a2;
+                      return /* @__PURE__ */ import_react.default.createElement(
+                        import_PisellCards.default.TextCard,
+                        {
+                          ...cardProps,
+                          text: level2ItemData.name,
+                          variant: "outlined",
+                          widthMode: "fixed",
+                          textConfig: {
+                            textAlign: "center",
+                            color: "#FFF",
+                            maxLines: 2,
+                            ellipsis: true
+                          },
+                          style: {
+                            height: level2Config.cardHeight,
+                            borderRadius: "8px",
+                            background: "rgba(0, 0, 0, 0.50)"
+                          },
+                          width: level2Config.cardWidth,
+                          active: {
+                            ...cardProps.active,
+                            style: {
+                              ...(_a2 = cardProps.active) == null ? void 0 : _a2.style,
+                              color: "#000000",
+                              background: "#ffffff"
+                            }
+                          }
+                        }
+                      );
+                    },
+                    panel: (level2PanelProps) => {
+                      var _a2, _b2;
+                      if (!((_b2 = (_a2 = level2PanelProps == null ? void 0 : level2PanelProps.dataSource) == null ? void 0 : _a2.children) == null ? void 0 : _b2.length) || maxLevel < 3) {
+                        return null;
+                      }
+                      const level3Data = addDataSourceItemsByKey(
+                        level2PanelProps.dataSource.children,
+                        LEVEL_ADD_ITEMS.level3
+                      );
+                      return /* @__PURE__ */ import_react.default.createElement(
+                        import_PisellSuperTabs.default,
+                        {
+                          id: `sku-list-tabbar-${level2PanelProps.dataSource.id}`,
+                          tabItemStyle: {},
+                          dataSource: level3Data,
+                          value: String(activeKey[2]),
+                          onChange: (key) => {
+                            setActiveKey(2, key);
+                          },
+                          rowKey: "id",
+                          style: {
+                            flex: 1,
+                            background: level3Config.superTabsBg
+                          },
+                          gridProps: {
+                            direction: "horizontal",
+                            gap: 4,
+                            wrap: expand.level3 ? "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: !expand.level3 ? "x" : "hidden",
+                            scrollbarStyle: "none",
+                            scrollActionsConfig: {
+                              type: "lrArrows",
+                              show: true
+                            }
+                          },
+                          renderItem: (level3ItemProps) => {
+                            const level3ItemData = level3ItemProps.dataSource;
+                            if (level3ItemData == null ? void 0 : level3ItemData.customClick) {
+                              const isExpanded = expand.level3;
+                              const _text = expandConfig[isExpanded ? "active" : "inactive"].text;
+                              const _icon = expandConfig[isExpanded ? "active" : "inactive"].icon;
+                              return /* @__PURE__ */ import_react.default.createElement(
+                                import_PisellCards.default.MultilevelCard,
+                                {
+                                  ...level3ItemProps,
+                                  card: (cardProps) => {
+                                    var _a3;
+                                    return /* @__PURE__ */ import_react.default.createElement(
+                                      import_PisellCards.default.TextCard,
+                                      {
+                                        ...cardProps,
+                                        text: _text,
+                                        variant: "outlined",
+                                        widthMode: "fixed",
+                                        prefixIcon: /* @__PURE__ */ import_react.default.createElement(
+                                          import_iconfont.default,
+                                          {
+                                            type: expandConfig[isExpanded ? "active" : "inactive"].icon,
+                                            style: {
+                                              color: "#fff",
+                                              fontSize: 20
+                                            }
+                                          }
+                                        ),
+                                        textConfig: {
+                                          textAlign: "center",
+                                          color: "#FFF",
+                                          flex: "none"
+                                        },
+                                        style: {
+                                          borderRadius: "8px",
+                                          background: "rgba(0, 0, 0, 0.50)",
+                                          display: "flex",
+                                          alignItems: "center",
+                                          justifyContent: "center",
+                                          height: level3Config.cardHeight
+                                        },
+                                        width: level3Config.cardWidth,
+                                        active: {
+                                          ...cardProps.active,
+                                          style: {
+                                            ...(_a3 = cardProps.active) == null ? void 0 : _a3.style,
+                                            color: "#000000",
+                                            background: "#ffffff"
+                                          }
+                                        }
+                                      }
+                                    );
+                                  },
+                                  onClick: () => {
+                                    setExpand((prev) => ({
+                                      ...prev,
+                                      level3: !prev.level3
+                                    }));
+                                  }
+                                }
+                              );
+                            }
+                            return /* @__PURE__ */ import_react.default.createElement(
+                              import_PisellCards.default.MultilevelCard,
+                              {
+                                ...level3ItemProps,
+                                card: (cardProps) => {
+                                  var _a3;
+                                  return /* @__PURE__ */ import_react.default.createElement(
+                                    import_PisellCards.default.TextCard,
+                                    {
+                                      ...cardProps,
+                                      text: level3ItemData.name,
+                                      variant: "outlined",
+                                      widthMode: "fixed",
+                                      textConfig: {
+                                        textAlign: "center",
+                                        color: "#FFF",
+                                        maxLines: 2,
+                                        ellipsis: true
+                                      },
+                                      style: {
+                                        height: level3Config.cardHeight,
+                                        borderRadius: "8px",
+                                        background: "rgba(0, 0, 0, 0.50)"
+                                      },
+                                      width: level3Config.cardWidth,
+                                      active: {
+                                        ...cardProps.active,
+                                        style: {
+                                          ...(_a3 = cardProps.active) == null ? void 0 : _a3.style,
+                                          color: "#000000",
+                                          background: "#ffffff"
+                                        }
+                                      }
+                                    }
+                                  );
+                                },
+                                panelContainer: () => document.querySelector(
+                                  `.pisell-super-tabs-slot-bottom-sku-list-tabbar-${level2PanelProps.dataSource.id}`
+                                )
+                              }
+                            );
+                          }
+                        }
+                      );
+                    },
+                    panelContainer: () => document.querySelector(
+                      `.pisell-super-tabs-slot-bottom-sku-list-tabbar-${panelProps.dataSource.id}`
+                    )
+                  }
+                );
+              }
+            }
+          );
+        },
+        panelContainer: () => document.querySelector(
+          ".pisell-super-tabs-slot-bottom-sku-list-tabbar"
+        )
+      }
+    );
+  };
+  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(activeKey[0]),
+      onChange: (key, item) => {
+        var _a;
+        setActiveKey(0, key, ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? 0 : void 0);
+      },
+      rowKey: "id",
+      style: {
+        flex: 1,
+        background: level1Config.superTabsBg
+      },
+      gridProps: {
+        direction: "horizontal",
+        gap: 4,
+        wrap: expand.level1 ? "wrap" : "nowrap"
+      },
+      scrollViewProps: {
+        style: {
+          padding: "4px 8px"
+        },
+        overflow: !expand.level1 ? "x" : "hidden",
+        scrollbarStyle: "none",
+        scrollActionsConfig: {
+          type: "lrArrows",
+          show: true
+        }
+      },
+      renderItem: renderLevel1Item
+    }
+  )) : null;
+};
+PisellTabbar.displayName = "PisellTabbar";
+var PisellTabbar_default = PisellTabbar;

package/lib/components/PisellTabbar3/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/PisellTabbar3/index.d.ts

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