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

package/es/Tabs/Tab.js

@@ -29,43 +29,56 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import clsx from "clsx";
-import { isMini } from "@bifrostui/utils";
+import { isMini, useContextSelector, useForkRef } from "@bifrostui/utils";
 import TabsContext from "./TabsContext";
 import "./Tab.css";
-const prefixCls = "bui-tab";
+const rootClass = "bui-tab";
 const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     className,
     children,
     index,
     disabled = false,
-    onClick,
-    role = "tab",
-    tabIndex,
-    "aria-selected": ariaSelected,
-    "aria-disabled": ariaDisabled
+    onClick
   } = _a, others = __objRest(_a, [
     "className",
     "children",
     "index",
     "disabled",
-    "onClick",
-    "role",
-    "tabIndex",
-    "aria-selected",
-    "aria-disabled"
+    "onClick"
   ]);
-  const tabsContext = React.useContext(TabsContext);
-  const { value, triggerChange } = tabsContext;
-  const isActive = index === value;
+  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
+  );
+  useEffect(() => {
+    if (index !== void 0 && index !== null) {
+      onRegister == null ? void 0 : onRegister({ value: index, ref: innerRef });
+    }
+    return () => {
+      if (index !== void 0 && index !== null) {
+        onUnregister == null ? void 0 : onUnregister({ value: index });
+      }
+    };
+  }, [onRegister, onUnregister, index]);
   const rootCls = clsx(
-    prefixCls,
+    rootClass,
     {
-      [`${prefixCls}-active`]: !isMini && isActive,
-      [`${prefixCls}-miniapp-active`]: isMini && isActive,
-      [`${prefixCls}-disabled`]: disabled
+      [`${rootClass}-active`]: !isMini && isActive,
+      [`${rootClass}-disabled`]: disabled
     },
     className
   );
@@ -73,34 +86,29 @@ const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
     if (disabled)
       return;
     e.preventDefault();
-    triggerChange(e, { index });
+    triggerChange == null ? void 0 : triggerChange(e, { index });
     onClick == null ? void 0 : onClick(e, { index });
   };
+  if (process.env.NODE_ENV !== "production") {
+    console.count("Tab render");
+  }
   return /* @__PURE__ */ React.createElement(
     "div",
     __spreadProps(__spreadValues({
-      role,
-      "aria-selected": ariaSelected != null ? ariaSelected : isActive,
-      "aria-disabled": ariaDisabled != null ? ariaDisabled : disabled,
-      tabIndex: tabIndex != null ? tabIndex : disabled ? -1 : 0,
-      ref,
+      role: "tab",
+      "aria-selected": isActive,
+      "aria-disabled": disabled,
+      tabIndex: disabled ? -1 : 0,
+      ref: handleRef,
       className: rootCls
     }, others), {
       onClick: handleClick
     }),
-    children,
-    isMini && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: clsx(`${prefixCls}-miniapp-active-line`, {
-          "bui-indicator-invisible": !isActive
-        })
-      }
-    )
+    children
   );
 });
 Tab.displayName = "BuiTab";
-var Tab_default = Tab;
+var Tab_default = /* @__PURE__ */ React.memo(Tab);
 export {
   Tab_default as default
 };

