@nutui/nutui-react-taro 3.0.14 → 3.0.16

package/dist/es/packages/dialog/dialog.js

@@ -65,8 +65,6 @@ export var BaseDialog = function(props) {
         var handleCancel = function(e) {
             e.stopPropagation();
             if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel())) return;
-            if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose())) return;
-            onClose();
             onCancel();
         };
         var handleOk = /*#__PURE__*/ function() {
@@ -152,24 +150,21 @@ export var BaseDialog = function(props) {
     };
     var renderCloseIcon = function() {
         if (!closeIcon) return null;
-        var handleCancel = function() {
-            if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel())) return;
+        var handleClose = function() {
             if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose())) return;
             onClose();
-            onCancel();
         };
         var _obj;
         var closeClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-close"), true), _define_property(_obj, "".concat(classPrefix, "-close-").concat(closeIconPosition), true), _obj));
         var systomIcon = closeIconPosition !== 'bottom' ? /*#__PURE__*/ React.createElement(Close, null) : /*#__PURE__*/ React.createElement(Failure, null);
         return /*#__PURE__*/ React.createElement(View, {
             className: closeClasses,
-            onClick: handleCancel
+            onClick: handleClose
         }, /*#__PURE__*/ React.isValidElement(closeIcon) ? closeIcon : systomIcon);
     };
     var onHandleClickOverlay = function(e) {
         if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
             var closed = onOverlayClick && onOverlayClick(e);
-            closed && onClose();
             closed && onCancel();
         }
     };

package/dist/es/packages/formitem/formitem.js

@@ -126,11 +126,11 @@ export var FormItem = /*#__PURE__*/ function(_superClass) {
             var item = name ? _this.context.formInstance.errors[name] : [];
             var starPosition = _this.context.formInstance.starPosition;
             var renderStar = (required || requiredInRules) && /*#__PURE__*/ React.createElement(Text, {
-                className: "nut-form-item-label-required required"
+                className: "nut-form-item-label-".concat(starPosition, "-required required")
             }, "*");
             var renderLabel = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Text, {
                 className: "nut-form-item-labeltxt"
-            }, starPosition === 'left' ? renderStar : null, label), starPosition === 'right' ? renderStar : null);
+            }, starPosition === 'left' ? renderStar : null, label, starPosition === 'right' ? renderStar : null));
             return /*#__PURE__*/ React.createElement(Cell, {
                 className: "".concat(_this.getClassNameWithDirection('nut-form-item'), " ").concat(className),
                 style: style,

package/dist/es/packages/formitem/style/formitem.scss

@@ -18,19 +18,25 @@
     word-wrap: break-word;
     text-align: $form-item-label-text-align;
     line-height: unset;
-  }
 
-  &-label-required {
-    color: $form-item-required-color;
-    margin-right: $form-item-required-margin-right;
-    display: block;
-    position: absolute;
-    left: -10px;
+    &-left-required {
+      color: $form-item-required-color;
+      margin-right: $form-item-required-margin-right;
+      position: absolute;
+      left: -10px;
+    }
+
+    &-right-required {
+      color: $form-item-required-color;
+      margin-left: $form-item-required-margin-right;
+      position: absolute;
+      right: -10px;
+    }
   }
 
   .nut-form-item-labeltxt {
     position: relative;
-    font-size: 12px;
+    font-size: $form-item-label-font-size;
   }
 
   &-body {
@@ -136,13 +142,6 @@
   white-space: nowrap;
 }
 
-.nut-form-item-label-left-required {
-  display: block;
-  line-height: 1.5;
-  position: absolute;
-  left: 0.1em;
-}
-
 .nut-form-item-top {
   flex-direction: column;
   align-items: flex-start;

package/dist/es/packages/formitem/style/style.css

@@ -13,7 +13,7 @@
 .nut-form-item-label {
   display: flex;
   flex-direction: row;
-  font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12px));
   font-weight: normal;
   width: var(--nutui-form-item-label-width, 90px);
   margin-right: var(--nutui-form-item-label-margin-right, 10px);
@@ -22,16 +22,21 @@
   text-align: var(--nutui-form-item-label-text-align, left);
   line-height: unset;
 }
