fix: should collapse when close (#314)

* fix: should collapse when close

* chore: update

* test: add test case

* chore: add comment

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();
+ });
 });