package/es/Tabs/Tab.types.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps } from '@bifrostui/types';
 import { ITabItem, TabChangeEvent } from './Tabs.types';
 export type TabProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{

package/es/Tabs/TabIndicator.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface TabIndicatorProps {
+    /** 当前选中的 tab 值 */
+    currentValue: string;
+    /** 已注册的 tabs 引用映射表 */
+    registeredTabs: React.MutableRefObject<Record<string, React.RefObject<HTMLElement>>>;
+    /** tabs 容器的引用 */
+    tabsContainerRef: React.RefObject<HTMLDivElement>;
+    /** 注册版本号，每次 tab 注册/取消注册时递增 */
+    registrationVersion: number;
+}
+declare const TabIndicator: React.FC<TabIndicatorProps>;
+export default TabIndicator;

package/es/Tabs/TabIndicator.js

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef } from "react";
+import clsx from "clsx";
+import { debounce, isMini, useEventCallback } from "@bifrostui/utils";
+import scrollLeftTo from "./utils/scroll";
+const rootClass = "bui-tabs";
+const duration = 300;
+const TabIndicator = ({
+  currentValue,
+  registeredTabs,
+  tabsContainerRef,
+  registrationVersion
+}) => {
+  const indicatorRef = useRef(null);
+  const getActiveTabElement = useEventCallback(
+    (activeValue) => {
+      const tabRef = registeredTabs.current[activeValue];
+      return tabRef == null ? void 0 : tabRef.current;
+    }
+  );
+  const scrollIntoView = useEventCallback((activeTab) => {
+    const tabsEl = tabsContainerRef.current;
+    if (!tabsEl || !activeTab) {
+      return;
+    }
+    scrollLeftTo(
+      tabsEl,
+      activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
+      duration
+    );
+  });
+  const animate = useEventCallback(() => {
+    const tabsEl = tabsContainerRef.current;
+    if (!tabsEl)
+      return;
+    const indicator = indicatorRef.current;
+    if (!indicator)
+      return;
+    const activeTab = getActiveTabElement(currentValue);
+    if (activeTab) {
+      const activeTabLeft = activeTab.offsetLeft;
+      const activeTabWidth = activeTab.offsetWidth;
+      const containerWidth = tabsEl.offsetWidth;
+      const containerScrollWidth = tabsEl.scrollWidth;
+      const activeLineWidth = indicator.offsetWidth;
+      const x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+      indicator.style.transform = `translate(${x}px, 0px)`;
+      indicator.style.visibility = "visible";
+      const maxScrollDistance = containerScrollWidth - containerWidth;
+      if (maxScrollDistance > 0 && !isMini) {
+        scrollIntoView(activeTab);
+      }
+    } else {
+      indicator.style.visibility = "hidden";
+    }
+  });
+  useEffect(() => {
+    animate();
+  }, [animate, currentValue, registrationVersion]);
+  useEffect(() => {
+    const handleResize = debounce(() => {
+      animate();
+    }, 100);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [animate]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: indicatorRef,
+      className: clsx(`${rootClass}-indicator`),
+      style: {
+        transition: "transform 0.3s ease-in-out",
+        transform: "translate(0px, 0px)",
+        visibility: "hidden"
+      },
+      "aria-hidden": "true"
+    }
+  );
+};
+TabIndicator.displayName = "BuiTabsIndicator";
+var TabIndicator_default = TabIndicator;
+export {
+  TabIndicator_default as default
+};

package/es/Tabs/TabMask.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface TabMaskProps {
+    /** Tabs 容器的引用，用于监听滚动 */
+    tabsContainerRef: React.RefObject<HTMLDivElement>;
+    /** 位置：左侧或右侧 */
+    position: 'left' | 'right';
+}
+declare const TabMask: React.FC<TabMaskProps>;
+export default TabMask;

package/es/Tabs/TabMask.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useMemo, useRef } from "react";
+import clsx from "clsx";
+import { throttle } from "@bifrostui/utils";
+const rootClass = "bui-tabs";
+const TabMask = ({ tabsContainerRef, position }) => {
+  const maskRef = useRef(null);
+  const updateMaskOpacity = useMemo(
+    () => throttle(
+      () => {
+        const tabsEl = tabsContainerRef.current;
+        const mask = maskRef.current;
+        if (!tabsEl || !mask)
+          return;
+        const { scrollLeft, scrollWidth, offsetWidth } = tabsEl;
+        let shouldShow = false;
+        if (position === "left") {
+          shouldShow = scrollLeft > 0;
+        } else {
+          const rightRange = Math.abs(
+            scrollWidth - (scrollLeft + offsetWidth)
+          );
+          shouldShow = rightRange > 1;
+        }
+        mask.style.opacity = shouldShow ? "1" : "0";
+      },
+      100,
+      {
+        trailing: true,
+        leading: true
+      }
+    ),
+    [tabsContainerRef, position]
+  );
+  useEffect(() => {
+    const tabsEl = tabsContainerRef.current;
+    if (!tabsEl)
+      return void 0;
+    updateMaskOpacity();
+    tabsEl.addEventListener("scroll", updateMaskOpacity);
+    return () => {
+      tabsEl.removeEventListener("scroll", updateMaskOpacity);
+    };
+  }, [tabsContainerRef, updateMaskOpacity]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: maskRef,
+      className: clsx(`${rootClass}-mask`, `${rootClass}-mask-${position}`),
+      style: {
+        opacity: 0
+      },
+      "aria-hidden": "true"
+    }
+  );
+};
+var TabMask_default = TabMask;
+export {
+  TabMask_default as default
+};

