@nutui/nutui-react-taro 4.0.0-beta.5 → 4.0.0-beta.7

package/dist/cjs/packages/noticebar/noticebar.js

@@ -31,20 +31,24 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     direction: 'horizontal',
     list: [],
     duration: 1000,
-    height: 40,
+    height: 36,
     content: '',
     closeable: false,
     wrap: false,
     leftIcon: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Notice, null),
     rightIcon: null,
     right: null,
+    description: null,
+    tag: null,
+    action: null,
+    autoClose: 0,
     delay: 1,
     scrollable: null,
     speed: 50
 });
 var NoticeBar = function NoticeBar(props) {
     var rtl = (0, _index.useRtl)();
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style, align = _$_object_spread.align, direction = _$_object_spread.direction, list = _$_object_spread.list, duration = _$_object_spread.duration, height = _$_object_spread.height, content = _$_object_spread.content, closeable = _$_object_spread.closeable, wrap = _$_object_spread.wrap, leftIcon = _$_object_spread.leftIcon, rightIcon = _$_object_spread.rightIcon, right = _$_object_spread.right, delay = _$_object_spread.delay, scrollable = _$_object_spread.scrollable, speed = _$_object_spread.speed, close = _$_object_spread.close, click = _$_object_spread.click, onClose = _$_object_spread.onClose, onClick = _$_object_spread.onClick, onItemClick = _$_object_spread.onItemClick;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style, align = _$_object_spread.align, direction = _$_object_spread.direction, list = _$_object_spread.list, duration = _$_object_spread.duration, height = _$_object_spread.height, content = _$_object_spread.content, closeable = _$_object_spread.closeable, wrap = _$_object_spread.wrap, leftIcon = _$_object_spread.leftIcon, rightIcon = _$_object_spread.rightIcon, right = _$_object_spread.right, description = _$_object_spread.description, tag = _$_object_spread.tag, action = _$_object_spread.action, autoClose = _$_object_spread.autoClose, delay = _$_object_spread.delay, scrollable = _$_object_spread.scrollable, speed = _$_object_spread.speed, close = _$_object_spread.close, click = _$_object_spread.click, onClose = _$_object_spread.onClose, onClick = _$_object_spread.onClick, onItemClick = _$_object_spread.onItemClick;
     var classPrefix = 'nut-noticebar';
     var wrapRef = (0, _react.useRef)(null);
     var contentRef = (0, _react.useRef)(null);
@@ -52,21 +56,22 @@ var NoticeBar = function NoticeBar(props) {
     var wrapRefId = "wrap-ref-".concat(uid);
     var contentRefId = "content-ref-".concat(uid);
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(true), 2), showNoticeBar = _useState[0], setShowNoticeBar = _useState[1];
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(100), 2), autoCloseProgress = _useState1[0], setAutoCloseProgress = _useState1[1];
     var scrollList = (0, _react.useRef)([]);
-    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), wrapWidth = _useState1[0], SetWrapWidth = _useState1[1];
-    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(true), 2), firstRound = _useState2[0], SetFirstRound = _useState2[1];
-    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), animationDuration = _useState3[0], SetAnimationDuration = _useState3[1];
-    var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), offsetWidth = _useState4[0], SetOffsetW = _useState4[1];
-    var _useState5 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), animationClass = _useState5[0], SetAnimationClass = _useState5[1];
-    var _useState6 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), animate = _useState6[0], SetAnimate = _useState6[1];
-    var _useState7 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), timer = _useState7[0], SetTimer = _useState7[1];
-    var _useState8 = (0, _sliced_to_array._)((0, _react.useState)(null), 2), isCanScroll = _useState8[0], SetIsCanScroll = _useState8[1];
+    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), wrapWidth = _useState2[0], SetWrapWidth = _useState2[1];
+    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(true), 2), firstRound = _useState3[0], SetFirstRound = _useState3[1];
+    var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), animationDuration = _useState4[0], SetAnimationDuration = _useState4[1];
+    var _useState5 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), offsetWidth = _useState5[0], SetOffsetW = _useState5[1];
+    var _useState6 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), animationClass = _useState6[0], SetAnimationClass = _useState6[1];
+    var _useState7 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), animate = _useState7[0], SetAnimate = _useState7[1];
+    var _useState8 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), timer = _useState8[0], SetTimer = _useState8[1];
+    var _useState9 = (0, _sliced_to_array._)((0, _react.useState)(null), 2), isCanScroll = _useState9[0], SetIsCanScroll = _useState9[1];
     var isVertical = direction === 'vertical';
