Skip to content

Commit f8ada60

Browse files
zombieJzombieJ
authored
fix: Should reset when motion end (#179)
* fix: Should reset when motion end * chore: Check more detail
1 parent af67623 commit f8ada60

File tree

3 files changed

+55
-63
lines changed

3 files changed

+55
-63
lines changed

‎src/Notice.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ export interface NoticeProps {
2525

2626
/** @private Only for internal usage. We don't promise that we will refactor this */
2727
holder?: HTMLDivElement;
28+
29+
/** @private Provided by CSSMotionList */
30+
visible?: boolean;
2831
}
2932

3033
export default class Notice extends Component<NoticeProps> {
@@ -42,7 +45,9 @@ export default class Notice extends Component<NoticeProps> {
4245
componentDidUpdate(prevProps: NoticeProps) {
4346
if (
4447
this.props.duration !== prevProps.duration ||
45-
this.props.updateMark !== prevProps.updateMark
48+
this.props.updateMark !== prevProps.updateMark ||
49+
// Visible again need reset timer
50+
(this.props.visible !== prevProps.visible && this.props.visible)
4651
) {
4752
this.restartCloseTimer();
4853
}
@@ -84,16 +89,8 @@ export default class Notice extends Component<NoticeProps> {
8489
}
8590

8691
render() {
87-
const {
88-
prefixCls,
89-
className,
90-
closable,
91-
closeIcon,
92-
style,
93-
onClick,
94-
children,
95-
holder,
96-
} = this.props;
92+
const { prefixCls, className, closable, closeIcon, style, onClick, children, holder } =
93+
this.props;
9794
const componentClass = `${prefixCls}-notice`;
9895
const dataOrAriaAttributeProps = Object.keys(this.props).reduce(
9996
(acc: Record<string, string>, key: string) => {

‎src/Notification.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ class Notification extends Component<NotificationProps, NotificationState> {
192192
}
193193
}}
194194
>
195-
{({ key, className: motionClassName, style: motionStyle }) => {
195+
{({ key, className: motionClassName, style: motionStyle, visible }) => {
196196
const { props: noticeProps, holderCallback } = this.noticePropsMap[key];
197197
if (holderCallback) {
198198
return (
@@ -221,6 +221,7 @@ class Notification extends Component<NotificationProps, NotificationState> {
221221
{...noticeProps}
222222
className={classNames(motionClassName, noticeProps?.className)}
223223
style={{ ...motionStyle, ...noticeProps?.style }}
224+
visible={visible}
224225
/>
225226
);
226227
}}

‎tests/index.test.js‎

Lines changed: 45 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@ import Notification from '../src';
66
require('../assets/index.less');
77

88
describe('Notification.Basic', () => {
9-
it('works', done => {
9+
it('works', (done) => {
1010
let wrapper;
1111

1212
Notification.newInstance(
1313
{
14-
TEST_RENDER: node => {
14+
TEST_RENDER: (node) => {
1515
wrapper = mount(<div>{node}</div>);
1616
},
1717
},
18-
notification => {
18+
(notification) => {
1919
notification.notice({
2020
content: <p className="test">1</p>,
2121
duration: 0.1,
@@ -34,17 +34,17 @@ describe('Notification.Basic', () => {
3434
);
3535
});
3636

37-
it('works with custom close icon', done => {
37+
it('works with custom close icon', (done) => {
3838
let wrapper;
3939

4040
Notification.newInstance(
4141
{
42-
TEST_RENDER: node => {
42+
TEST_RENDER: (node) => {
4343
wrapper = mount(<div>{node}</div>);
4444
},
4545
closeIcon: <span className="test-icon">test-close-icon</span>,
4646
},
47-
notification => {
47+
(notification) => {
4848
notification.notice({
4949
content: <p className="test">1</p>,
5050
closable: true,
@@ -59,16 +59,16 @@ describe('Notification.Basic', () => {
5959
);
6060
});
6161

62-
it('works with multi instance', done => {
62+
it('works with multi instance', (done) => {
6363
let wrapper;
6464

6565
Notification.newInstance(
6666
{
67-
TEST_RENDER: node => {
67+
TEST_RENDER: (node) => {
6868
wrapper = mount(<div>{node}</div>);
6969
},
7070
},
71-
notification => {
71+
(notification) => {
7272
notification.notice({
7373
content: <p className="test">1</p>,
7474
duration: 0.1,
@@ -91,7 +91,7 @@ describe('Notification.Basic', () => {
9191
});
9292

9393
it('destroy works', () => {
94-
Notification.newInstance({}, notification => {
94+
Notification.newInstance({}, (notification) => {
9595
notification.notice({
9696
content: (
9797
<p id="test" className="test">
@@ -119,7 +119,7 @@ describe('Notification.Basic', () => {
119119
{
120120
getContainer: () => document.getElementById('get-container-test'),
121121
},
122-
notification => {
122+
(notification) => {
123123
notification.notice({
124124
content: (
125125
<p id="test" className="test">
@@ -136,18 +136,18 @@ describe('Notification.Basic', () => {
136136
);
137137
});
138138

139-
it('remove notify works', done => {
139+
it('remove notify works', (done) => {
140140
let wrapper;
141141

142142
Notification.newInstance(
143143
{
144-
TEST_RENDER: node => {
144+
TEST_RENDER: (node) => {
145145
wrapper = mount(<div>{node}</div>);
146146
},
147147
},
148-
notification => {
148+
(notification) => {
149149
const key = Date.now();
150-
const close = k => {
150+
const close = (k) => {
151151
notification.removeNotice(k);
152152
};
153153
notification.notice({
@@ -176,16 +176,16 @@ describe('Notification.Basic', () => {
176176
);
177177
});
178178

179-
it('update notification by key with multi instance', done => {
179+
it('update notification by key with multi instance', (done) => {
180180
let wrapper;
181181

182182
Notification.newInstance(
183183
{
184-
TEST_RENDER: node => {
184+
TEST_RENDER: (node) => {
185185
wrapper = mount(<div>{node}</div>);
186186
},
187187
},
188-
notification => {
188+
(notification) => {
189189
const key = 'updatable';
190190
const value = 'value';
191191
const newValue = `new-${value}`;
@@ -244,16 +244,16 @@ describe('Notification.Basic', () => {
244244
);
245245
});
246246

247-
it('freeze notification layer when mouse over', done => {
247+
it('freeze notification layer when mouse over', (done) => {
248248
let wrapper;
249249

250250
Notification.newInstance(
251251
{
252-
TEST_RENDER: node => {
252+
TEST_RENDER: (node) => {
253253
wrapper = mount(<div>{node}</div>);
254254
},
255255
},
256-
notification => {
256+
(notification) => {
257257
notification.notice({
258258
content: (
259259
<p id="freeze" className="freeze">
@@ -285,7 +285,7 @@ describe('Notification.Basic', () => {
285285
it('should work in lifecycle of React component', () => {
286286
class Test extends React.Component {
287287
componentDidMount() {
288-
Notification.newInstance({}, notification => {
288+
Notification.newInstance({}, (notification) => {
289289
notification.notice({
290290
content: <span>In lifecycle</span>,
291291
});
@@ -302,17 +302,17 @@ describe('Notification.Basic', () => {
302302
});
303303

304304
describe('maxCount', () => {
305-
it('remove work when maxCount set', done => {
305+
it('remove work when maxCount set', (done) => {
306306
let wrapper;
307307

308308
Notification.newInstance(
309309
{
310-
TEST_RENDER: node => {
310+
TEST_RENDER: (node) => {
311311
wrapper = mount(<div>{node}</div>);
312312
},
313313
maxCount: 1,
314314
},
315-
notification => {
315+
(notification) => {
316316
// First
317317
notification.notice({
318318
content: <div className="max-count">bamboo</div>,
@@ -351,11 +351,11 @@ describe('Notification.Basic', () => {
351351
Notification.newInstance(
352352
{
353353
maxCount: 1,
354-
TEST_RENDER: node => {
354+
TEST_RENDER: (node) => {
355355
wrapper = mount(<div>{node}</div>);
356356
},
357357
},
358-
notification => {
358+
(notification) => {
359359
notificationInstance = notification;
360360
},
361361
);
@@ -385,18 +385,18 @@ describe('Notification.Basic', () => {
385385
jest.useRealTimers();
386386
});
387387

388-
it('duration should work', done => {
388+
it('duration should work', (done) => {
389389
let wrapper;
390390

391391
let notificationInstance;
392392
Notification.newInstance(
393393
{
394394
maxCount: 1,
395-
TEST_RENDER: node => {
395+
TEST_RENDER: (node) => {
396396
wrapper = mount(<div>{node}</div>);
397397
},
398398
},
399-
notification => {
399+
(notification) => {
400400
notificationInstance = notification;
401401

402402
notificationInstance.notice({
@@ -430,19 +430,19 @@ describe('Notification.Basic', () => {
430430
});
431431
});
432432

433-
it('onClick trigger', done => {
433+
it('onClick trigger', (done) => {
434434
let wrapper;
435435
let clicked = 0;
436436

437437
Notification.newInstance(
438438
{
439-
TEST_RENDER: node => {
439+
TEST_RENDER: (node) => {
440440
wrapper = mount(<div>{node}</div>);
441441
},
442442
},
443-
notification => {
443+
(notification) => {
444444
const key = Date.now();
445-
const close = k => {
445+
const close = (k) => {
446446
notification.removeNotice(k);
447447
};
448448
notification.notice({
@@ -461,10 +461,7 @@ describe('Notification.Basic', () => {
461461
});
462462

463463
setTimeout(() => {
464-
wrapper
465-
.find('.rc-notification-notice')
466-
.last()
467-
.simulate('click');
464+
wrapper.find('.rc-notification-notice').last().simulate('click');
468465
expect(clicked).toEqual(1);
469466
notification.destroy();
470467
done();
@@ -473,17 +470,17 @@ describe('Notification.Basic', () => {
473470
);
474471
});
475472

476-
it('Close Notification only trigger onClose', done => {
473+
it('Close Notification only trigger onClose', (done) => {
477474
let wrapper;
478475
let clickCount = 0;
479476
let closeCount = 0;
480477
Notification.newInstance(
481478
{
482-
TEST_RENDER: node => {
479+
TEST_RENDER: (node) => {
483480
wrapper = mount(<div>{node}</div>);
484481
},
485482
},
486-
notification => {
483+
(notification) => {
487484
notification.notice({
488485
content: <p className="test">1</p>,
489486
closable: true,
@@ -496,10 +493,7 @@ describe('Notification.Basic', () => {
496493
});
497494

498495
setTimeout(() => {
499-
wrapper
500-
.find('.rc-notification-notice-close')
501-
.last()
502-
.simulate('click');
496+
wrapper.find('.rc-notification-notice-close').last().simulate('click');
503497
expect(clickCount).toEqual(0);
504498
expect(closeCount).toEqual(1);
505499
notification.destroy();
@@ -509,8 +503,8 @@ describe('Notification.Basic', () => {
509503
);
510504
});
511505

512-
it('sets data attributes', done => {
513-
Notification.newInstance({}, notification => {
506+
it('sets data attributes', (done) => {
507+
Notification.newInstance({}, (notification) => {
514508
notification.notice({
515509
content: <span className="test-data-attributes">simple show</span>,
516510
duration: 3,
@@ -532,8 +526,8 @@ describe('Notification.Basic', () => {
532526
});
533527
});
534528

535-
it('sets aria attributes', done => {
536-
Notification.newInstance({}, notification => {
529+
it('sets aria attributes', (done) => {
530+
Notification.newInstance({}, (notification) => {
537531
notification.notice({
538532
content: <span className="test-aria-attributes">simple show</span>,
539533
duration: 3,
@@ -555,8 +549,8 @@ describe('Notification.Basic', () => {
555549
});
556550
});
557551

558-
it('sets role attribute', done => {
559-
Notification.newInstance({}, notification => {
552+
it('sets role attribute', (done) => {
553+
Notification.newInstance({}, (notification) => {
560554
notification.notice({
561555
content: <span className="test-aria-attributes">simple show</span>,
562556
duration: 3,

0 commit comments

Comments
 (0)