package/es/Tabs/TabPanel.types.d.ts

@@ -1,5 +1,5 @@
 import { OverrideProps } from '@bifrostui/types';
-import React from 'react';
+import * as React from 'react';
 export type TabPanelProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
     props: P & {
         /**

package/es/Tabs/Tabs.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,7 +88,3 @@ xhs-page {
       var(--bui-color-bg-view),
       rgba(255, 255, 255, 0));
 }
-.bui-indicator-invisible {
-  visibility: hidden;
-  background-color: transparent;
-}

package/es/Tabs/Tabs.js

@@ -26,190 +26,115 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import clsx from "clsx";
-import { debounce, isMini, throttle, useEventCallback } from "@bifrostui/utils";
-import scrollLeftTo from "./utils/scroll";
+import { useValue, useEventCallback } from "@bifrostui/utils";
 import Tab from "./Tab";
+import TabIndicator from "./TabIndicator";
+import TabMask from "./TabMask";
 import { TabsContextProvider } from "./TabsContext";
+import { tabsRootClass } from "./classes";
 import "./Tabs.css";
-const prefixCls = "bui-tabs";
-const duration = 300;
 const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  const _a = props, { children, className, value, tabs = [], onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "onChange"]);
-  const tabsRef = useRef(null);
-  const activeLineRef = useRef(null);
-  const [indicatorData, setIndicatorData] = useState({
-    x: 0,
-    hasActiveTab: false
-  });
-  const [maskData, setMaskData] = useState({
-    leftMaskOpacity: 0,
-    rightMaskOpacity: 0
-  });
-  const getActiveTabElement = () => {
-    const tabsEl = tabsRef.current;
-    if (!tabsEl)
-      return;
-    const activeIndex = tabs.findIndex((item) => item.index === value);
-    if (tabs.length) {
-      return activeIndex > -1 ? tabsEl.childNodes[activeIndex + 1] : void 0;
+  const _a = props, {
+    children,
+    className,
+    value,
+    defaultValue,
+    tabs = [],
+    onChange
+  } = _a, others = __objRest(_a, [
+    "children",
+    "className",
+    "value",
+    "defaultValue",
+    "tabs",
+    "onChange"
+  ]);
+  const handleOnChange = useEventCallback(
+    (e, data) => {
+      onChange == null ? void 0 : onChange(e, { index: data.value });
     }
-    return [...tabsEl.childNodes].find((child) => {
-      var _a2, _b;
-      if (isMini) {
-        return [...(_b = (_a2 = child == null ? void 0 : child.classList) == null ? void 0 : _a2.tokenList) != null ? _b : []].includes(
-          "bui-tab-miniapp-active"
-        );
-      }
-      return [...child.classList].includes("bui-tab-active");
-    });
-  };
-  const scrollIntoView = () => {
-    const tabsEl = tabsRef.current;
-    const activeTab = getActiveTabElement();
-    if (!tabsEl || !activeTab) {
-      return;
+  );
+  const [currentValue, triggerValueChange] = useValue({
+    value,
+    defaultValue: defaultValue != null ? defaultValue : "",
+    onChange: handleOnChange,
+    config: {
+      name: "Tabs",
+      state: "value"
     }
-    const to = activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2;
-    scrollLeftTo(tabsEl, to, duration);
-  };
-  const animate = useEventCallback(() => {
-    const tabsEl = tabsRef.current;
-    if (!tabsEl)
-      return;
-    const activeLine = activeLineRef.current;
-    if (!activeLine)
-      return;
-    const activeTab = getActiveTabElement();
-    let activeTabLeft = 0;
-    let activeTabWidth = 0;
-    let containerWidth = 0;
-    let containerScrollWidth = 0;
-    let activeLineWidth = 0;
-    let x = 0;
-    if (activeTab) {
-      activeTabLeft = activeTab.offsetLeft;
-      activeTabWidth = activeTab.offsetWidth;
-      containerWidth = tabsEl.offsetWidth;
-      containerScrollWidth = tabsEl.scrollWidth;
-      activeLineWidth = activeLine.offsetWidth;
-      x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+  });
+  const tabsRef = useRef(null);
+  const registeredTabs = useRef(
+    {}
+  );
+  const [registrationVersion, setRegistrationVersion] = useState(0);
+  if (process.env.NODE_ENV !== "production") {
+    if (tabs.length > 0 && React.Children.count(children) > 0) {
+      console.warn(
+        "BUI Warning: Tabs \u7EC4\u4EF6\u4E0D\u5E94\u8BE5\u540C\u65F6\u4F7F\u7528 tabs \u5C5E\u6027\u548C children\u3002\u8BF7\u53EA\u4F7F\u7528\u5176\u4E2D\u4E00\u79CD\u65B9\u5F0F\u3002\u5F53\u524D\u5C06\u4F18\u5148\u4F7F\u7528 tabs \u5C5E\u6027\uFF0Cchildren \u5C06\u88AB\u5FFD\u7565\u3002"
+      );
     }
-    setIndicatorData({
-      x,
-      hasActiveTab: !!activeTab
-    });
-    const maxScrollDistance = containerScrollWidth - containerWidth;
-    if (maxScrollDistance <= 0 || !activeTab)
-      return;
-    if (!isMini) {
-      scrollIntoView();
+  }
+  const onRegister = useEventCallback(
+    (data) => {
+      if (data.value !== void 0 && data.value !== null) {
+        registeredTabs.current[data.value] = data.ref;
+        setRegistrationVersion((v) => v + 1);
+      }
     }
+  );
+  const onUnregister = useEventCallback((data) => {
+    delete registeredTabs.current[data.value];
+    setRegistrationVersion((v) => v + 1);
   });
-  const updateMask = useMemo(
-    () => throttle(
-      () => {
-        const tabsEl = tabsRef.current;
-        if (!tabsEl)
-          return;
-        const scrollLeft = tabsEl == null ? void 0 : tabsEl.scrollLeft;
-        const showLeftMask = scrollLeft > 0;
-        const rightRange = Math.abs(
-          tabsEl.scrollWidth - (scrollLeft + tabsEl.offsetWidth)
-        );
-        const showRightMask = rightRange > 1;
-        setMaskData({
-          leftMaskOpacity: showLeftMask ? 1 : 0,
-          rightMaskOpacity: showRightMask ? 1 : 0
-        });
-      },
-      100,
-      {
-        trailing: true,
-        leading: true
+  const handleClick = useEventCallback(
+    (e, item) => {
+      const { index, disabled = false } = item;
+      if (disabled || [void 0, null].includes(index))
+        return;
+      if (index !== currentValue) {
+        triggerValueChange(e, index);
       }
-    ),
-    []
-  );
-  useEffect(() => {
-    animate();
-  }, [value, tabs.length, React.Children.toArray(children).length]);
-  useEffect(() => {
-    updateMask();
-    const handleResize = debounce(() => {
-      animate();
-      updateMask();
-    }, 100);
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  const handleClick = (e, item) => {
-    const { index, disabled = false } = item;
-    if (disabled || [void 0, null].includes(index))
-      return;
-    if (index !== value) {
-      onChange == null ? void 0 : onChange(e, { index });
-    }
-  };
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: clsx(prefixCls, className) }, others), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: clsx(`${prefixCls}-mask`, `${prefixCls}-mask-left`),
-      style: {
-        opacity: maskData.leftMaskOpacity
-      },
-      "aria-hidden": "true"
     }
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: clsx(`${prefixCls}-mask`, `${prefixCls}-mask-right`),
-      style: {
-        opacity: maskData.rightMaskOpacity
-      },
-      "aria-hidden": "true"
+  );
+  const contextValue = useMemo(
+    () => ({
+      value: currentValue,
+      triggerChange: handleClick,
+      onRegister,
+      onUnregister
+    }),
+    [currentValue, handleClick, onRegister, onUnregister]
+  );
+  const renderedTabs = useMemo(() => {
+    if (tabs.length > 0) {
+      return tabs.map((item) => /* @__PURE__ */ React.createElement(Tab, { key: item.index, index: item == null ? void 0 : item.index, disabled: item == null ? void 0 : item.disabled }, item.title));
     }
