@nutui/nutui-react-taro 2.3.9 → 2.3.11

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v2.3.9 Fri Feb 02 2024 16:15:32 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.3.11 Fri Feb 23 2024 19:40:58 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -4050,7 +4050,7 @@ var __publicField = (obj, key, value) => {
       }
     }, []);
     Taro.usePageScroll((res) => {
-      if (Taro.getEnv() === "WEAPP") {
+      if (Taro.getEnv() !== "WEB") {
         handleScroll(res.scrollTop);
       }
     });
@@ -4113,7 +4113,7 @@ var __publicField = (obj, key, value) => {
         duration: duration > 0 ? duration : 0
       });
     };
-    const styles = style ? {
+    const styles = Object.keys(style || {}).length !== 0 ? {
       zIndex,
       ...style
     } : {
@@ -5358,7 +5358,7 @@ var __publicField = (obj, key, value) => {
             onClick: (e2) => {
               tabChange(item);
             },
-            className: classNames(`${classPrefix$k}-titles-item taro`, {
+            className: classNames(`${classPrefix$k}-titles-item`, {
               [`nut-tabs-titles-item-active`]: !item.disabled && String(item.value) === String(value),
               [`nut-tabs-titles-item-disabled`]: item.disabled,
               [`nut-tabs-titles-item-${align}`]: align
@@ -9768,6 +9768,7 @@ var __publicField = (obj, key, value) => {
     constructor() {
       // 初始化数据
       __publicField(this, "initialValues", {});
+      __publicField(this, "updateList", []);
       // 存放表单中所有的数据 eg. {password: "ddd",username: "123"}
       __publicField(this, "store", {});
       // 所有的组件实例
@@ -9837,6 +9838,15 @@ var __publicField = (obj, key, value) => {
             }
           });
         });
+        this.updateList.forEach((item) => {
+          let shouldUpdate = item.condition;
+          if (typeof item.condition === "function") {
+            shouldUpdate = item.condition();
+          }
+          if (shouldUpdate) {
+            item.entity.onStoreChange("update");
+          }
+        });
       });
       __publicField(this, "setCallback", (callback) => {
         this.callbacks = {
@@ -9884,9 +9894,11 @@ var __publicField = (obj, key, value) => {
           );
         }
         const errs = [];
-        filterEntities.forEach((entity) => {
-          this.validateEntities(entity, errs);
-        });
+        await Promise.all(
+          filterEntities.map(async (entity) => {
+            await this.validateEntities(entity, errs);
+          })
+        );
         return errs;
       });
       __publicField(this, "submit", async () => {
@@ -9905,6 +9917,16 @@ var __publicField = (obj, key, value) => {
           entity.onStoreChange("reset");
         });
       });
+      // 监听事件
+      __publicField(this, "registerUpdate", (field, shouldUpdate) => {
+        this.updateList.push({
+          entity: field,
+          condition: shouldUpdate
+        });
+        return () => {
+          this.updateList = this.updateList.filter((i2) => i2.entity !== field);
+        };
+      });
       __publicField(this, "dispatch", ({ name }) => {
         this.validateFields([name]);
       });
@@ -9916,7 +9938,8 @@ var __publicField = (obj, key, value) => {
             setInitialValues: this.setInitialValues,
             dispatch: this.dispatch,
             store: this.store,
-            fieldEntities: this.fieldEntities
+            fieldEntities: this.fieldEntities,
+            registerUpdate: this.registerUpdate
           };
         }
       });
