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

package/es/Tabs/classes.js

@@ -0,0 +1,28 @@
+const tabsRootClass = "bui-tabs";
+const tabRootClass = "bui-tab";
+const tabPanelRootClass = "bui-tabpanel";
+const tabsScrollClass = `${tabsRootClass}-tabs`;
+const tabsScrollWrapperClass = `${tabsRootClass}-scroll-wrapper`;
+const tabActiveClass = `${tabRootClass}-active`;
+const tabDisabledClass = `${tabRootClass}-disabled`;
+const tabIndicatorClass = `${tabsRootClass}-indicator`;
+const tabMaskClass = `${tabsRootClass}-mask`;
+const tabMaskLeftClass = `${tabMaskClass}-left`;
+const tabMaskRightClass = `${tabMaskClass}-right`;
+const tabPanelActiveClass = `${tabPanelRootClass}-active`;
+const tabPanelInactiveClass = `${tabPanelRootClass}-inactive`;
+export {
+  tabActiveClass,
+  tabDisabledClass,
+  tabIndicatorClass,
+  tabMaskClass,
+  tabMaskLeftClass,
+  tabMaskRightClass,
+  tabPanelActiveClass,
+  tabPanelInactiveClass,
+  tabPanelRootClass,
+  tabRootClass,
+  tabsRootClass,
+  tabsScrollClass,
+  tabsScrollWrapperClass
+};

package/es/Tabs/index.css

