@nutui/nutui-react 2.3.9 → 2.3.11

package/dist/nutui.react.es.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.3.9 Fri Feb 02 2024 16:13:40 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.11 Fri Feb 23 2024 19:38:03 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -4430,19 +4430,6 @@ function getAllScrollableParents(element, scrollableParents = []) {
   }
   return getAllScrollableParents(element.parentElement, scrollableParents);
 }
-let passiveSupported = false;
-if (canUseDom) {
-  try {
-    const opts = Object.defineProperty({}, "passive", {
-      get() {
-        passiveSupported = true;
-      }
-    });
-    window.addEventListener("test-passive-supported", null, opts);
-  } catch (e2) {
-    console.log(e2);
-  }
-}
 let totalLockCount = 0;
 const BODY_LOCK_CLASS = "nut-overflow-hidden";
 function getScrollableElement(el) {
@@ -4491,7 +4478,7 @@ function useLockScroll(rootRef, shouldLock) {
     document.addEventListener(
       "touchmove",
       onTouchMove,
-      passiveSupported ? { passive: false } : false
+      false
     );
     if (!totalLockCount) {
       document.body.classList.add(BODY_LOCK_CLASS);
@@ -5200,7 +5187,7 @@ const BackTop = (props) => {
     startTime = otime;
     duration > 0 ? scrollAnimation() : scroll();
   };
-  const styles = style ? {
+  const styles = Object.keys(style || {}).length !== 0 ? {
     zIndex,
     ...style
   } : {
@@ -14094,7 +14081,7 @@ const InternalPickerPanel = (props, ref) => {
   }));
   useEffect(() => {
     var _a2, _b, _c;
-    const options22 = passiveSupported ? { passive: false } : false;
+    const options22 = false;
     (_a2 = PickerPanelRef.current) == null ? void 0 : _a2.addEventListener("touchstart", touchStart, options22);
     (_b = PickerPanelRef.current) == null ? void 0 : _b.addEventListener("touchmove", touchMove, options22);
     (_c = PickerPanelRef.current) == null ? void 0 : _c.addEventListener("touchend", touchEnd, options22);
@@ -15786,6 +15773,7 @@ class FormStore {
   constructor() {
     // 初始化数据
     __publicField(this, "initialValues", {});
+    __publicField(this, "updateList", []);
     // 存放表单中所有的数据 eg. {password: "ddd",username: "123"}
     __publicField(this, "store", {});
     // 所有的组件实例
@@ -15855,6 +15843,15 @@ class FormStore {
           }
         });
       });
+      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 = {
@@ -15920,6 +15917,16 @@ class FormStore {
         entity.onStoreChange("reset");
       });
     });
+    // 监听事件
+    __publicField(this, "registerUpdate", (field, shouldUpdate) => {
+      this.updateList.push({
+        entity: field,
+        condition: shouldUpdate
+      });
+      return () => {
+        this.updateList = this.updateList.filter((i) => i.entity !== field);
+      };
+    });
     __publicField(this, "dispatch", ({ name }) => {
       this.validateFields([name]);
     });
@@ -15931,7 +15938,8 @@ class FormStore {
           setInitialValues: this.setInitialValues,
           dispatch: this.dispatch,
           store: this.store,
-          fieldEntities: this.fieldEntities
+          fieldEntities: this.fieldEntities,
+          registerUpdate: this.registerUpdate
         };
       }
     });
@@ -16062,13 +16070,16 @@ const defaultProps$W = {
   label: "",
   rules: [{ required: false, message: "" }],
   errorMessageAlign: "left",
-  validateTrigger: "onChange"
+  validateTrigger: "onChange",
+  shouldUpdate: false,
+  noStyle: false
 };
 class FormItem extends React__default.Component {
   constructor(props) {
     super(props);
     __publicField(this, "cancelRegister");
     __publicField(this, "componentRef");
+    __publicField(this, "eventOff");
     // children添加value属性和onChange事件
     __publicField(this, "getControlled", (children) => {
       var _a2;
@@ -16183,22 +16194,31 @@ class FormItem extends React__default.Component {
     };
   }
   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__default.cloneElement(
-      child,
-      this.getControlled(child)
-    );
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: this.state.resetCount }, this.renderLayout(returnChildNode));
+    let returnChildNode;
+    if (!this.props.shouldUpdate) {
+      returnChildNode = React__default.cloneElement(
+        child,
+        this.getControlled(child)
+      );
+    } else {
+      returnChildNode = child(this.context);
+    }
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: this.state.resetCount }, this.props.noStyle ? returnChildNode : this.renderLayout(returnChildNode));
   }
 }
 __publicField(FormItem, "defaultProps", defaultProps$W);
