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

package/es/Tabs/TabIndicator.js

@@ -0,0 +1,156 @@
+import React, { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { debounce, isMini, useEventCallback } from "@bifrostui/utils";
+import scrollLeftTo from "./utils/scroll";
+import { tabIndicatorClass } from "./classes";
+const duration = 300;
+const DEFAULT_INDICATOR_WIDTH = 24;
+const TabIndicator = ({
+  currentValue,
+  registeredTabs,
+  tabsContainerRef
+}) => {
+  const indicatorRef = useRef(null);
+  const hasRenderedOnce = useRef(false);
+  const [indicatorStyle, setIndicatorStyle] = useState(
+    null
+  );
+  const getActiveTabElement = useEventCallback(
+    (activeValue) => {
+      const tabRef = registeredTabs.current[activeValue];
+      return tabRef == null ? void 0 : tabRef.current;
+    }
+  );
+  const scrollIntoView = useEventCallback(
+    (activeTab, animate = true) => {
+      const tabsEl = tabsContainerRef.current;
+      if (!tabsEl || !activeTab) {
+        return;
+      }
+      scrollLeftTo(
+        tabsEl,
+        activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
+        animate ? duration : 0
+      );
+    }
+  );
+  const getIndicatorWidth = useEventCallback(() => {
+    const indicator = indicatorRef.current;
+    if (!indicator)
+      return DEFAULT_INDICATOR_WIDTH;
+    const rect = indicator.getBoundingClientRect();
+    return rect.width > 0 ? rect.width : DEFAULT_INDICATOR_WIDTH;
+  });
+  const getTabsMeta = useEventCallback(() => {
+    const tabsNode = tabsContainerRef.current;
+    let tabsMeta = null;
+    if (tabsNode) {
+      const rect = tabsNode.getBoundingClientRect();
+      tabsMeta = {
+        clientWidth: tabsNode.clientWidth,
+        scrollLeft: tabsNode.scrollLeft,
+        scrollWidth: tabsNode.scrollWidth,
+        left: rect.left
+      };
+    }
+    let tabMeta = null;
+    const activeTab = getActiveTabElement(currentValue);
+    if (activeTab) {
+      tabMeta = activeTab.getBoundingClientRect();
+    }
+    return { tabsMeta, tabMeta };
+  });
+  const updateIndicatorState = useEventCallback(() => {
+    const { tabsMeta, tabMeta } = getTabsMeta();
+    if (!tabMeta || !tabsMeta) {
+      setIndicatorStyle(null);
+      return;
+    }
+    const tabLeft = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft;
+    const tabWidth = tabMeta.width;
+    const indicatorWidth = getIndicatorWidth();
+    const leftPosition = tabLeft + (tabWidth - indicatorWidth) / 2;
+    const newIndicatorStyle = {
+      left: leftPosition
+    };
+    if (indicatorStyle === null) {
+      setIndicatorStyle(newIndicatorStyle);
+    } else {
+      const dLeft = Math.abs(indicatorStyle.left - newIndicatorStyle.left);
+      if (dLeft >= 1) {
+        setIndicatorStyle(newIndicatorStyle);
+      }
+    }
+    const activeTab = getActiveTabElement(currentValue);
+    if (activeTab) {
+      const maxScrollDistance = tabsMeta.scrollWidth - tabsMeta.clientWidth;
+      if (maxScrollDistance > 0 && !isMini) {
+        scrollIntoView(activeTab, hasRenderedOnce.current);
+      }
+      hasRenderedOnce.current = true;
+    }
+  });
+  useEffect(() => {
+    updateIndicatorState();
+  });
+  useEffect(() => {
+    const tabsContainer = tabsContainerRef.current;
+    if (!tabsContainer)
+      return void 0;
+    const handleResize = debounce(() => {
+      if (tabsContainerRef.current) {
+        updateIndicatorState();
+      }
+    }, 100);
+    window.addEventListener("resize", handleResize);
+    let resizeObserver;
+    let mutationObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(handleResize);
+      Array.from(tabsContainer.children).forEach((child) => {
+        resizeObserver == null ? void 0 : resizeObserver.observe(child);
+      });
+    }
+    if (typeof MutationObserver !== "undefined") {
+      const handleMutation = (records) => {
+        records.forEach((record) => {
+          record.removedNodes.forEach((item) => {
+            if (item instanceof Element) {
+              resizeObserver == null ? void 0 : resizeObserver.unobserve(item);
+            }
+          });
+          record.addedNodes.forEach((item) => {
+            if (item instanceof Element) {
+              resizeObserver == null ? void 0 : resizeObserver.observe(item);
+            }
+          });
+        });
+        handleResize();
+      };
+      mutationObserver = new MutationObserver(handleMutation);
+      mutationObserver.observe(tabsContainer, { childList: true });
+    }
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      mutationObserver == null ? void 0 : mutationObserver.disconnect();
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    };
+  }, [updateIndicatorState, tabsContainerRef]);
+  if (!indicatorStyle) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: indicatorRef,
+      className: clsx(tabIndicatorClass),
+      style: indicatorStyle,
+      "aria-hidden": "true"
+    }
+  );
+};
+TabIndicator.displayName = "BuiTabsIndicator";
+var TabIndicator_default = TabIndicator;
+export {
+  TabIndicator_default as default
+};