-    var _useState9 = (0, _sliced_to_array._)((0, _react.useState)(null), 2), rect = _useState9[0], setRect = _useState9[1];
+    var _useState10 = (0, _sliced_to_array._)((0, _react.useState)(null), 2), rect = _useState10[0], setRect = _useState10[1];
     var activeRef = (0, _react.useRef)(0);
-    var _useState10 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), ready = _useState10[0], setReady = _useState10[1];
+    var _useState11 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), ready = _useState11[0], setReady = _useState11[1];
     var container = (0, _react.useRef)(null);
-    var _useState11 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isContainerReady = _useState11[0], setIsContainerReady = _useState11[1];
+    var _useState12 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isContainerReady = _useState12[0], setIsContainerReady = _useState12[1];
     var innerRef = (0, _react.useRef)(null);
     var swiperRef = (0, _react.useRef)({
         moving: false,
@@ -76,8 +81,8 @@ var NoticeBar = function NoticeBar(props) {
         offset: 0,
         size: 0
     });
-    var _useState12 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), childOffset = _useState12[0], setChildOffset = _useState12[1];
-    var _useState13 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), offset = _useState13[0], setOffset = _useState13[1];
+    var _useState13 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), childOffset = _useState13[0], setChildOffset = _useState13[1];
+    var _useState14 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), offset = _useState14[0], setOffset = _useState14[1];
     var _useMemo = (0, _react.useMemo)(function() {
         var childCount = 0;
         var childs = _react.default.Children.map(children, function(child) {
@@ -102,6 +107,35 @@ var NoticeBar = function NoticeBar(props) {
         }
         return 0;
     }();
+    var onCloseRef = (0, _react.useRef)(onClose);
+    onCloseRef.current = onClose;
+    var autoCloseTimerRef = (0, _react.useRef)(0);
+    var autoCloseIntervalRef = (0, _react.useRef)(0);
+    // 自动关闭
+    (0, _react.useEffect)(function() {
+        if (autoClose && autoClose > 0 && showNoticeBar) {
+            var startTime = Date.now();
+            autoCloseIntervalRef.current = setInterval(function() {
+                var elapsed = Date.now() - startTime;
+                var remaining = Math.max(0, 100 - elapsed / autoClose * 100);
+                setAutoCloseProgress(remaining);
+                if (remaining <= 0) clearInterval(autoCloseIntervalRef.current);
+            }, 50);
+            autoCloseTimerRef.current = setTimeout(function() {
+                var _onCloseRef_current;
+                setShowNoticeBar(false);
+                (_onCloseRef_current = onCloseRef.current) === null || _onCloseRef_current === void 0 ? void 0 : _onCloseRef_current.call(onCloseRef);
+            }, autoClose);
+            return function() {
+                clearInterval(autoCloseIntervalRef.current);
+                clearTimeout(autoCloseTimerRef.current);
+            };
+        }
+        setAutoCloseProgress(100);
+    }, [
+        autoClose,
+        showNoticeBar
+    ]);
     (0, _react.useEffect)(function() {
         if (isVertical) {
             if (children) {
@@ -186,6 +220,17 @@ var NoticeBar = function NoticeBar(props) {
         click && click(event);
         onClick && onClick(event);
     };
+    var onClickIcon = (0, _react.useCallback)(function(event) {
+        event.stopPropagation();
+        setShowNoticeBar(false);
+        clearInterval(autoCloseIntervalRef.current);
+        clearTimeout(autoCloseTimerRef.current);
+        close && close(event);
+        onClose && onClose(event);
+    }, [
+        close,
+        onClose
+    ]);
     var onAnimationEnd = function onAnimationEnd() {
         SetFirstRound(false);
         setTimeout(function() {
@@ -208,16 +253,6 @@ var NoticeBar = function NoticeBar(props) {
             SetAnimate(false);
         }, time);
     };
-    var handleClickIcon = (0, _react.useCallback)(function(event) {
-        event.stopPropagation();
-        setShowNoticeBar(!closeable);
-        close && close(event);
-        onClose && onClose(event);
-    }, [
-        close,
-        onClose,
-        closeable
-    ]);
     var isEllipsis = function isEllipsis() {
         if (isCanScroll == null && align === 'left') {
             return wrap;
@@ -370,7 +405,6 @@ var NoticeBar = function NoticeBar(props) {
         };
         if (height) {
             style.height = "".concat(height, "px");
-        // style.lineHeight = `${height}px`
         }
         var offset = childOffset[index];
         if (offset) {
@@ -439,32 +473,52 @@ var NoticeBar = function NoticeBar(props) {
         container.current = ref;
         setIsContainerReady(true);
     }, []);
-    var renderLeftIcon = (0, _react.useCallback)(function() {
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, leftIcon ? /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "nut-noticebar-box-left-icon"
-        }, leftIcon) : null);
-    }, [
-        leftIcon
-    ]);
-    var renderRight = (0, _react.useCallback)(function() {
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, right ? /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "nut-noticebar-box-right"
-        }, right) : null);
-    }, [
-        right
-    ]);
-    var renderRightIcon = (0, _react.useCallback)(function() {
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, rightIcon || closeable ? /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "nut-noticebar-box-right-icon",
-            onClick: handleClickIcon
-        }, rightIcon || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, {
-            className: "nut-noticebar-box-right-icon-default"
-        })) : null);
-    }, [
-        rightIcon,
-        closeable,
-        handleClickIcon
-    ]);
+    var renderLeftIcon = function renderLeftIcon() {
+        if (!leftIcon) return null;
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-box-left-icon")
+        }, leftIcon);
+    };
+    var renderTag = function renderTag() {
+        if (!tag) return null;
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-box-tag")
+        }, tag);
+    };
+    var renderAction = function renderAction() {
+        if (!action) return null;
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-box-action")
+        }, action);
+    };
+    var renderAutoCloseIcon = function renderAutoCloseIcon() {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-box-close-countdown"),
+            style: {
+                '--progress': "".concat(autoCloseProgress, "%")
+            }
+        }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, {
+            className: "".concat(classPrefix, "-box-close-icon")
+        }));
+    };
+    var renderCloseIcon = function renderCloseIcon() {
+        if (!closeable && !rightIcon && !(autoClose && autoClose > 0)) return null;
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-box-right-icon"),
+            onClick: onClickIcon
+        }, rightIcon || (autoClose && autoClose > 0 ? renderAutoCloseIcon() : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, {
+            className: "".concat(classPrefix, "-box-right-icon-default")
+        })));
+    };
+    var renderRight = function renderRight() {
+        if (!right) return null;
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('[NutUI] NoticeBar: `right` prop is deprecated, use `action` instead.');
+        }
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-box-right")
+        }, right);
+    };
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: cls,
         style: style
