@pisell/materials 6.11.207 → 6.11.208

package/es/components/PisellTabbar/PisellTabbar.js

@@ -44,6 +44,16 @@ var buildTabbarScrollViewProps = function buildTabbarScrollViewProps(isExpanded)
   };
 };
 
+/**
+ * 生成 Tabbar 实例 ID，隔离多实例下的面板挂载容器。
+ *
+ * @example
+ * const tabbarId = createTabbarId();
+ */
+function createTabbarId() {
+  return "tabbar-".concat(Date.now(), "-").concat(Math.random().toString(36).slice(2, 8));
+}
+
 /**
  * PisellTabbar - 多层级 Tabbar 组件
  *
@@ -72,6 +82,7 @@ var PisellTabbar = /*#__PURE__*/forwardRef(function (props, ref) {
     maxLevel = _props$maxLevel === void 0 ? 3 : _props$maxLevel,
     _onSearch = props.onSearch;
   var containerRef = useRef(null);
+  var tabbarIdRef = useRef(createTabbarId());
   var searchRef = useRef(null);
 
   // 激活的 key 管理
@@ -290,12 +301,13 @@ var PisellTabbar = /*#__PURE__*/forwardRef(function (props, ref) {
           return renderLevelNNormalCard(cardProps, 'level3');
         },
         panelContainer: function panelContainer() {
-          return document.querySelector(".pisell-super-tabs-slot-bottom-sku-list-tabbar-".concat(panelProps2.dataSource.id));
+          var selector = ".pisell-super-tabs-slot-bottom-".concat(tabbarIdRef.current, "-").concat(panelProps2.dataSource.id);
+          return document.querySelector(selector);
         }
       }));
     };
     return /*#__PURE__*/React.createElement(SuperTabs, {
-      id: "sku-list-tabbar-".concat(panelProps2.dataSource.id),
+      id: "".concat(tabbarIdRef.current, "-").concat(panelProps2.dataSource.id),
       tabItemStyle: {},
       isControlled: true,
       dataSource: _dataSource2,
@@ -365,12 +377,13 @@ var PisellTabbar = /*#__PURE__*/forwardRef(function (props, ref) {
           return null;
         },
         panelContainer: function panelContainer() {
-          return document.querySelector(".pisell-super-tabs-slot-bottom-sku-list-tabbar-".concat(panelProps.dataSource.id));
+          var selector = ".pisell-super-tabs-slot-bottom-".concat(tabbarIdRef.current, "-").concat(panelProps.dataSource.id);
+          return document.querySelector(selector);
         }
       }));
     };
     return /*#__PURE__*/React.createElement(SuperTabs, {
-      id: "sku-list-tabbar-".concat(panelProps.dataSource.id),
+      id: "".concat(tabbarIdRef.current, "-").concat(panelProps.dataSource.id),
       tabItemStyle: {},
       dataSource: _dataSource,
       value: level2Value,
@@ -431,7 +444,7 @@ var PisellTabbar = /*#__PURE__*/forwardRef(function (props, ref) {
         _onSearch === null || _onSearch === void 0 || _onSearch(e);
       },
       getContainer: function getContainer() {
-        return document.querySelector('#sku-list-tabbar') || document.body;
+        return document.querySelector("#".concat(tabbarIdRef.current)) || document.body;
       },
       modalStyle: {
         width: '100%'
@@ -495,7 +508,8 @@ var PisellTabbar = /*#__PURE__*/forwardRef(function (props, ref) {
         return null;
       },
       panelContainer: function panelContainer() {
-        return document.querySelector(".pisell-super-tabs-slot-bottom-sku-list-tabbar");
+        var selector = ".pisell-super-tabs-slot-bottom-".concat(tabbarIdRef.current);
+        return document.querySelector(selector);
       }
     }));
   });
