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

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

@@ -14,39 +14,44 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     direction: 'horizontal',
     list: [],
     duration: 1000,
-    height: 40,
+    height: 36,
     content: '',
     closeable: false,
     wrap: false,
     leftIcon: /*#__PURE__*/ React.createElement(Notice, null),
     rightIcon: null,
     right: null,
+    description: null,
+    tag: null,
+    action: null,
+    autoClose: 0,
     delay: 1,
     scrollable: null,
     speed: 50
 });
 export var NoticeBar = function NoticeBar(props) {
     var rtl = useRtl();
-    var _$_object_spread = _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 = _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 = useRef(null);
     var contentRef = useRef(null);
-    var _useState = _sliced_to_array(useState(true), 2), showNoticeBar = _useState[0], SetShowNoticeBar = _useState[1];
+    var _useState = _sliced_to_array(useState(true), 2), showNoticeBar = _useState[0], setShowNoticeBar = _useState[1];
+    var _useState1 = _sliced_to_array(useState(100), 2), autoCloseProgress = _useState1[0], setAutoCloseProgress = _useState1[1];
     var scrollList = useRef([]);
-    var _useState1 = _sliced_to_array(useState(0), 2), wrapWidth = _useState1[0], SetWrapWidth = _useState1[1];
-    var _useState2 = _sliced_to_array(useState(true), 2), firstRound = _useState2[0], SetFirstRound = _useState2[1];
-    var _useState3 = _sliced_to_array(useState(0), 2), animationDuration = _useState3[0], SetAnimationDuration = _useState3[1];
-    var _useState4 = _sliced_to_array(useState(0), 2), offsetWidth = _useState4[0], SetOffsetW = _useState4[1];
-    var _useState5 = _sliced_to_array(useState(''), 2), animationClass = _useState5[0], SetAnimationClass = _useState5[1];
-    var _useState6 = _sliced_to_array(useState(false), 2), animate = _useState6[0], SetAnimate = _useState6[1];
-    var _useState7 = _sliced_to_array(useState(0), 2), timer = _useState7[0], SetTimer = _useState7[1];
-    var _useState8 = _sliced_to_array(useState(null), 2), isCanScroll = _useState8[0], SetIsCanScroll = _useState8[1];
+    var _useState2 = _sliced_to_array(useState(0), 2), wrapWidth = _useState2[0], SetWrapWidth = _useState2[1];
+    var _useState3 = _sliced_to_array(useState(true), 2), firstRound = _useState3[0], SetFirstRound = _useState3[1];
+    var _useState4 = _sliced_to_array(useState(0), 2), animationDuration = _useState4[0], SetAnimationDuration = _useState4[1];
+    var _useState5 = _sliced_to_array(useState(0), 2), offsetWidth = _useState5[0], SetOffsetW = _useState5[1];
+    var _useState6 = _sliced_to_array(useState(''), 2), animationClass = _useState6[0], SetAnimationClass = _useState6[1];
+    var _useState7 = _sliced_to_array(useState(false), 2), animate = _useState7[0], SetAnimate = _useState7[1];
+    var _useState8 = _sliced_to_array(useState(0), 2), timer = _useState8[0], SetTimer = _useState8[1];
+    var _useState9 = _sliced_to_array(useState(null), 2), isCanScroll = _useState9[0], SetIsCanScroll = _useState9[1];
     var isVertical = direction === 'vertical';
-    var _useState9 = _sliced_to_array(useState(null), 2), rect = _useState9[0], setRect = _useState9[1];
+    var _useState10 = _sliced_to_array(useState(null), 2), rect = _useState10[0], setRect = _useState10[1];
     var activeRef = useRef(0);
-    var _useState10 = _sliced_to_array(useState(false), 2), ready = _useState10[0], setReady = _useState10[1];
+    var _useState11 = _sliced_to_array(useState(false), 2), ready = _useState11[0], setReady = _useState11[1];
     var container = useRef(null);
-    var _useState11 = _sliced_to_array(useState(false), 2), isContainerReady = _useState11[0], setIsContainerReady = _useState11[1];
+    var _useState12 = _sliced_to_array(useState(false), 2), isContainerReady = _useState12[0], setIsContainerReady = _useState12[1];
     var innerRef = useRef(null);
     var swiperRef = useRef({
         moving: false,
@@ -56,8 +61,8 @@ export var NoticeBar = function NoticeBar(props) {
         offset: 0,
         size: 0
     });
-    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 _useState13 = _sliced_to_array(useState([]), 2), childOffset = _useState13[0], setChildOffset = _useState13[1];
+    var _useState14 = _sliced_to_array(useState(0), 2), offset = _useState14[0], setOffset = _useState14[1];
     var _useMemo = useMemo(function() {
         var childCount = 0;
         var childs = React.Children.map(children, function(child) {
@@ -82,6 +87,35 @@ export var NoticeBar = function NoticeBar(props) {
         }
         return 0;
     }();
+    var onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    var autoCloseTimerRef = useRef(0);
+    var autoCloseIntervalRef = useRef(0);
+    // 自动关闭
+    useEffect(function() {
+        if (autoClose && autoClose > 0 && showNoticeBar) {
+            var startTime = Date.now();
+            autoCloseIntervalRef.current = window.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 = window.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
+    ]);
     useEffect(function() {
         if (isVertical) {
             if (children) {
@@ -140,7 +174,9 @@ export var NoticeBar = function NoticeBar(props) {
     };
     var onClickIcon = function onClickIcon(event) {
         event.stopPropagation();
-        SetShowNoticeBar(!closeable);
+        setShowNoticeBar(false);
+        clearInterval(autoCloseIntervalRef.current);
+        clearTimeout(autoCloseTimerRef.current);
         close && close(event);
         onClose && onClose(event);
     };
@@ -168,13 +204,6 @@ export var NoticeBar = function NoticeBar(props) {
             SetAnimate(false);
         }, time);
     };
-    // 点击滚动单元
-    var handleClickIcon = function handleClickIcon(event) {
-        event.stopPropagation();
-        SetShowNoticeBar(!closeable);
-        close && close(event);
-        onClose && onClose(event);
-    };
     var isEllipsis = function isEllipsis() {
         if (isCanScroll == null && align === 'left') {
             return wrap;
@@ -376,6 +405,52 @@ export var NoticeBar = function NoticeBar(props) {
         container.current = ref;
         setIsContainerReady(true);
     }, []);
+    var renderLeftIcon = function renderLeftIcon() {
+        if (!leftIcon) return null;
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(classPrefix, "-box-left-icon")
+        }, leftIcon);
+    };
+    var renderTag = function renderTag() {
+        if (!tag) return null;
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(classPrefix, "-box-tag")
+        }, tag);
+    };
+    var renderAction = function renderAction() {
+        if (!action) return null;
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(classPrefix, "-box-action")
+        }, action);
+    };
+    var renderAutoCloseIcon = function renderAutoCloseIcon() {
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(classPrefix, "-box-close-countdown"),
+            style: {
+                '--progress': "".concat(autoCloseProgress, "%")
+            }
+        }, /*#__PURE__*/ React.createElement(Close, {
+            className: "".concat(classPrefix, "-box-close-icon")
+        }));
+    };
+    var renderCloseIcon = function renderCloseIcon() {
+        if (!closeable && !rightIcon && !(autoClose && autoClose > 0)) return null;
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(classPrefix, "-box-right-icon"),
+            onClick: onClickIcon
+        }, rightIcon || (autoClose && autoClose > 0 ? renderAutoCloseIcon() : /*#__PURE__*/ React.createElement(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.createElement("div", {
+            className: "".concat(classPrefix, "-box-right")
+        }, right);
+    };
     return /*#__PURE__*/ React.createElement("div", {
         className: cls,
         style: style
@@ -383,32 +458,27 @@ export var NoticeBar = function NoticeBar(props) {
         className: noticebarClass,
         style: barStyle,
         onClick: handleClick
-    }, leftIcon ? /*#__PURE__*/ React.createElement("div", {
-        className: "nut-noticebar-box-left-icon"
-    }, leftIcon) : null, /*#__PURE__*/ React.createElement("div", {
+    }, renderLeftIcon(), /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-box-content-wrapper")
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-box-content-main")
+    }, /*#__PURE__*/ React.createElement("div", {
         ref: wrapRef,
-        className: "nut-noticebar-box-wrap"
+        className: "".concat(classPrefix, "-box-wrap")
     }, /*#__PURE__*/ React.createElement("div", {
         ref: contentRef,
-        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)), right ? /*#__PURE__*/ React.createElement("div", {
-        className: "nut-noticebar-box-right"
-    }, right) : null, closeable || rightIcon ? /*#__PURE__*/ React.createElement("div", {
-        className: "nut-noticebar-box-right-icon",
-        onClick: onClickIcon
-    }, rightIcon || /*#__PURE__*/ React.createElement(Close, {
-        className: "nut-noticebar-box-right-icon-default"
-    })) : null) : null, showNoticeBar && hasVerticalContent && isVertical ? /*#__PURE__*/ React.createElement("div", {
-        className: "nut-noticebar-vertical",
+    }, children, content)), renderTag()), description ? /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-box-description")
+    }, description) : null), renderAction(), renderRight(), renderCloseIcon()) : null, showNoticeBar && hasVerticalContent && isVertical ? /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-vertical"),
         style: barStyle,
         ref: containerRefCallback,
         onClick: handleClick
