@bifrostui/react 1.4.5-beta.3 → 1.4.5

package/es/Tabs/Tabs.js

@@ -26,31 +26,44 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { debounce, isMini, throttle, useEventCallback } from "@bifrostui/utils";
+import {
+  debounce,
+  isMini,
+  throttle,
+  useDidMountEffect
+} from "@bifrostui/utils";
 import clsx from "clsx";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import Tab from "./Tab";
 import { TabsContextProvider } from "./TabsContext";
 import bound from "./utils/bound";
 import "./Tabs.css";
 const prefixCls = "bui-tabs";
 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 _a = props, { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
+  const [active, setActive] = useState("");
   const tabsRef = useRef(null);
   const activeLineRef = useRef(null);
-  const [indicatorData, setIndicatorData] = useState({
+  const [lineData, setLineData] = useState({
     x: 0,
+    transitionInUse: false,
     hasActiveTab: false
   });
   const [maskData, setMaskData] = useState({
     leftMaskOpacity: 0,
     rightMaskOpacity: 0
   });
-  const animate = useEventCallback(() => {
+  const animate = ({ transitionInUse }) => {
     const container = tabsRef.current;
     if (!container)
       return;
-    const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === value);
+    const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === active);
     const activeLine = activeLineRef.current;
     if (!activeLine)
       return;
@@ -81,8 +94,9 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
       activeLineWidth = activeLine.offsetWidth;
       x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
     }
-    setIndicatorData({
+    setLineData({
       x,
+      transitionInUse,
       hasActiveTab: !!activeTab
     });
     const maxScrollDistance = containerScrollWidth - containerWidth;
@@ -96,7 +110,26 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     if (tabsRef.current) {
       tabsRef.current.scrollLeft = nextScrollLeft;
     }
-  });
+  };
+  useEffect(() => {
+    setActive(value);
+  }, [value]);
+  useLayoutEffect(() => {
+    animate({ transitionInUse: false });
+  }, []);
+  useEffect(() => {
+    const handleResize = debounce(() => {
+      animate({ transitionInUse: true });
+      updateMask();
+    }, 100);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [active]);
+  useDidMountEffect(() => {
+    animate({ transitionInUse: true });
+  }, [active, tabs, children]);
   const updateMask = useMemo(
     () => throttle(
       () => {
@@ -119,20 +152,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     ),
     []
   );
-  useEffect(() => {
-    animate();
-  }, [value]);
-  useEffect(() => {
-    const handleResize = debounce(() => {
-      animate();
-      updateMask();
-    }, 100);
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  useEffect(() => {
+  useLayoutEffect(() => {
     updateMask();
   }, []);
   const handleClick = (e, item) => {
@@ -142,13 +162,16 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     if (index === void 0 || index === null) {
       return;
     }
+    if (active !== value) {
+      setActive(index);
+    }
     if (index !== value) {
       onChange == null ? void 0 : onChange(e, { index });
     }
   };
   const providerValue = useMemo(() => {
-    return { value, triggerChange: handleClick };
-  }, [value, children, handleClick]);
+    return { value, align, triggerChange: handleClick };
+  }, [value, align, children, handleClick]);
   return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: clsx(prefixCls, className) }, others), /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -169,12 +192,12 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "div",
     {
       ref: activeLineRef,
-      className: clsx(`${prefixCls}-indicator`, {
-        "bui-indicator-invisible": isMini || !indicatorData.hasActiveTab
+      className: clsx(`${prefixCls}-tabline`, {
+        "bui-tabline-invisible": isMini || !lineData.hasActiveTab
       }),
       style: {
-        transition: "transform 0.3s ease-in-out",
-        transform: `translate3d(${indicatorData.x}px, 0px, 0px)`
+        transition: lineData.transitionInUse ? "transform 0.25s ease-in-out" : void 0,
+        transform: `translate3d(${lineData.x}px, 0px, 0px)`
       }
     }
   ), /* @__PURE__ */ React.createElement(TabsContextProvider, { value: providerValue }, !!tabs.length && tabs.map((item) => {
@@ -190,6 +213,10 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   }), children)));
 });
 Tabs.displayName = "BuiTabs";
+Tabs.defaultProps = {
+  align: "center",
+  tabs: []
+};
 var Tabs_default = Tabs;
 export {
   Tabs_default as default

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

@@ -3,6 +3,9 @@ import React, { SyntheticEvent } from 'react';
 export interface TabHeaderItem {
     title: React.ReactNode;
     index: string;
+    /**
+     * 是否禁止点击
+     */
     disabled?: boolean;
 }
 export interface ITabsChangeData {
@@ -11,8 +14,11 @@ export interface ITabsChangeData {
 }
 export type TabChangeEvent = (e?: SyntheticEvent, data?: ITabsChangeData) => void;
 export interface ITabItem {
+    /** 面板标题 */
     title: React.ReactNode;
+    /** 面板的索引值 */
     index: string;
+    /** 面板是否禁用 */
     disabled?: boolean;
 }
 export type ITabAlign = 'start' | 'center';
@@ -26,6 +32,10 @@ export type TabsProps<D extends React.ElementType = 'div', P = {}> = OverridePro
          * 切换面板的数据
          */
         tabs?: ITabItem[];
+        /**
+         * 对齐方式，默认为center
+         */
+        align?: ITabAlign;
         /**
          * 切换面板的回调
          */

package/es/Tag/Tag.css

@@ -47,7 +47,7 @@
   border: 1px solid var(--bui-color-border-danger);
 }
 .bui-tag-outlined.bui-tag-vip {
-  color: var(--bui-color-primary);
+  color: var(--bui-color-red);
   border: 1px solid var(--bui-color-border-primary);
 }
 .bui-tag-contained {

package/es/Tag/Tag.js

@@ -47,9 +47,9 @@ const Tag = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     className,
     style,
-    color = "default",
+    color,
     htmlColor,
-    variant = "outlined",
+    variant,
     onClick,
     children
   } = _a, others = __objRest(_a, [
@@ -98,6 +98,10 @@ const Tag = /* @__PURE__ */ React.forwardRef((props, ref) => {
   );
 });
 Tag.displayName = "BuiTag";
+Tag.defaultProps = {
+  variant: "outlined",
+  color: "default"
+};
 var Tag_default = Tag;
 export {
   Tag_default as default

package/es/TextArea/TextArea.js

@@ -40,17 +40,17 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
     const _a = props, {
       className,
       value,
-      defaultValue = "",
+      defaultValue,
       textareaProps,
       textareaRef,
       name,
       placeholder,
       disabled,
-      rows = DEFAULT_ROWS,
+      rows,
       maxLength,
-      autoSize = false,
-      autoFocus = false,
-      showCount = false,
+      autoSize,
+      autoFocus,
+      showCount,
       onChange
     } = _a, others = __objRest(_a, [
       "className",
@@ -175,6 +175,13 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
   }
 );
 TextArea.displayName = "BuiTextArea";
+TextArea.defaultProps = {
+  defaultValue: "",
+  rows: DEFAULT_ROWS,
+  autoSize: false,
+  autoFocus: false,
+  showCount: false
+};
 var TextArea_default = TextArea;
 export {
   TextArea_default as default

package/es/Tooltip/Tooltip.css

@@ -1,6 +1,6 @@
 .bui-tooltip {
   --arrow-size: var(--bui-tooltip-arrow-size, 8PX);
-  --location-position: var(--bui-tooltip-location-position, 8PX);
+  --localtion-position: var(--bui-tooltip-localtion-position, 8PX);
   --max-width: var(--bui-tooltip-max-width, 350px);
   --content-min-width: var(--bui-tooltip-content-min-width, 30px);
   --content-min-height: var(--bui-tooltip-content-min-height, 32px);
@@ -17,16 +17,16 @@
   position: absolute;
 }
 .bui-tooltip .bui-tooltip-arrow.location-left {
-  left: var(--location-position);
+  left: var(--localtion-position);
 }
 .bui-tooltip .bui-tooltip-arrow.location-right {
-  right: var(--location-position);
+  right: var(--localtion-position);
 }
 .bui-tooltip .bui-tooltip-arrow.location-top {
-  top: var(--location-position);
+  top: var(--localtion-position);
 }
 .bui-tooltip .bui-tooltip-arrow.location-bottom {
-  bottom: var(--location-position);
+  bottom: var(--localtion-position);
 }
 .bui-tooltip.tooltip-top .location-center,
 .bui-tooltip.tooltip-bottom .location-center {

package/es/Transition/TransitionCore.js

@@ -59,8 +59,8 @@ const TransitionCore = forwardRef(
       children,
       mountOnEnter,
       unmountOnExit,
-      enter = true,
-      exit = true,
+      enter,
+      exit,
       timeout: _timeout,
       delay: _delay,
       onEnter,
@@ -69,7 +69,7 @@ const TransitionCore = forwardRef(
       onExit,
       onExiting,
       onExited,
-      nextTick = setTimeout
+      nextTick
     } = _a, childProps = __objRest(_a, [
       "appear",
       "in",
@@ -224,6 +224,11 @@ const TransitionCore = forwardRef(
   }
 );
 TransitionCore.displayName = "BuiTransitionCore";
+TransitionCore.defaultProps = {
+  enter: true,
+  exit: true,
+  nextTick: setTimeout
+};
 var TransitionCore_default = TransitionCore;
 export {
   TransitionCore_default as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "1.4.5-beta.3",
+  "version": "1.4.5",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -30,13 +30,13 @@
     "glob": "11.0.0"
   },
   "dependencies": {
-    "clsx": "^2.1.1",
+    "clsx": "^1.2.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/icons": "1.4.5-beta.3",
-    "@bifrostui/types": "1.4.5-beta.3",
-    "@bifrostui/utils": "1.4.5-beta.3",
-    "@bifrostui/styles": "1.4.5-beta.3"
+    "@bifrostui/utils": "1.4.5",
+    "@bifrostui/icons": "1.4.5",
+    "@bifrostui/styles": "1.4.5",
+    "@bifrostui/types": "1.4.5"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",