-.nut-form-item-label-required {
+.nut-form-item-label-left-required {
   color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23));
   margin-right: var(--nutui-form-item-required-margin-right, 4px);
-  display: block;
   position: absolute;
   left: -10px;
 }
+.nut-form-item-label-right-required {
+  color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23));
+  margin-left: var(--nutui-form-item-required-margin-right, 4px);
+  position: absolute;
+  right: -10px;
+}
 .nut-form-item .nut-form-item-labeltxt {
   position: relative;
-  font-size: 12px;
+  font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12px));
 }
 .nut-form-item-body {
   flex: 1;
@@ -121,13 +126,6 @@
   white-space: nowrap;
 }
 
-.nut-form-item-label-left-required {
-  display: block;
-  line-height: 1.5;
-  position: absolute;
-  left: 0.1em;
-}
-
 .nut-form-item-top {
   flex-direction: column;
   align-items: flex-start;

package/dist/es/packages/formitem/style/style.harmony.css

@@ -13,7 +13,7 @@
 .nut-form-item-label {
   display: flex;
   flex-direction: row;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: normal;
   width: 90px;
   margin-right: 10px;
@@ -22,13 +22,18 @@
   text-align: left;
   line-height: unset;
 }
-.nut-form-item-label-required {
+.nut-form-item-label-left-required {
   color: #ff0f23;
   margin-right: 4px;
-  display: block;
   position: absolute;
   left: -10px;
 }
+.nut-form-item-label-right-required {
+  color: #ff0f23;
+  margin-left: 4px;
+  position: absolute;
+  right: -10px;
+}
 .nut-form-item .nut-form-item-labeltxt {
   position: relative;
   font-size: 12px;
@@ -129,13 +134,6 @@
   white-space: nowrap;
 }
 
-.nut-form-item-label-left-required {
-  display: block;
-  line-height: 1.5;
-  position: absolute;
-  left: 0.1em;
-}
-
 .nut-form-item-top {
   flex-direction: column;
   align-items: flex-start;

package/dist/es/packages/formitem/style-jmapp/formitem.scss

@@ -18,19 +18,25 @@
     word-wrap: break-word;
     text-align: $form-item-label-text-align;
     line-height: unset;
-  }
 
-  &-label-required {
-    color: $form-item-required-color;
-    margin-right: $form-item-required-margin-right;
-    display: block;
-    position: absolute;
-    left: -10px;
+    &-left-required {
+      color: $form-item-required-color;
+      margin-right: $form-item-required-margin-right;
+      position: absolute;
+      left: -10px;
+    }
+
+    &-right-required {
+      color: $form-item-required-color;
+      margin-left: $form-item-required-margin-right;
+      position: absolute;
+      right: -10px;
+    }
   }
 
   .nut-form-item-labeltxt {
     position: relative;
-    font-size: 12px;
+    font-size: $form-item-label-font-size;
   }
 
   &-body {
@@ -136,13 +142,6 @@
   white-space: nowrap;
 }
 
-.nut-form-item-label-left-required {
-  display: block;
-  line-height: 1.5;
-  position: absolute;
-  left: 0.1em;
-}
-
 .nut-form-item-top {
   flex-direction: column;
   align-items: flex-start;

package/dist/es/packages/formitem/style-jmapp/style.css

@@ -22,16 +22,21 @@
   text-align: var(--nutui-form-item-label-text-align, left);
   line-height: unset;
 }
-.nut-form-item-label-required {
+.nut-form-item-label-left-required {
   color: var(--nutui-form-item-required-color, var(--nutui-color-danger));
   margin-right: var(--nutui-form-item-required-margin-right, 4px);
-  display: block;
   position: absolute;
   left: -10px;
 }
+.nut-form-item-label-right-required {
+  color: var(--nutui-form-item-required-color, var(--nutui-color-danger));
+  margin-left: var(--nutui-form-item-required-margin-right, 4px);
+  position: absolute;
+  right: -10px;
+}
 .nut-form-item .nut-form-item-labeltxt {
   position: relative;
-  font-size: 12px;
+  font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-text));
 }
 .nut-form-item-body {
   flex: 1;
@@ -121,13 +126,6 @@
   white-space: nowrap;
 }
 
-.nut-form-item-label-left-required {
-  display: block;
-  line-height: 1.5;
-  position: absolute;
-  left: 0.1em;
-}
-
 .nut-form-item-top {
   flex-direction: column;
   align-items: flex-start;

package/dist/es/packages/formitem/style-jrkf/formitem.scss

@@ -18,19 +18,25 @@
     word-wrap: break-word;
     text-align: $form-item-label-text-align;
     line-height: unset;
-  }
 
-  &-label-required {
-    color: $form-item-required-color;
-    margin-right: $form-item-required-margin-right;
-    display: block;
-    position: absolute;
-    left: -10px;
+    &-left-required {
+      color: $form-item-required-color;
+      margin-right: $form-item-required-margin-right;
+      position: absolute;
+      left: -10px;
+    }
+
+    &-right-required {
+      color: $form-item-required-color;
+      margin-left: $form-item-required-margin-right;
+      position: absolute;
+      right: -10px;
+    }
   }
 
   .nut-form-item-labeltxt {
     position: relative;
-    font-size: 12px;
+    font-size: $form-item-label-font-size;
   }
 
   &-body {
@@ -136,13 +142,6 @@
   white-space: nowrap;
 }
 
-.nut-form-item-label-left-required {
-  display: block;
-  line-height: 1.5;
-  position: absolute;
-  left: 0.1em;
-}
-
 .nut-form-item-top {
   flex-direction: column;
   align-items: flex-start;

package/dist/es/packages/formitem/style-jrkf/style.css

@@ -22,16 +22,21 @@
   text-align: var(--nutui-form-item-label-text-align, left);
   line-height: unset;
 }
-.nut-form-item-label-required {
+.nut-form-item-label-left-required {
   color: var(--nutui-form-item-required-color, var(--nutui-color-danger));
   margin-right: var(--nutui-form-item-required-margin-right, 4px);
-  display: block;
   position: absolute;
   left: -10px;
 }
+.nut-form-item-label-right-required {
+  color: var(--nutui-form-item-required-color, var(--nutui-color-danger));
+  margin-left: var(--nutui-form-item-required-margin-right, 4px);
+  position: absolute;
+  right: -10px;
+}
 .nut-form-item .nut-form-item-labeltxt {
   position: relative;
-  font-size: 12px;
+  font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-text));
 }
 .nut-form-item-body {
   flex: 1;
@@ -121,13 +126,6 @@
   white-space: nowrap;
 }
 
