Skip to content

Commit 25f5f12

Browse files
authored
Merge 2226c67 into 8303adc
2 parents 8303adc + 2226c67 commit 25f5f12

File tree

4 files changed

+58
-44
lines changed

4 files changed

+58
-44
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
"dependencies": {
8080
"@babel/runtime": "^7.10.1",
8181
"classnames": "2.x",
82-
"rc-motion": "^2.8.0",
82+
"rc-motion": "^2.9.0",
8383
"rc-util": "^5.20.1"
8484
},
8585
"lint-staged": {

src/NoticeList.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,17 @@ const NoticeList: FC<NoticeListProps> = (props) => {
8080
}
8181
}}
8282
>
83-
{({ config, className: motionClassName, style: motionStyle }, nodeRef) => {
83+
{(
84+
{ config, className: motionClassName, style: motionStyle, index: motionIndex },
85+
nodeRef,
86+
) => {
8487
const { key, times } = config as InnerOpenConfig;
8588
const { className: configClassName, style: configStyle } = config as NoticeConfig;
89+
const dataIndex = keys.findIndex((item) => item.key === key);
8690

87-
const index = keys.length - 1 - keys.findIndex((item) => item.key === key);
91+
// If dataIndex is -1, that means this notice has been removed in data, but still in dom
92+
// Should minus (motionIndex - 1) to get the correct index because keys.length is not the same as dom length
93+
const index = keys.length - 1 - (dataIndex > -1 ? dataIndex : motionIndex - 1);
8894
const stackStyle: CSSProperties = {};
8995
if (stack) {
9096
if (index > 0) {
@@ -117,7 +123,9 @@ const NoticeList: FC<NoticeListProps> = (props) => {
117123
<Notice
118124
{...config}
119125
ref={(node) => {
120-
listRef.current[index] = node;
126+
if (dataIndex > -1) {
127+
listRef.current[index] = node;
128+
}
121129
}}
122130
prefixCls={prefixCls}
123131
className={clsx(configClassName, ctxCls?.notice)}

tests/hooks.test.tsx

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { render, fireEvent, act } from '@testing-library/react';
33
import { useNotification } from '../src';
44
import type { NotificationAPI, NotificationConfig } from '../src';
55
import NotificationProvider from '../src/NotificationProvider';
6-
import { expect } from 'vitest';
76

87
require('../assets/index.less');
98

@@ -182,43 +181,4 @@ describe('Notification.Hooks', () => {
182181
expect(document.querySelector('.rc-notification')).toHaveClass('banana');
183182
expect(document.querySelector('.custom-notice')).toHaveClass('apple');
184183
});
185-
186-
it('support stack', () => {
187-
const Demo = () => {
188-
const [api, holder] = useNotification({
189-
stack: { threshold: 3 },
190-
});
191-
return (
192-
<>
193-
<button
194-
type="button"
195-
onClick={() => {
196-
api.open({
197-
content: <div className="context-content">Test</div>,
198-
duration: null,
199-
});
200-
}}
201-
/>
202-
{holder}
203-
</>
204-
);
205-
};
206-
207-
const { container } = render(<Demo />);
208-
for (let i = 0; i < 3; i++) {
209-
fireEvent.click(container.querySelector('button'));
210-
}
211-
expect(document.querySelectorAll('.rc-notification-notice')).toHaveLength(3);
212-
expect(document.querySelector('.rc-notification-stack')).toBeTruthy();
213-
expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
214-
215-
for (let i = 0; i < 2; i++) {
216-
fireEvent.click(container.querySelector('button'));
217-
}
218-
expect(document.querySelectorAll('.rc-notification-notice')).toHaveLength(5);
219-
expect(document.querySelector('.rc-notification-stack-expanded')).toBeFalsy();
220-
221-
fireEvent.mouseEnter(document.querySelector('.rc-notification-notice'));
222-
expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
223-
});
224184
});

tests/stack.test.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { useNotification } from '../src';
2+
import { fireEvent, render } from '@testing-library/react';
3+
import React from 'react';
4+
5+
require('../assets/index.less');
6+
7+
describe('stack', () => {
8+
it('support stack', () => {
9+
const Demo = () => {
10+
const [api, holder] = useNotification({
11+
stack: { threshold: 3 },
12+
});
13+
return (
14+
<>
15+
<button
16+
type="button"
17+
onClick={() => {
18+
api.open({
19+
content: <div className="context-content">Test</div>,
20+
duration: null,
21+
});
22+
}}
23+
/>
24+
{holder}
25+
</>
26+
);
27+
};
28+
29+
const { container } = render(<Demo />);
30+
for (let i = 0; i < 3; i++) {
31+
fireEvent.click(container.querySelector('button'));
32+
}
33+
expect(document.querySelectorAll('.rc-notification-notice')).toHaveLength(3);
34+
expect(document.querySelector('.rc-notification-stack')).toBeTruthy();
35+
expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
36+
37+
for (let i = 0; i < 2; i++) {
38+
fireEvent.click(container.querySelector('button'));
39+
}
40+
expect(document.querySelectorAll('.rc-notification-notice')).toHaveLength(5);
41+
expect(document.querySelector('.rc-notification-stack-expanded')).toBeFalsy();
42+
43+
fireEvent.mouseEnter(document.querySelector('.rc-notification-notice'));
44+
expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
45+
});
46+
});

0 commit comments

Comments
 (0)