@@ -473,22 +527,28 @@ var NoticeBar = function NoticeBar(props) {
         style: barStyle,
         onClick: handleClick
     }, renderLeftIcon(), /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-box-content-wrapper")
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-box-content-main")
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         ref: wrapRef,
-        className: "nut-noticebar-box-wrap",
+        className: "".concat(classPrefix, "-box-wrap"),
         id: wrapRefId
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         ref: contentRef,
         id: contentRefId,
-        className: "nut-noticebar-box-wrap-content ".concat(animationClass, " ").concat(isEllipsis() ? 'nut-ellipsis' : ''),
+        className: "".concat(classPrefix, "-box-wrap-content ").concat(animationClass, " ").concat(isEllipsis() ? 'nut-ellipsis' : ''),
         style: contentStyle,
         onAnimationEnd: onAnimationEnd
-    }, children, content)), renderRight(), renderRightIcon()) : null, showNoticeBar && hasVerticalContent && isVertical ? /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "nut-noticebar-vertical",
+    }, children, content)), renderTag()), description ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-box-description")
+    }, description) : null), renderAction(), renderRight(), renderCloseIcon()) : null, showNoticeBar && hasVerticalContent && isVertical ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-vertical"),
         style: barStyle,
         ref: containerRefCallback,
         onClick: handleClick
     }, renderLeftIcon(), children ? /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "nut-noticebar-box-wrap",
+        className: "".concat(classPrefix, "-box-wrap"),
         ref: innerRef
     }, scrollList.current.map(function(item, index) {
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
@@ -499,11 +559,11 @@ var NoticeBar = function NoticeBar(props) {
             }
         }, item);
     })) : /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "nut-noticebar-box-horseLamp-list",
+        className: "".concat(classPrefix, "-box-horseLamp-list"),
         style: horseLampStyle
     }, scrollList.current.map(function(item, index) {
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "nut-noticebar-box-horseLamp-list-item",
+            className: "".concat(classPrefix, "-box-horseLamp-list-item"),
             style: {
                 height: height
             },
@@ -512,6 +572,6 @@ var NoticeBar = function NoticeBar(props) {
                 handleItemClick(e, item);
             }
         }, item);
-    })), renderRight(), renderRightIcon()) : null);
+    })), renderTag(), renderAction(), renderRight(), renderCloseIcon()) : null);
 };
 NoticeBar.displayName = 'NutNoticeBar';

