@nutui/nutui-react-taro 2.0.0-alpha.7 → 2.0.0-alpha.8

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# v2.0.0-alpha.8
+`2023-05-12`
+* :sparkles:feat: cascader支持受控 (#1000) @xiaoyatong
+* :bug: fix: tabs children 变更后需要展示新的 title (#999) @oasis-cloud
+* 🛠 refactor: Range (#991) @Eiinu
+
 # v2.0.0-alpha.7
 `2023-05-12`
 * :bug: fix: tabs children 变化需要更新选中状态 @oasis-cloud

package/dist/esm/Audio.js

@@ -1,17 +1,18 @@
-import { A as Audio } from "./audio.taro-ec96ef80.js";
+import { A as Audio } from "./audio.taro-bbd39f93.js";
 import "react";
 import "@tarojs/taro";
 import "@nutui/icons-react-taro";
-import "./range.taro-52cda918.js";
+import "./range.taro-615e193a.js";
+import "classnames";
+import "@tarojs/components";
 import "./use-touch-ff43512c.js";
 import "./use-client-rect-f317804e.js";
-import "./toast.taro-92c10e1d.js";
-import "classnames";
+import "./typings-11d83a22.js";
+import "./use-props-value-7ac1b1b5.js";
+import "./button.taro-01eae688.js";
 import "./bem-cdccae08.js";
 import "@bem-react/classname";
 import "./configprovider.taro-25758d9f.js";
-import "./button.taro-01eae688.js";
-import "./typings-11d83a22.js";
 export {
   Audio as default
 };

package/dist/esm/Cascader.js

@@ -1,4 +1,4 @@
-import { C as Cascader } from "./cascader.taro-0a2694ed.js";
+import { C as Cascader } from "./cascader.taro-fb7a0230.js";
 import "react";
 import "classnames";
 import "./popup.taro-e756f3fc.js";
@@ -8,7 +8,7 @@ import "@nutui/icons-react-taro";
 import "@tarojs/components";
 import "./overlay.taro-75012bd3.js";
 import "./typings-11d83a22.js";
-import "./tabs.taro-b75f20ff.js";
+import "./tabs.taro-66164782.js";
 import "./tabpane.taro-f8d92ece.js";
 import "./use-props-value-7ac1b1b5.js";
 export {

package/dist/esm/ImagePreview.js

@@ -10,7 +10,7 @@ import "./overlay.taro-75012bd3.js";
 import "./typings-11d83a22.js";
 import "./swiper.taro-74cf9306.js";
 import "@tarojs/taro";
-import "./UserContext-735db09f.js";
+import "./UserContext-fde5badc.js";
 import "./bem-cdccae08.js";
 import "@bem-react/classname";
 import "./swiperitem-80df464a.js";

package/dist/esm/Range/style/index.js

@@ -1,2 +1,2 @@
-import '../../Toast/style'
+
 import '../../../packages/range/range.scss'

package/dist/esm/Range.js

@@ -1,13 +1,11 @@
-import { R as Range } from "./range.taro-52cda918.js";
+import { R as Range } from "./range.taro-615e193a.js";
 import "react";
+import "classnames";
+import "@tarojs/components";
 import "./use-touch-ff43512c.js";
 import "./use-client-rect-f317804e.js";
-import "./toast.taro-92c10e1d.js";
-import "classnames";
-import "@nutui/icons-react-taro";
-import "./bem-cdccae08.js";
-import "@bem-react/classname";
-import "./configprovider.taro-25758d9f.js";
+import "./typings-11d83a22.js";
+import "./use-props-value-7ac1b1b5.js";
 export {
   Range as default
 };

package/dist/esm/Step.js

@@ -1,7 +1,7 @@
 import { S as Step } from "./step.taro-3bc01c0c.js";
 import "react";
 import "classnames";
-import "./UserContext-fde5badc.js";
+import "./UserContext-735db09f.js";
 import "./bem-cdccae08.js";
 import "@bem-react/classname";
 import "./typings-11d83a22.js";

package/dist/esm/Steps.js

@@ -1,7 +1,7 @@
 import { S as Steps } from "./steps.taro-77e301ab.js";
 import "react";
 import "classnames";
-import "./UserContext-fde5badc.js";
+import "./UserContext-735db09f.js";
 import "./bem-cdccae08.js";
 import "@bem-react/classname";
 export {

package/dist/esm/Swiper.js

@@ -2,7 +2,7 @@ import { S as Swiper } from "./swiper.taro-74cf9306.js";
 import "react";
 import "classnames";
 import "@tarojs/taro";
-import "./UserContext-735db09f.js";
+import "./UserContext-fde5badc.js";
 import "./bem-cdccae08.js";
 import "@bem-react/classname";
 export {

package/dist/esm/SwiperItem.js

@@ -1,7 +1,7 @@
 import { S as SwiperItem } from "./swiperitem-80df464a.js";
 import "react";
 import "classnames";
-import "./UserContext-735db09f.js";
+import "./UserContext-fde5badc.js";
 import "./bem-cdccae08.js";
 import "@bem-react/classname";
 export {

package/dist/esm/Tabs.js

@@ -1,4 +1,4 @@
-import { T as Tabs } from "./tabs.taro-b75f20ff.js";
+import { T as Tabs } from "./tabs.taro-66164782.js";
 import "react";
 import "@tarojs/components";
 import "classnames";

package/dist/esm/{audio.taro-ec96ef80.js → audio.taro-bbd39f93.js}

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from "react";
 import { createInnerAudioContext } from "@tarojs/taro";
 import { Service } from "@nutui/icons-react-taro";
-import { R as Range } from "./range.taro-52cda918.js";
+import { R as Range } from "./range.taro-615e193a.js";
 import { B as Button } from "./button.taro-01eae688.js";
 import { c as cn } from "./bem-cdccae08.js";
 import { u as useConfig } from "./configprovider.taro-25758d9f.js";
@@ -148,7 +148,7 @@ const Audio = (props) => {
         React.createElement(
           "div",
           { className: b("progress-bar-wrapper") },
-          React.createElement(Range, { modelValue: percent, hiddenTag: true, hiddenRange: true, "inactive-color": "#cccccc", "active-color": "#fa2c19" })
+          React.createElement(Range, { value: percent, onChange: (val) => setPercent(val), currentDescription: null, maxDescription: null, minDescription: null, "inactive-color": "#cccccc", "active-color": "#fa2c19" })
         ),
         React.createElement("div", { className: "time" }, formatSeconds(`${totalSeconds}`) || "00:00:00")
       ),

package/dist/esm/{cascader.taro-0a2694ed.js → cascader.taro-fb7a0230.js}

@@ -7,9 +7,10 @@ var __publicField = (obj, key, value) => {
 import React, { isValidElement, useState, useEffect } from "react";
 import classNames from "classnames";
 import { P as Popup } from "./popup.taro-e756f3fc.js";
-import { T as Tabs } from "./tabs.taro-b75f20ff.js";
+import { T as Tabs } from "./tabs.taro-66164782.js";
 import { Loading, Checklist } from "@nutui/icons-react-taro";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
 const defaultProps$1 = {
   data: {
     text: "",
@@ -191,7 +192,6 @@ const defaultProps = {
   popup: true,
   visible: false,
   options: [],
-  value: [],
   title: "",
   optionKey: { textKey: "text", valueKey: "value", childrenKey: "children" },
   format: {},
@@ -206,14 +206,22 @@ const defaultProps = {
   onChange: () => {
   },
   onPathChange: () => {
-  },
-  ...Popup.defaultProps
+  }
 };
 const InternalCascader = (props, ref) => {
-  const { className, style, popup, visible, options, value, title, optionKey, format, closeable, closeIconPosition, closeIcon, lazy, onLoad, onClose, onChange, onPathChange } = { ...defaultProps, ...props };
+  const { className, style, popup, visible, options, value, defaultValue, title, optionKey, format, closeable, closeIconPosition, closeIcon, lazy, onLoad, onClose, onChange, onPathChange } = { ...defaultProps, ...props };
   const [tabvalue, setTabvalue] = useState("c1");
   const [optionsData, setOptionsData] = useState([]);
   const isLazy = () => state.configs.lazy && Boolean(state.configs.onLoad);
+  const [innerValue, setInnerValue] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: defaultValue,
+    onChange: (val) => {
+      var _a;
+      (_a = props.onChange) == null ? void 0 : _a.call(props, val);
+    }
+  });
   const [state] = useState({
     optionsData: [],
     panes: [
@@ -223,7 +231,6 @@ const InternalCascader = (props, ref) => {
         paneKey: ""
       }
     ],
-    innerValue: value,
     tree: new Tree$1([], {}),
     tabsCursor: 0,
     initLoading: false,
@@ -242,12 +249,12 @@ const InternalCascader = (props, ref) => {
   });
   useEffect(() => {
     initData();
-  }, [options]);
+  }, [options, format]);
   useEffect(() => {
-    if (value !== state.innerValue) {
-      state.innerValue = value;
+    if (defaultValue && defaultValue !== innerValue) {
+      setInnerValue(defaultValue);
     }
-  }, [value]);
+  }, [defaultValue]);
   const initData = async () => {
     state.lazyLoadMap.clear();
     if (format && Object.keys(format).length > 0) {
@@ -279,8 +286,8 @@ const InternalCascader = (props, ref) => {
     setOptionsData(state.panes);
   };
   const syncValue = async () => {
-    const currentValue = state.innerValue;
-    if (currentValue === void 0 || !state.tree.nodes.length) {
+    const currentValue = innerValue;
+    if (currentValue === void 0 || currentValue !== defaultValue || !state.tree.nodes.length) {
       return;
     }
     if (currentValue.length === 0) {
@@ -308,7 +315,7 @@ const InternalCascader = (props, ref) => {
         state.initLoading = false;
       }
     }
-    if (needToSync.length && currentValue === value) {
+    if (needToSync.length && currentValue === defaultValue) {
       const pathNodes = state.tree.getPathNodesByValue(needToSync);
       pathNodes.forEach((node, index) => {
         state.tabsCursor = index;
@@ -365,6 +372,7 @@ const InternalCascader = (props, ref) => {
         const optionParams = pathNodes.map((item) => item.value);
         onChange(optionParams, pathNodes);
         onPathChange(optionParams, pathNodes);
+        setInnerValue(optionParams);
       }
       setOptionsData(state.panes);
       close();

package/dist/esm/nutui-react.es.js

@@ -21,11 +21,11 @@ import { S as S4 } from "./subsidenavbar.taro-abe07673.js";
 import { T } from "./tabbar.taro-18eee41f.js";
 import { T as T2 } from "./tabbaritem.taro-89646ca1.js";
 import { T as T3 } from "./tabpane.taro-f8d92ece.js";
-import { T as T4 } from "./tabs.taro-b75f20ff.js";
+import { T as T4 } from "./tabs.taro-66164782.js";
 import { A } from "./address.taro-1c534feb.js";
 import { C as C5 } from "./calendar.taro-10a6cb11.js";
 import { C as C6 } from "./calendaritem.taro-3e5f114e.js";
-import { C as C7 } from "./cascader.taro-0a2694ed.js";
+import { C as C7 } from "./cascader.taro-fb7a0230.js";
 import { C as C8, a } from "./checkbox.taro-016074da.js";
 import { D as D2 } from "./datepicker.taro-3f718964.js";
 import { F as F2 } from "./form.taro-b06754e8.js";
@@ -37,7 +37,7 @@ import { M as M2 } from "./menuitem.taro-6076bffa.js";
 import { N as N2 } from "./numberkeyboard.taro-0a0e866a.js";
 import { P } from "./picker.taro-a5603921.js";
 import { R as R2, a as a2 } from "./radio.taro-3a54f4c8.js";
-import { R as R3 } from "./range.taro-52cda918.js";
+import { R as R3 } from "./range.taro-615e193a.js";
 import { R as R4 } from "./rate.taro-78c66969.js";
 import { S as S5 } from "./searchbar.taro-37ade36e.js";
 import { S as S6 } from "./shortpassword.taro-f7292032.js";
@@ -61,7 +61,7 @@ import { P as P4 } from "./popup.taro-e756f3fc.js";
 import { T as T6 } from "./toast.taro-92c10e1d.js";
 import { A as A3 } from "./animate.taro-c8b29242.js";
 import { A as A4 } from "./animatingnumbers.taro-c2a52dbd.js";
-import { A as A5 } from "./audio.taro-ec96ef80.js";
+import { A as A5 } from "./audio.taro-bbd39f93.js";
 import { A as A6 } from "./avatar.taro-01536aff.js";
 import { A as A7 } from "./avatargroup-ad5ffb46.js";
 import { C as C9 } from "./circleprogress.taro-7149e09d.js";
@@ -112,8 +112,8 @@ import "@use-gesture/react";
 import "@react-spring/web";
 import "react-dom";
 import "./context-d0fccf11.js";
-import "./UserContext-fde5badc.js";
 import "./UserContext-735db09f.js";
+import "./UserContext-fde5badc.js";
 export {
   A2 as ActionSheet,
   A as Address,

package/dist/esm/range.taro-615e193a.js

@@ -0,0 +1,259 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import classNames from "classnames";
+import { View } from "@tarojs/components";
+import { u as useTouch } from "./use-touch-ff43512c.js";
+import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  range: false,
+  min: 0,
+  max: 100,
+  step: 1,
+  vertical: false,
+  marks: {}
+};
+const Range = (props) => {
+  const { className, range, disabled, button, vertical, marks, onChange, onStart, onEnd, minDescription, maxDescription, currentDescription, min, max, step, value, defaultValue } = { ...defaultProps, ...props };
+  const classPrefix = "nut-range";
+  const [buttonIndex, setButtonIndex] = useState(0);
+  const [dragStatus, setDragStatus] = useState("start");
+  const touch = useTouch();
+  const root = useRef(null);
+  const [marksList, setMarksList] = useState([]);
+  const [startValue, setStartValue] = useState(0);
+  const handleChange = (value2) => {
+    onChange && onChange(value2);
+  };
+  const [current, setCurrent] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 0,
+    onChange: handleChange
+  });
+  const [exactValue, setEaxctValue] = useState(() => value || defaultValue || 0);
+  useEffect(() => {
+    if (marks) {
+      const marksKeys = Object.keys(marks);
+      const list = marksKeys.map(parseFloat).sort((a, b) => a - b).filter((point) => point >= min && point <= max);
+      setMarksList(list);
+    }
+  }, [marks]);
+  const scope = () => {
+    return max - min;
+  };
+  const classes = classNames(classPrefix, {
+    [`${classPrefix}-disabled`]: disabled,
+    [`${classPrefix}-vertical`]: vertical
+  });
+  const containerClasses = classNames(`${classPrefix}-container`, className, {
+    [`${classPrefix}-container-vertical`]: vertical
+  });
+  const markClassName = useCallback((mark) => {
+    const classPrefix2 = "nut-range-mark";
+    let lowerBound = min;
+    let upperBound = max;
+    if (range && Array.isArray(current)) {
+      lowerBound = current[0];
+      upperBound = current[1];
+    } else {
+      upperBound = current;
+    }
+    const isActive = mark <= upperBound && mark >= lowerBound;
+    return [
+      `${classPrefix2}-text`,
+      `${isActive ? `${classPrefix2}-text-active` : ""}`
+    ].join(" ");
+  }, [range, current, min, max]);
+  const isRange = (val) => {
+    return !!range && Array.isArray(val);
+  };
+  const calcMainAxis = () => {
+    const modelVal = current;
+    if (isRange(modelVal)) {
+      return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
+    }
+    return `${(modelVal - min) * 100 / scope()}%`;
+  };
+  const calcOffset = () => {
+    const modelVal = current;
+    if (isRange(modelVal)) {
+      return `${(modelVal[0] - min) * 100 / scope()}%`;
+    }
+    return `0%`;
+  };
+  const barStyle = () => {
+    if (vertical) {
+      return {
+        height: calcMainAxis(),
+        top: calcOffset(),
+        transition: dragStatus ? "none" : void 0
+      };
+    }
+    return {
+      width: calcMainAxis(),
+      left: calcOffset(),
+      transition: dragStatus ? "none" : void 0
+    };
+  };
+  const marksStyle = (mark) => {
+    let style = {
+      left: `${(mark - min) / scope() * 100}%`
+    };
+    if (vertical) {
+      style = {
+        top: `${(mark - min) / scope() * 100}%`
+      };
+    }
+    return style;
+  };
+  const tickClass = (mark) => {
+    if (range && Array.isArray(current)) {
+      return mark <= current[1] && mark >= current[0];
+    }
+    return mark <= current;
+  };
+  const format = (value2) => {
+    value2 = Math.max(+min, Math.min(value2, +max));
+    return Math.round(value2 / +step) * +step;
+  };
+  const isSameValue = (newValue, oldValue) => {
+    return JSON.stringify(newValue) === JSON.stringify(oldValue);
+  };
+  const handleOverlap = (value2) => {
+    if (value2[0] > value2[1]) {
+      return value2.slice(0).reverse();
+    }
+    return value2;
+  };
+  const updateValue = (value2, end) => {
+    if (isRange(value2)) {
+      value2 = handleOverlap(value2).map(format);
+    } else {
+      value2 = format(value2);
+    }
+    if (!isSameValue(value2, current)) {
+      setCurrent(value2);
+    }
+    end && onEnd && onEnd(value2);
+  };
+  const click = async (event) => {
+    if (disabled || !root.current) {
+      return;
+    }
+    setDragStatus("");
+    const rect = await getRectByTaro(root.current);
+    let delta = (event.detail.x ? event.detail.x : event.clientX) - rect.left;
+    let total = rect.width;
+    if (vertical) {
+      delta = (event.detail.y ? event.detail.y : event.clientY) - rect.top;
+      total = rect.height;
+    }
+    const value2 = min + delta / total * scope();
+    setEaxctValue(current);
+    if (isRange(current)) {
+      const [left, right] = current;
+      const middle = (left + right) / 2;
+      if (value2 <= middle) {
+        updateValue([value2, right], true);
+      } else {
+        updateValue([left, value2], true);
+      }
+    } else {
+      updateValue(value2, true);
+    }
+  };
+  const onTouchStart = (event) => {
+    if (disabled) {
+      return;
+    }
+    touch.start(event);
+    setEaxctValue(current);
+    if (isRange(current)) {
+      setStartValue(current.map(format));
+    } else {
+      setStartValue(format(current));
+    }
+    setDragStatus("start");
+  };
+  const onTouchMove = async (event) => {
+    if (disabled || !root.current) {
+      return;
+    }
+    if (dragStatus === "start") {
+      onStart && onStart();
+    }
+    touch.move(event);
+    setDragStatus("draging");
+    const rect = await getRectByTaro(root.current);
+    let delta = touch.deltaX;
+    let total = rect.width;
+    let diff = delta / total * scope();
+    if (vertical) {
+      delta = touch.deltaY;
+      total = rect.height;
+      diff = delta / total * scope();
+    }
+    let newValue;
+    if (isRange(startValue)) {
+      newValue = exactValue.slice();
+      newValue[buttonIndex] = startValue[buttonIndex] + diff;
+    } else {
+      newValue = startValue + diff;
+    }
+    setEaxctValue(newValue);
+    updateValue(newValue);
+  };
+  const onTouchEnd = (event) => {
+    if (disabled) {
+      return;
+    }
+    if (dragStatus === "draging") {
+      updateValue(current, true);
+    }
+    setDragStatus("");
+  };
+  const curValue = (idx) => {
+    const modelVal = current;
+    const value2 = typeof idx === "number" ? modelVal[idx] : modelVal;
+    return value2;
+  };
+  const renderButton = (index) => {
+    return React.createElement(React.Fragment, null, button || React.createElement("div", { className: "nut-range-button" }, currentDescription !== null && React.createElement("div", { className: "number" }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
+  };
+  return React.createElement(
+    "div",
+    { className: containerClasses },
+    minDescription !== null && React.createElement("div", { className: "min" }, minDescription || min),
+    React.createElement(
+      "div",
+      { ref: root, className: classes, onClick: (e) => click(e) },
+      marksList.length > 0 && React.createElement("div", { className: "nut-range-mark" }, marksList.map((marks2) => {
+        return React.createElement(
+          "span",
+          { key: marks2, className: markClassName(marks2), style: marksStyle(marks2) },
+          marks2,
+          React.createElement("span", { className: classNames("nut-range-tick", {
+            active: tickClass(marks2)
+          }) })
+        );
+      })),
+      React.createElement("div", { className: "nut-range-bar", style: barStyle() }, range ? [0, 1].map((item, index) => {
+        return React.createElement("div", { key: index, className: `${index === 0 ? "nut-range-button-wrapper-left" : ""}
+                  ${index === 1 ? "nut-range-button-wrapper-right" : ""}`, onTouchStart: (e) => {
+          if (typeof index === "number") {
+            setButtonIndex(index);
+          }
+          onTouchStart(e);
+        }, onTouchMove: (e) => onTouchMove(e), onTouchEnd: (e) => onTouchEnd(), onTouchCancel: (e) => onTouchEnd(), onClick: (e) => e.stopPropagation() }, renderButton(index));
+      }) : React.createElement(View, { catchMove: true, className: "nut-range-button-wrapper", onTouchStart: (e) => onTouchStart(e), onTouchMove: (e) => onTouchMove(e), onTouchEnd: (e) => onTouchEnd(), onTouchCancel: (e) => onTouchEnd(), onClick: (e) => e.stopPropagation() }, renderButton()))
+    ),
+    maxDescription !== null && React.createElement("div", { className: "max" }, maxDescription || max)
+  );
+};
+Range.defaultProps = defaultProps;
+Range.displayName = "NutRange";
+export {
+  Range as R
+};

package/dist/esm/step.taro-3bc01c0c.js

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import classNames from "classnames";
-import { D as DataContext } from "./UserContext-fde5badc.js";
+import { D as DataContext } from "./UserContext-735db09f.js";
 import { c as cn } from "./bem-cdccae08.js";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 const defaultProps = {

package/dist/esm/steps.taro-77e301ab.js

@@ -1,6 +1,6 @@
 import React from "react";
 import classNames from "classnames";
-import { D as DataContext } from "./UserContext-fde5badc.js";
+import { D as DataContext } from "./UserContext-735db09f.js";
 import { c as cn } from "./bem-cdccae08.js";
 const defaultProps = {
   current: 0,

package/dist/esm/swiper.taro-74cf9306.js

@@ -1,7 +1,7 @@
 import React, { useRef, useState, useMemo, useEffect } from "react";
 import classNames from "classnames";
 import { nextTick, useReady, createSelectorQuery } from "@tarojs/taro";
-import { D as DataContext } from "./UserContext-735db09f.js";
+import { D as DataContext } from "./UserContext-fde5badc.js";
 import { c as cn } from "./bem-cdccae08.js";
 const defaultProps = {
   width: typeof window === "object" ? window.innerWidth : 375,

package/dist/esm/swiperitem-80df464a.js

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import classNames from "classnames";
-import { D as DataContext } from "./UserContext-735db09f.js";
+import { D as DataContext } from "./UserContext-fde5badc.js";
 import { c as cn } from "./bem-cdccae08.js";
 const defaultProps = {
   direction: "horizontal"

package/dist/esm/{tabs.taro-b75f20ff.js → tabs.taro-66164782.js}

@@ -5,6 +5,10 @@ import { JoySmile } from "@nutui/icons-react-taro";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 import { T as TabPane } from "./tabpane.taro-f8d92ece.js";
 import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+function useForceUpdate() {
+  const [, updateState] = React.useState();
+  return React.useCallback(() => updateState({}), []);
+}
 const defaultProps = {
   ...ComponentDefaults,
   tabStyle: {},
@@ -46,6 +50,7 @@ const Tabs = (props) => {
     return titles2;
   };
   const titles = useRef(getTitles());
+  const forceUpdate = useForceUpdate();
   useEffect(() => {
     titles.current = getTitles();
     let current = "";
@@ -54,8 +59,10 @@ const Tabs = (props) => {
         current = value;
       }
     });
-    if (current !== "") {
+    if (current !== "" && current !== value) {
       setValue(current);
+    } else {
+      forceUpdate();
     }
   }, [children]);
   const classes = classNames(classPrefix, `${classPrefix}--${direction}`, className);

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.7 Fri May 12 2023 15:37:20 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.8 Fri May 12 2023 19:09:29 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.7 Fri May 12 2023 15:37:20 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.8 Fri May 12 2023 19:09:29 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.7 Fri May 12 2023 15:37:20 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.8 Fri May 12 2023 19:09:29 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.7 Fri May 12 2023 15:37:20 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.8 Fri May 12 2023 19:09:29 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.7 Fri May 12 2023 15:37:20 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.8 Fri May 12 2023 19:09:29 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */