2020-03-02 12:09:38 +08:00
|
|
|
import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
|
|
|
|
import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
|
2022-06-22 14:57:09 +08:00
|
|
|
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
2020-03-02 12:09:38 +08:00
|
|
|
import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
|
|
|
|
import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
|
2022-06-22 14:57:09 +08:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import Notification from 'rc-notification';
|
|
|
|
import type { NotificationInstance as RCNotificationInstance } from 'rc-notification/lib/Notification';
|
|
|
|
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 createUseNotification from './hooks/useNotification';
|
2017-08-17 15:23:47 +08:00
|
|
|
|
2022-01-27 17:26:19 +08:00
|
|
|
export type NotificationPlacement =
|
|
|
|
| 'top'
|
|
|
|
| 'topLeft'
|
|
|
|
| 'topRight'
|
|
|
|
| 'bottom'
|
|
|
|
| 'bottomLeft'
|
|
|
|
| 'bottomRight';
|
2017-08-17 15:23:47 +08:00
|
|
|
|
2018-12-07 16:17:45 +08:00
|
|
|
export type IconType = 'success' | 'info' | 'error' | 'warning';
|
2017-11-21 15:48:53 +08:00
|
|
|
|
2020-02-23 00:02:48 +08:00
|
|
|
const notificationInstance: {
|
|
|
|
[key: string]: Promise<RCNotificationInstance>;
|
|
|
|
} = {};
|
2017-04-24 16:12:50 +08:00
|
|
|
let defaultDuration = 4.5;
|
2017-01-27 17:12:25 +08:00
|
|
|
let defaultTop = 24;
|
|
|
|
let defaultBottom = 24;
|
2021-02-09 21:49:15 +08:00
|
|
|
let defaultPrefixCls = '';
|
2017-08-17 15:23:47 +08:00
|
|
|
let defaultPlacement: NotificationPlacement = 'topRight';
|
2017-11-21 15:48:53 +08:00
|
|
|
let defaultGetContainer: () => HTMLElement;
|
2019-11-08 20:03:27 +08:00
|
|
|
let defaultCloseIcon: React.ReactNode;
|
2020-07-15 19:51:56 +08:00
|
|
|
let rtl = false;
|
2021-08-17 10:45:33 +08:00
|
|
|
let maxCount: number;
|
2017-01-27 17:12:25 +08:00
|
|
|
|
2017-08-17 15:23:47 +08:00
|
|
|
export interface ConfigProps {
|
|
|
|
top?: number;
|
|
|
|
bottom?: number;
|
|
|
|
duration?: number;
|
2020-05-21 21:15:53 +08:00
|
|
|
prefixCls?: string;
|
2017-08-17 15:23:47 +08:00
|
|
|
placement?: NotificationPlacement;
|
|
|
|
getContainer?: () => HTMLElement;
|
2019-11-08 20:03:27 +08:00
|
|
|
closeIcon?: React.ReactNode;
|
2020-04-13 15:45:49 +08:00
|
|
|
rtl?: boolean;
|
2021-08-17 10:45:33 +08:00
|
|
|
maxCount?: number;
|
2017-08-17 15:23:47 +08:00
|
|
|
}
|
2019-01-05 21:33:07 +08:00
|
|
|
|
2017-08-17 15:23:47 +08:00
|
|
|
function setNotificationConfig(options: ConfigProps) {
|
2020-05-21 21:15:53 +08:00
|
|
|
const { duration, placement, bottom, top, getContainer, closeIcon, prefixCls } = options;
|
|
|
|
if (prefixCls !== undefined) {
|
|
|
|
defaultPrefixCls = prefixCls;
|
|
|
|
}
|
2017-08-17 15:23:47 +08:00
|
|
|
if (duration !== undefined) {
|
|
|
|
defaultDuration = duration;
|
|
|
|
}
|
|
|
|
if (placement !== undefined) {
|
|
|
|
defaultPlacement = placement;
|
2020-06-01 13:29:40 +08:00
|
|
|
} else if (options.rtl) {
|
|
|
|
defaultPlacement = 'topLeft';
|
2017-08-17 15:23:47 +08:00
|
|
|
}
|
|
|
|
if (bottom !== undefined) {
|
|
|
|
defaultBottom = bottom;
|
|
|
|
}
|
|
|
|
if (top !== undefined) {
|
|
|
|
defaultTop = top;
|
|
|
|
}
|
|
|
|
if (getContainer !== undefined) {
|
|
|
|
defaultGetContainer = getContainer;
|
|
|
|
}
|
2019-11-08 20:03:27 +08:00
|
|
|
if (closeIcon !== undefined) {
|
|
|
|
defaultCloseIcon = closeIcon;
|
|
|
|
}
|
2020-04-13 15:45:49 +08:00
|
|
|
if (options.rtl !== undefined) {
|
|
|
|
rtl = options.rtl;
|
|
|
|
}
|
2021-08-17 10:45:33 +08:00
|
|
|
if (options.maxCount !== undefined) {
|
|
|
|
maxCount = options.maxCount;
|
|
|
|
}
|
2017-08-17 15:23:47 +08:00
|
|
|
}
|
|
|
|
|
2019-05-06 12:04:39 +08:00
|
|
|
function getPlacementStyle(
|
|
|
|
placement: NotificationPlacement,
|
|
|
|
top: number = defaultTop,
|
|
|
|
bottom: number = defaultBottom,
|
|
|
|
) {
|
2017-01-27 17:12:25 +08:00
|
|
|
let style;
|
|
|
|
switch (placement) {
|
2022-01-27 17:26:19 +08:00
|
|
|
case 'top':
|
|
|
|
style = {
|
2022-03-25 19:38:28 +08:00
|
|
|
left: '50%',
|
|
|
|
transform: 'translateX(-50%)',
|
|
|
|
right: 'auto',
|
2022-01-27 17:26:19 +08:00
|
|
|
top,
|
|
|
|
bottom: 'auto',
|
|
|
|
};
|
|
|
|
break;
|
2017-01-27 17:12:25 +08:00
|
|
|
case 'topLeft':
|
|
|
|
style = {
|
|
|
|
left: 0,
|
2019-05-06 12:04:39 +08:00
|
|
|
top,
|
2017-01-27 17:12:25 +08:00
|
|
|
bottom: 'auto',
|
|
|
|
};
|
|
|
|
break;
|
2017-08-17 15:23:47 +08:00
|
|
|
case 'topRight':
|
|
|
|
style = {
|
|
|
|
right: 0,
|
2019-05-06 12:04:39 +08:00
|
|
|
top,
|
2017-08-17 15:23:47 +08:00
|
|
|
bottom: 'auto',
|
|
|
|
};
|
|
|
|
break;
|
2022-01-27 17:26:19 +08:00
|
|
|
case 'bottom':
|
|
|
|
style = {
|
2022-03-25 19:38:28 +08:00
|
|
|
left: '50%',
|
|
|
|
transform: 'translateX(-50%)',
|
|
|
|
right: 'auto',
|
2022-01-27 17:26:19 +08:00
|
|
|
top: 'auto',
|
|
|
|
bottom,
|
|
|
|
};
|
|
|
|
break;
|
2017-01-27 17:12:25 +08:00
|
|
|
case 'bottomLeft':
|
|
|
|
style = {
|
|
|
|
left: 0,
|
|
|
|
top: 'auto',
|
2019-05-06 12:04:39 +08:00
|
|
|
bottom,
|
2017-01-27 17:12:25 +08:00
|
|
|
};
|
|
|
|
break;
|
2017-08-17 15:23:47 +08:00
|
|
|
default:
|
2017-01-27 17:12:25 +08:00
|
|
|
style = {
|
|
|
|
right: 0,
|
|
|
|
top: 'auto',
|
2019-05-06 12:04:39 +08:00
|
|
|
bottom,
|
2017-01-27 17:12:25 +08:00
|
|
|
};
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
return style;
|
|
|
|
}
|
2015-08-03 18:00:22 +08:00
|
|
|
|
2018-12-07 16:17:45 +08:00
|
|
|
function getNotificationInstance(
|
2020-02-07 17:55:27 +08:00
|
|
|
args: ArgsProps,
|
2021-06-09 15:36:59 +08:00
|
|
|
callback: (info: {
|
|
|
|
prefixCls: string;
|
|
|
|
iconPrefixCls: string;
|
|
|
|
instance: RCNotificationInstance;
|
|
|
|
}) => void,
|
2020-02-07 17:55:27 +08:00
|
|
|
) {
|
|
|
|
const {
|
2019-05-06 12:04:39 +08:00
|
|
|
placement = defaultPlacement,
|
|
|
|
top,
|
|
|
|
bottom,
|
2020-02-07 17:55:27 +08:00
|
|
|
getContainer = defaultGetContainer,
|
2021-02-09 21:49:15 +08:00
|
|
|
prefixCls: customizePrefixCls,
|
2020-02-07 17:55:27 +08:00
|
|
|
} = args;
|
2021-06-09 15:36:59 +08:00
|
|
|
const { getPrefixCls, getIconPrefixCls } = globalConfig();
|
2021-02-09 21:49:15 +08:00
|
|
|
const prefixCls = getPrefixCls('notification', customizePrefixCls || defaultPrefixCls);
|
2021-06-09 15:36:59 +08:00
|
|
|
const iconPrefixCls = getIconPrefixCls();
|
2020-02-07 17:55:27 +08:00
|
|
|
|
2021-02-09 21:49:15 +08:00
|
|
|
const cacheKey = `${prefixCls}-${placement}`;
|
2020-02-23 00:02:48 +08:00
|
|
|
const cacheInstance = notificationInstance[cacheKey];
|
2022-04-14 18:09:19 +08:00
|
|
|
|
2020-02-23 00:02:48 +08:00
|
|
|
if (cacheInstance) {
|
|
|
|
Promise.resolve(cacheInstance).then(instance => {
|
2021-06-09 15:36:59 +08:00
|
|
|
callback({ prefixCls: `${prefixCls}-notice`, iconPrefixCls, instance });
|
2020-02-23 00:02:48 +08:00
|
|
|
});
|
|
|
|
|
2017-10-11 12:03:19 +08:00
|
|
|
return;
|
2017-08-17 15:23:47 +08:00
|
|
|
}
|
2019-11-08 20:03:27 +08:00
|
|
|
|
2021-02-09 21:49:15 +08:00
|
|
|
const notificationClass = classNames(`${prefixCls}-${placement}`, {
|
|
|
|
[`${prefixCls}-rtl`]: rtl === true,
|
2020-04-13 15:45:49 +08:00
|
|
|
});
|
|
|
|
|
2020-02-23 00:02:48 +08:00
|
|
|
notificationInstance[cacheKey] = new Promise(resolve => {
|
|
|
|
Notification.newInstance(
|
|
|
|
{
|
2021-02-09 21:49:15 +08:00
|
|
|
prefixCls,
|
2020-04-13 15:45:49 +08:00
|
|
|
className: notificationClass,
|
2020-02-23 00:02:48 +08:00
|
|
|
style: getPlacementStyle(placement, top, bottom),
|
|
|
|
getContainer,
|
2021-08-17 10:45:33 +08:00
|
|
|
maxCount,
|
2020-02-23 00:02:48 +08:00
|
|
|
},
|
|
|
|
notification => {
|
|
|
|
resolve(notification);
|
|
|
|
callback({
|
2021-02-09 21:49:15 +08:00
|
|
|
prefixCls: `${prefixCls}-notice`,
|
2021-06-09 15:36:59 +08:00
|
|
|
iconPrefixCls,
|
2020-02-23 00:02:48 +08:00
|
|
|
instance: notification,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
);
|
|
|
|
});
|
2017-08-17 15:23:47 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
const typeToIcon = {
|
2019-11-28 12:34:33 +08:00
|
|
|
success: CheckCircleOutlined,
|
|
|
|
info: InfoCircleOutlined,
|
|
|
|
error: CloseCircleOutlined,
|
|
|
|
warning: ExclamationCircleOutlined,
|
2017-08-17 15:23:47 +08:00
|
|
|
};
|
|
|
|
|
2016-08-15 12:00:05 +08:00
|
|
|
export interface ArgsProps {
|
2017-01-20 20:10:50 +08:00
|
|
|
message: React.ReactNode;
|
2018-11-15 11:32:53 +08:00
|
|
|
description?: React.ReactNode;
|
2016-08-15 12:00:05 +08:00
|
|
|
btn?: React.ReactNode;
|
|
|
|
key?: string;
|
|
|
|
onClose?: () => void;
|
2018-01-25 12:29:03 +08:00
|
|
|
duration?: number | null;
|
2016-08-28 17:45:27 +08:00
|
|
|
icon?: React.ReactNode;
|
2017-08-17 15:23:47 +08:00
|
|
|
placement?: NotificationPlacement;
|
2022-05-05 14:06:57 +08:00
|
|
|
maxCount?: number;
|
2017-10-09 19:58:30 +08:00
|
|
|
style?: React.CSSProperties;
|
2017-08-17 15:23:47 +08:00
|
|
|
prefixCls?: string;
|
2017-05-05 14:26:55 +08:00
|
|
|
className?: string;
|
2017-11-21 15:48:53 +08:00
|
|
|
readonly type?: IconType;
|
2018-10-18 10:16:56 +08:00
|
|
|
onClick?: () => void;
|
2019-05-06 12:04:39 +08:00
|
|
|
top?: number;
|
|
|
|
bottom?: number;
|
|
|
|
getContainer?: () => HTMLElement;
|
2019-12-01 15:29:53 +08:00
|
|
|
closeIcon?: React.ReactNode;
|
2016-08-15 12:00:05 +08:00
|
|
|
}
|
2019-01-05 21:33:07 +08:00
|
|
|
|
2021-06-09 15:36:59 +08:00
|
|
|
function getRCNoticeProps(args: ArgsProps, prefixCls: string, iconPrefixCls?: string) {
|
2021-03-07 20:48:00 +08:00
|
|
|
const {
|
|
|
|
duration: durationArg,
|
|
|
|
icon,
|
|
|
|
type,
|
|
|
|
description,
|
|
|
|
message,
|
|
|
|
btn,
|
|
|
|
onClose,
|
|
|
|
onClick,
|
|
|
|
key,
|
|
|
|
style,
|
|
|
|
className,
|
2021-10-02 14:14:31 +08:00
|
|
|
closeIcon = defaultCloseIcon,
|
2021-03-07 20:48:00 +08:00
|
|
|
} = args;
|
|
|
|
|
|
|
|
const duration = durationArg === undefined ? defaultDuration : durationArg;
|
2016-04-10 13:08:56 +08:00
|
|
|
|
2017-08-17 15:23:47 +08:00
|
|
|
let iconNode: React.ReactNode = null;
|
2021-03-07 20:48:00 +08:00
|
|
|
if (icon) {
|
2018-12-07 16:17:45 +08:00
|
|
|
iconNode = <span className={`${prefixCls}-icon`}>{args.icon}</span>;
|
2021-03-07 20:48:00 +08:00
|
|
|
} else if (type) {
|
|
|
|
iconNode = React.createElement(typeToIcon[type] || null, {
|
|
|
|
className: `${prefixCls}-icon ${prefixCls}-icon-${type}`,
|
2019-08-13 14:07:17 +08:00
|
|
|
});
|
2016-08-28 17:45:27 +08:00
|
|
|
}
|
|
|
|
|
2021-10-02 14:14:31 +08:00
|
|
|
const closeIconToRender = (
|
|
|
|
<span className={`${prefixCls}-close-x`}>
|
|
|
|
{closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
|
2018-12-07 16:17:45 +08:00
|
|
|
const autoMarginTag =
|
2021-03-07 20:48:00 +08:00
|
|
|
!description && iconNode ? (
|
2018-12-07 16:17:45 +08:00
|
|
|
<span className={`${prefixCls}-message-single-line-auto-margin`} />
|
|
|
|
) : null;
|
2017-04-22 01:28:54 +08:00
|
|
|
|
2020-02-07 17:55:27 +08:00
|
|
|
return {
|
|
|
|
content: (
|
2021-06-09 15:36:59 +08:00
|
|
|
<ConfigProvider iconPrefixCls={iconPrefixCls}>
|
|
|
|
<div className={iconNode ? `${prefixCls}-with-icon` : ''} role="alert">
|
|
|
|
{iconNode}
|
|
|
|
<div className={`${prefixCls}-message`}>
|
|
|
|
{autoMarginTag}
|
|
|
|
{message}
|
|
|
|
</div>
|
|
|
|
<div className={`${prefixCls}-description`}>{description}</div>
|
|
|
|
{btn ? <span className={`${prefixCls}-btn`}>{btn}</span> : null}
|
2020-02-07 17:55:27 +08:00
|
|
|
</div>
|
2021-06-09 15:36:59 +08:00
|
|
|
</ConfigProvider>
|
2020-02-07 17:55:27 +08:00
|
|
|
),
|
|
|
|
duration,
|
|
|
|
closable: true,
|
2021-10-02 14:14:31 +08:00
|
|
|
closeIcon: closeIconToRender,
|
2021-03-07 20:48:00 +08:00
|
|
|
onClose,
|
|
|
|
onClick,
|
|
|
|
key,
|
|
|
|
style: style || {},
|
|
|
|
className: classNames(className, {
|
|
|
|
[`${prefixCls}-${type}`]: !!type,
|
|
|
|
}),
|
2020-02-07 17:55:27 +08:00
|
|
|
};
|
2015-07-31 18:13:32 +08:00
|
|
|
}
|
2015-07-28 15:40:28 +08:00
|
|
|
|
2020-07-15 19:51:56 +08:00
|
|
|
function notice(args: ArgsProps) {
|
2021-06-09 15:36:59 +08:00
|
|
|
getNotificationInstance(args, ({ prefixCls, iconPrefixCls, instance }) => {
|
|
|
|
instance.notice(getRCNoticeProps(args, prefixCls, iconPrefixCls));
|
2020-07-15 19:51:56 +08:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-08-17 15:23:47 +08:00
|
|
|
const api: any = {
|
2020-07-15 19:51:56 +08:00
|
|
|
open: notice,
|
2017-11-21 15:48:53 +08:00
|
|
|
close(key: string) {
|
2018-12-07 16:17:45 +08:00
|
|
|
Object.keys(notificationInstance).forEach(cacheKey =>
|
2020-02-23 00:02:48 +08:00
|
|
|
Promise.resolve(notificationInstance[cacheKey]).then(instance => {
|
|
|
|
instance.removeNotice(key);
|
|
|
|
}),
|
2018-12-07 16:17:45 +08:00
|
|
|
);
|
2016-01-21 14:13:28 +08:00
|
|
|
},
|
2017-08-17 15:23:47 +08:00
|
|
|
config: setNotificationConfig,
|
2016-01-21 14:13:28 +08:00
|
|
|
destroy() {
|
2017-08-17 15:23:47 +08:00
|
|
|
Object.keys(notificationInstance).forEach(cacheKey => {
|
2020-02-23 00:02:48 +08:00
|
|
|
Promise.resolve(notificationInstance[cacheKey]).then(instance => {
|
|
|
|
instance.destroy();
|
|
|
|
});
|
2020-02-25 18:36:18 +08:00
|
|
|
delete notificationInstance[cacheKey]; // lgtm[js/missing-await]
|
2017-05-08 16:57:43 +08:00
|
|
|
});
|
2016-01-21 14:13:28 +08:00
|
|
|
},
|
2015-07-31 18:13:32 +08:00
|
|
|
};
|
2015-08-04 15:16:10 +08:00
|
|
|
|
2018-12-07 16:17:45 +08:00
|
|
|
['success', 'info', 'warning', 'error'].forEach(type => {
|
|
|
|
api[type] = (args: ArgsProps) =>
|
|
|
|
api.open({
|
|
|
|
...args,
|
|
|
|
type,
|
|
|
|
});
|
2015-08-04 15:16:10 +08:00
|
|
|
});
|
|
|
|
|
2017-08-17 15:23:47 +08:00
|
|
|
api.warn = api.warning;
|
2020-02-07 17:55:27 +08:00
|
|
|
api.useNotification = createUseNotification(getNotificationInstance, getRCNoticeProps);
|
2016-03-28 18:03:00 +08:00
|
|
|
|
2020-02-07 17:55:27 +08:00
|
|
|
export interface NotificationInstance {
|
2017-08-17 15:23:47 +08:00
|
|
|
success(args: ArgsProps): void;
|
|
|
|
error(args: ArgsProps): void;
|
|
|
|
info(args: ArgsProps): void;
|
|
|
|
warning(args: ArgsProps): void;
|
|
|
|
open(args: ArgsProps): void;
|
2020-02-07 17:55:27 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface NotificationApi extends NotificationInstance {
|
|
|
|
warn(args: ArgsProps): void;
|
2017-08-17 15:23:47 +08:00
|
|
|
close(key: string): void;
|
|
|
|
config(options: ConfigProps): void;
|
|
|
|
destroy(): void;
|
2020-02-07 17:55:27 +08:00
|
|
|
|
|
|
|
// Hooks
|
|
|
|
useNotification: () => [NotificationInstance, React.ReactElement];
|
2017-08-17 15:23:47 +08:00
|
|
|
}
|
2019-01-05 21:33:07 +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 = async (cacheKey: string) =>
|
|
|
|
process.env.NODE_ENV === 'test' ? notificationInstance[cacheKey] : null;
|
2020-09-28 00:41:16 +08:00
|
|
|
|
2017-06-13 14:43:19 +08:00
|
|
|
export default api as NotificationApi;
|