@bifrostui/react 2.0.0-alpha.11 → 2.0.0-alpha.13

package/es/Tabs/TabsContext.d.ts

@@ -1,8 +1,17 @@
 import React from 'react';
-import { TabChangeEvent, TabsProps } from './Tabs.types';
-type TabsContextValueType = Omit<TabsProps, 'onChange'> & {
-    triggerChange: TabChangeEvent;
-};
-declare const TabsContext: React.Context<TabsContextValueType>;
-export declare const TabsContextProvider: React.Provider<TabsContextValueType>;
+import { TabChangeEvent } from './Tabs.types';
+export interface TabRegisterData {
+    value: string;
+    ref: React.RefObject<HTMLElement>;
+}
+export interface TabsContextValueType {
+    value?: string;
+    triggerChange?: TabChangeEvent;
+    onRegister?: (data: TabRegisterData) => void;
+    onUnregister?: (data: {
+        value: string;
+    }) => void;
+}
+declare const TabsContext: import("@bifrostui/utils").Context<TabsContextValueType>;
+export declare const TabsContextProvider: React.Provider<TabsContextValueType> & React.FC<React.ProviderProps<TabsContextValueType>>;
 export default TabsContext;

package/es/Tabs/TabsContext.js

@@ -1,7 +1,9 @@
-import React from "react";
-const TabsContext = React.createContext(
-  void 0
-);
+import { createContext } from "@bifrostui/utils";
+const TabsContext = createContext({
+  triggerChange: void 0,
+  onRegister: void 0,
+  onUnregister: void 0
+});
 if (process.env.NODE_ENV !== "production") {
   TabsContext.displayName = "BuiTabsContext";
 }

package/es/Tabs/classes.d.ts

@@ -0,0 +1,10 @@
+export declare const tabsRootClass = "bui-tabs";
+export declare const tabRootClass = "bui-tab";
+export declare const tabsScrollClass: string;
+export declare const tabsScrollWrapperClass: string;
+export declare const tabActiveClass: string;
+export declare const tabDisabledClass: string;
+export declare const tabIndicatorClass: string;
+export declare const tabMaskClass: string;
+export declare const tabMaskLeftClass: string;
+export declare const tabMaskRightClass: string;

package/es/Tabs/classes.js