@@ -16364,7 +16384,10 @@ const Input = forwardRef(
           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(type4),
           maxLength,
           placeholder: placeholder || locale.placeholder,
@@ -16415,11 +16438,10 @@ Input.displayName = "NutInput";
 const defaultProps$U = {
   ...ComponentDefaults,
   disabled: false,
-  min: 1,
-  max: 9999,
   readOnly: false,
   allowEmpty: false,
-  defaultValue: 0,
+  min: 1,
+  max: 9999,
   step: 1,
   digits: 0,
   async: false
@@ -16452,199 +16474,159 @@ const InputNumber = (props) => {
     ...defaultProps$U,
     ...props
   };
-  const inputRef = useRef("");
-  const [_checked, setChecked] = usePropsValue({
-    value,
-    defaultValue
+  const classes = classNames(classPrefix$g, {
+    [`${classPrefix$g}-disabled`]: disabled
   });
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef(null);
   useEffect(() => {
-    if (formatter) {
-      if (_checked || _checked === 0) {
-        inputRef.current = formatter(_checked);
-        setChecked(formatter(_checked));
-      }
-    }
-  }, []);
-  const classes = classNames(
-    {
-      [`${classPrefix$g}`]: true,
-      [`${classPrefix$g}-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 _a2, _b;
+    if (focused) {
+      (_b = (_a2 = inputRef.current) == null ? void 0 : _a2.select) == null ? void 0 : _b.call(_a2);
     }
-    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.valueAsNumber, e2);
-    if (!async) {
-      if (Number.isNaN(input.valueAsNumber)) {
-        setChecked("");
-      } else {
-        setChecked(input.valueAsNumber);
-      }
+    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] = useState(format2(shadowValue));
+  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]);
+  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 update2 = (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);
+    update2(true, e2);
   };
-  const burValue = (e2) => {
+  const handlePlus = (e2) => {
     if (disabled)
       return;
-    if (readOnly)
-      return;
-    const input = e2.target;
-    let value2 = input.valueAsNumber;
-    if (Number.isNaN(value2) && !allowEmpty) {
-      value2 = Number(defaultValue);
+    onPlus == null ? void 0 : onPlus(e2);
+    update2(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__default.createElement("div", { className: classes, style: styles, ...restProps }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-minus" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: classes, style, ...restProps }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-minus" }, /* @__PURE__ */ React__default.createElement(
     o,
     {
-      className: iconMinusClasses,
-      onClick: (e2) => reduceNumber(e2)
+      className: classNames("nut-inputnumber-icon icon-minus", {
+        [`${classPrefix$g}-icon-disabled`]: shadowValue === min || disabled
+      }),
+      onClick: handleReduce
     }
-  )), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, formatter ? /* @__PURE__ */ React__default.createElement(
+  )), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     "input",
     {
-      type: "text",
-      min,
-      max,
+      ref: inputRef,
+      inputMode: "decimal",
       disabled,
       readOnly,
-      value: _checked,
-      onInput: changeFormatValue,
-      onBlur: burFormatValue,
-      onFocus: focusValue
+      value: inputValue,
+      onInput: handleInputChange,
+      onBlur: handleBlur,
+      onFocus: handleFocus
     }
-  ) : /* @__PURE__ */ React__default.createElement(
-    "input",
+  )), /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-add" }, /* @__PURE__ */ React__default.createElement(
+    l$2,
     {
-      type: "number",
-      min,
-      max,
-      disabled,
-      readOnly,
-      value: _checked,
-      onInput: changeValue,
-      onBlur: burValue,
-      onFocus: focusValue
+      className: classNames("nut-inputnumber-icon icon-plus", {
+        [`${classPrefix$g}-icon-disabled`]: shadowValue === max || disabled
+      }),
+      onClick: handlePlus
     }
-  )), /* @__PURE__ */ React__default.createElement("div", { className: "nut-input-add" }, /* @__PURE__ */ React__default.createElement(l$2, { className: iconAddClasses, onClick: (e2) => addNumber(e2) })));
+  )));
 };
 InputNumber.defaultProps = defaultProps$U;
 InputNumber.displayName = "NutInputNumber";
@@ -18109,13 +18091,13 @@ const defaultProps$L = {
   // 1~6
   autoFocus: false
 };
-const ShortPassword = (props) => {
+const InternalShortPassword = (props, ref) => {
   const { locale } = useConfig();
   const {
     title,
     description,
     tips,
-    visible,
+    visible: deleteVisible,
     value,
     error,
     hideFooter,
@@ -18146,6 +18128,24 @@ const ShortPassword = (props) => {
   const format2 = (val) => {
     return val.slice(0, comLen);
   };
+  const [visible, setVisible] = usePropsValue({
+    value: props.visible,
+    defaultValue: false,
+    finalValue: false
+  });
+  const handleClose = () => {
+    onClose == null ? void 0 : onClose();
+    setVisible(false);
+  };
+  const actions = {
+    open: () => {
+      setVisible(true);
+    },
+    close: () => {
+      setVisible(false);
+    }
+  };
+  useImperativeHandle(ref, () => actions);
   const [inputValue, setInputValue] = usePropsValue({ value, onChange });
   useEffect(() => {
     if (visible && autoFocus) {
@@ -18172,17 +18172,16 @@ const ShortPassword = (props) => {
       },
       visible,
       closeable: true,
-      onOverlayClick: onClose,
-      onCloseIconClick: onClose,
+      onOverlayClick: handleClose,
+      onCloseIconClick: handleClose,
       ...rest
     },
     /* @__PURE__ */ React__default.createElement("div", { className: classNames(classPrefix2, className), style }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-title` }, title || locale.shortpassword.title), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-description` }, description || locale.shortpassword.description), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-input`, onClick: onFocus }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-input-site` }), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-input-fake` }, [...new Array(comLen).keys()].map((item, index) => {
       return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-input-fake-li`, key: index }, inputValue.length > index && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, plain ? inputValue[index] : /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-input-fake-li-icon` })));
-    }))), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-message` }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-message-error` }, error), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-message-forget`, onClick: onTips }, tips || /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(s, { width: 11, height: 11, style: { marginRight: "3px" } }), locale.shortpassword.tips))), !hideFooter && /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-footer` }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-footer-cancel`, onClick: onCancel }, locale.cancel), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-footer-sure`, onClick: sure }, locale.confirm)))
+    }))), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-message` }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-message-error` }, error), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-message-forget`, onClick: onTips }, tips || /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(s, { width: 11, height: 11 }), locale.shortpassword.tips))), !hideFooter && /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-footer` }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-footer-cancel`, onClick: onCancel }, locale.cancel), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-footer-sure`, onClick: sure }, locale.confirm)))
   );
 };
