feat: support stack

react-component · Aug 31, 2023 · 5df25c3 · 5df25c3
1 parent b1d00ef
commit 5df25c3
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 74 deletions.
diff --git a/assets/index.less b/assets/index.less
@@ -26,14 +26,21 @@
     position: relative;
     display: block;
     box-sizing: border-box;
-    margin: 12px 0;
     line-height: 1.5;
-    background: #fff;
-    border: 1px solid #999;
-    border: 0px solid rgba(0, 0, 0, 0);
-    border-radius: 3px 3px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-    width: 300px;
+    width: 100%;
+
+    &-wrapper {
+      position: relative;
+      display: block;
+      box-sizing: border-box;
+      border-radius: 3px 3px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+      margin: 0 0 16px;
+      border: 1px solid #999;
+      border: 0px solid rgba(0, 0, 0, 0);
+      background: #fff;
+      width: 300px;
+    }
 
     // Content
     &-content {
@@ -141,59 +148,65 @@
   // ========================= Stack =========================
   &-stack {
     & > .@{notificationPrefixCls}-notice {
-      transition: all 0.3s;
-      position: absolute;
-      top: 12px;
-      opacity: 1;
-
-      &:not(:nth-last-child(-n + 3)) {
-        opacity: 0;
-        right: 34px;
-        width: 252px;
-        overflow: hidden;
-        color: transparent;
-        pointer-events: none;
-      }
+      &-wrapper {
+        transition: all 0.3s;
+        position: absolute;
+        top: 12px;
+        opacity: 1;
 
-      &:nth-last-child(1) {
-        right: 10px;
-      }
+        &:not(:nth-last-child(-n + 3)) {
+          opacity: 0;
+          right: 34px;
+          width: 252px;
+          overflow: hidden;
+          color: transparent;
+          pointer-events: none;
+        }
 
-      &:nth-last-child(2) {
-        right: 18px;
-        width: 284px;
-        color: transparent;
-        overflow: hidden;
-      }
+        &:nth-last-child(1) {
+          right: 10px;
+        }
+
+        &:nth-last-child(2) {
+          right: 18px;
+          width: 284px;
+          color: transparent;
+          overflow: hidden;
+        }
 
-      &:nth-last-child(3) {
-        right: 26px;
-        width: 268px;
-        color: transparent;
-        overflow: hidden;
+        &:nth-last-child(3) {
+          right: 26px;
+          width: 268px;
+          color: transparent;
+          overflow: hidden;
+        }
       }
     }
 
     &&-expanded {
       & > .@{notificationPrefixCls}-notice {
-        &:not(:nth-last-child(-n + 1)) {
-          opacity: 1;
-          width: 300px;
-          right: 10px;
-          overflow: unset;
-          color: inherit;
-          pointer-events: auto;
-        }
-
-        &::after {
-          content: "";
-          position: absolute;
-          left: 0;
-          right: 0;
-          top: calc(100% + 1px);
-          width: 100%;
-          height: 16px;
-          background: transparent
+        &-wrapper {
+          &:not(:nth-last-child(-n + 1)) {
+            opacity: 1;
+            width: 300px;
+            right: 10px;
+            overflow: unset;
+            color: inherit;
+            pointer-events: auto;
+          }
+
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: -16px;
+            width: 100%;
+            height: 16px;
+            background: transparent;
+            pointer-events: auto;
+            color: rgb(0,0,0);
+          }
         }
       }
     }

diff --git a/src/NoticeList.tsx b/src/NoticeList.tsx
@@ -61,7 +61,10 @@ const NoticeList: FC<NoticeListProps> = (props) => {
   return (
     <CSSMotionList
       key={placement}
-      className={clsx(prefixCls, `${prefixCls}-${placement}`, ctxCls?.list, className)}
+      className={clsx(prefixCls, `${prefixCls}-${placement}`, ctxCls?.list, className, {
+        [`${prefixCls}-stack`]: !!stack,
+        [`${prefixCls}-stack-expanded`]: expanded,
+      })}
       style={style}
       keys={keys}
       motionAppear
@@ -83,12 +86,14 @@ const NoticeList: FC<NoticeListProps> = (props) => {
         const stackStyle: CSSProperties = {};
         if (stack) {
           if (index > 0) {
-            stackStyle.height = expanded ? '' : latestNotice.offsetHeight;
+            stackStyle.height = expanded
+              ? listRef.current[index]?.offsetHeight
+              : latestNotice.offsetHeight;
             stackStyle.transform = `translateY(${
               index * 8 +
               (expanded
                 ? listRef.current.reduce(
-                    (acc, item, refIndex) => acc + (refIndex < index ? item.offsetHeight : 0),
+                    (acc, item, refIndex) => acc + (refIndex < index ? item.offsetHeight ?? 0 : 0),
                     0,
                   )
                 : 0)
@@ -97,28 +102,32 @@ const NoticeList: FC<NoticeListProps> = (props) => {
         }
 
         return (
-          <Notice
-            {...config}
-            ref={(node) => {
-              nodeRef(node);
-              listRef.current[index] = node;
-            }}
-            prefixCls={prefixCls}
-            className={clsx(motionClassName, configClassName, ctxCls?.notice)}
+          <div
+            className={clsx(`${prefixCls}-notice-wrapper`, motionClassName)}
             style={{
               ...motionStyle,
-              ...configStyle,
               ...stackStyle,
             }}
-            times={times}
-            key={key}
-            eventKey={key}
-            onNoticeClose={onNoticeClose}
-            props={{
-              onMouseEnter: () => setHoverCount((c) => c + 1),
-              onMouseLeave: () => setHoverCount((c) => c - 1),
-            }}
-          />
+            onMouseEnter={() => setHoverCount((c) => c + 1)}
+            onMouseLeave={() => setHoverCount((c) => c - 1)}
+          >
+            <Notice
+              {...config}
+              ref={(node) => {
+                nodeRef(node);
+                listRef.current[index] = node;
+              }}
+              prefixCls={prefixCls}
+              className={clsx(configClassName, ctxCls?.notice)}
+              style={{
+                ...configStyle,
+              }}
+              times={times}
+              key={key}
+              eventKey={key}
+              onNoticeClose={onNoticeClose}
+            />
+          </div>
         );
       }}
     </CSSMotionList>

diff --git a/src/Notifications.tsx b/src/Notifications.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { createPortal } from 'react-dom';
 import type { CSSMotionProps } from 'rc-motion';
 import type { InnerOpenConfig, OpenConfig, Placement, Placements } from './interface';
@@ -159,6 +159,7 @@ const Notifications = React.forwardRef<NotificationsRef, NotificationsProps>((pr
             motion={motion}
             onNoticeClose={onNoticeClose}
             onAllNoticeRemoved={onAllNoticeRemoved}
+            stack={stack}
           />
         );