@@ -16,7 +16,6 @@ xhs-page {
   --bui-tab-height: 100%;
   --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
   --bui-tab-active-color: var(--bui-color-fg-default);
-  --bui-tab-active-font-family: var(--bui-font-family-accent, inherit);
 }
 .bui-tabs {
   position: relative;
@@ -29,6 +28,7 @@ xhs-page {
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: center;
+  white-space: nowrap;
   position: relative;
   overflow-x: scroll;
   scrollbar-width: none;
@@ -36,15 +36,27 @@ xhs-page {
 .bui-tabs-tabs::-webkit-scrollbar {
   display: none;
 }
+.bui-tabs-scroll-wrapper {
+  height: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  min-width: 100%;
+}
 .bui-tabs-indicator {
   position: absolute;
+  top: unset;
+  bottom: var(--bui-tabs-indicator-bottom, 0);
   width: var(--bui-tabs-indicator-width);
-  bottom: var(--bui-tabs-indicator-bottom);
   height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
   background: var(--bui-tabs-indicator-bg);
   border-radius: var(--bui-tabs-indicator-border-radius);
   box-shadow: var(--bui-tabs-indicator-box-shadow);
+  pointer-events: none;
+  transition: left 0.3s ease-in-out;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -74,12 +86,8 @@ xhs-page {
       var(--bui-color-bg-view),
       rgba(255, 255, 255, 0));
 }
-.bui-indicator-invisible {
-  visibility: hidden;
-  background-color: transparent;
-}
 .bui-tab {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
@@ -97,33 +105,11 @@ xhs-page {
 .bui-tab-active {
   color: var(--bui-tab-active-color);
   font-weight: var(--bui-font-weight-bold);
-  font-family: var(--bui-tab-active-font-family);
-}
-.bui-tab-miniapp-active {
-  color: var(--bui-tab-active-color);
-  line-height: 1.5;
-  font-weight: var(--bui-font-weight-bold);
-  position: relative;
-}
-.bui-tab-miniapp-active-line {
-  position: absolute;
-  bottom: 0;
-  left: -12px;
-  right: -12px;
-  margin: 0 auto !important;
-  width: 18px;
-  height: 2px;
-  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  background-color: var(--bui-color-primary);
 }
 .bui-tab-disabled {
   opacity: 0.5;
   pointer-events: none;
 }
-.bui-indicator-invisible {
-  visibility: hidden;
-  background-color: transparent;
-}
 .bui-tabpanel {
   font-family: var(--bui-font-family);
 }

package/es/Tabs/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Tab } from './Tab';
-export * from './Tab.types';
 export { default as TabPanel } from './TabPanel';
-export * from './TabPanel.types';
 export { default, default as Tabs } from './Tabs';
 export * from './Tabs.types';
+export * from './Tab.types';
+export * from './TabPanel.types';

package/es/Tabs/index.js

@@ -1,9 +1,9 @@
 import { default as default2 } from "./Tab";
-export * from "./Tab.types";
 import { default as default3 } from "./TabPanel";
-export * from "./TabPanel.types";
 import { default as default4, default as default5 } from "./Tabs";
 export * from "./Tabs.types";
+export * from "./Tab.types";
+export * from "./TabPanel.types";
 export {
   default2 as Tab,
   default3 as TabPanel,

package/es/Tabs/index.miniapp.d.ts

@@ -0,0 +1,5 @@
+export { default, Tab, Tabs } from './miniapp';
+export { default as TabPanel } from './TabPanel';
+export * from './Tabs.types';
+export * from './Tab.types';
+export * from './TabPanel.types';

package/es/Tabs/index.miniapp.js

@@ -0,0 +1,11 @@
+import { default as default2, Tab, Tabs } from "./miniapp";
+import { default as default3 } from "./TabPanel";
+export * from "./Tabs.types";
+export * from "./Tab.types";
+export * from "./TabPanel.types";
+export {
+  Tab,
+  default3 as TabPanel,
+  Tabs,
+  default2 as default
+};

package/es/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/es/Tabs/miniapp/Tab.js

@@ -0,0 +1,77 @@
+import React, { useEffect, useRef } from "react";
+import clsx from "clsx";
+import { useContextSelector, useForkRef } from "@bifrostui/utils";
+import TabsContext from "./TabsContext";
+import { tabRootClass, tabActiveClass, tabDisabledClass } from "../classes";
+import "../Tab.css";
+const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  const {
+    className,
+    children,
+    index,
+    disabled = false,
+    onClick,
+    style
+  } = props;
+  const innerRef = useRef(null);
+  const handleRef = useForkRef(ref, innerRef);
+  const isActive = useContextSelector(
+    TabsContext,
+    (ctx) => ctx.value === index
+  );
+  const triggerChange = useContextSelector(
+    TabsContext,
+    (ctx) => ctx.triggerChange
+  );
+  const onRegister = useContextSelector(TabsContext, (ctx) => ctx.onRegister);
+  const onUnregister = useContextSelector(
+    TabsContext,
+    (ctx) => ctx.onUnregister
+  );
+  const tabsContainerId = useContextSelector(
+    TabsContext,
+    (ctx) => ctx.tabsContainerId
+  );
+  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 = clsx(
+    tabRootClass,
+    {
+      [tabActiveClass]: isActive,
+      [tabDisabledClass]: disabled
+    },
+    className
+  );
+  const tabId = tabsContainerId ? `${tabsContainerId}-tab-${index}` : void 0;
+  return /* @__PURE__ */ React.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__ */ React.memo(Tab, (prevProps, nextProps) => {
+  return prevProps.index === nextProps.index && prevProps.disabled === nextProps.disabled && prevProps.className === nextProps.className && prevProps.children === nextProps.children;
+});
+export {
+  Tab_default as default
+};

package/es/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/es/Tabs/miniapp/TabIndicator.js

@@ -0,0 +1,272 @@
+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());
+  });
+};
+import React, { useEffect, useRef } from "react";
+import clsx from "clsx";
+import Taro from "@tarojs/taro";
+import { useEventCallback } from "@bifrostui/utils";
+import { tabIndicatorClass } from "../classes";
+import { batchQueryTabs } from "./utils/queryBatch";
+const isValidTabValue = (value) => {
+  return value !== void 0 && value !== null;
+};
+const TabIndicator = ({
+  currentValue,
+  registeredTabValues,
+  wrapperId,
+  scrollViewId,
+  registrationVersion
+}) => {
+  const indicatorRef = useRef(null);
+  const animationTimerRef = useRef(null);
+  const positionCacheRef = useRef(/* @__PURE__ */ new Map());
+  const containerInfoRef = useRef(null);
+  const indicatorWidthRef = useRef(24);
+  const isInitializedRef = useRef(false);
+  const initRetryCountRef = useRef(0);
+  const maxInitRetries = 5;
+  const isInitializingRef = useRef(false);
+  const initVersionRef = useRef(0);
+  const isMountedRef = useRef(true);
+  const updateIndicatorPosition = 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 = 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 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);
+      }
+    }
+  }));
+  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;
+    Taro.nextTick(() => {
+      if (!isMountedRef.current)
+        return;
+      initializePositions();
+    });
+    return () => {
+      if (animationTimerRef.current) {
+        clearTimeout(animationTimerRef.current);
+        animationTimerRef.current = null;
+      }
+      initVersionRef.current += 1;
+      isInitializingRef.current = false;
+    };
+  }, [registrationVersion, initializePositions]);
+  useEffect(() => {
+    if (!isValidTabValue(currentValue)) {
+      if (indicatorRef.current) {
+        indicatorRef.current.style.opacity = "0";
+      }
+      return;
+    }
+    updateIndicatorPosition();
+  }, [currentValue, updateIndicatorPosition]);
+  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;
+      }
+      Taro.nextTick(() => {
+        if (!isMountedRef.current)
+          return;
+        initializePositions();
+      });
+    };
+    (_b = (_a = Taro).onWindowResize) == null ? void 0 : _b.call(_a, handleResize);
+    return () => {
+      var _a2, _b2;
+      (_b2 = (_a2 = Taro).offWindowResize) == null ? void 0 : _b2.call(_a2, handleResize);
+    };
+  }, [initializePositions]);
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      if (animationTimerRef.current) {
+        clearTimeout(animationTimerRef.current);
+        animationTimerRef.current = null;
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: indicatorRef,
+      id: `${wrapperId}-indicator`,
+      className: clsx(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;
+export {
+  TabIndicator_default as default
+};

package/es/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;