@@ -10047,13 +10070,16 @@ var __publicField = (obj, key, value) => {
     label: "",
     rules: [{ required: false, message: "" }],
     errorMessageAlign: "left",
-    validateTrigger: "onChange"
+    validateTrigger: "onChange",
+    shouldUpdate: false,
+    noStyle: false
   };
   class FormItem extends React.Component {
     constructor(props) {
       super(props);
       __publicField(this, "cancelRegister");
       __publicField(this, "componentRef");
+      __publicField(this, "eventOff");
       // children添加value属性和onChange事件
       __publicField(this, "getControlled", (children) => {
         var _a;
@@ -10127,7 +10153,6 @@ var __publicField = (obj, key, value) => {
         }
       });
       __publicField(this, "renderLayout", (childNode) => {
-        var _a;
         const {
           label,
           name,
@@ -10153,16 +10178,13 @@ var __publicField = (obj, key, value) => {
             onClick: (e2) => this.props.onClick && this.props.onClick(e2, this.componentRef)
           },
           label ? /* @__PURE__ */ React.createElement("div", { className: "nut-cell-title nut-form-item-label" }, renderLabel) : null,
-          /* @__PURE__ */ React.createElement("div", { className: "nut-cell-value nut-form-item-body" }, /* @__PURE__ */ React.createElement("div", { className: "nut-form-item-body-slots" }, childNode), /* @__PURE__ */ React.createElement(
+          /* @__PURE__ */ React.createElement("div", { className: "nut-cell-value nut-form-item-body" }, /* @__PURE__ */ React.createElement("div", { className: "nut-form-item-body-slots" }, childNode), item && item.length > 0 && /* @__PURE__ */ React.createElement(
             "div",
             {
               className: "nut-form-item-body-tips",
-              style: {
-                textAlign: errorMessageAlign,
-                display: (item == null ? void 0 : item.length) ? "initial" : "none"
-              }
+              style: { textAlign: errorMessageAlign }
             },
-            (_a = item == null ? void 0 : item[0]) == null ? void 0 : _a.message
+            item[0].message
           ))
         );
       });
@@ -10172,22 +10194,31 @@ var __publicField = (obj, key, value) => {
       };
     }
     componentDidMount() {
-      const { registerField } = this.context.getInternal(SECRET);
+      const { registerField, registerUpdate } = this.context.getInternal(SECRET);
       this.cancelRegister = registerField(this);
+      this.eventOff = registerUpdate(this, this.props.shouldUpdate);
     }
     componentWillUnmount() {
       if (this.cancelRegister) {
         this.cancelRegister();
       }
+      if (this.eventOff) {
+        this.eventOff();
+      }
     }
     render() {
       const { children } = this.props;
       const child = Array.isArray(children) ? children[0] : children;
-      const returnChildNode = React.cloneElement(
-        child,
-        this.getControlled(child)
-      );
-      return /* @__PURE__ */ React.createElement(React.Fragment, { key: this.state.resetCount }, this.renderLayout(returnChildNode));
+      let returnChildNode;
+      if (!this.props.shouldUpdate) {
+        returnChildNode = React.cloneElement(
+          child,
+          this.getControlled(child)
+        );
+      } else {
+        returnChildNode = child(this.context);
+      }
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: this.state.resetCount }, this.props.noStyle ? returnChildNode : this.renderLayout(returnChildNode));
     }
   }
   __publicField(FormItem, "defaultProps", defaultProps$Y);