@@ -520,7 +534,7 @@ var PisellTabbar = /*#__PURE__*/forwardRef(function (props, ref) {
       ref: containerRef
     }, /*#__PURE__*/React.createElement(SuperTabs, {
       isControlled: true,
-      id: "sku-list-tabbar",
+      id: tabbarIdRef.current,
       tabItemStyle: {},
       dataSource: level1DataSource,
       value: level1Value,

package/lib/components/PisellTabbar/PisellTabbar.js

@@ -56,6 +56,9 @@ var buildTabbarScrollViewProps = (isExpanded) => ({
   scrollbarStyle: "none",
   scrollActionsConfig: TABBAR_SCROLL_ACTIONS_CONFIG
 });
+function createTabbarId() {
+  return `tabbar-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
 var PisellTabbar = (0, import_react.forwardRef)(
   (props, ref) => {
     const {
@@ -70,6 +73,7 @@ var PisellTabbar = (0, import_react.forwardRef)(
       onSearch
     } = props;
     const containerRef = (0, import_react.useRef)(null);
+    const tabbarIdRef = (0, import_react.useRef)(createTabbarId());
     const searchRef = (0, import_react.useRef)(null);
     const {
       activeKey,
@@ -259,16 +263,17 @@ var PisellTabbar = (0, import_react.forwardRef)(
             {
               ...itemProps,
               card: (cardProps) => renderLevelNNormalCard(cardProps, "level3"),
-              panelContainer: () => document.querySelector(
-                `.pisell-super-tabs-slot-bottom-sku-list-tabbar-${panelProps2.dataSource.id}`
-              )
+              panelContainer: () => {
+                const selector = `.pisell-super-tabs-slot-bottom-${tabbarIdRef.current}-${panelProps2.dataSource.id}`;
+                return document.querySelector(selector);
+              }
             }
           );
         };
         return /* @__PURE__ */ import_react.default.createElement(
           import_PisellSuperTabs.default,
           {
-            id: `sku-list-tabbar-${panelProps2.dataSource.id}`,
+            id: `${tabbarIdRef.current}-${panelProps2.dataSource.id}`,
             tabItemStyle: {},
             isControlled: true,
             dataSource: _dataSource2,
@@ -339,16 +344,17 @@ var PisellTabbar = (0, import_react.forwardRef)(
                 }
                 return null;
               },
-              panelContainer: () => document.querySelector(
-                `.pisell-super-tabs-slot-bottom-sku-list-tabbar-${panelProps.dataSource.id}`
-              )
+              panelContainer: () => {
+                const selector = `.pisell-super-tabs-slot-bottom-${tabbarIdRef.current}-${panelProps.dataSource.id}`;
+                return document.querySelector(selector);
+              }
             }
           );
         };
         return /* @__PURE__ */ import_react.default.createElement(
           import_PisellSuperTabs.default,
           {
-            id: `sku-list-tabbar-${panelProps.dataSource.id}`,
+            id: `${tabbarIdRef.current}-${panelProps.dataSource.id}`,
             tabItemStyle: {},
             dataSource: _dataSource,
             value: level2Value,
@@ -431,7 +437,7 @@ var PisellTabbar = (0, import_react.forwardRef)(
               onSearch == null ? void 0 : onSearch(e);
             },
             getContainer: () => {
-              return document.querySelector("#sku-list-tabbar") || document.body;
+              return document.querySelector(`#${tabbarIdRef.current}`) || document.body;
             },
             modalStyle: {
               width: "100%"
@@ -504,9 +510,10 @@ var PisellTabbar = (0, import_react.forwardRef)(
               }
               return null;
             },
-            panelContainer: () => document.querySelector(
-              `.pisell-super-tabs-slot-bottom-sku-list-tabbar`
-            )
+            panelContainer: () => {
+              const selector = `.pisell-super-tabs-slot-bottom-${tabbarIdRef.current}`;
+              return document.querySelector(selector);
+            }
           }
         );
       }
@@ -532,7 +539,7 @@ var PisellTabbar = (0, import_react.forwardRef)(
           import_PisellSuperTabs.default,
           {
             isControlled: true,
-            id: "sku-list-tabbar",
+            id: tabbarIdRef.current,
             tabItemStyle: {},
             dataSource: level1DataSource,
             value: level1Value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "6.11.207",
+  "version": "6.11.208",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -98,9 +98,9 @@
     "swiper": "^8.4.7",
     "antd-mobile": "^5.38.1",
     "vod-js-sdk-v6": "^1.4.11",
-    "@pisell/date-picker": "3.0.8",
+    "@pisell/icon": "0.0.11",
     "@pisell/utils": "3.0.2",
-    "@pisell/icon": "0.0.11"
+    "@pisell/date-picker": "3.0.8"
   },
   "peerDependencies": {
     "react": "^18.0.0",