-    }, leftIcon ? /*#__PURE__*/ React.createElement("div", {
-        className: "nut-noticebar-box-left-icon"
-    }, leftIcon) : null, children ? /*#__PURE__*/ React.createElement("div", {
-        className: "nut-noticebar-box-wrap",
+    }, renderLeftIcon(), children ? /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-box-wrap"),
         ref: innerRef
     }, scrollList.current.map(function(item, index) {
         return /*#__PURE__*/ React.createElement("div", {
@@ -419,12 +489,11 @@ export var NoticeBar = function NoticeBar(props) {
             }
         }, item);
     })) : /*#__PURE__*/ React.createElement("div", {
-        className: "nut-noticebar-box-horseLamp-list",
+        className: "".concat(classPrefix, "-box-horseLamp-list"),
         style: horseLampStyle
     }, scrollList.current.map(function(item, index) {
-        return(// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-        /*#__PURE__*/ React.createElement("div", {
-            className: "nut-noticebar-box-horseLamp-list-item",
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(classPrefix, "-box-horseLamp-list-item"),
             style: {
                 height: height
             },
@@ -432,14 +501,7 @@ export var NoticeBar = function NoticeBar(props) {
             onClick: function onClick(e) {
                 handleItemClick(e, item);
             }
-        }, item));
-    })), /*#__PURE__*/ React.createElement("div", {
-        className: "nut-noticebar-box-right-icon",
-        onClick: function onClick(e) {
-            handleClickIcon(e);
-        }
-    }, rightIcon || (closeable ? /*#__PURE__*/ React.createElement(Close, {
-        className: "nut-noticebar-box-right-icon-default"
-    }) : null))) : null);
+        }, item);
+    })), renderTag(), renderAction(), renderRight(), renderCloseIcon()) : null);
 };
 NoticeBar.displayName = 'NutNoticeBar';

package/dist/es/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;
+    }
   }
 }