-.nut-form-item-label-left-required {
-  display: block;
-  line-height: 1.5;
-  position: absolute;
-  left: 0.1em;
-}
-
 .nut-form-item-top {
   flex-direction: column;
   align-items: flex-start;

package/dist/es/packages/imagepreview/imagepreview.js

@@ -1,5 +1,6 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import React, { useEffect, useRef, useState } from "react";
@@ -13,6 +14,7 @@ import Swiper from "../swiper/index";
 import SwiperItem from "../swiperitem/index";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../hooks/use-props-value";
+import { mergeProps } from "../../utils";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     images: [],
     videos: [],
@@ -30,7 +32,26 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     onClose: function() {}
 });
 export var ImagePreview = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), value = _$_object_spread.value, className = _$_object_spread.className, style = _$_object_spread.style, images = _$_object_spread.images, videos = _$_object_spread.videos, visible = _$_object_spread.visible, defaultValue = _$_object_spread.defaultValue, indicatorColor = _$_object_spread.indicatorColor, pagination = _$_object_spread.pagination, indicator = _$_object_spread.indicator, autoPlay = _$_object_spread.autoPlay, closeOnContentClick = _$_object_spread.closeOnContentClick, closeIcon = _$_object_spread.closeIcon, closeIconPosition = _$_object_spread.closeIconPosition, showMenuByLongpress = _$_object_spread.showMenuByLongpress, onClose = _$_object_spread.onClose, onChange = _$_object_spread.onChange;
