feat: support stack (#311)

* feat: support stack

* feat: support stack

* fix: crash

* chore: bump rc-motion

* chore: update

* feat: pause close timeout on hover

* feat: support scroll

* feat: support placement

* feat: stack support offset and gap

* chore: fix import

* fix: nodeRef

* test: add test case

* chore: update

Author: MadCcc

assets/index.less

@@ -7,17 +7,29 @@
   display: flex;
   max-height: 100vh;
   padding: 10px;
-  overflow-y: auto;
   align-items: flex-end;
+  width: 340px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100vh;
+  box-sizing: border-box;
+  pointer-events: none;
+  flex-direction: column;
 
   // Position
   &-top,
   &-topLeft,
   &-topRight {
     top: 0;
-    flex-direction: column;
   }
 
+  &-bottom,
+  &-bottomRight,
+  &-bottomLeft {
+    bottom: 0;
+  }
+
+  &-bottomRight,
   &-topRight {
     right: 0;
   }
@@ -27,14 +39,22 @@
     position: relative;
     display: block;
     box-sizing: border-box;
-    width: auto;
-    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: 100%;
+
+    &-wrapper {
+      pointer-events: auto;
+      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 {
@@ -77,6 +97,11 @@
     transition: all 0.3s;
   }
 
+  &-fade-appear-prepare {
+    pointer-events: none;
+    opacity: 0 !important;
+  }
+
   &-fade-appear-start {
     transform: translateX(100%);
     opacity: 0;
@@ -133,4 +158,78 @@
   //     opacity: 0;
   //   }
   // }
+
+  // ========================= Stack =========================
+  &-stack {
+    & > .@{notificationPrefixCls}-notice {
+      &-wrapper {
+        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;
+        }
+
+        &: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;
+        }
+      }
+    }
+
+    &&-expanded {
+      & > .@{notificationPrefixCls}-notice {
+        &-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: calc(100% + 32px);
+            background: transparent;
+            pointer-events: auto;
+            color: rgb(0,0,0);
+          }
+        }
+      }
+    }
+
+    &.@{notificationPrefixCls}-bottomRight {
+      & > .@{notificationPrefixCls}-notice-wrapper {
+        top: unset;
+        bottom: 12px;
+      }
+    }
+  }
 }

docs/demo/stack.md

@@ -0,0 +1,8 @@
+---
+title: stack
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/stack.tsx"></code>

docs/examples/hooks.tsx

@@ -4,7 +4,7 @@ import '../../assets/index.less';
 import { useNotification } from '../../src';
 import motion from './motion';
 
-export default () => {
+const App = () => {
   const [notice, contextHolder] = useNotification({ motion, closable: true });
 
   return (
@@ -26,7 +26,25 @@ export default () => {
           <button
             onClick={() => {
               notice.open({
-                content: `${new Date().toISOString()}`,
+                content: `${Array(Math.round(Math.random() * 5) + 1)
+                  .fill(1)
+                  .map(() => new Date().toISOString())
+                  .join('\n')}`,
+                duration: null,
+              });
+            }}
+          >
+            Not Auto Close
+          </button>
+
+          {/* Not Close */}
+          <button
+            onClick={() => {
+              notice.open({
+                content: `${Array(5)
+                  .fill(1)
+                  .map(() => new Date().toISOString())
+                  .join('\n')}`,
                 duration: null,
               });
             }}
@@ -79,3 +97,9 @@ export default () => {
     </>
   );
 };
+
+export default () => (
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

docs/examples/stack.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable no-console */
+import React from 'react';
+import '../../assets/index.less';
+import { useNotification } from '../../src';
+import motion from './motion';
+
+const Context = React.createContext({ name: 'light' });
+
+const getConfig = () => ({
+  content: `${Array(Math.round(Math.random() * 5) + 1)
+    .fill(1)
+    .map(() => new Date().toISOString())
+    .join('\n')}`,
+  duration: null,
+});
+
+const Demo = () => {
+  const [{ open }, holder] = useNotification({ motion, stack: true });
+
+  return (
+    <Context.Provider value={{ name: 'bamboo' }}>
+      <button
+        type="button"
+        onClick={() => {
+          open(getConfig());
+        }}
+      >
+        Top Right
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          open({ ...getConfig(), placement: 'bottomRight' });
+        }}
+      >
+        Bottom Right
+      </button>
+      {holder}
+    </Context.Provider>
+  );
+};
+
+export default Demo;

package.json

@@ -79,7 +79,7 @@
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "classnames": "2.x",
-    "rc-motion": "^2.6.0",
+    "rc-motion": "^2.8.0",
     "rc-util": "^5.20.1"
   },
   "lint-staged": {

src/Notice.tsx

@@ -11,6 +11,7 @@ export interface NoticeProps extends Omit<NoticeConfig, 'onClose'> {
 
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   onNoticeClose?: (key: React.Key) => void;
+  hovering?: boolean;
 }
 
 const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }>((props, ref) => {
@@ -29,8 +30,10 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     onClick,
     onNoticeClose,
     times,
+    hovering: forcedHovering,
   } = props;
   const [hovering, setHovering] = React.useState(false);
+  const mergedHovering = forcedHovering || hovering;
 
   // ======================== Close =========================
   const onInternalClose = () => {
@@ -45,7 +48,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
 
   // ======================== Effect ========================
   React.useEffect(() => {
-    if (!hovering && duration > 0) {
+    if (!mergedHovering && duration > 0) {
       const timeout = setTimeout(() => {
         onInternalClose();
       }, duration * 1000);
@@ -55,7 +58,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [duration, hovering, times]);
+  }, [duration, mergedHovering, times]);
 
   // ======================== Render ========================
   const noticePrefixCls = `${prefixCls}-notice`;
@@ -68,11 +71,13 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
         [`${noticePrefixCls}-closable`]: closable,
       })}
       style={style}
-      onMouseEnter={() => {
+      onMouseEnter={(e) => {
         setHovering(true);
+        divProps?.onMouseEnter?.(e);
       }}
-      onMouseLeave={() => {
+      onMouseLeave={(e) => {
         setHovering(false);
+        divProps?.onMouseLeave?.(e);
       }}
       onClick={onClick}
     >