@bifrostui/react 2.0.0-alpha.2 → 2.0.0-alpha.20

package/dist/Tabs/index.miniapp.js

@@ -0,0 +1,50 @@
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+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);
+var index_miniapp_exports = {};
+__export(index_miniapp_exports, {
+  Tab: () => import_miniapp.Tab,
+  TabPanel: () => import_TabPanel.default,
+  Tabs: () => import_miniapp.Tabs,
+  default: () => import_miniapp.default
+});
+module.exports = __toCommonJS(index_miniapp_exports);
+var import_miniapp = __toESM(require("./miniapp"));
+var import_TabPanel = __toESM(require("./TabPanel"));
+__reExport(index_miniapp_exports, require("./Tabs.types"), module.exports);
+__reExport(index_miniapp_exports, require("./Tab.types"), module.exports);
+__reExport(index_miniapp_exports, require("./TabPanel.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tab,
+  TabPanel,
+  Tabs,
+  ...require("./Tabs.types"),
+  ...require("./Tab.types"),
+  ...require("./TabPanel.types")
+});

package/dist/Tabs/miniapp/Tab.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TabProps } from '../Tab.types';
+import '../Tab.less';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<TabProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

package/dist/Tabs/miniapp/Tab.js

@@ -0,0 +1,106 @@
+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);
+var Tab_exports = {};
+__export(Tab_exports, {
+  default: () => Tab_default
+});
+module.exports = __toCommonJS(Tab_exports);
+var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var import_utils = require("@bifrostui/utils");
+var import_TabsContext = __toESM(require("./TabsContext"));
+var import_classes = require("../classes");
+var import_Tab2 = require("../Tab.css");
+const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
+  const {
+    className,
+    children,
+    index,
+    disabled = false,
+    onClick,
+    style
+  } = props;
+  const innerRef = (0, import_react.useRef)(null);
+  const handleRef = (0, import_utils.useForkRef)(ref, innerRef);
+  const isActive = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.value === index
+  );
+  const triggerChange = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.triggerChange
+  );
+  const onRegister = (0, import_utils.useContextSelector)(import_TabsContext.default, (ctx) => ctx.onRegister);
+  const onUnregister = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.onUnregister
+  );
+  const tabsContainerId = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.tabsContainerId
+  );
+  (0, import_react.useEffect)(() => {
+    if (index !== void 0 && index !== null) {
+      onRegister == null ? void 0 : onRegister({ value: index });
+    }
+    return () => {
+      if (index !== void 0 && index !== null) {
+        onUnregister == null ? void 0 : onUnregister({ value: index });
+      }
+    };
+  }, [onRegister, onUnregister, index]);
+  const rootCls = (0, import_clsx.default)(
+    import_classes.tabRootClass,
+    {
+      [import_classes.tabActiveClass]: isActive,
+      [import_classes.tabDisabledClass]: disabled
+    },
+    className
+  );
+  const tabId = tabsContainerId ? `${tabsContainerId}-tab-${index}` : void 0;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      id: tabId,
+      ref: handleRef,
+      className: rootCls,
+      style,
+      onClick: (e) => {
+        if (disabled)
+          return;
+        triggerChange == null ? void 0 : triggerChange(e, { index });
+        onClick == null ? void 0 : onClick(e, { index });
+      }
+    },
+    children
+  );
+});
+Tab.displayName = "BuiTab";
+var Tab_default = /* @__PURE__ */ import_react.default.memo(Tab, (prevProps, nextProps) => {
+  return prevProps.index === nextProps.index && prevProps.disabled === nextProps.disabled && prevProps.className === nextProps.className && prevProps.children === nextProps.children;
+});

package/dist/Tabs/miniapp/TabIndicator.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface TabIndicatorProps {
+    /** 当前选中的 tab 值 */
+    currentValue: string;
+    /** 已注册的 tabs 值数组（用于生成ID） */
+    registeredTabValues: string[];
+    /** wrapper 容器的 ID（Tab的父容器） */
+    wrapperId: string;
+    /** ScrollView 的 ID */
+    scrollViewId: string;
+    /** 注册版本号，每次 tab 注册/取消注册时递增 */
+    registrationVersion: number;
+}
+declare const TabIndicator: React.FC<TabIndicatorProps>;
+export default TabIndicator;

