fix: should collapse when close (#314)

* fix: should collapse when close

* chore: update

* test: add test case

* chore: add comment

Author: MadCcc

src/NoticeList.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, FC } from 'react';
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import clsx from 'classnames';
 import type { CSSMotionProps } from 'rc-motion';
 import { CSSMotionList } from 'rc-motion';
@@ -47,7 +47,7 @@ const NoticeList: FC<NoticeListProps> = (props) => {
 
   const dictRef = useRef<Record<React.Key, HTMLDivElement>>({});
   const [latestNotice, setLatestNotice] = useState<HTMLDivElement>(null);
-  const [hoverCount, setHoverCount] = useState(0);
+  const [hoverKeys, setHoverKeys] = useState<React.Key[]>([]);
 
   const keys = configList.map((config) => ({
     config,
@@ -56,10 +56,19 @@ const NoticeList: FC<NoticeListProps> = (props) => {
 
   const [stack, { offset, threshold, gap }] = useStack(stackConfig);
 
-  const expanded = stack && (hoverCount > 0 || keys.length <= threshold);
+  const expanded = stack && (hoverKeys.length > 0 || keys.length <= threshold);
 
   const placementMotion = typeof motion === 'function' ? motion(placement) : motion;
 
+  // Clean hover key
+  useEffect(() => {
+    if (hoverKeys.length > 1) {
+      setHoverKeys((prev) =>
+        prev.filter((key) => keys.some(({ key: dataKey }) => key === dataKey)),
+      );
+    }
+  }, [hoverKeys, keys]);
+
   return (
     <CSSMotionList
       key={placement}
@@ -127,8 +136,10 @@ const NoticeList: FC<NoticeListProps> = (props) => {
               ...stackStyle,
               ...configStyle,
             }}
-            onMouseEnter={() => setHoverCount((c) => c + 1)}
-            onMouseLeave={() => setHoverCount((c) => c - 1)}
+            onMouseEnter={() =>
+              setHoverKeys((prev) => (prev.includes(key) ? prev : [...prev, key]))
+            }
+            onMouseLeave={() => setHoverKeys((prev) => prev.filter((k) => k !== key))}
           >
             <Notice
               {...config}
@@ -145,7 +156,7 @@ const NoticeList: FC<NoticeListProps> = (props) => {
               key={key}
               eventKey={key}
               onNoticeClose={onNoticeClose}
-              hovering={hoverCount > 0}
+              hovering={hoverKeys.length > 0}
             />
           </div>
         );

tests/stack.test.tsx

@@ -43,4 +43,47 @@ describe('stack', () => {
     fireEvent.mouseEnter(document.querySelector('.rc-notification-notice'));
     expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
   });
+
+  it('should collapse when amount is less than threshold', () => {
+    const Demo = () => {
+      const [api, holder] = useNotification({
+        stack: { threshold: 3 },
+      });
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() => {
+              api.open({
+                content: <div className="context-content">Test</div>,
+                duration: null,
+                closable: true,
+              });
+            }}
+          />
+          {holder}
+        </>
+      );
+    };
+
+    const { container } = render(<Demo />);
+    for (let i = 0; i < 5; i++) {
+      fireEvent.click(container.querySelector('button'));
+    }
+    expect(document.querySelectorAll('.rc-notification-notice')).toHaveLength(5);
+    expect(document.querySelector('.rc-notification-stack')).toBeTruthy();
+    expect(document.querySelector('.rc-notification-stack-expanded')).toBeFalsy();
+
+    fireEvent.mouseEnter(document.querySelector('.rc-notification-notice'));
+    expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
+
+    fireEvent.click(document.querySelector('.rc-notification-notice-close'));
+    expect(document.querySelectorAll('.rc-notification-notice')).toHaveLength(4);
+    expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
+
+    // mouseleave will not triggerred if notice is closed
+    fireEvent.mouseEnter(document.querySelector('.rc-notification-notice-wrapper'));
+    fireEvent.mouseLeave(document.querySelector('.rc-notification-notice-wrapper'));
+    expect(document.querySelector('.rc-notification-stack-expanded')).toBeFalsy();
+  });
 });