+    var _mergeProps = mergeProps(defaultProps, props), value = _mergeProps.value, className = _mergeProps.className, style = _mergeProps.style, images = _mergeProps.images, videos = _mergeProps.videos, visible = _mergeProps.visible, defaultValue = _mergeProps.defaultValue, indicatorColor = _mergeProps.indicatorColor, pagination = _mergeProps.pagination, indicator = _mergeProps.indicator, autoPlay = _mergeProps.autoPlay, loop = _mergeProps.loop, closeOnContentClick = _mergeProps.closeOnContentClick, closeIcon = _mergeProps.closeIcon, closeIconPosition = _mergeProps.closeIconPosition, showMenuByLongpress = _mergeProps.showMenuByLongpress, onClose = _mergeProps.onClose, onChange = _mergeProps.onChange, rest = _object_without_properties(_mergeProps, [
+        "value",
+        "className",
+        "style",
+        "images",
+        "videos",
+        "visible",
+        "defaultValue",
+        "indicatorColor",
+        "pagination",
+        "indicator",
+        "autoPlay",
+        "loop",
+        "closeOnContentClick",
+        "closeIcon",
+        "closeIconPosition",
+        "showMenuByLongpress",
+        "onClose",
+        "onChange"
+    ]);
     var classPrefix = 'nut-imagepreview';
     var ref = useRef(null);
     var _usePropsValue = _sliced_to_array(usePropsValue({
@@ -171,9 +192,10 @@ export var ImagePreview = function(props) {
         onTouchEnd: onTouchEnd,
         onTouchCancel: onTouchEnd
     }, /*#__PURE__*/ React.createElement(Swiper, {
-        autoPlay: autoPlay,
+        autoplay: autoPlay,
+        loop: loop,
+        direction: "horizontal",
         className: "".concat(classPrefix, "-swiper"),
-        loop: true,
         height: "100%",
         style: {
             display: showPop ? 'block' : 'none',
@@ -181,7 +203,6 @@ export var ImagePreview = function(props) {
             width: '100%',
             height: '100%'
         },
-        direction: "horizontal",
         onChange: function(e) {
             return slideChangeEnd(e.detail.current);
         },

package/dist/es/packages/noticebar/noticebar.js

@@ -3,8 +3,9 @@ import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState, useCallback } from "react";
 import { View } from "@tarojs/components";
 import { Close, Notice } from "@nutui/icons-react-taro";
 import classNames from "classnames";
@@ -47,9 +48,10 @@ export var NoticeBar = function(props) {
     var _useState8 = _sliced_to_array(useState(null), 2), isCanScroll = _useState8[0], SetIsCanScroll = _useState8[1];
     var isVertical = direction === 'vertical';
     var _useState9 = _sliced_to_array(useState(null), 2), rect = _useState9[0], setRect = _useState9[1];
-    var active = 0;
+    var activeRef = useRef(0);
     var _useState10 = _sliced_to_array(useState(false), 2), ready = _useState10[0], setReady = _useState10[1];
     var container = useRef(null);
+    var _useState11 = _sliced_to_array(useState(false), 2), isContainerReady = _useState11[0], setIsContainerReady = _useState11[1];
     var innerRef = useRef(null);
     var swiperRef = useRef({
         moving: false,
@@ -59,8 +61,8 @@ export var NoticeBar = function(props) {
         offset: 0,
         size: 0
     });
-    var _useState11 = _sliced_to_array(useState([]), 2), childOffset = _useState11[0], setChildOffset = _useState11[1];
-    var _useState12 = _sliced_to_array(useState(0), 2), offset = _useState12[0], setOffset = _useState12[1];
+    var _useState12 = _sliced_to_array(useState([]), 2), childOffset = _useState12[0], setChildOffset = _useState12[1];
+    var _useState13 = _sliced_to_array(useState(0), 2), offset = _useState13[0], setOffset = _useState13[1];
     var _useMemo = useMemo(function() {
         var childCount = 0;
         var childs = React.Children.map(children, function(child) {
@@ -100,7 +102,9 @@ export var NoticeBar = function(props) {
             // 销毁事件
             clearInterval(timer);
         };
-    }, []);
+    }, [
+        childs
+    ]);
     useEffect(function() {
         initScrollWrap(content);
     }, [
@@ -219,7 +223,7 @@ export var NoticeBar = function(props) {
     };
     // 垂直自定义滚动方式
     var init = function() {
-        var active = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : +0;
+        var activeIndex = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
         if (!(container === null || container === void 0 ? void 0 : container.current)) return;
         setTimeout(/*#__PURE__*/ _async_to_generator(function() {
             var rects, _active, _height, targetOffset;
@@ -232,17 +236,18 @@ export var NoticeBar = function(props) {
                         ];
                     case 1:
                         rects = _state.sent();
-                        _active = Math.max(Math.min(childCount - 1, active), 0);
+                        _active = Math.max(Math.min(childCount - 1, activeIndex), 0);
                         _height = rects === null || rects === void 0 ? void 0 : rects.height;
                         trackSize = childCount * Number(_height);
                         targetOffset = getOffset(_active);
-                        swiperRef.current.moving = true;
-                        if (ready) {
-                            swiperRef.current.moving = false;
-                        }
-                        active = _active;
+                        activeRef.current = _active;
                         setRect(rects);
                         setOffset(targetOffset);
+                        setChildOffset(new Array(childCount).fill(0));
+                        // 关闭动画并立即设置样式
+                        swiperRef.current.moving = true;
+                        setStyle(targetOffset, rects);
+                        swiperRef.current.moving = false;
                         setReady(true);
                         return [
                             2
@@ -253,7 +258,6 @@ export var NoticeBar = function(props) {
     };
     useEffect(function() {
         if (ready) {
-            stopAutoPlay();
             autoplay();
         }
         return function() {
@@ -263,18 +267,19 @@ export var NoticeBar = function(props) {
         ready
     ]);
     useEffect(function() {
-        if (isVertical && children) {
-            init();
+        if (isVertical && children && isContainerReady) {
             stopAutoPlay();
-            autoplay();
+            setReady(false);
+            init();
         }
     }, [
         children,
-        container === null || container === void 0 ? void 0 : container.current
+        isContainerReady
     ]);
     // 清除定时器
     var stopAutoPlay = function() {
         clearTimeout(swiperRef.current.autoplayTimer);
+        swiperRef.current.moving = false;
         swiperRef.current.autoplayTimer = null;
     };
     // 定时轮播
@@ -293,23 +298,26 @@ export var NoticeBar = function(props) {
         var targetActive = getActive(pace);
         // 父级容器偏移量
         var targetOffset = getOffset(targetActive, offset);
-        // 如果循环，调整开头结尾图片位置
-        if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
-            var rightBound = targetOffset < minOffset;
-            childOffset[0] = rightBound ? trackSize : 0;
-        }
-        if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
-            var leftBound = targetOffset > 0;
-            childOffset[childCount - 1] = leftBound ? -trackSize : 0;
-        }
-        setChildOffset(childOffset);
-        active = targetActive;
+        // 循环滚动，调整开头结尾图片位置
+        setChildOffset(function(prevChildOffset) {
+            var newChildOffset = _to_consumable_array(prevChildOffset);
+            if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
+                var rightBound = targetOffset < minOffset;
+                newChildOffset[0] = rightBound ? trackSize : 0;
+            }
+            if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
+                var leftBound = targetOffset > 0;
+                newChildOffset[childCount - 1] = leftBound ? -trackSize : 0;
+            }
+            return newChildOffset;
+        });
+        activeRef.current = targetActive;
         setOffset(targetOffset);
-        getStyle(targetOffset);
+        setStyle(targetOffset);
     };
     // 下一页
     var next = function() {
-        resettPosition();
+        resetPosition();
         requestFrame(function() {
             requestFrame(function() {
                 swiperRef.current.moving = false;
@@ -322,18 +330,18 @@ export var NoticeBar = function(props) {
     var handleItemClick = function(event, value) {
         onItemClick && onItemClick(event, value);
     };
-    var getStyle = function() {
-        var moveOffset = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : offset;
+    var setStyle = function() {
+        var moveOffset = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : offset, currentRect = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : rect;
         var target = innerRef.current;
         if (!target) {
             return;
         }
         var _offset = 0;
-        // 容器高度-元素高度
-        var val = ((rect === null || rect === void 0 ? void 0 : rect.height) || 0) - height;
-        _offset = moveOffset + Number(active === childCount - 1 && val / 2);
+        var containerHeight = (currentRect === null || currentRect === void 0 ? void 0 : currentRect.height) || height;
+        var val = containerHeight - Number(height);
+        _offset = moveOffset + Number(activeRef.current === childCount - 1 && val / 2);
         target.style.transitionDuration = "".concat(swiperRef.current.moving ? 0 : duration, "ms");
-        target.style.height = "".concat(Number(height) * childCount, "px");
+        target.style.height = "".concat(Number(height) * (childCount + 1), "px");
         target.style.transform = "translate3D(0,".concat(_offset, "px,0)");
     };
     // 无缝滚动第一个元素位移控制
@@ -351,11 +359,12 @@ export var NoticeBar = function(props) {
     };
     // 确定当前active 元素
     var getActive = function(pace) {
+        var currentActive = activeRef.current;
         if (pace) {
-            var _active = active + pace;
+            var _active = currentActive + pace;
             return range(_active, -1, childCount);
         }
-        return active;
+        return currentActive;
     };
     // 计算位移
     var getOffset = function(active) {
@@ -373,14 +382,15 @@ export var NoticeBar = function(props) {
         return Math.min(Math.max(num, min), max);
     };
     // 重置首尾位置信息
-    var resettPosition = function() {
+    var resetPosition = function() {
+        var currentActive = activeRef.current;
         swiperRef.current.moving = true;
-        if (active <= -1) {
+        if (currentActive <= -1) {
             move({
                 pace: childCount
             });
         }
-        if (active >= childCount) {
+        if (currentActive >= childCount) {
             move({
                 pace: -childCount
             });
@@ -394,6 +404,20 @@ export var NoticeBar = function(props) {
             stopAutoPlay();
         };
     }, []);
+    var hasVerticalContent = useMemo(function() {
+        if (!isVertical) return false;
+        if (children) return (childs === null || childs === void 0 ? void 0 : childs.length) > 0;
+        return (list === null || list === void 0 ? void 0 : list.length) > 0;
+    }, [
+        isVertical,
+        childs,
+        list,
+        children
+    ]);
+    var containerRefCallback = useCallback(function(ref) {
+        container.current = ref;
+        setIsContainerReady(true);
+    }, []);
     return (
         /*#__PURE__*/ React.createElement(View, {
             className: cls,
@@ -419,10 +443,10 @@ export var NoticeBar = function(props) {
             onClick: onClickIcon
         }, rightIcon || /*#__PURE__*/ React.createElement(Close, {
             size: 12
-        })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /*#__PURE__*/ React.createElement(View, {
+        })) : null) : null, showNoticeBar && hasVerticalContent && isVertical ? /*#__PURE__*/ React.createElement(View, {
             className: "nut-noticebar-vertical",
             style: barStyle,
-            ref: container,
+            ref: containerRefCallback,
             onClick: handleClick
         }, leftIcon ? /*#__PURE__*/ React.createElement(View, {
             className: "nut-noticebar-box-left-icon"