@@ -10371,7 +10402,10 @@ var __publicField = (obj, key, value) => {
             name,
             className: "nut-input-native",
             ref: inputRef,
-            style: { textAlign: align },
+            style: {
+              textAlign: `${// eslint-disable-next-line no-nested-ternary
+              align === "right" ? "end" : align === "left" ? "start" : "center"}`
+            },
             type: inputType(type2),
             password: type2 === "password",
             maxlength: maxLength,
@@ -10412,11 +10446,10 @@ var __publicField = (obj, key, value) => {
   const defaultProps$W = {
     ...ComponentDefaults,
     disabled: false,
-    min: 1,
-    max: 9999,
     readOnly: false,
     allowEmpty: false,
-    defaultValue: 0,
+    min: 1,
+    max: 9999,
     step: 1,
     digits: 0,
     async: false
@@ -10449,197 +10482,161 @@ var __publicField = (obj, key, value) => {
       ...defaultProps$W,
       ...props
     };
-    const inputRef = React.useRef("");
-    const [_checked, setChecked] = usePropsValue({
-      value,
-      defaultValue
+    const classes = classNames(classPrefix$h, {
+      [`${classPrefix$h}-disabled`]: disabled
     });
+    const [focused, setFocused] = React.useState(false);
+    const inputRef = React.useRef(null);
     React.useEffect(() => {
-      if (formatter) {
-        if (_checked || _checked === 0) {
-          inputRef.current = formatter(_checked);
-          setChecked(formatter(_checked));
-        }
-      }
-    }, []);
-    const classes = classNames(
-      {
-        [`${classPrefix$h}`]: true,
-        [`${classPrefix$h}-disabled`]: disabled
-      },
-      className
-    );
-    const styles = {
-      ...style
-    };
-    const addAllow = (value2 = _checked) => {
-      if (formatter) {
-        const numValue = String(value2).replace(/[^0-9|.]/gi, "");
-        return Number(numValue) < Number(max) && !disabled;
+      var _a, _b;
+      if (focused) {
+        (_b = (_a = inputRef.current) == null ? void 0 : _a.select) == null ? void 0 : _b.call(_a);
       }
-      return Number(value2) < Number(max) && !disabled;
-    };
-    const reduceAllow = (value2 = _checked) => {
-      if (formatter) {
-        const numValue = String(value2).replace(/[^0-9|.]/gi, "");
-        return Number(numValue) > Number(min) && !disabled;
+    }, [focused]);
+    const [shadowValue, setShadowValue] = usePropsValue({
+      value: typeof value === "string" ? parseFloat(value) : value,
+      defaultValue: typeof defaultValue === "string" ? parseFloat(defaultValue) : defaultValue,
+      onChange: (value2) => {
       }
-      return Number(value2) > Number(min) && !disabled;
-    };
-    const iconMinusClasses = classNames("nut-inputnumber-icon icon-minus", {
-      "nut-inputnumber-icon-disabled": !reduceAllow()
-    });
-    const iconAddClasses = classNames("nut-inputnumber-icon icon-plus", {
-      "nut-inputnumber-icon-disabled": !addAllow()
     });
-    const fixedDecimalPlaces = (v) => {
-      return Number(v).toFixed(Number(digits));
-    };
-    const emitChange = (value2, e2) => {
-      const outputValue = fixedDecimalPlaces(value2);
-      onChange && onChange(outputValue, e2);
-      if (!async) {
-        if (Number(outputValue) < Number(min)) {
-          formatter ? setChecked(formatter(Number(min))) : setChecked(Number(min));
-        } else if (Number(outputValue) > Number(max)) {
-          formatter ? setChecked(formatter(Number(max))) : setChecked(Number(max));
-        } else {
-          formatter ? setChecked(formatter(outputValue)) : setChecked(outputValue);
-        }
+    const bound2 = (value2, min2, max2) => {
+      let res = value2;
+      if (min2 !== void 0) {
+        res = Math.max(Number(min2), res);
       }
-    };
-    const reduceNumber = (e2) => {
-      onMinus && onMinus(e2);
-      if (reduceAllow()) {
-        if (formatter) {
-          const numValue = String(_checked).replace(/[^0-9|.]/gi, "");
-          const outputValue = Number(numValue) - Number(step);
-          inputRef.current = formatter(outputValue);
-          emitChange(outputValue, e2);
-        } else {
-          const outputValue = Number(_checked) - Number(step);
-          emitChange(outputValue, e2);
-        }
-      } else {
-        onOverlimit && onOverlimit(e2);
+      if (max2 !== void 0) {
+        res = Math.min(Number(max2), res);
       }
+      return res;
     };
-    const addNumber = (e2) => {
-      onPlus && onPlus(e2);
-      if (addAllow()) {
-        if (formatter) {
-          const numValue = String(_checked).replace(/[^0-9|.]/gi, "");
-          const outputValue = Number(numValue) + Number(step);
-          inputRef.current = formatter(outputValue);
-          emitChange(outputValue, e2);
-        } else {
-          const outputValue = Number(_checked) + Number(step);
-          emitChange(outputValue, e2);
-        }
-      } else {
-        onOverlimit && onOverlimit(e2);
+    const format2 = (value2) => {
+      if (value2 === null)
+        return "";
+      if (typeof value2 === "string")
+        value2 = parseFloat(value2);
+      const fixedValue = bound2(value2, Number(min), Number(max));
+      if (formatter) {
+        return formatter(fixedValue);
       }
-    };
-    const changeValue = (e2) => {
-      const input = e2.target;
-      onChange && onChange(input.value, e2);
-      if (!async) {
-        setChecked(input.value);
+      if (digits) {
+        return fixedValue.toFixed(digits).toString();
       }
+      return fixedValue.toString();
     };
-    const changeFormatValue = (e2) => {
-      const input = e2.target.value;
-      const numReg = /^[0-9]*$/;
-      const numValue = input.replace(/[^0-9|.]/gi, "");
-      if (formatter) {
-        if (!numReg.test(input[0]) && numValue) {
-          setChecked(formatter(numValue));
-        } else if (!numReg.test(input[0]) && !numValue) {
-          setChecked(input);
-        } else if (numReg.test(input[0])) {
-          if (formatter(numValue) === inputRef.current) {
-            setChecked(numValue);
-          } else {
-            setChecked(formatter(numValue));
-            inputRef.current = formatter(numValue);
-          }
-        }
+    const [inputValue, setInputValue] = React.useState(format2(shadowValue));
+    React.useEffect(() => {
+      if (!focused && !async) {
+        setShadowValue(bound2(Number(shadowValue), Number(min), Number(max)));
+        setInputValue(format2(shadowValue));
       }
-    };
-    const burFormatValue = (e2) => {
-      const input = e2.target.value;
-      const numReg = /^[0-9]*$/;
-      const numValue = input.replace(/[^0-9|.]/gi, "");
-      if (formatter) {
-        if (formatter(numValue) === input) {
-          emitChange(numValue, e2);
-          return;
-        }
-        if (!numReg.test(input) || !input) {
-          setChecked(formatter(""));
+    }, [focused, shadowValue]);
+    React.useEffect(() => {
+      if (async) {
+        setShadowValue(bound2(Number(value), Number(min), Number(max)));
+        setInputValue(format2(value));
+      }
+    }, [value]);
+    const calcNextValue = (current, step2, symbol) => {
+      const dig = digits + 1;
+      return (parseFloat(current || "0") * dig + parseFloat(step2) * dig * symbol) / dig;
+    };
+    const update = (negative, e2) => {
+      if (step !== void 0) {
+        const shouldOverBoundary = calcNextValue(
+          shadowValue,
+          step,
+          negative ? -1 : 1
+        );
+        const nextValue = bound2(shouldOverBoundary, Number(min), Number(max));
+        setShadowValue(nextValue);
+        if (negative ? shouldOverBoundary < min : shouldOverBoundary > max) {
+          onOverlimit == null ? void 0 : onOverlimit(e2);
+        } else {
+          onChange == null ? void 0 : onChange(nextValue, e2);
         }
       }
     };
-    const focusValue = (e2) => {
+    const handleReduce = (e2) => {
       if (disabled)
         return;
-      if (readOnly)
-        return;
-      onFocus && onFocus(e2);
+      onMinus == null ? void 0 : onMinus(e2);
+      update(true, e2);
     };
-    const burValue = (e2) => {
+    const handlePlus = (e2) => {
       if (disabled)
         return;
-      if (readOnly)
-        return;
-      const input = e2.target;
-      let value2 = +input.value;
-      if (value2 === 0 && !allowEmpty) {
-        value2 = Number(defaultValue);
+      onPlus == null ? void 0 : onPlus(e2);
+      update(false, e2);
+    };
+    const parseValue = (text) => {
+      if (text === "")
+        return null;
+      if (text === "-")
+        return null;
+      return text;
+    };
+    const handleInputChange = (e2) => {
+      setInputValue(e2.target.value);
+      const valueStr = parseValue(e2.target.value);
+      if (valueStr === null) {
+        if (allowEmpty) {
+          setShadowValue(null);
+        } else {
+          setShadowValue(defaultValue);
+        }
+      } else {
+        setShadowValue(valueStr);
       }
-      if (value2 < Number(min)) {
-        value2 = Number(min);
-      } else if (value2 > Number(max)) {
-        value2 = Number(max);
+      if (!async) {
+        onChange == null ? void 0 : onChange(parseFloat(valueStr || "0").toFixed(digits), e2);
       }
-      emitChange(value2, e2);
+    };
+    const handleFocus = (e2) => {
+      setFocused(true);
+      setInputValue(
+        shadowValue !== void 0 && shadowValue !== null ? bound2(Number(shadowValue), Number(min), Number(max)).toString() : ""
+      );
+      onFocus && onFocus(e2);
+    };
+    const handleBlur = (e2) => {
+      setFocused(false);
       onBlur && onBlur(e2);
+      if (async) {
+        const valueStr = parseValue(e2.target.value);
+        onChange == null ? void 0 : onChange(parseFloat(valueStr || "0").toFixed(digits), e2);
+      }
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classes, style: styles, ...restProps }, /* @__PURE__ */ React.createElement("div", { className: "nut-input-minus" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: classes, style, ...restProps }, /* @__PURE__ */ React.createElement("div", { className: "nut-input-minus" }, /* @__PURE__ */ React.createElement(
       t,
       {
-        className: iconMinusClasses,
-        onClick: (e2) => reduceNumber(e2)
+        className: classNames("nut-inputnumber-icon icon-minus", {
+          [`${classPrefix$h}-icon-disabled`]: shadowValue === min || disabled
+        }),
+        onClick: handleReduce
       }
-    )), /* @__PURE__ */ React.createElement(React.Fragment, null, formatter ? /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       "input",
       {
         className: "nut-number-input",
-        type: "text",
-        min,
-        max,
+        type: "digit",
+        ref: inputRef,
+        inputMode: "decimal",
         disabled,
         readOnly,
-        value: _checked,
-        onInput: changeFormatValue,
-        onBlur: burFormatValue,
-        onFocus: focusValue
+        value: inputValue,
+        onInput: handleInputChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus
       }
-    ) : /* @__PURE__ */ React.createElement(
-      "input",
+    )), /* @__PURE__ */ React.createElement("div", { className: "nut-input-add" }, /* @__PURE__ */ React.createElement(
+      i,
       {
-        className: "nut-number-input",
-        type: "digit",
-        min,
-        max,
-        disabled,
-        readOnly,
-        value: _checked,
-        onInput: changeValue,
-        onBlur: burValue,
-        onFocus: focusValue
+        className: classNames("nut-inputnumber-icon icon-plus", {
+          [`${classPrefix$h}-icon-disabled`]: shadowValue === max || disabled
+        }),
+        onClick: handlePlus
       }
-    )), /* @__PURE__ */ React.createElement("div", { className: "nut-input-add" }, /* @__PURE__ */ React.createElement(i, { className: iconAddClasses, onClick: (e2) => addNumber(e2) })));
+    )));
   };
   InputNumber.defaultProps = defaultProps$W;
   InputNumber.displayName = "NutInputNumber";
@@ -12039,13 +12036,13 @@ var __publicField = (obj, key, value) => {
     // 1~6
     autoFocus: false
   };
-  const ShortPassword = (props) => {
+  const InternalShortPassword = (props, ref) => {
     const { locale } = useConfig$1();
     const {
       title,
       description,
       tips,
-      visible,
+      visible: deleteVisible,
       value,
       error,
       hideFooter,
@@ -12076,6 +12073,20 @@ var __publicField = (obj, key, value) => {
     const format2 = (val) => {
       return val.slice(0, comLen);
     };
+    const [visible, setVisible] = usePropsValue({
+      value: props.visible,
+      defaultValue: false,
+      finalValue: false
+    });
+    const actions = {
+      open: () => {
+        setVisible(true);
+      },
+      close: () => {
+        setVisible(false);
+      }
+    };
+    React.useImperativeHandle(ref, () => actions);
     const [inputValue, setInputValue] = usePropsValue({ value, onChange });
     React.useEffect(() => {
       if (visible && autoFocus) {
@@ -12108,11 +12119,10 @@ var __publicField = (obj, key, value) => {
       },
       /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix2, className), style }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-title` }, title || locale.shortpassword.title), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-description` }, description || locale.shortpassword.description), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-input`, onClick: onFocus }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-input-site` }), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-input-fake` }, [...new Array(comLen).keys()].map((item, index) => {
         return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-input-fake-li`, key: index }, inputValue.length > index && /* @__PURE__ */ React.createElement(React.Fragment, null, plain ? inputValue[index] : /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-input-fake-li-icon` })));
-      }))), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message-error` }, error), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message-forget`, onClick: onTips }, tips || /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(z, { size: 11, style: { marginRight: "3px" } }), locale.shortpassword.tips))), !hideFooter && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer-cancel`, onClick: onCancel }, locale.cancel), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer-sure`, onClick: sure }, locale.confirm)))
+      }))), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message-error` }, error), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-message-forget`, onClick: onTips }, tips || /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(z, { size: 11 }), locale.shortpassword.tips))), !hideFooter && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer-cancel`, onClick: onCancel }, locale.cancel), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer-sure`, onClick: sure }, locale.confirm)))
     );
   };
-  ShortPassword.defaultProps = defaultProps$N;
-  ShortPassword.displayName = "NutShortPassword";
+  const ShortPassword = React.forwardRef(InternalShortPassword);
   const defaultProps$M = {
     ...ComponentDefaults,
     canvasId: "spcanvas",
@@ -13160,6 +13170,7 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ React.createElement(
       Popup,
       {
+        ...rest,
         round: true,
         visible,
         position: "bottom",
@@ -14938,7 +14949,7 @@ var __publicField = (obj, key, value) => {
     const classPrefix2 = "nut-skeleton";
     const classes = classNames(classPrefix2, className);
     const avatarClass = classNames({
-      avatar: true,
+      [`nut-avatar`]: true,
       [`avatar-${avatarShape}`]: avatarShape
     });
     const repeatLines = (num) => {
@@ -14956,7 +14967,7 @@ var __publicField = (obj, key, value) => {
         height: "50px"
       };
     };
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, visible ? /* @__PURE__ */ React.createElement("div", null, children) : /* @__PURE__ */ React.createElement("div", { className: classes, ...rest }, animated && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-animation` }), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-content` }, avatar && /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, visible ? /* @__PURE__ */ React.createElement(React.Fragment, null, children) : /* @__PURE__ */ React.createElement("div", { className: classes, ...rest }, animated && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-animation` }), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-content` }, avatar && /* @__PURE__ */ React.createElement(
       Avatar,
       {
         className: avatarClass,
@@ -18096,79 +18107,98 @@ var __publicField = (obj, key, value) => {
       ...defaultProps$6,
       ...props
     };
-    const [styleList, setStyleList] = React.useState([]);
-    const [baItemList, setBaItemList] = React.useState(list);
-    const barrageListSet = React.useRef(list);
     const barrageBody = React.useRef(null);
     const barrageContainer = React.useRef(null);
-    const timeId = React.useRef((/* @__PURE__ */ new Date()).getTime());
+    const barrageCWidth = React.useRef(0);
     const timer = React.useRef(0);
-    const classes = classNames(
-      classPrefix$1,
-      {
-        [`${classPrefix$1}-body${timeId.current}`]: true
-      },
-      className
-    );
+    const index = React.useRef(0);
+    const times = React.useRef([]);
+    const historyIndex = React.useRef(-1);
+    const classes = classNames(classPrefix$1, className);
     React.useImperativeHandle(ref, () => ({
       add: (word) => {
-        barrageListSet.current = [...barrageListSet.current, word];
-        run();
+        const _index = index.current % list.length;
+        if (!loop && index.current === list.length) {
+          list.splice(list.length, 0, word);
+        } else {
+          list.splice(_index, 0, word);
+        }
       }
     }));
+    const getNodeWidth = async (node, type2 = "width") => {
+      if (node) {
+        const refe = await getRectByTaro(node);
+        return Math.ceil(type2 === "height" ? refe.height : refe.width);
+      }
+      return 0;
+    };
     React.useEffect(() => {
-      barrageListSet.current = [...list];
-      run();
+      const init = async () => {
+        if (barrageBody.current) {
+          barrageCWidth.current = await getNodeWidth(barrageBody.current);
+        }
+      };
+      init();
+      setTimeout(() => {
+        var _a;
+        (_a = barrageBody.current) == null ? void 0 : _a.style.setProperty(
+          "--move-distance",
+          `-${barrageCWidth.current}px`
+        );
+        index.current = 0;
+        run();
+      }, 300);
       return () => {
         clearInterval(timer.current);
       };
     }, [list]);
     const run = () => {
-      setBaItemList(barrageListSet.current);
-      barrageListSet.current.forEach((item, index) => {
-        getNode(index);
-      });
-    };
-    const getNode = (index) => {
-      const query = Taro.createSelectorQuery();
-      setTimeout(() => {
-        let width = 100;
-        query.select(`.${classPrefix$1}-body${timeId.current}`).boundingClientRect((rec) => {
-          width = rec.width || 300;
-        });
-        query.select(`.${classPrefix$1}-item${index}`).boundingClientRect((recs) => {
-          const height = recs.height;
-          const nodeTop = `${index % rows * (height + gapY) + 20}px`;
-          styleInfo(index, nodeTop, width);
-        }).exec();
-      }, 500);
+      clearInterval(timer.current);
+      let intervalCache = interval;
+      const _index = (loop ? index.current % list.length : index.current) % rows;
+      const result = times.current[_index] - rows * interval;
+      if (result > 0) {
+        intervalCache += result;
+      }
+      timer.current = window.setTimeout(() => {
+        play();
+      }, intervalCache);
     };
-    const styleInfo = (index, nodeTop, width) => {
-      const timeIndex = index - rows > 0 ? index - rows : 0;
-      const list2 = styleList;
-      const time = list2[timeIndex] ? Number(list2[timeIndex]["--time"]) : 0;
-      const obj = {
-        top: nodeTop,
-        "--time": `${interval * index + time}`,
-        animationDuration: `${duration}ms`,
-        animationIterationCount: `${loop ? "infinite" : 1}`,
-        animationDelay: `${interval * index + time}ms`,
-        "--move-distance": `-${width}px`
-      };
-      list2.push(obj);
-      setStyleList([...list2]);
+    const play = async () => {
+      if (!loop && index.current >= list.length) {
+        return;
+      }
+      const _index = loop ? index.current % list.length : index.current;
+      const el = document.createElement(`View`);
+      let currentIndex = _index % rows;
+      if (currentIndex <= historyIndex.current || historyIndex.current === 3 && currentIndex !== 0 || Math.abs(currentIndex - historyIndex.current) !== 1) {
+        currentIndex = historyIndex.current + 1 >= rows ? 0 : historyIndex.current + 1;
+      }
+      historyIndex.current = currentIndex;
+      el.innerHTML = list[_index];
+      el.classList.add("barrage-item");
+      barrageContainer.current.appendChild(el);
+      try {
+        const width = await getNodeWidth(el);
+        const height = await getNodeWidth(el, "height");
+        el.classList.add("move");
+        const elScrollDuration = width / barrageCWidth.current * duration;
+        times.current[currentIndex] = Math.ceil(elScrollDuration);
+        el.style.animationDuration = `${(duration + elScrollDuration).toFixed(
+          2
+        )}ms`;
+        el.style.top = `${currentIndex * (height + gapY) + 20}px`;
+        el.style.width = `${width}px`;
+      } catch (error) {
+        console.log("异常自动流转到下一个");
+      }
+      el.addEventListener("animationend", () => {
+        barrageContainer.current.removeChild(el);
+      });
+      index.current++;
+      run();
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classes, ref: barrageBody, ...restProps }, /* @__PURE__ */ React.createElement("div", { ref: barrageContainer, className: "bContainer" }, baItemList.map((item, index) => {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `barrage-item ${classPrefix$1}-item${index} move`,
-          style: styleList[index],
-          key: index
-        },
-        item.length > 8 ? `${item.substr(0, 8)}...` : item
-      );
-    })));
+    return /* @__PURE__ */ React.createElement(components.View, { className: classes, ref: barrageBody, ...restProps }, /* @__PURE__ */ React.createElement(components.View, { ref: barrageContainer, className: "bContainer" }));
   };
   const Barrage = React.forwardRef(
     InternalBarrage