@pisell/private-materials 3.4.4 → 3.4.6

package/lib/components/productSelect/components/TabProduct/index.js

@@ -39,7 +39,15 @@ var import_ahooks = require("ahooks");
 var import_utils = require("@pisell/utils");
 var import_tabs = __toESM(require("./tabs"));
 var import_productGroup = __toESM(require("../productGroup"));
-var io = null;
+var getOffsetTopRelativeToScrollContainer = (targetElement, scrollContainer) => {
+  if (!targetElement || !scrollContainer) return 0;
+  if (targetElement === scrollContainer) {
+    return 0;
+  }
+  const targetRect = targetElement.getBoundingClientRect();
+  const containerRect = scrollContainer.getBoundingClientRect();
+  return targetRect.top - containerRect.top + scrollContainer.scrollTop;
+};
 var TabProduct = (props) => {
   const {
     showTab = true,
@@ -48,6 +56,7 @@ var TabProduct = (props) => {
     onChange,
     amountSymbol = "$",
     scrollDom,
+    offsetDom,
     value: currentProductId,
     loading,
     emptyDescription,
@@ -55,6 +64,8 @@ var TabProduct = (props) => {
   } = props;
   const tabsRef = (0, import_react.useRef)();
   const [currentGroupId, setCurrentGroupId] = (0, import_react.useState)(1);
+  const tabLocatingRef = (0, import_react.useRef)(false);
+  const ioRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     if (list == null ? void 0 : list.length) {
       setCurrentGroupId(list[0].id);
@@ -62,6 +73,9 @@ var TabProduct = (props) => {
         handleObserver();
       });
     }
+    return () => {
+      handleUnobserver();
+    };
   }, [list]);
   const debouncedScroll = (0, import_ahooks.useDebounceFn)(
     (id) => {
@@ -75,18 +89,23 @@ var TabProduct = (props) => {
     const _marginTop = 270;
     const _marginBottom = window.innerHeight - 70 - 200 - 70;
     const _rootMargin = `${_marginTop * -1}px 0px ${_marginBottom * -1}px 0px`;
-    io = new IntersectionObserver(
+    ioRef.current = new IntersectionObserver(
       (entries) => {
-        var _a, _b;
+        var _a;
         const enteringEntries = entries.filter((entry) => entry.isIntersecting);
         if (enteringEntries.length > 0) {
           const topMostEntry = enteringEntries.reduce((top, current) => {
             return current.boundingClientRect.top < top.boundingClientRect.top ? current : top;
           });
-          const [name, id] = (_b = (_a = topMostEntry == null ? void 0 : topMostEntry.target) == null ? void 0 : _a.id) == null ? void 0 : _b.split("-");
-          const newGroupId = Number(id);
-          setCurrentGroupId(newGroupId);
-          debouncedScroll.run(id);
+          const targetId = (_a = topMostEntry == null ? void 0 : topMostEntry.target) == null ? void 0 : _a.id;
+          if (targetId) {
+            const [name, id] = targetId.split("-");
+            const newGroupId = Number(id);
+            if (!tabLocatingRef.current && !isNaN(newGroupId)) {
+              setCurrentGroupId(newGroupId);
+              debouncedScroll.run(id);
+            }
+          }
         }
       },
       {
@@ -94,24 +113,28 @@ var TabProduct = (props) => {
         rootMargin: _rootMargin
       }
     );
-    if (list == null ? void 0 : list.length) {
+    if ((list == null ? void 0 : list.length) && ioRef.current) {
       for (const item of list) {
         const _item = document.querySelector(`#list-${item.id}`);
         if (_item) {
-          io.observe(_item);
+          ioRef.current.observe(_item);
         }
       }
     }
   });
   const handleUnobserver = (0, import_ahooks.useMemoizedFn)(() => {
-    if ((list == null ? void 0 : list.length) && io) {
+    if ((list == null ? void 0 : list.length) && ioRef.current) {
       for (const item of list) {
         const _item = document.querySelector(`#list-${item.id}`);
         if (_item) {
-          io.unobserve(_item);
+          ioRef.current.unobserve(_item);
         }
       }
     }
+    if (ioRef.current) {
+      ioRef.current.disconnect();
+      ioRef.current = null;
+    }
   });
   const renderContent = () => {
     if (loading) {
@@ -126,7 +149,7 @@ var TabProduct = (props) => {
       );
     }
     return list.map((item, i) => {
-      return /* @__PURE__ */ import_react.default.createElement("div", { id: `list-${item.id}`, key: i }, /* @__PURE__ */ import_react.default.createElement(
+      return /* @__PURE__ */ import_react.default.createElement("div", { id: `list-${item.id}`, key: `list-${item.id}` }, /* @__PURE__ */ import_react.default.createElement(
         import_productGroup.default,
         {
           onSelectProduct: onChange,
@@ -148,7 +171,7 @@ var TabProduct = (props) => {
       }
     ), /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-pisell-tabs-content" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton.Button, { active: true, size: "large", shape: "round" })));
   }, []);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showTab ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-product-select-tabs-wrapper" }, loading ? tabSkeleton : /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showTab && list && list.length > 1 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-product-select-tabs-wrapper" }, loading ? tabSkeleton : /* @__PURE__ */ import_react.default.createElement(
     import_tabs.default,
     {
       ref: tabsRef,
@@ -157,33 +180,47 @@ var TabProduct = (props) => {
       tab: currentGroupId,
       onChange: (e) => {
         var _a;
-        let comWrapper = document.querySelector(
-          ".pisell-product-select-wrapper"
-        );
-        let categoryDom = document.querySelector(
-          ".pisell-product-select-tabs-wrapper"
-        );
-        let wrapperOffsetTop = comWrapper.offsetTop;
-        let top = 0;
-        if (categoryDom) {
-          top = categoryDom.offsetHeight;
-        }
-        const dom = document == null ? void 0 : document.querySelector("#list-" + e);
-        const main = document == null ? void 0 : document.querySelector(scrollDom);
-        if (dom && main) {
-          if (e === ((_a = list[0]) == null ? void 0 : _a.id)) {
-            main.scrollTop = 0;
-          } else {
-            main.scrollTop = dom.offsetTop - top - wrapperOffsetTop;
+        try {
+          const productSelectWrapper = document.querySelector(
+            ".pisell-product-select-wrapper"
+          );
+          const tabsWrapper = document.querySelector(
+            ".pisell-product-select-tabs-wrapper"
+          );
+          let tabsHeight = 0;
+          if (tabsWrapper) {
+            tabsHeight = tabsWrapper.offsetHeight;
+          }
+          const targetListElement = document == null ? void 0 : document.querySelector("#list-" + e);
+          const scrollContainer = scrollDom ? document == null ? void 0 : document.querySelector(scrollDom) : null;
+          const offsetElement = offsetDom ? document == null ? void 0 : document.querySelector(offsetDom) : null;
+          const extraOffset = offsetElement ? offsetElement.clientHeight : 0;
+          handleUnobserver();
+          tabLocatingRef.current = true;
+          if (targetListElement && scrollContainer) {
+            if (e === ((_a = list[0]) == null ? void 0 : _a.id)) {
+              if (productSelectWrapper) {
+                const wrapperOffsetTop = getOffsetTopRelativeToScrollContainer(productSelectWrapper, scrollContainer);
+                scrollContainer.scrollTop = wrapperOffsetTop - extraOffset;
+              }
+            } else {
+              const listOffsetTop = getOffsetTopRelativeToScrollContainer(targetListElement, scrollContainer);
+              scrollContainer.scrollTop = listOffsetTop - tabsHeight - extraOffset;
+            }
           }
+          setCurrentGroupId(e);
+          debouncedScroll.run(e);
+          setTimeout(() => {
+            tabLocatingRef.current = false;
+            handleObserver();
+          }, 500);
+        } catch (error) {
+          console.error("Tab onChange error:", error);
+          tabLocatingRef.current = false;
+          setCurrentGroupId(e);
         }
-        handleUnobserver();
-        setCurrentGroupId(e);
-        setTimeout(() => {
-          handleObserver();
-        }, 1e3);
       }
     }
-  )) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-product-select-product-list" }, renderContent()));
+  )) : /* @__PURE__ */ import_react.default.createElement("p", null, /* @__PURE__ */ import_react.default.createElement("br", null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-product-select-product-list" }, renderContent()));
 };
 var TabProduct_default = TabProduct;

package/lib/components/productSelect/components/TabProduct/tabs/index.less

@@ -107,6 +107,7 @@
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
+        user-select: none;
       }
 
       &:hover {

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

@@ -14,6 +14,8 @@ interface ProductSelectProps {
     value?: number;
     loading?: boolean;
     scrollDom?: string;
+    /** 某些设置了固定头部的情况 */
+    offsetDom?: string;
     style?: React.CSSProperties;
     emptyDescription?: string;
     token?: Partial<ProductSelectToken>;

package/lib/components/ticketBooking/components/addServiceVariant/addService.js

@@ -48,7 +48,7 @@ var import_utils6 = require("../../utils");
 var import_notAvailable = __toESM(require("../notAvailable"));
 var import_dayjs = __toESM(require("dayjs"));
 var AddSerivce = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const { onEdit, state, dispatch, renderMode = "current" } = props;
   const [loading, setLoading] = (0, import_react.useState)(true);
   const context = (0, import_useEngineContext.default)();
@@ -64,7 +64,8 @@ var AddSerivce = (props) => {
   });
   const isBooking4 = (0, import_utils5.isBooking4Shop)(
     (_g = (_f = (_e = (_d = (_c = context.appHelper.utils.store) == null ? void 0 : _c.getState) == null ? void 0 : _d.call(_c)) == null ? void 0 : _e.global) == null ? void 0 : _f.globalConfig) == null ? void 0 : _g.id,
-    state == null ? void 0 : state.renderType
+    state == null ? void 0 : state.renderType,
+    (_h = context.appHelper.utils) == null ? void 0 : _h.businessUtils
   );
   const [currentProduct, setCurrentProduct] = (0, import_react.useState)(null);
   const stateRef = (0, import_react.useRef)(state);
@@ -72,11 +73,11 @@ var AddSerivce = (props) => {
   const menuList = (0, import_react.useMemo)(() => {
     var _a2, _b2, _c2;
     return ((_c2 = (_b2 = (_a2 = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _a2.config) == null ? void 0 : _b2.menu_list_tab) == null ? void 0 : _c2.menu_list) || [];
-  }, [(_h = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _h.config]);
+  }, [(_i = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _i.config]);
   const customerId = (0, import_react.useMemo)(() => {
     var _a2, _b2;
     return ((_b2 = (_a2 = state.client) == null ? void 0 : _a2.value) == null ? void 0 : _b2.id) || void 0;
-  }, [(_j = (_i = state.client) == null ? void 0 : _i.value) == null ? void 0 : _j.id]);
+  }, [(_k = (_j = state.client) == null ? void 0 : _j.value) == null ? void 0 : _k.id]);
   const setDefaultService = async (list) => {
     if (state.renderType !== "eventBooking") {
       return;
@@ -371,7 +372,7 @@ var AddSerivce = (props) => {
       }
     }
     return _list;
-  }, [(_k = state.service) == null ? void 0 : _k.services, state == null ? void 0 : state.activeCartId]);
+  }, [(_l = state.service) == null ? void 0 : _l.services, state == null ? void 0 : state.activeCartId]);
   const currentDate = (0, import_react.useMemo)(() => {
     return state.date.value.format("YYYY-MM-DD");
   }, [state.date.value]);
@@ -414,7 +415,7 @@ var AddSerivce = (props) => {
     }
     return null;
   }, [
-    (_m = (_l = state.service) == null ? void 0 : _l.cacheItem) == null ? void 0 : _m.autoClose,
+    (_n = (_m = state.service) == null ? void 0 : _m.cacheItem) == null ? void 0 : _n.autoClose,
     state.service.addModal,
     import_utils.locales,
     renderList,

package/lib/components/walletList/index.js

@@ -117,17 +117,17 @@ var DEFAULT_BALANCE = {
   discount_card_count: 0
 };
 var WalletList = (0, import_model.Provider)((props) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { globalState = {} } = props;
   const { state, dispatch } = (0, import_react.useContext)(import_model.Context);
   const context = (0, import_useEngineContext.default)();
   const { constants, utils } = context.appHelper || {};
   const dvaStore = (_b = (_a = utils == null ? void 0 : utils.getStore) == null ? void 0 : _a.call(utils)) == null ? void 0 : _b.getState();
-  import_utils.locales.init(import_locales.default, ((_c = dvaStore == null ? void 0 : dvaStore.core) == null ? void 0 : _c.translateLocale) || "en");
+  import_utils.locales.init(import_locales.default, ((_d = (_c = context == null ? void 0 : context.engine) == null ? void 0 : _c.props) == null ? void 0 : _d.locale) || "en");
   const isMountedRef = (0, import_react.useRef)(true);
   const carouselRef = (0, import_react.useRef)(null);
   const { store } = utils;
-  const symbol = ((_f = (_e = (_d = store == null ? void 0 : store.getState) == null ? void 0 : _d.call(store)) == null ? void 0 : _e.global) == null ? void 0 : _f.symbol) || "$";
+  const symbol = ((_g = (_f = (_e = store == null ? void 0 : store.getState) == null ? void 0 : _e.call(store)) == null ? void 0 : _f.global) == null ? void 0 : _g.symbol) || "$";
   const prevButtonRef = (0, import_react.useRef)(null);
   const nextButtonRef = (0, import_react.useRef)(null);
   const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/private-materials",
-  "version": "3.4.4",
+  "version": "3.4.6",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -60,9 +60,9 @@
     "rc-virtual-list": "^3.11.3",
     "decimal.js": "^10.4.3",
     "@pisell/utils": "3.0.0",
+    "@pisell/materials": "3.3.47",
     "@pisell/icon": "0.0.11",
-    "@pisell/date-picker": "3.0.2",
-    "@pisell/materials": "3.3.40"
+    "@pisell/date-picker": "3.0.2"
   },
   "peerDependencies": {
     "react": "^18.0.0",