Skip to content

Commit

Permalink
fix: Should reset when motion end (#179)
Browse files Browse the repository at this point in the history 
* fix: Should reset when motion end

* chore: Check more detail
  • Loading branch information
@zombieJ
zombieJ authored May 28, 2021
1 parent af67623 commit f8ada60
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 63 deletions.
19 changes: 8 additions & 11 deletions src/Notice.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ export interface NoticeProps {

/** @private Only for internal usage. We don't promise that we will refactor this */
holder?: HTMLDivElement;

/** @private Provided by CSSMotionList */
visible?: boolean;
}

export default class Notice extends Component<NoticeProps> {
Expand All @@ -42,7 +45,9 @@ export default class Notice extends Component<NoticeProps> {
componentDidUpdate(prevProps: NoticeProps) {
if (
this.props.duration !== prevProps.duration ||
this.props.updateMark !== prevProps.updateMark
this.props.updateMark !== prevProps.updateMark ||
// Visible again need reset timer
(this.props.visible !== prevProps.visible && this.props.visible)
) {
this.restartCloseTimer();
}
Expand Down Expand Up @@ -84,16 +89,8 @@ export default class Notice extends Component<NoticeProps> {
}

render() {
const {
prefixCls,
className,
closable,
closeIcon,
style,
onClick,
children,
holder,
} = this.props;
const { prefixCls, className, closable, closeIcon, style, onClick, children, holder } =
this.props;
const componentClass = `${prefixCls}-notice`;
const dataOrAriaAttributeProps = Object.keys(this.props).reduce(
(acc: Record<string, string>, key: string) => {
Expand Down
3 changes: 2 additions & 1 deletion src/Notification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ class Notification extends Component<NotificationProps, NotificationState> {
}
}}
>
{({ key, className: motionClassName, style: motionStyle }) => {
{({ key, className: motionClassName, style: motionStyle, visible }) => {
const { props: noticeProps, holderCallback } = this.noticePropsMap[key];
if (holderCallback) {
return (
Expand Down Expand Up @@ -221,6 +221,7 @@ class Notification extends Component<NotificationProps, NotificationState> {
{...noticeProps}
className={classNames(motionClassName, noticeProps?.className)}
style={{ ...motionStyle, ...noticeProps?.style }}
visible={visible}
/>
);
}}
Expand Down
96 changes: 45 additions & 51 deletions tests/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@ import Notification from '../src';
require('../assets/index.less');

describe('Notification.Basic', () => {
it('works', done => {
it('works', (done) => {
let wrapper;

Notification.newInstance(
{
TEST_RENDER: node => {
TEST_RENDER: (node) => {
wrapper = mount(<div>{node}</div>);
},
},
notification => {
(notification) => {
notification.notice({
content: <p className="test">1</p>,
duration: 0.1,
Expand All @@ -34,17 +34,17 @@ describe('Notification.Basic', () => {
);
});

it('works with custom close icon', done => {
it('works with custom close icon', (done) => {
let wrapper;

Notification.newInstance(
{
TEST_RENDER: node => {
TEST_RENDER: (node) => {
wrapper = mount(<div>{node}</div>);
},
closeIcon: <span className="test-icon">test-close-icon</span>,
},
notification => {
(notification) => {
notification.notice({
content: <p className="test">1</p>,
closable: true,
Expand All @@ -59,16 +59,16 @@ describe('Notification.Basic', () => {
);
});

it('works with multi instance', done => {
it('works with multi instance', (done) => {
let wrapper;

Notification.newInstance(
{
TEST_RENDER: node => {
TEST_RENDER: (node) => {
wrapper = mount(<div>{node}</div>);
},
},
notification => {
(notification) => {
notification.notice({
content: <p className="test">1</p>,
duration: 0.1,
Expand All @@ -91,7 +91,7 @@ describe('Notification.Basic', () => {
});

it('destroy works', () => {
Notification.newInstance({}, notification => {
Notification.newInstance({}, (notification) => {
notification.notice({
content: (
<p id="test" className="test">
Expand Down Expand Up @@ -119,7 +119,7 @@ describe('Notification.Basic', () => {
{
getContainer: () => document.getElementById('get-container-test'),
},
notification => {
(notification) => {
notification.notice({
content: (
<p id="test" className="test">
Expand All @@ -136,18 +136,18 @@ describe('Notification.Basic', () => {
);
});

it('remove notify works', done => {
it('remove notify works', (done) => {
let wrapper;

Notification.newInstance(
{
TEST_RENDER: node => {
TEST_RENDER: (node) => {
wrapper = mount(<div>{node}</div>);
},
},
notification => {
(notification) => {
const key = Date.now();
const close = k => {
const close = (k) => {
notification.removeNotice(k);
};
notification.notice({
Expand Down Expand Up @@ -176,16 +176,16 @@ describe('Notification.Basic', () => {
);
});

it('update notification by key with multi instance', done => {
it('update notification by key with multi instance', (done) => {
let wrapper;

Notification.newInstance(
{
TEST_RENDER: node => {
TEST_RENDER: (node) => {
wrapper = mount(<div>{node}</div>);
},
},
notification => {
(notification) => {
const key = 'updatable';
const value = 'value';
const newValue = `new-${value}`;
Expand Down Expand Up @@ -244,16 +244,16 @@ describe('Notification.Basic', () => {
);
});

it('freeze notification layer when mouse over', done => {
it('freeze notification layer when mouse over', (done) => {
let wrapper;

Notification.newInstance(
{
TEST_RENDER: node => {
TEST_RENDER: (node) => {
wrapper = mount(<div>{node}</div>);
},
},
notification => {
(notification) => {
notification.notice({
content: (
<p id="freeze" className="freeze">
Expand Down Expand Up @@ -285,7 +285,7 @@ describe('Notification.Basic', () => {
it('should work in lifecycle of React component', () => {
class Test extends React.Component {
componentDidMount() {
Notification.newInstance({}, notification => {
Notification.newInstance({}, (notification) => {
notification.notice({
content: <span>In lifecycle</span>,
});
Expand All @@ -302,17 +302,17 @@ describe('Notification.Basic', () => {
});

describe('maxCount', () => {
it('remove work when maxCount set', done => {
it('remove work when maxCount set', (done) => {
let wrapper;

Notification.newInstance(
{
TEST_RENDER: node => {
TEST_RENDER: (node) => {
wrapper = mount(<div>{node}</div>);
},
maxCount: 1,
},
notification => {
(notification) => {
// First
notification.notice({
content: <div className="max-count">bamboo</div>,
Expand Down Expand Up @@ -351,11 +351,11 @@ describe('Notification.Basic', () => {
Notification.newInstance(
{
maxCount: 1,
TEST_RENDER: node => {
TEST_RENDER: (node) => {
wrapper = mount(<div>{node}</div>);
},
},
notification => {
(notification) => {
notificationInstance = notification;
},
);
Expand Down Expand Up @@ -385,18 +385,18 @@ describe('Notification.Basic', () => {
jest.useRealTimers();
});

it('duration should work', done => {
it('duration should work', (done) => {
let wrapper;

let notificationInstance;
Notification.newInstance(
{
maxCount: 1,
TEST_RENDER: node => {
TEST_RENDER: (node) => {
wrapper = mount(<div>{node}</div>);
},
},
notification => {
(notification) => {
notificationInstance = notification;

notificationInstance.notice({
Expand Down Expand Up @@ -430,19 +430,19 @@ describe('Notification.Basic', () => {
});
});

it('onClick trigger', done => {
it('onClick trigger', (done) => {
let wrapper;
let clicked = 0;

Notification.newInstance(
{
TEST_RENDER: node => {
TEST_RENDER: (node) => {
wrapper = mount(<div>{node}</div>);
},
},
notification => {
(notification) => {
const key = Date.now();
const close = k => {
const close = (k) => {
notification.removeNotice(k);
};
notification.notice({
Expand All @@ -461,10 +461,7 @@ describe('Notification.Basic', () => {
});

setTimeout(() => {
wrapper
.find('.rc-notification-notice')
.last()
.simulate('click');
wrapper.find('.rc-notification-notice').last().simulate('click');
expect(clicked).toEqual(1);
notification.destroy();
done();
Expand All @@ -473,17 +470,17 @@ describe('Notification.Basic', () => {
);
});

it('Close Notification only trigger onClose', done => {
it('Close Notification only trigger onClose', (done) => {
let wrapper;
let clickCount = 0;
let closeCount = 0;
Notification.newInstance(
{
TEST_RENDER: node => {
TEST_RENDER: (node) => {
wrapper = mount(<div>{node}</div>);
},
},
notification => {
(notification) => {
notification.notice({
content: <p className="test">1</p>,
closable: true,
Expand All @@ -496,10 +493,7 @@ describe('Notification.Basic', () => {
});

setTimeout(() => {
wrapper
.find('.rc-notification-notice-close')
.last()
.simulate('click');
wrapper.find('.rc-notification-notice-close').last().simulate('click');
expect(clickCount).toEqual(0);
expect(closeCount).toEqual(1);
notification.destroy();
Expand All @@ -509,8 +503,8 @@ describe('Notification.Basic', () => {
);
});

it('sets data attributes', done => {
Notification.newInstance({}, notification => {
it('sets data attributes', (done) => {
Notification.newInstance({}, (notification) => {
notification.notice({
content: <span className="test-data-attributes">simple show</span>,
duration: 3,
Expand All @@ -532,8 +526,8 @@ describe('Notification.Basic', () => {
});
});

it('sets aria attributes', done => {
Notification.newInstance({}, notification => {
it('sets aria attributes', (done) => {
Notification.newInstance({}, (notification) => {
notification.notice({
content: <span className="test-aria-attributes">simple show</span>,
duration: 3,
Expand All @@ -555,8 +549,8 @@ describe('Notification.Basic', () => {
});
});

it('sets role attribute', done => {
Notification.newInstance({}, notification => {
it('sets role attribute', (done) => {
Notification.newInstance({}, (notification) => {
notification.notice({
content: <span className="test-aria-attributes">simple show</span>,
duration: 3,
Expand Down

1 comment on commit f8ada60

@vercel
Copy link

@vercel vercel bot commented on f8ada60 May 28, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.