2022-06-22 14:57:09 +08:00
|
|
|
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
|
|
|
|
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
|
|
|
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
|
|
|
import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
|
|
|
|
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
2020-04-04 13:35:36 +08:00
|
|
|
import classNames from 'classnames';
|
2020-07-15 19:51:56 +08:00
|
|
|
import RCNotification from 'rc-notification';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type {
|
2020-07-15 19:51:56 +08:00
|
|
|
NoticeContent,
|
2022-06-22 14:57:09 +08:00
|
|
|
NotificationInstance as RCNotificationInstance,
|
2020-07-15 19:51:56 +08:00
|
|
|
} from 'rc-notification/lib/Notification';
|
2022-06-22 14:57:09 +08:00
|
|
|
import * as React from 'react';
|
2021-06-09 15:36:59 +08:00
|
|
|
import ConfigProvider, { globalConfig } from '../config-provider';
|
2022-06-22 14:57:09 +08:00
|
|
|
import createUseMessage from './hooks/useMessage';
|
2015-07-11 16:40:59 +08:00
|
|
|
|
2020-07-15 19:51:56 +08:00
|
|
|
let messageInstance: RCNotificationInstance | null;
|
2017-07-18 12:50:17 +08:00
|
|
|
let defaultDuration = 3;
|
2017-11-21 17:16:48 +08:00
|
|
|
let defaultTop: number;
|
2016-10-26 11:05:00 +08:00
|
|
|
let key = 1;
|
2021-02-09 21:49:15 +08:00
|
|
|
let localPrefixCls = '';
|
2018-03-09 13:30:50 +08:00
|
|
|
let transitionName = 'move-up';
|
2021-02-08 17:09:13 +08:00
|
|
|
let hasTransitionName = false;
|
2017-11-21 17:16:48 +08:00
|
|
|
let getContainer: () => HTMLElement;
|
2018-04-20 15:40:43 +08:00
|
|
|
let maxCount: number;
|
2020-04-04 13:35:36 +08:00
|
|
|
let rtl = false;
|
2016-10-26 11:05:00 +08:00
|
|
|
|
2020-07-15 19:51:56 +08:00
|
|
|
export function getKeyThenIncreaseKey() {
|
|
|
|
return key++;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface ConfigOptions {
|
|
|
|
top?: number;
|
|
|
|
duration?: number;
|
|
|
|
prefixCls?: string;
|
|
|
|
getContainer?: () => HTMLElement;
|
|
|
|
transitionName?: string;
|
|
|
|
maxCount?: number;
|
|
|
|
rtl?: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
function setMessageConfig(options: ConfigOptions) {
|
|
|
|
if (options.top !== undefined) {
|
|
|
|
defaultTop = options.top;
|
|
|
|
messageInstance = null; // delete messageInstance for new defaultTop
|
|
|
|
}
|
|
|
|
if (options.duration !== undefined) {
|
|
|
|
defaultDuration = options.duration;
|
|
|
|
}
|
2021-02-09 21:49:15 +08:00
|
|
|
|
2020-07-15 19:51:56 +08:00
|
|
|
if (options.prefixCls !== undefined) {
|
|
|
|
localPrefixCls = options.prefixCls;
|
|
|
|
}
|
|
|
|
if (options.getContainer !== undefined) {
|
|
|
|
getContainer = options.getContainer;
|
2022-02-21 12:31:39 +08:00
|
|
|
messageInstance = null; // delete messageInstance for new getContainer
|
2020-07-15 19:51:56 +08:00
|
|
|
}
|
|
|
|
if (options.transitionName !== undefined) {
|
|
|
|
transitionName = options.transitionName;
|
|
|
|
messageInstance = null; // delete messageInstance for new transitionName
|
2021-02-08 17:09:13 +08:00
|
|
|
hasTransitionName = true;
|
2020-07-15 19:51:56 +08:00
|
|
|
}
|
|
|
|
if (options.maxCount !== undefined) {
|
|
|
|
maxCount = options.maxCount;
|
|
|
|
messageInstance = null;
|
|
|
|
}
|
|
|
|
if (options.rtl !== undefined) {
|
|
|
|
rtl = options.rtl;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function getRCNotificationInstance(
|
|
|
|
args: ArgsProps,
|
2021-02-08 17:09:13 +08:00
|
|
|
callback: (info: {
|
|
|
|
prefixCls: string;
|
|
|
|
rootPrefixCls: string;
|
2021-06-09 15:36:59 +08:00
|
|
|
iconPrefixCls: string;
|
2021-02-08 17:09:13 +08:00
|
|
|
instance: RCNotificationInstance;
|
|
|
|
}) => void,
|
2020-07-15 19:51:56 +08:00
|
|
|
) {
|
2021-09-13 11:37:30 +08:00
|
|
|
const { prefixCls: customizePrefixCls, getPopupContainer: getContextPopupContainer } = args;
|
2021-06-09 15:36:59 +08:00
|
|
|
const { getPrefixCls, getRootPrefixCls, getIconPrefixCls } = globalConfig();
|
2021-02-09 21:49:15 +08:00
|
|
|
const prefixCls = getPrefixCls('message', customizePrefixCls || localPrefixCls);
|
2021-03-02 11:53:12 +08:00
|
|
|
const rootPrefixCls = getRootPrefixCls(args.rootPrefixCls, prefixCls);
|
2021-06-09 15:36:59 +08:00
|
|
|
const iconPrefixCls = getIconPrefixCls();
|
2021-02-08 17:09:13 +08:00
|
|
|
|
2017-10-11 12:03:19 +08:00
|
|
|
if (messageInstance) {
|
2021-06-09 15:36:59 +08:00
|
|
|
callback({ prefixCls, rootPrefixCls, iconPrefixCls, instance: messageInstance });
|
2017-10-11 12:03:19 +08:00
|
|
|
return;
|
|
|
|
}
|
2021-03-02 11:53:12 +08:00
|
|
|
|
|
|
|
const instanceConfig = {
|
|
|
|
prefixCls,
|
|
|
|
transitionName: hasTransitionName ? transitionName : `${rootPrefixCls}-${transitionName}`,
|
|
|
|
style: { top: defaultTop }, // 覆盖原来的样式
|
2021-09-13 11:37:30 +08:00
|
|
|
getContainer: getContainer || getContextPopupContainer,
|
2021-03-02 11:53:12 +08:00
|
|
|
maxCount,
|
|
|
|
};
|
|
|
|
|
|
|
|
RCNotification.newInstance(instanceConfig, (instance: any) => {
|
|
|
|
if (messageInstance) {
|
2021-06-09 15:36:59 +08:00
|
|
|
callback({ prefixCls, rootPrefixCls, iconPrefixCls, instance: messageInstance });
|
2021-03-02 11:53:12 +08:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
messageInstance = instance;
|
|
|
|
|
|
|
|
if (process.env.NODE_ENV === 'test') {
|
|
|
|
(messageInstance as any).config = instanceConfig;
|
|
|
|
}
|
|
|
|
|
2021-06-09 15:36:59 +08:00
|
|
|
callback({ prefixCls, rootPrefixCls, iconPrefixCls, instance });
|
2021-03-02 11:53:12 +08:00
|
|
|
});
|
2015-07-23 11:59:56 +08:00
|
|
|
}
|
|
|
|
|
2018-05-25 20:41:07 +08:00
|
|
|
export interface ThenableArgument {
|
2019-06-24 11:29:58 +08:00
|
|
|
(val: any): void;
|
2018-05-25 20:41:07 +08:00
|
|
|
}
|
|
|
|
|
2020-12-15 14:52:17 +08:00
|
|
|
export interface MessageType extends PromiseLike<any> {
|
2018-05-25 20:41:07 +08:00
|
|
|
(): void;
|
|
|
|
}
|
|
|
|
|
2020-07-15 19:51:56 +08:00
|
|
|
const typeToIcon = {
|
|
|
|
info: InfoCircleFilled,
|
|
|
|
success: CheckCircleFilled,
|
|
|
|
error: CloseCircleFilled,
|
|
|
|
warning: ExclamationCircleFilled,
|
|
|
|
loading: LoadingOutlined,
|
|
|
|
};
|
2022-03-23 14:49:57 +08:00
|
|
|
|
|
|
|
export type NoticeType = keyof typeof typeToIcon;
|
|
|
|
|
|
|
|
export const typeList = Object.keys(typeToIcon) as NoticeType[];
|
|
|
|
|
2018-08-31 12:28:09 +08:00
|
|
|
export interface ArgsProps {
|
2022-04-08 22:55:42 +08:00
|
|
|
content: any;
|
2021-10-18 10:22:27 +08:00
|
|
|
duration?: number;
|
2022-04-08 22:55:42 +08:00
|
|
|
type?: NoticeType;
|
2020-07-15 19:51:56 +08:00
|
|
|
prefixCls?: string;
|
2021-02-08 17:09:13 +08:00
|
|
|
rootPrefixCls?: string;
|
2021-09-13 11:37:30 +08:00
|
|
|
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
2018-08-31 12:28:09 +08:00
|
|
|
onClose?: () => void;
|
|
|
|
icon?: React.ReactNode;
|
2019-09-05 10:15:14 +08:00
|
|
|
key?: string | number;
|
2020-05-11 12:11:15 +08:00
|
|
|
style?: React.CSSProperties;
|
|
|
|
className?: string;
|
2020-12-03 10:58:11 +08:00
|
|
|
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
2018-08-31 12:28:09 +08:00
|
|
|
}
|
|
|
|
|
2021-06-09 15:36:59 +08:00
|
|
|
function getRCNoticeProps(
|
|
|
|
args: ArgsProps,
|
|
|
|
prefixCls: string,
|
|
|
|
iconPrefixCls?: string,
|
|
|
|
): NoticeContent {
|
2018-08-31 12:28:09 +08:00
|
|
|
const duration = args.duration !== undefined ? args.duration : defaultDuration;
|
2022-04-08 22:55:42 +08:00
|
|
|
const IconComponent = typeToIcon[args.type!];
|
2020-04-04 13:35:36 +08:00
|
|
|
const messageClass = classNames(`${prefixCls}-custom-content`, {
|
|
|
|
[`${prefixCls}-${args.type}`]: args.type,
|
|
|
|
[`${prefixCls}-rtl`]: rtl === true,
|
|
|
|
});
|
2020-07-15 19:51:56 +08:00
|
|
|
return {
|
|
|
|
key: args.key,
|
|
|
|
duration,
|
|
|
|
style: args.style || {},
|
|
|
|
className: args.className,
|
|
|
|
content: (
|
2021-06-09 15:36:59 +08:00
|
|
|
<ConfigProvider iconPrefixCls={iconPrefixCls}>
|
|
|
|
<div className={messageClass}>
|
|
|
|
{args.icon || (IconComponent && <IconComponent />)}
|
|
|
|
<span>{args.content}</span>
|
|
|
|
</div>
|
|
|
|
</ConfigProvider>
|
2020-07-15 19:51:56 +08:00
|
|
|
),
|
|
|
|
onClose: args.onClose,
|
2020-12-03 10:58:11 +08:00
|
|
|
onClick: args.onClick,
|
2020-07-15 19:51:56 +08:00
|
|
|
};
|
|
|
|
}
|
2020-04-04 13:35:36 +08:00
|
|
|
|
2020-07-15 19:51:56 +08:00
|
|
|
function notice(args: ArgsProps): MessageType {
|
2021-10-26 13:17:21 +08:00
|
|
|
const target = args.key || getKeyThenIncreaseKey();
|
2018-12-07 16:17:45 +08:00
|
|
|
const closePromise = new Promise(resolve => {
|
2018-08-31 12:28:09 +08:00
|
|
|
const callback = () => {
|
|
|
|
if (typeof args.onClose === 'function') {
|
|
|
|
args.onClose();
|
2018-05-25 20:41:07 +08:00
|
|
|
}
|
|
|
|
return resolve(true);
|
|
|
|
};
|
2020-07-26 20:14:11 +08:00
|
|
|
|
2021-06-09 15:36:59 +08:00
|
|
|
getRCNotificationInstance(args, ({ prefixCls, iconPrefixCls, instance }) => {
|
|
|
|
instance.notice(
|
|
|
|
getRCNoticeProps({ ...args, key: target, onClose: callback }, prefixCls, iconPrefixCls),
|
|
|
|
);
|
2017-10-11 12:03:19 +08:00
|
|
|
});
|
2015-07-23 11:59:56 +08:00
|
|
|
});
|
2018-05-25 20:41:07 +08:00
|
|
|
const result: any = () => {
|
2017-11-18 15:26:02 +08:00
|
|
|
if (messageInstance) {
|
|
|
|
messageInstance.removeNotice(target);
|
|
|
|
}
|
|
|
|
};
|
2018-12-07 16:17:45 +08:00
|
|
|
result.then = (filled: ThenableArgument, rejected: ThenableArgument) =>
|
|
|
|
closePromise.then(filled, rejected);
|
2018-05-25 20:41:07 +08:00
|
|
|
result.promise = closePromise;
|
|
|
|
return result;
|
2015-07-23 11:59:56 +08:00
|
|
|
}
|
2015-07-11 16:40:59 +08:00
|
|
|
|
2021-11-18 14:39:22 +08:00
|
|
|
type ConfigContent = React.ReactNode;
|
2017-10-14 14:28:57 +08:00
|
|
|
type ConfigDuration = number | (() => void);
|
2019-09-05 10:15:14 +08:00
|
|
|
type JointContent = ConfigContent | ArgsProps;
|
2016-10-18 11:55:00 +08:00
|
|
|
export type ConfigOnClose = () => void;
|
2016-07-29 16:32:12 +08:00
|
|
|
|
2019-09-05 10:15:14 +08:00
|
|
|
function isArgsProps(content: JointContent): content is ArgsProps {
|
2019-12-30 22:14:17 +08:00
|
|
|
return (
|
|
|
|
Object.prototype.toString.call(content) === '[object Object]' &&
|
|
|
|
!!(content as ArgsProps).content
|
|
|
|
);
|
2019-09-05 10:15:14 +08:00
|
|
|
}
|
|
|
|
|
2018-08-31 12:28:09 +08:00
|
|
|
const api: any = {
|
|
|
|
open: notice,
|
2020-07-15 19:51:56 +08:00
|
|
|
config: setMessageConfig,
|
2020-09-25 11:01:41 +08:00
|
|
|
destroy(messageKey?: React.Key) {
|
2016-10-27 17:39:28 +08:00
|
|
|
if (messageInstance) {
|
2020-08-06 13:34:18 +08:00
|
|
|
if (messageKey) {
|
|
|
|
const { removeNotice } = messageInstance;
|
|
|
|
removeNotice(messageKey);
|
|
|
|
} else {
|
|
|
|
const { destroy } = messageInstance;
|
|
|
|
destroy();
|
|
|
|
messageInstance = null;
|
|
|
|
}
|
2016-01-21 14:13:28 +08:00
|
|
|
}
|
|
|
|
},
|
2015-07-11 16:40:59 +08:00
|
|
|
};
|
2018-08-31 12:28:09 +08:00
|
|
|
|
2021-10-18 10:22:27 +08:00
|
|
|
export function attachTypeApi(originalApi: MessageApi, type: NoticeType) {
|
2020-07-15 19:51:56 +08:00
|
|
|
originalApi[type] = (
|
|
|
|
content: JointContent,
|
|
|
|
duration?: ConfigDuration,
|
|
|
|
onClose?: ConfigOnClose,
|
|
|
|
) => {
|
2019-09-05 10:15:14 +08:00
|
|
|
if (isArgsProps(content)) {
|
2020-07-15 19:51:56 +08:00
|
|
|
return originalApi.open({ ...content, type });
|
2019-09-05 10:15:14 +08:00
|
|
|
}
|
|
|
|
|
2018-08-31 12:28:09 +08:00
|
|
|
if (typeof duration === 'function') {
|
|
|
|
onClose = duration;
|
|
|
|
duration = undefined;
|
|
|
|
}
|
2019-09-05 10:15:14 +08:00
|
|
|
|
2020-07-15 19:51:56 +08:00
|
|
|
return originalApi.open({ content, duration, type, onClose });
|
2018-08-31 12:28:09 +08:00
|
|
|
};
|
2020-07-15 19:51:56 +08:00
|
|
|
}
|
|
|
|
|
2022-03-23 14:49:57 +08:00
|
|
|
typeList.forEach(type => attachTypeApi(api, type));
|
2018-08-31 12:28:09 +08:00
|
|
|
|
|
|
|
api.warn = api.warning;
|
2020-07-15 19:51:56 +08:00
|
|
|
api.useMessage = createUseMessage(getRCNotificationInstance, getRCNoticeProps);
|
2018-08-31 12:28:09 +08:00
|
|
|
|
2020-07-15 19:51:56 +08:00
|
|
|
export interface MessageInstance {
|
2019-09-05 10:15:14 +08:00
|
|
|
info(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
|
|
|
|
success(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
|
|
|
|
error(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
|
|
|
|
warning(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
|
|
|
|
loading(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
|
2018-09-09 22:50:12 +08:00
|
|
|
open(args: ArgsProps): MessageType;
|
2020-07-15 19:51:56 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface MessageApi extends MessageInstance {
|
|
|
|
warn(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
|
2018-08-31 12:28:09 +08:00
|
|
|
config(options: ConfigOptions): void;
|
2020-09-25 11:01:41 +08:00
|
|
|
destroy(messageKey?: React.Key): void;
|
2020-07-15 19:51:56 +08:00
|
|
|
useMessage(): [MessageInstance, React.ReactElement];
|
2018-08-31 12:28:09 +08:00
|
|
|
}
|
|
|
|
|
2021-02-23 10:45:11 +08:00
|
|
|
/** @private test Only function. Not work on production */
|
2020-12-09 17:12:32 +08:00
|
|
|
export const getInstance = () => (process.env.NODE_ENV === 'test' ? messageInstance : null);
|
2020-09-28 00:41:16 +08:00
|
|
|
|
2018-08-31 12:28:09 +08:00
|
|
|
export default api as MessageApi;
|