-  ), /* @__PURE__ */ React.createElement(
+    return children;
+  }, [tabs, children]);
+  if (process.env.NODE_ENV !== "production") {
+    console.count("Tabs render......");
+  }
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: clsx(tabsRootClass, className) }, others), /* @__PURE__ */ React.createElement(TabMask, { tabsContainerRef: tabsRef, position: "left" }), /* @__PURE__ */ React.createElement(TabMask, { tabsContainerRef: tabsRef, position: "right" }), /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: `${prefixCls}-tabs`,
+      className: `${tabsRootClass}-tabs`,
       ref: tabsRef,
-      onScroll: updateMask,
       role: "tablist",
       "aria-orientation": "horizontal"
     },
     /* @__PURE__ */ React.createElement(
-      "div",
+      TabIndicator,
       {
-        ref: activeLineRef,
-        className: clsx(`${prefixCls}-indicator`, {
-          "bui-indicator-invisible": isMini || !indicatorData.hasActiveTab
-        }),
-        style: {
-          transition: "transform 0.3s ease-in-out",
-          transform: `translate(${indicatorData.x}px, 0px)`
-        },
-        "aria-hidden": "true"
+        currentValue,
+        registeredTabs,
+        tabsContainerRef: tabsRef,
+        registrationVersion
       }
     ),
