@pisell/materials 1.8.7 → 1.8.8

package/lib/components/PisellTabbar/PisellTabbar.js

@@ -32,154 +32,537 @@ __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_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_constants = require("./constants");
+var import_hooks = require("./hooks");
 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,
-    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) => {
+var import_utils = require("./utils");
+var PisellTabbar = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const {
+      dataSource = (props == null ? void 0 : props.__designMode) ? import_mock.default : import_mock.default,
+      value,
+      onChange,
+      className,
+      style,
+      levelConfig: customLevelConfig,
+      expandConfig: customExpandConfig,
+      maxLevel = 3,
+      onSearch
+    } = props;
+    const containerRef = (0, import_react.useRef)(null);
+    const searchRef = (0, import_react.useRef)(null);
+    console.log("searchRef", searchRef.current);
+    const {
+      activeKey,
+      setActiveKey,
+      getActiveKey,
+      _setActiveKey,
+      setCacheActiveKey,
+      resetActiveKey,
+      getCacheActiveKey
+    } = (0, import_hooks.useActiveKey)({
+      initialActiveKey: value || (0, import_utils.getDefaultActiveKey)(dataSource, "id"),
+      onChange
+    });
+    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 { expand, toggleExpand, getExpand } = (0, import_hooks.useExpand)();
+    const expandConfigData = customExpandConfig || (0, import_constants.getExpandConfig)();
+    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 {
-        ...import_constants.DEFAULT_LEVEL_CONFIG[level],
-        ...customLevelConfig == null ? void 0 : customLevelConfig[level]
+        closeSearchMode: (_a = searchRef == null ? void 0 : searchRef.current) == null ? void 0 : _a.close
       };
-    },
-    [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
-        );
+    });
+    (0, import_react.useEffect)(() => {
+      if (value) {
+        _setActiveKey(value);
       }
-      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
+    }, [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 renderLevelNCard = (0, import_react.useCallback)(
+      (cardProps, level) => {
+        var _a;
+        const { dataSource: itemData } = cardProps;
+        const levelConfig = getLevelConfig(level);
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_PisellCards.default.TextCard,
+          {
+            text: itemData.text,
+            ...cardProps,
+            variant: "outlined",
+            widthMode: "fixed",
+            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"
+              }
+            }
+          }
+        );
+      },
+      [activeKey, getLevelConfig, getExpand, expandConfigData]
+    );
+    const renderLevelNNormalCard = (0, import_react.useCallback)(
+      (cardProps, level) => {
+        var _a;
+        const { dataSource: itemData } = cardProps;
+        const levelConfig = getLevelConfig(level);
+        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"
+              }
+            }
+          }
+        );
+      },
+      [activeKey, getLevelConfig]
+    );
+    const level1DataSource = (0, import_react.useMemo)(
+      () => (0, import_utils.addDataSourceItemsByKey)(dataSource, import_constants.LEVEL_ADD_ITEMS.level1),
+      [dataSource]
+    );
+    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
+          );
         }
-      );
-    },
-    [
-      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
+        const level3Config = getLevelConfig("level3");
+        const level3Expand = getExpand("level3");
+        const renderLevel3Item = (itemProps) => {
+          const { dataSource: itemData } = itemProps;
+          if (itemData == null ? void 0 : itemData.customClick) {
+            if (itemProps.dataSource.key === "expand") {
+              return renderExpand(itemProps, "level3");
+            }
+          }
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_PisellCards.default.MultilevelCard,
+            {
+              ...itemProps,
+              card: (cardProps) => renderLevelNNormalCard(cardProps, "level3"),
+              panelContainer: () => document.querySelector(
+                `.pisell-super-tabs-slot-bottom-sku-list-tabbar-${panelProps2.dataSource.id}`
+              )
+            }
+          );
+        };
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_PisellSuperTabs.default,
+          {
+            id: `sku-list-tabbar-${panelProps2.dataSource.id}`,
+            tabItemStyle: {},
+            isControlled: true,
+            dataSource: _dataSource2,
+            value: level3Value,
+            onChange: handleLevel3Change,
+            rowKey: "id",
+            style: {
+              flex: 1,
+              background: level3Config.superTabsBg
+            },
+            gridProps: {
+              direction: "horizontal",
+              gap: 4,
+              wrap: level3Expand ? "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: !level3Expand ? "x" : "hidden",
+              scrollbarStyle: "none",
+              scrollActionsConfig: {
+                type: "lrArrows",
+                show: true
+              }
+            },
+            renderItem: renderLevel3Item
+          }
         );