-ShortPassword.defaultProps = defaultProps$L;
-ShortPassword.displayName = "NutShortPassword";
+const ShortPassword = React__default.forwardRef(InternalShortPassword);
 const defaultProps$K = {
   ...ComponentDefaults,
   type: "png",
@@ -19158,6 +19157,7 @@ const ActionSheet = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     Popup,
     {
+      ...rest,
       round: true,
       visible,
       position: "bottom",
@@ -19168,7 +19168,7 @@ const ActionSheet = (props) => {
         onCancel && onCancel();
       }
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: `${className}`, style, ...rest }, options2.length ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-list` }, options2.map((item, index) => {
+    /* @__PURE__ */ React__default.createElement("div", { className: `${className}`, style }, options2.length ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-list` }, options2.map((item, index) => {
       return /* @__PURE__ */ React__default.createElement(
         "div",
         {
@@ -20901,7 +20901,7 @@ const PullToRefresh = (p) => {
       axis: "y",
       target: elementRef,
       enabled: !props.disabled,
-      eventOptions: passiveSupported ? { passive: false } : false
+      eventOptions: false
     }
   );
   const renderIcons = (status2) => {
@@ -21118,7 +21118,7 @@ const Skeleton = (props) => {
   const classPrefix2 = "nut-skeleton";
   const classes = classNames(classPrefix2, className);
   const avatarClass = classNames({
-    avatar: true,
+    [`nut-avatar`]: true,
     [`avatar-${avatarShape}`]: avatarShape
   });
   const repeatLines = (num) => {
@@ -21136,7 +21136,7 @@ const Skeleton = (props) => {
       height: "50px"
     };
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, visible ? /* @__PURE__ */ React__default.createElement("div", null, children) : /* @__PURE__ */ React__default.createElement("div", { className: classes, ...rest }, animated2 && /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-animation` }), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-content` }, avatar && /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, visible ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children) : /* @__PURE__ */ React__default.createElement("div", { className: classes, ...rest }, animated2 && /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-animation` }), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-content` }, avatar && /* @__PURE__ */ React__default.createElement(
     Avatar,
     {
       className: avatarClass,
@@ -24487,6 +24487,8 @@ const InternalBarrage = (props, ref) => {
   const barrageCWidth = useRef(0);
   const timer = useRef(0);
   const index = useRef(0);
+  const times = useRef([]);
+  const historyIndex = useRef(-1);
   const classes = classNames(classPrefix$1, className);
   useImperativeHandle(ref, () => ({
     add: (word) => {
@@ -24517,9 +24519,15 @@ const InternalBarrage = (props, ref) => {
   }, [list]);
   const run = () => {
     clearInterval(timer.current);
+    let intervalCache = interval;
+    const _index = (loop2 ? index.current % list.length : index.current) % rows;
+    const result = times.current[_index] - rows * interval;
+    if (result > 0) {
+      intervalCache += result;
+    }
     timer.current = window.setTimeout(() => {
       play();
-    }, interval);
+    }, intervalCache);
   };
   const play = () => {
     if (!loop2 && index.current >= list.length) {
@@ -24527,14 +24535,23 @@ const InternalBarrage = (props, ref) => {
     }
     const _index = loop2 ? index.current % list.length : index.current;
     const el = document.createElement(`div`);
+    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);
     const width = el.offsetWidth;
     const height = el.offsetHeight;
     el.classList.add("move");
-    el.style.animationDuration = `${duration}ms`;
-    el.style.top = `${_index % rows * (height + gapY) + 20}px`;
+    const elScrollDuration = Math.ceil(
+      width / barrageCWidth.current * duration
+    );
+    times.current[currentIndex] = elScrollDuration;
+    el.style.animationDuration = `${duration + elScrollDuration}ms`;
+    el.style.top = `${currentIndex * (height + gapY) + 20}px`;
     el.style.width = `${width}px`;
     el.addEventListener("animationend", () => {
       barrageContainer.current.removeChild(el);