diff --git a/package.json b/package.json index 2e17fb7..c7b0777 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "@types/enzyme": "^3.10.7", "@types/jest": "^26.0.4", "@types/react": "^16.9.34", - "@types/react-dom": "^16.9.7", + "@types/react-dom": "^17.0.2", "cross-env": "^7.0.0", "dumi": "^1.1.7", "enzyme": "^3.3.0", diff --git a/src/Notice.tsx b/src/Notice.tsx index f367597..333608e 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -8,6 +8,8 @@ interface DivProps extends React.HTMLProps { 'data-testid'?: string; } +export type CloseTypes = 'manual' | 'auto' + export interface NoticeProps { prefixCls: string; style?: React.CSSProperties; @@ -21,7 +23,7 @@ export interface NoticeProps { closable?: boolean; props?: DivProps; onClick?: React.MouseEventHandler; - onClose?: (key: React.Key) => void; + onClose?: (key: React.Key, closeType: CloseTypes) => void; /** @private Only for internal usage. We don't promise that we will refactor this */ holder?: HTMLDivElement; @@ -52,21 +54,30 @@ export default class Notice extends Component { this.clearCloseTimer(); } + onCloseHandler = (closeType: CloseTypes) => { + const { onClose, noticeKey } = this.props; + if (onClose) { + onClose(noticeKey, closeType); + } + } + close = (e?: React.MouseEvent) => { if (e) { e.stopPropagation(); } this.clearCloseTimer(); - const { onClose, noticeKey } = this.props; - if (onClose) { - onClose(noticeKey); - } + this.onCloseHandler('manual'); }; + autoClose = () => { + this.clearCloseTimer(); + this.onCloseHandler('auto'); + } + startCloseTimer = () => { if (this.props.duration) { this.closeTimer = window.setTimeout(() => { - this.close(); + this.autoClose(); }, this.props.duration * 1000); } }; diff --git a/src/Notification.tsx b/src/Notification.tsx index 7686cc6..19da2ca 100644 --- a/src/Notification.tsx +++ b/src/Notification.tsx @@ -4,7 +4,7 @@ import type { ReactText } from 'react'; import ReactDOM from 'react-dom'; import classNames from 'classnames'; import { CSSMotionList } from 'rc-motion'; -import type { NoticeProps } from './Notice'; +import type { NoticeProps, CloseTypes } from './Notice'; import Notice from './Notice'; import useNotification from './useNotification'; @@ -23,7 +23,7 @@ export interface NoticeContent key?: React.Key; updateMark?: string; content?: React.ReactNode; - onClose?: () => void; + onClose?: (closeType: CloseTypes) => void; } export type NoticeFunc = (noticeProps: NoticeContent) => void; @@ -168,9 +168,9 @@ class Notification extends Component { key, noticeKey: userPassKey || key, updateMark, - onClose: (noticeKey: React.Key) => { + onClose: (noticeKey: React.Key, closeType: CloseTypes) => { this.remove(noticeKey); - notice.onClose?.(); + notice.onClose?.(closeType); }, onClick: notice.onClick, children: notice.content,