package/dist/cjs/packages/noticebar/style/noticebar.scss

@@ -20,10 +20,17 @@
       .nut-noticebar-box-wrap {
         height: auto;
       }
+
+      .nut-noticebar-box-left-icon {
+        height: $noticebar-left-icon-wrap-width;
+        min-width: $noticebar-left-icon-wrap-width;
+      }
     }
 
     &-wrapable {
       .nut-noticebar-box-wrap {
+        flex: initial;
+
         .nut-noticebar-box-wrap-content {
           position: relative;
           white-space: normal;
@@ -51,26 +58,75 @@
 
     &-left-icon {
       display: flex;
+      align-items: center;
+      justify-content: center;
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
       margin-right: $noticebar-icon-gap;
       background-size: 100% 100%;
+
       .nut-icon {
-        color: $noticebar-color;
+        color: $noticebar-icon-color;
       }
+
+      img {
+        border-radius: $noticebar-left-icon-border-radius;
+      }
+    }
+
+    &-content-wrapper {
+      flex: 1;
+      overflow: hidden;
+      min-width: 0;
+    }
+
+    &-content-main {
+      display: flex;
+      align-items: center;
+    }
+
+    &-description {
+      font-size: $noticebar-description-font-size;
+      color: $noticebar-description-color;
+      line-height: $noticebar-description-line-height;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &-tag {
+      display: flex;
+      align-items: center;
+      width: $noticebar-tag-size;
+      height: $noticebar-tag-size;
+      margin-left: $noticebar-tag-gap;
+      flex-shrink: 0;
+    }
+
+    &-action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      max-width: $noticebar-action-max-width;
+      margin-left: $noticebar-action-gap;
+      font-size: $noticebar-action-font-size;
+      color: $color-primary;
+      flex-shrink: 0;
+      white-space: nowrap;
     }
 
     &-right-icon {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: $noticebar-right-icon-width;
-      margin-left: $noticebar-icon-gap;
+      width: $noticebar-close-size;
+      height: $noticebar-close-size;
+      margin-left: $noticebar-action-gap;
+      flex-shrink: 0;
+      cursor: pointer;
 
       .nut-icon {
-        width: scale-px(12px);
-        height: scale-px(12px);
-        color: $noticebar-color;
+        color: $noticebar-close-color;
       }
     }
 
@@ -79,6 +135,49 @@
       height: $icon-size-12;
     }
 
+    &-close-countdown {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $noticebar-close-size;
+      height: $noticebar-close-size;
+      background: conic-gradient(
+        $noticebar-close-ring-color 0% var(--progress),
+        $noticebar-close-ring-shadow-color var(--progress) 100%
+      );
+      border-radius: 50%;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: scale-px(1px);
+        background: $noticebar-background;
+        border-radius: 50%;
+      }
+    }
+
+    &-close-icon {
+      position: relative;
+      width: $noticebar-close-icon-size;
+      height: $noticebar-close-icon-size;
+      color: $noticebar-close-color;
+    }
+
+    &-left-icon--product {
+      height: scale-px(32px);
+      min-width: scale-px(32px);
+
+      img {
+        background: $white;
+        border-radius: $noticebar-left-icon-border-radius;
+      }
+    }
+
+    &-right {
+      flex-shrink: 0;
+    }
+
     &-wrap {
       display: flex;
       flex: 1;
@@ -158,11 +257,12 @@
       flex-direction: column;
     }
 
+    .nut-noticebar-box-description {
+      white-space: normal;
+    }
+
     .nut-noticebar-box-right-icon {
       align-self: center;
-      display: flex;
-      justify-content: center;
-      width: $noticebar-right-icon-width;
       margin-left: $noticebar-icon-gap;
     }
   }
@@ -196,7 +296,17 @@
 
     &-right-icon {
       margin-left: 0;
-      margin-right: $noticebar-icon-gap;
+      margin-right: $noticebar-action-gap;
+    }
+
+    &-tag {
+      margin-left: 0;
+      margin-right: $noticebar-tag-gap;
+    }
+
+    &-action {
+      margin-left: 0;
+      margin-right: $noticebar-action-gap;
     }
 
     .play {
@@ -225,5 +335,15 @@
       margin-left: 0;
       margin-right: $noticebar-icon-gap;
     }
+
+    .nut-noticebar-box-tag {
+      margin-left: 0;
+      margin-right: $noticebar-tag-gap;
+    }
+
+    .nut-noticebar-box-action {
+      margin-left: 0;
+      margin-right: $noticebar-action-gap;
+    }
   }
 }