@@ -0,0 +1,22 @@
+const tabsRootClass = "bui-tabs";
+const tabRootClass = "bui-tab";
+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`;
+export {
+  tabActiveClass,
+  tabDisabledClass,
+  tabIndicatorClass,
+  tabMaskClass,
+  tabMaskLeftClass,
+  tabMaskRightClass,
+  tabRootClass,
+  tabsRootClass,
+  tabsScrollClass,
+  tabsScrollWrapperClass
+};

package/es/Tabs/index.css

@@ -29,6 +29,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 +37,28 @@ 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);
+  left: 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);
+  z-index: 1;
+  pointer-events: none;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -74,12 +88,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;
@@ -99,31 +109,10 @@ xhs-page {
   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.NamedExoticComponent<TabProps<"div", {}>>;
+export default _default;

package/es/Tabs/miniapp/Tab.js

@@ -0,0 +1,75 @@
+import React, { useEffect } from "react";
+import clsx from "clsx";
+import { View } from "@tarojs/components";
+import { useContextSelector } from "@bifrostui/utils";
+import TabsContext from "./TabsContext";
+import { tabRootClass, tabActiveClass, tabDisabledClass } from "../classes";
+import "../Tab.css";
+const Tab = (props) => {
+  const {
+    className,
+    children,
+    index,
+    disabled = false,
+    onClick,
+    style
+  } = props;
+  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(
+    View,
+    {
+      id: tabId,
+      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,178 @@
+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, useState } from "react";
+import clsx from "clsx";
+import Taro from "@tarojs/taro";
+import { View } from "@tarojs/components";
+import { useEventCallback } from "@bifrostui/utils";
+import { tabIndicatorClass } from "../classes";
+import { batchQueryTabs } from "./utils/queryBatch";
+const TabIndicator = ({
+  currentValue,
+  registeredTabValues,
+  wrapperId,
+  scrollViewId,
+  registrationVersion
+}) => {
+  const [transform, setTransform] = useState("translate(0px, 0px)");
+  const [visibility, setVisibility] = useState("hidden");
+  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 updateIndicatorPosition = useEventCallback(() => {
+    if (!currentValue || !registeredTabValues.includes(currentValue)) {
+      setVisibility("hidden");
+      return;
+    }
+    const cachedPosition = positionCacheRef.current.get(currentValue);
+    const containerInfo = containerInfoRef.current;
+    if (!cachedPosition || !containerInfo) {
+      if (!isInitializedRef.current) {
+        initializePositions();
+      }
+      return;
+    }
+    const activeTabLeft = cachedPosition.left;
+    const activeTabWidth = cachedPosition.width;
+    const indicatorWidth = indicatorWidthRef.current;
+    const x = activeTabLeft + (activeTabWidth - indicatorWidth) / 2;
+    setTransform(`translate(${x}px, 0px)`);
+    setVisibility("visible");
+  });
+  const initializePositions = useEventCallback(() => __async(void 0, null, function* () {
+    try {
+      const result = yield batchQueryTabs({
+        scrollViewId,
+        wrapperId,
+        tabValues: registeredTabValues
+      });
+      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(() => {
+            initializePositions();
+          }, 100);
+        }
+        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) {
+          const relativeLeft = tabRect.left - wrapper.left;
+          newCache.set(value, {
+            left: relativeLeft,
+            width: tabRect.width
+          });
+        }
+      });
+      if (newCache.size < registeredTabValues.length) {
+        if (initRetryCountRef.current < maxInitRetries) {
+          initRetryCountRef.current += 1;
+          if (animationTimerRef.current) {
+            clearTimeout(animationTimerRef.current);
+          }
+          animationTimerRef.current = setTimeout(() => {
+            initializePositions();
+          }, 100);
+        }
+        return;
+      }
+      initRetryCountRef.current = 0;
+      positionCacheRef.current = newCache;
+      isInitializedRef.current = true;
+      updateIndicatorPosition();
+    } catch (error) {
+      console.error("[TabIndicator] \u6279\u91CF\u67E5\u8BE2\u5931\u8D25:", error);
+    }
+  }));
+  useEffect(() => {
+    if (registeredTabValues.length === 0) {
+      return void 0;
+    }
+    if (animationTimerRef.current) {
+      clearTimeout(animationTimerRef.current);
+    }
+    isInitializedRef.current = false;
+    initRetryCountRef.current = 0;
+    Taro.nextTick(() => {
+      initializePositions();
+    });
+    return () => {
+      if (animationTimerRef.current) {
+        clearTimeout(animationTimerRef.current);
+      }
+    };
+  }, [registrationVersion, initializePositions]);
+  useEffect(() => {
+    if (!currentValue) {
+      setVisibility("hidden");
+      return;
+    }
+    updateIndicatorPosition();
+  }, [currentValue, updateIndicatorPosition]);
+  useEffect(() => {
+    var _a, _b;
+    const handleResize = () => {
+      isInitializedRef.current = false;
+      initRetryCountRef.current = 0;
+      positionCacheRef.current.clear();
+      Taro.nextTick(() => {
+        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]);
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      id: `${wrapperId}-indicator`,
+      className: clsx(tabIndicatorClass),
+      style: {
+        transition: "transform 0.3s ease-in-out",
+        transform,
+        visibility
+      }
+    }
+  );
+};
+TabIndicator.displayName = "BuiTabsIndicator";
+var TabIndicator_default = TabIndicator;
+export {
+  TabIndicator_default as default
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface TabMaskProps {
+    /** 位置：左侧或右侧 */
+    position: 'left' | 'right';
+    /** 当前滚动位置 */
+    scrollLeft: number;
+    /** 容器宽度 */
+    containerWidth: number;
+    /** 滚动区域总宽度 */
+    scrollWidth: number;
+}
+declare const _default: React.NamedExoticComponent<TabMaskProps>;
+export default _default;

package/es/Tabs/miniapp/TabMask.js

@@ -0,0 +1,38 @@
+import React from "react";
+import clsx from "clsx";
+import { View } from "@tarojs/components";
+import { tabMaskClass, tabMaskLeftClass, tabMaskRightClass } from "../classes";
+const TabMask = ({
+  position,
+  scrollLeft,
+  containerWidth,
+  scrollWidth
+}) => {
+  const shouldShow = React.useMemo(() => {
+    if (position === "left") {
+      return scrollLeft > 0;
+    }
+    const rightRange = Math.abs(scrollWidth - (scrollLeft + containerWidth));
+    return rightRange > 1;
+  }, [position, scrollLeft, containerWidth, scrollWidth]);
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      className: clsx(
+        tabMaskClass,
+        position === "left" ? tabMaskLeftClass : tabMaskRightClass
+      ),
+      style: {
+        opacity: shouldShow ? 1 : 0,
+        transition: "opacity 0.1s ease-in-out"
+      }
+    }
+  );
+};
+TabMask.displayName = "BuiTabsMask";
+var TabMask_default = /* @__PURE__ */ React.memo(TabMask, (prevProps, nextProps) => {
+  return prevProps.position === nextProps.position && prevProps.scrollLeft === nextProps.scrollLeft && prevProps.containerWidth === nextProps.containerWidth && prevProps.scrollWidth === nextProps.scrollWidth;
+});
+export {
+  TabMask_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.FC<TabsProps>;
+export default Tabs;