-    /* @__PURE__ */ React.createElement(TabsContextProvider, { value: { value, triggerChange: handleClick } }, !!tabs.length && tabs.map((item) => {
-      return /* @__PURE__ */ React.createElement(
-        Tab,
-        {
-          key: item.index,
-          index: item == null ? void 0 : item.index,
-          disabled: item == null ? void 0 : item.disabled,
-          role: "tab",
-          "aria-selected": value === item.index,
-          "aria-disabled": item == null ? void 0 : item.disabled,
-          tabIndex: (item == null ? void 0 : item.disabled) ? -1 : 0
-        },
-        item.title
-      );
-    }), children)
+    /* @__PURE__ */ React.createElement(TabsContextProvider, { value: contextValue }, renderedTabs)
   ));
 });
 Tabs.displayName = "BuiTabs";

package/es/Tabs/Tabs.types.d.ts

@@ -1,10 +1,5 @@
 import React, { SyntheticEvent } from 'react';
 import { OverrideProps } from '@bifrostui/types';
-export interface TabHeaderItem {
-    title: React.ReactNode;
-    index: string;
-    disabled?: boolean;
-}
 export interface ITabsChangeData {
     /** 切换后的tab索引 */
     index: string;
@@ -19,9 +14,13 @@ export type ITabAlign = 'start' | 'center';
 export type TabsProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
     props: P & {
         /**
-         * 当前选中面板的索引值，与tabs.index对应
+         * 当前选中面板的索引值，与 ITabItem.index 对应
          */
         value?: string;
+        /**
+         * 默认选中面板的索引值（非受控模式）
+         */
+        defaultValue?: string;
         /**
          * 切换面板的数据
          */