package/es/Tabs/TabMask.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface TabMaskProps {
+    /** 位置：左侧或右侧 */
+    position: 'left' | 'right';
+}
+declare const _default: React.NamedExoticComponent<TabMaskProps>;
+export default _default;

package/es/Tabs/TabMask.js

@@ -0,0 +1,18 @@
+import React from "react";
+import clsx from "clsx";
+import { tabMaskClass, tabMaskLeftClass, tabMaskRightClass } from "./classes";
+const TabMask = ({ position }) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: clsx(
+      tabMaskClass,
+      position === "left" ? tabMaskLeftClass : tabMaskRightClass
+    ),
+    "aria-hidden": "true"
+  }
+);
+TabMask.displayName = "BuiTabsMask";
+var TabMask_default = /* @__PURE__ */ React.memo(TabMask);
+export {
+  TabMask_default as default
+};

package/es/Tabs/TabPanel.js

@@ -28,8 +28,12 @@ var __objRest = (source, exclude) => {
 };
 import React, { forwardRef } from "react";
 import clsx from "clsx";
+import {
+  tabPanelRootClass,
+  tabPanelActiveClass,
+  tabPanelInactiveClass
+} from "./classes";
 import "./TabPanel.css";
-const prefixCls = "bui-tabpanel";
 const TabPanel = forwardRef((props, ref) => {
   const _a = props, {
     className,
@@ -53,9 +57,9 @@ const TabPanel = forwardRef((props, ref) => {
       "aria-hidden": !isActive,
       tabIndex: 0,
       ref,
-      className: clsx(prefixCls, className, {
-        [`${prefixCls}-active`]: isActive,
-        [`${prefixCls}-inactive`]: !isActive
+      className: clsx(tabPanelRootClass, className, {
+        [tabPanelActiveClass]: isActive,
+        [tabPanelInactiveClass]: !isActive
       })
     }, others),
     isActive ? children : keepActiveDom

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

@@ -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,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);
   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;
+  transition: left 0.3s ease-in-out;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -74,7 +87,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

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -28,188 +31,127 @@ var __objRest = (source, exclude) => {
 };
 import React, { useEffect, 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, tabsScrollClass } 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,
+    defaultValue,
+    value,
+    tabs = [],
+    onChange
+  } = _a, others = __objRest(_a, [
+    "children",
+    "className",
+    "defaultValue",
+    "value",
+    "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);
+  const [isScrollable, setIsScrollable] = useState(false);
+  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);
       }
-    ),
-    []
+    }
   );
+  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));
+    }
+    return children;
+  }, [tabs, children]);
   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 tabsEl = tabsRef.current;
+    if (!tabsEl)
+      return void 0;
+    const checkScrollable = () => {
+      setIsScrollable(tabsEl.scrollWidth > tabsEl.offsetWidth);
     };
-  }, []);
-  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 });
+    checkScrollable();
+    if (typeof ResizeObserver === "undefined") {
+      return void 0;
     }
-  };
-  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"
-    }
-  ), /* @__PURE__ */ React.createElement(
+    const resizeObserver = new ResizeObserver(checkScrollable);
+    resizeObserver.observe(tabsEl);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [registrationVersion]);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({ className: clsx(tabsRootClass, className) }, others), { ref }), isScrollable && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TabMask, { position: "left" }), /* @__PURE__ */ React.createElement(TabMask, { position: "right" })), /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: `${prefixCls}-tabs`,
+      className: tabsScrollClass,
       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
       }
     ),
-    /* @__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;
         /**
          * 切换面板的数据
          */

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,13 @@
+export declare const tabsRootClass = "bui-tabs";
+export declare const tabRootClass = "bui-tab";
+export declare const tabPanelRootClass = "bui-tabpanel";
+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;
+export declare const tabPanelActiveClass: string;
+export declare const tabPanelInactiveClass: string;