@nutui/nutui-react 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 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.
 */
@@ -4448,19 +4448,6 @@ Check the top-level render call using <` + t2 + ">.");
     }
     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) {
@@ -4509,7 +4496,7 @@ Check the top-level render call using <` + t2 + ">.");
       document.addEventListener(
         "touchmove",
         onTouchMove,
-        passiveSupported ? { passive: false } : false
+        false
       );
       if (!totalLockCount) {
         document.body.classList.add(BODY_LOCK_CLASS);
@@ -5218,7 +5205,7 @@ Check the top-level render call using <` + t2 + ">.");
       startTime = otime;
       duration > 0 ? scrollAnimation() : scroll();
     };
-    const styles = style ? {
+    const styles = Object.keys(style || {}).length !== 0 ? {
       zIndex,
       ...style
     } : {
@@ -14112,7 +14099,7 @@ Please add \`${key}Action\` when creating your handler.`);
     }));
     React.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);
@@ -15804,6 +15791,7 @@ Please add \`${key}Action\` when creating your handler.`);
     constructor() {
       // 初始化数据
       __publicField(this, "initialValues", {});
+      __publicField(this, "updateList", []);
       // 存放表单中所有的数据 eg. {password: "ddd",username: "123"}
       __publicField(this, "store", {});
       // 所有的组件实例
@@ -15873,6 +15861,15 @@ Please add \`${key}Action\` when creating your handler.`);
             }
           });
         });
+        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 = {
@@ -15938,6 +15935,16 @@ Please add \`${key}Action\` when creating your handler.`);
           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]);
       });
@@ -15949,7 +15956,8 @@ Please add \`${key}Action\` when creating your handler.`);
             setInitialValues: this.setInitialValues,
             dispatch: this.dispatch,
             store: this.store,
-            fieldEntities: this.fieldEntities
+            fieldEntities: this.fieldEntities,
+            registerUpdate: this.registerUpdate
           };
         }
       });
@@ -16080,13 +16088,16 @@ Please add \`${key}Action\` when creating your handler.`);
     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 _a2;
@@ -16201,22 +16212,31 @@ Please add \`${key}Action\` when creating your handler.`);
       };
     }
     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$W);
@@ -16382,7 +16402,10 @@ Please add \`${key}Action\` when creating your handler.`);
             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),
             maxLength,
             placeholder: placeholder || locale.placeholder,
@@ -16433,11 +16456,10 @@ Please add \`${key}Action\` when creating your handler.`);
   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
@@ -16470,199 +16492,159 @@ Please add \`${key}Action\` when creating your handler.`);
       ...defaultProps$U,
       ...props
     };
-    const inputRef = React.useRef("");
-    const [_checked, setChecked] = usePropsValue({
-      value,
-      defaultValue
+    const classes = classNames(classPrefix$g, {
+      [`${classPrefix$g}-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$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] = 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 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.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(
       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.createElement(React.Fragment, null, formatter ? /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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.createElement(
-      "input",
+    )), /* @__PURE__ */ React.createElement("div", { className: "nut-input-add" }, /* @__PURE__ */ React.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.createElement("div", { className: "nut-input-add" }, /* @__PURE__ */ React.createElement(l$2, { className: iconAddClasses, onClick: (e2) => addNumber(e2) })));
+    )));
   };
   InputNumber.defaultProps = defaultProps$U;
   InputNumber.displayName = "NutInputNumber";
@@ -18127,13 +18109,13 @@ Please add \`${key}Action\` when creating your handler.`);
     // 1~6
     autoFocus: false
   };
-  const ShortPassword = (props) => {
+  const InternalShortPassword = (props, ref) => {
     const { locale } = useConfig();
     const {
       title,
       description,
       tips,
-      visible,
+      visible: deleteVisible,
       value,
       error,
       hideFooter,
@@ -18164,6 +18146,24 @@ Please add \`${key}Action\` when creating your handler.`);
     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);
+      }
+    };
+    React.useImperativeHandle(ref, () => actions);
     const [inputValue, setInputValue] = usePropsValue({ value, onChange });
     React.useEffect(() => {
       if (visible && autoFocus) {
@@ -18190,17 +18190,16 @@ Please add \`${key}Action\` when creating your handler.`);
         },
         visible,
         closeable: true,
-        onOverlayClick: onClose,
-        onCloseIconClick: onClose,
+        onOverlayClick: handleClose,
+        onCloseIconClick: handleClose,
         ...rest
       },
       /* @__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(s, { width: 11, height: 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(s, { width: 11, height: 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$L;
-  ShortPassword.displayName = "NutShortPassword";
+  const ShortPassword = React.forwardRef(InternalShortPassword);
   const defaultProps$K = {
     ...ComponentDefaults,
     type: "png",
@@ -19176,6 +19175,7 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(
       Popup,
       {
+        ...rest,
         round: true,
         visible,
         position: "bottom",
@@ -19186,7 +19186,7 @@ Please add \`${key}Action\` when creating your handler.`);
           onCancel && onCancel();
         }
       },
-      /* @__PURE__ */ React.createElement("div", { className: `${className}`, style, ...rest }, options2.length ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-list` }, options2.map((item, index) => {
+      /* @__PURE__ */ React.createElement("div", { className: `${className}`, style }, options2.length ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-list` }, options2.map((item, index) => {
         return /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -20919,7 +20919,7 @@ Please add \`${key}Action\` when creating your handler.`);
         axis: "y",
         target: elementRef,
         enabled: !props.disabled,
-        eventOptions: passiveSupported ? { passive: false } : false
+        eventOptions: false
       }
     );
     const renderIcons = (status2) => {
@@ -21136,7 +21136,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const classPrefix2 = "nut-skeleton";
     const classes = classNames(classPrefix2, className);
     const avatarClass = classNames({
-      avatar: true,
+      [`nut-avatar`]: true,
       [`avatar-${avatarShape}`]: avatarShape
     });
     const repeatLines = (num) => {
@@ -21154,7 +21154,7 @@ Please add \`${key}Action\` when creating your handler.`);
         height: "50px"
       };
     };
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, visible ? /* @__PURE__ */ React.createElement("div", null, children) : /* @__PURE__ */ React.createElement("div", { className: classes, ...rest }, animated2 && /* @__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 }, animated2 && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-animation` }), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-content` }, avatar && /* @__PURE__ */ React.createElement(
       Avatar,
       {
         className: avatarClass,
@@ -24505,6 +24505,8 @@ Please add \`${key}Action\` when creating your handler.`);
     const barrageCWidth = React.useRef(0);
     const timer = React.useRef(0);
     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) => {
@@ -24535,9 +24537,15 @@ Please add \`${key}Action\` when creating your handler.`);
     }, [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) {
@@ -24545,14 +24553,23 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       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);