-      }
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_components.TabbarLevel,
+      },
+      [
+        activeKey,
+        maxLevel,
+        getActiveKey,
+        handleLevel3Change,
+        getExpand,
+        toggleExpand,
+        getLevelConfig,
+        renderLevelNCard,
+        renderLevelNNormalCard
+      ]
+    );
+    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
+          );
+        }
+        const level2Config = getLevelConfig("level2");
+        const level2Expand = getExpand("level2");
+        const renderLevel2Item = (itemProps) => {
+          const { dataSource: itemData } = itemProps;
+          if (itemData == null ? void 0 : itemData.customClick) {
+            if (itemProps.dataSource.key === "expand") {
+              return renderExpand(itemProps, "level2");
+            }
+          }
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_PisellCards.default.MultilevelCard,
+            {
+              ...itemProps,
+              card: (cardProps) => renderLevelNNormalCard(cardProps, "level2"),
+              panel: (innerPanelProps) => {
+                var _a, _b;
+                if ((_b = (_a = innerPanelProps == null ? void 0 : innerPanelProps.dataSource) == null ? void 0 : _a.children) == null ? void 0 : _b.length) {
+                  return renderLevel3(innerPanelProps);
+                }
+                return null;
+              },
+              panelContainer: () => document.querySelector(
+                `.pisell-super-tabs-slot-bottom-sku-list-tabbar-${panelProps.dataSource.id}`
+              )
+            }
+          );
+        };
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_PisellSuperTabs.default,
+          {
+            id: `sku-list-tabbar-${panelProps.dataSource.id}`,
+            tabItemStyle: {},
+            dataSource: _dataSource,
+            value: level2Value,
+            isControlled: true,
+            onChange: handleLevel2Change,
+            rowKey: "id",
+            style: {
+              flex: 1,
+              background: level2Config.superTabsBg
+            },
+            gridProps: {
+              direction: "horizontal",
+              gap: 4,
+              wrap: level2Expand ? "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: !level2Expand ? "x" : "hidden",
+              scrollbarStyle: "none",
+              scrollActionsConfig: {
+                type: "lrArrows",
+                show: true
+              }
+            },
+            renderItem: renderLevel2Item
+          }
+        );
+      },
+      [
+        activeKey,
+        maxLevel,
+        getActiveKey,
+        handleLevel2Change,
+        getExpand,
+        toggleExpand,
+        getLevelConfig,
+        renderLevelNCard,
+        renderLevelNNormalCard,
+        renderLevel3
+      ]
+    );
+    const renderExpand = (0, import_react.useCallback)(
+      (itemProps, level) => {
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_PisellCards.default.MultilevelCard,
+          {
+            ...itemProps,
+            card: (cardProps) => {
+              let _cardProps = {
+                ...cardProps
+              };
+              const isExpand = getExpand(level);
+              _cardProps.text = expandConfigData[isExpand ? "active" : "inactive"].text;
+              _cardProps.prefixIcon = /* @__PURE__ */ import_react.default.createElement(
+                import_iconfont.default,
+                {
+                  type: expandConfigData[isExpand ? "active" : "inactive"].icon,
+                  style: { color: "#fff", fontSize: 20 }
+                }
+              );
+              return renderLevelNCard(_cardProps, level);
+            },
+            onClick: () => {
+              toggleExpand(level);
+            }
+          }
+        );
+      },
+      [expand]
+    );
+    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("#sku-list-tabbar") || 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: "#fff", fontSize: 20 }
+                        }
+                      ),
+                      /* @__PURE__ */ import_react.default.createElement(
+                        import_iconfont.default,
+                        {
+                          type: "pisell2-scan",
+                          style: { color: "#fff", fontSize: 20 }
+                        }
+                      ),
+                      /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_locales.getText)("table-filter-find"))
+                    )
+                  };
+                  return renderLevelNCard(_cardProps, level);
+                }
+              }
+            )
+          }
+        );
+      },
+      [activeKey]
+    );
+    const renderLevel1Item = (0, import_react.useCallback)(
+      (itemProps) => {
+        const { dataSource: itemData } = itemProps;
+        if (itemData == null ? void 0 : itemData.customClick) {
+          if (itemProps.dataSource.key === "search") {
+            return renderSearch(itemProps, "level1");
+          }
+          if (itemProps.dataSource.key === "expand") {
+            return renderExpand(itemProps, "level1");
+          }
+          return null;
+        }
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_PisellCards.default.MultilevelCard,
+          {
+            ...itemProps,
+            card: (cardProps) => renderLevelNNormalCard(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) {
+                return renderLevel2(panelProps);
+              }
+              return null;
+            },
+            panelContainer: () => document.querySelector(
+              `.pisell-super-tabs-slot-bottom-sku-list-tabbar`
+            )
+          }
+        );
+      },
+      [
+        activeKey,
+        getLevelConfig,
+        getExpand,
+        toggleExpand,
+        renderLevelNCard,
+        renderLevelNNormalCard,
+        renderLevel2
+      ]
+    );
+    const level1Config = getLevelConfig("level1");
+    const level1Expand = getExpand("level1");
+    return dataSource.length ? /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)("pisell-tabbar", className),
+        style,
+        ref: containerRef
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_PisellSuperTabs.default,
         {
-          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
+          isControlled: true,
+          id: "sku-list-tabbar",
+          tabItemStyle: {},
+          dataSource: level1DataSource,
+          value: level1Value,
+          onChange: handleLevel1Change,
+          rowKey: "id",
+          style: {
+            flex: 1,
+            background: level1Config.superTabsBg
+          },
+          gridProps: {
+            direction: "horizontal",
+            gap: 4,
+            wrap: level1Expand ? "wrap" : "nowrap"
+          },
+          scrollViewProps: {
+            style: {
+              padding: "4px 8px"
+            },
+            overflow: !level1Expand ? "x" : "hidden",
+            scrollbarStyle: "none",
+            scrollActionsConfig: {
+              type: "lrArrows",
+              show: true
+            }
+          },
+          renderItem: renderLevel1Item
         }
-      );
-    },
-    [
-      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;
-};
+      )
+    ) : null;
+  }
+);
 PisellTabbar.displayName = "PisellTabbar";
 var PisellTabbar_default = PisellTabbar;

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

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