package/dist/Tabs/miniapp/TabIndicator.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);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var TabIndicator_exports = {};
+__export(TabIndicator_exports, {
+  default: () => TabIndicator_default
+});
+module.exports = __toCommonJS(TabIndicator_exports);
+var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var import_taro = __toESM(require("@tarojs/taro"));
+var import_utils = require("@bifrostui/utils");
+var import_classes = require("../classes");
+var import_queryBatch = require("./utils/queryBatch");
+const isValidTabValue = (value) => {
+  return value !== void 0 && value !== null;
+};
+const TabIndicator = ({
+  currentValue,
+  registeredTabValues,
+  wrapperId,
+  scrollViewId,
+  registrationVersion
+}) => {
+  const indicatorRef = (0, import_react.useRef)(null);
+  const animationTimerRef = (0, import_react.useRef)(null);
+  const positionCacheRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const containerInfoRef = (0, import_react.useRef)(null);
+  const indicatorWidthRef = (0, import_react.useRef)(24);
+  const isInitializedRef = (0, import_react.useRef)(false);
+  const initRetryCountRef = (0, import_react.useRef)(0);
+  const maxInitRetries = 5;
+  const isInitializingRef = (0, import_react.useRef)(false);
+  const initVersionRef = (0, import_react.useRef)(0);
+  const isMountedRef = (0, import_react.useRef)(true);
+  const updateIndicatorPosition = (0, import_utils.useEventCallback)(() => {
+    const indicator = indicatorRef.current;
+    if (!indicator)
+      return;
+    if (!isValidTabValue(currentValue) || !registeredTabValues.includes(currentValue)) {
+      indicator.style.opacity = "0";
+      return;
+    }
+    const cachedPosition = positionCacheRef.current.get(currentValue);
+    const containerInfo = containerInfoRef.current;
+    if (!cachedPosition || !containerInfo || !isInitializedRef.current) {
+      if (!isInitializedRef.current) {
+        initializePositions();
+      }
+      return;
+    }
+    const activeTabLeft = cachedPosition.left;
+    const activeTabWidth = cachedPosition.width;
+    const indicatorWidth = indicatorWidthRef.current;
+    const x = activeTabLeft + (activeTabWidth - indicatorWidth) / 2;
+    indicator.style.transform = `translate(${x}px, 0px)`;
+    indicator.style.opacity = "1";
+  });
+  const initializePositions = (0, import_utils.useEventCallback)(() => __async(void 0, null, function* () {
+    if (!isMountedRef.current)
+      return;
+    if (isInitializingRef.current)
+      return;
+    isInitializingRef.current = true;
+    initVersionRef.current += 1;
+    const currentVersion = initVersionRef.current;
+    try {
+      const result = yield (0, import_queryBatch.batchQueryTabs)({
+        scrollViewId,
+        wrapperId,
+        tabValues: registeredTabValues
+      });
+      if (!isMountedRef.current)
+        return;
+      if (currentVersion !== initVersionRef.current)
+        return;
+      const { scrollView, scrollFields, wrapper, indicator, tabs } = result;
+      if (!scrollView || !wrapper || !indicator || !scrollFields) {
+        if (initRetryCountRef.current < maxInitRetries) {
+          initRetryCountRef.current += 1;
+          if (animationTimerRef.current) {
+            clearTimeout(animationTimerRef.current);
+          }
+          animationTimerRef.current = setTimeout(() => {
+            if (!isMountedRef.current)
+              return;
+            isInitializingRef.current = false;
+            initializePositions();
+          }, 100);
+        } else {
+          isInitializingRef.current = false;
+        }
+        return;
+      }
+      if (!indicator.width || indicator.width <= 0) {
+        if (initRetryCountRef.current < maxInitRetries) {
+          initRetryCountRef.current += 1;
+          if (animationTimerRef.current) {
+            clearTimeout(animationTimerRef.current);
+          }
+          animationTimerRef.current = setTimeout(() => {
+            if (!isMountedRef.current)
+              return;
+            isInitializingRef.current = false;
+            initializePositions();
+          }, 100);
+        } else {
+          isInitializingRef.current = false;
+        }
+        return;
+      }
+      containerInfoRef.current = {
+        width: scrollView.width,
+        scrollWidth: scrollFields.scrollWidth || scrollView.width
+      };
+      indicatorWidthRef.current = indicator.width;
+      const newCache = /* @__PURE__ */ new Map();
+      registeredTabValues.forEach((value, index) => {
+        const tabRect = tabs[index];
+        if (tabRect && tabRect.width > 0) {
+          newCache.set(value, {
+            left: tabRect.left - wrapper.left,
+            width: tabRect.width
+          });
+        }
+      });
+      if (newCache.size < registeredTabValues.length) {
+        if (initRetryCountRef.current < maxInitRetries) {
+          initRetryCountRef.current += 1;
+          if (animationTimerRef.current) {
+            clearTimeout(animationTimerRef.current);
+          }
+          animationTimerRef.current = setTimeout(() => {
+            if (!isMountedRef.current)
+              return;
+            isInitializingRef.current = false;
+            initializePositions();
+          }, 100);
+        } else {
+          isInitializingRef.current = false;
+        }
+        return;
+      }
+      if (currentVersion !== initVersionRef.current || !isMountedRef.current) {
+        return;
+      }
+      initRetryCountRef.current = 0;
+      positionCacheRef.current = newCache;
+      isInitializedRef.current = true;
+      isInitializingRef.current = false;
+      updateIndicatorPosition();
+    } catch (error) {
+      console.error("[TabIndicator] \u6279\u91CF\u67E5\u8BE2\u5931\u8D25:", error);
+      isInitializingRef.current = false;
+      if (isMountedRef.current && initRetryCountRef.current < maxInitRetries) {
+        initRetryCountRef.current += 1;
+        if (animationTimerRef.current) {
+          clearTimeout(animationTimerRef.current);
+        }
+        animationTimerRef.current = setTimeout(() => {
+          if (!isMountedRef.current)
+            return;
+          initializePositions();
+        }, 100);
+      }
+    }
+  }));
+  (0, import_react.useEffect)(() => {
+    if (registeredTabValues.length === 0) {
+      if (indicatorRef.current) {
+        indicatorRef.current.style.opacity = "0";
+      }
+      return void 0;
+    }
+    initVersionRef.current += 1;
+    if (animationTimerRef.current) {
+      clearTimeout(animationTimerRef.current);
+      animationTimerRef.current = null;
+    }
+    isInitializedRef.current = false;
+    isInitializingRef.current = false;
+    initRetryCountRef.current = 0;
+    import_taro.default.nextTick(() => {
+      if (!isMountedRef.current)
+        return;
+      initializePositions();
+    });
+    return () => {
+      if (animationTimerRef.current) {
+        clearTimeout(animationTimerRef.current);
+        animationTimerRef.current = null;
+      }
+      initVersionRef.current += 1;
+      isInitializingRef.current = false;
+    };
+  }, [registrationVersion, initializePositions]);
+  (0, import_react.useEffect)(() => {
+    if (!isValidTabValue(currentValue)) {
+      if (indicatorRef.current) {
+        indicatorRef.current.style.opacity = "0";
+      }
+      return;
+    }
+    updateIndicatorPosition();
+  }, [currentValue, updateIndicatorPosition]);
+  (0, import_react.useEffect)(() => {
+    var _a, _b;
+    const handleResize = () => {
+      if (!isMountedRef.current)
+        return;
+      initVersionRef.current += 1;
+      isInitializedRef.current = false;
+      isInitializingRef.current = false;
+      initRetryCountRef.current = 0;
+      positionCacheRef.current.clear();
+      if (animationTimerRef.current) {
+        clearTimeout(animationTimerRef.current);
+        animationTimerRef.current = null;
+      }
+      import_taro.default.nextTick(() => {
+        if (!isMountedRef.current)
+          return;
+        initializePositions();
+      });
+    };
+    (_b = (_a = import_taro.default).onWindowResize) == null ? void 0 : _b.call(_a, handleResize);
+    return () => {
+      var _a2, _b2;
+      (_b2 = (_a2 = import_taro.default).offWindowResize) == null ? void 0 : _b2.call(_a2, handleResize);
+    };
+  }, [initializePositions]);
+  (0, import_react.useEffect)(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      if (animationTimerRef.current) {
+        clearTimeout(animationTimerRef.current);
+        animationTimerRef.current = null;
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: indicatorRef,
+      id: `${wrapperId}-indicator`,
+      className: (0, import_clsx.default)(import_classes.tabIndicatorClass),
+      style: {
+        transition: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out",
+        transform: "translate(0px, 0px)",
+        opacity: 0
+      }
+    }
+  );
+};
+TabIndicator.displayName = "BuiTabsIndicator";
+var TabIndicator_default = TabIndicator;

package/dist/Tabs/miniapp/Tabs.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TabsProps } from '../Tabs.types';
+import '../Tabs.less';
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Tabs;