2021-09-25 08:51:32 +00:00
|
|
|
import type { CSSProperties } from 'vue';
|
2019-01-12 03:33:27 +00:00
|
|
|
import Notification from '../vc-notification';
|
2020-03-26 04:00:35 +00:00
|
|
|
import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
|
|
|
|
import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined';
|
|
|
|
import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined';
|
|
|
|
import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
|
|
|
|
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
|
2021-09-25 08:51:32 +00:00
|
|
|
import type { VueNode } from '../_util/type';
|
|
|
|
import { renderHelper } from '../_util/util';
|
|
|
|
import { globalConfig } from '../config-provider';
|
2018-02-06 07:21:13 +00:00
|
|
|
|
2020-10-19 01:42:00 +00:00
|
|
|
export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
|
|
|
|
|
|
|
|
export type IconType = 'success' | 'info' | 'error' | 'warning';
|
|
|
|
|
|
|
|
export interface ConfigProps {
|
|
|
|
top?: string | number;
|
|
|
|
bottom?: string | number;
|
|
|
|
duration?: number;
|
2021-09-25 08:51:32 +00:00
|
|
|
prefixCls?: string;
|
2020-10-19 01:42:00 +00:00
|
|
|
placement?: NotificationPlacement;
|
|
|
|
getContainer?: () => HTMLElement;
|
2021-09-25 08:51:32 +00:00
|
|
|
closeIcon?: VueNode | (() => VueNode);
|
2020-10-19 01:42:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const notificationInstance: { [key: string]: any } = {};
|
2019-01-12 03:33:27 +00:00
|
|
|
let defaultDuration = 4.5;
|
|
|
|
let defaultTop = '24px';
|
|
|
|
let defaultBottom = '24px';
|
2021-09-25 08:51:32 +00:00
|
|
|
let defaultPrefixCls = '';
|
2020-10-19 01:42:00 +00:00
|
|
|
let defaultPlacement: NotificationPlacement = 'topRight';
|
2019-01-12 03:33:27 +00:00
|
|
|
let defaultGetContainer = () => document.body;
|
2020-03-07 11:45:13 +00:00
|
|
|
let defaultCloseIcon = null;
|
2018-02-06 07:21:13 +00:00
|
|
|
|
2020-10-19 01:42:00 +00:00
|
|
|
function setNotificationConfig(options: ConfigProps) {
|
2021-09-25 08:51:32 +00:00
|
|
|
const { duration, placement, bottom, top, getContainer, closeIcon, prefixCls } = options;
|
|
|
|
if (prefixCls !== undefined) {
|
|
|
|
defaultPrefixCls = prefixCls;
|
|
|
|
}
|
2018-02-06 07:21:13 +00:00
|
|
|
if (duration !== undefined) {
|
2019-01-12 03:33:27 +00:00
|
|
|
defaultDuration = duration;
|
2018-02-06 07:21:13 +00:00
|
|
|
}
|
|
|
|
if (placement !== undefined) {
|
2019-01-12 03:33:27 +00:00
|
|
|
defaultPlacement = placement;
|
2018-02-06 07:21:13 +00:00
|
|
|
}
|
|
|
|
if (bottom !== undefined) {
|
2019-01-12 03:33:27 +00:00
|
|
|
defaultBottom = typeof bottom === 'number' ? `${bottom}px` : bottom;
|
2018-02-06 07:21:13 +00:00
|
|
|
}
|
|
|
|
if (top !== undefined) {
|
2019-01-12 03:33:27 +00:00
|
|
|
defaultTop = typeof top === 'number' ? `${top}px` : top;
|
2018-02-06 07:21:13 +00:00
|
|
|
}
|
|
|
|
if (getContainer !== undefined) {
|
2019-01-12 03:33:27 +00:00
|
|
|
defaultGetContainer = getContainer;
|
2018-02-06 07:21:13 +00:00
|
|
|
}
|
2020-03-07 11:45:13 +00:00
|
|
|
if (closeIcon !== undefined) {
|
|
|
|
defaultCloseIcon = closeIcon;
|
|
|
|
}
|
2018-02-06 07:21:13 +00:00
|
|
|
}
|
|
|
|
|
2020-10-19 01:42:00 +00:00
|
|
|
function getPlacementStyle(
|
|
|
|
placement: NotificationPlacement,
|
2020-11-16 05:00:43 +00:00
|
|
|
top: string = defaultTop,
|
|
|
|
bottom: string = defaultBottom,
|
2020-10-19 01:42:00 +00:00
|
|
|
) {
|
2019-01-12 03:33:27 +00:00
|
|
|
let style;
|
2018-02-06 07:21:13 +00:00
|
|
|
switch (placement) {
|
|
|
|
case 'topLeft':
|
|
|
|
style = {
|
2020-06-14 13:41:29 +00:00
|
|
|
left: '0px',
|
2020-03-07 11:45:13 +00:00
|
|
|
top,
|
2018-02-06 07:21:13 +00:00
|
|
|
bottom: 'auto',
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
|
|
|
break;
|
2018-02-06 07:21:13 +00:00
|
|
|
case 'topRight':
|
|
|
|
style = {
|
2020-06-14 13:41:29 +00:00
|
|
|
right: '0px',
|
2020-03-07 11:45:13 +00:00
|
|
|
top,
|
2018-02-06 07:21:13 +00:00
|
|
|
bottom: 'auto',
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
|
|
|
break;
|
2018-02-06 07:21:13 +00:00
|
|
|
case 'bottomLeft':
|
|
|
|
style = {
|
2020-06-14 13:41:29 +00:00
|
|
|
left: '0px',
|
2018-02-06 07:21:13 +00:00
|
|
|
top: 'auto',
|
2020-03-07 11:45:13 +00:00
|
|
|
bottom,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
|
|
|
break;
|
2018-02-06 07:21:13 +00:00
|
|
|
default:
|
|
|
|
style = {
|
2020-06-14 13:41:29 +00:00
|
|
|
right: '0px',
|
2018-02-06 07:21:13 +00:00
|
|
|
top: 'auto',
|
2020-03-07 11:45:13 +00:00
|
|
|
bottom,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
|
|
|
break;
|
2018-02-06 07:21:13 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
return style;
|
2018-02-06 07:21:13 +00:00
|
|
|
}
|
|
|
|
|
2020-03-07 11:45:13 +00:00
|
|
|
function getNotificationInstance(
|
|
|
|
{
|
2021-09-25 08:51:32 +00:00
|
|
|
prefixCls: customizePrefixCls,
|
2020-03-07 11:45:13 +00:00
|
|
|
placement = defaultPlacement,
|
|
|
|
getContainer = defaultGetContainer,
|
|
|
|
top,
|
|
|
|
bottom,
|
|
|
|
closeIcon = defaultCloseIcon,
|
2021-09-25 08:51:32 +00:00
|
|
|
appContext,
|
|
|
|
}: NotificationArgsProps,
|
2020-10-19 01:42:00 +00:00
|
|
|
callback: (n: any) => void,
|
2020-03-07 11:45:13 +00:00
|
|
|
) {
|
2021-09-25 08:51:32 +00:00
|
|
|
const { getPrefixCls } = globalConfig();
|
|
|
|
const prefixCls = getPrefixCls('notification', customizePrefixCls || defaultPrefixCls);
|
2019-01-12 03:33:27 +00:00
|
|
|
const cacheKey = `${prefixCls}-${placement}`;
|
2018-02-06 07:21:13 +00:00
|
|
|
if (notificationInstance[cacheKey]) {
|
2019-01-12 03:33:27 +00:00
|
|
|
callback(notificationInstance[cacheKey]);
|
|
|
|
return;
|
2018-02-06 07:21:13 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
Notification.newInstance(
|
|
|
|
{
|
2021-09-25 08:51:32 +00:00
|
|
|
name: 'notification',
|
|
|
|
prefixCls: customizePrefixCls || defaultPrefixCls,
|
2019-01-12 03:33:27 +00:00
|
|
|
class: `${prefixCls}-${placement}`,
|
2020-03-07 11:45:13 +00:00
|
|
|
style: getPlacementStyle(placement, top, bottom),
|
2021-09-25 08:51:32 +00:00
|
|
|
appContext,
|
2020-03-07 11:45:13 +00:00
|
|
|
getContainer,
|
2021-09-25 08:51:32 +00:00
|
|
|
closeIcon: ({ prefixCls }) => {
|
2020-03-07 11:45:13 +00:00
|
|
|
const closeIconToRender = (
|
|
|
|
<span class={`${prefixCls}-close-x`}>
|
2021-09-25 08:51:32 +00:00
|
|
|
{renderHelper(closeIcon, {}, <CloseOutlined class={`${prefixCls}-close-icon`} />)}
|
2020-03-07 11:45:13 +00:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
return closeIconToRender;
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
},
|
2020-10-19 01:42:00 +00:00
|
|
|
(notification: any) => {
|
2019-01-12 03:33:27 +00:00
|
|
|
notificationInstance[cacheKey] = notification;
|
|
|
|
callback(notification);
|
|
|
|
},
|
|
|
|
);
|
2018-02-06 07:21:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const typeToIcon = {
|
2020-03-26 04:00:35 +00:00
|
|
|
success: CheckCircleOutlined,
|
|
|
|
info: InfoCircleOutlined,
|
|
|
|
error: CloseCircleOutlined,
|
|
|
|
warning: ExclamationCircleOutlined,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-02-06 07:21:13 +00:00
|
|
|
|
2021-06-23 13:47:53 +00:00
|
|
|
export interface NotificationArgsProps {
|
2021-09-25 08:51:32 +00:00
|
|
|
message: VueNode | (() => VueNode);
|
|
|
|
description?: VueNode | (() => VueNode);
|
|
|
|
btn?: VueNode | (() => VueNode);
|
2020-10-19 01:42:00 +00:00
|
|
|
key?: string;
|
|
|
|
onClose?: () => void;
|
|
|
|
duration?: number | null;
|
2021-09-25 08:51:32 +00:00
|
|
|
icon?: VueNode | (() => VueNode);
|
2020-10-19 01:42:00 +00:00
|
|
|
placement?: NotificationPlacement;
|
|
|
|
style?: CSSProperties;
|
|
|
|
prefixCls?: string;
|
|
|
|
class?: string;
|
|
|
|
readonly type?: IconType;
|
|
|
|
onClick?: () => void;
|
2020-11-16 05:00:43 +00:00
|
|
|
top?: string;
|
|
|
|
bottom?: string;
|
2020-10-19 01:42:00 +00:00
|
|
|
getContainer?: () => HTMLElement;
|
2021-09-25 08:51:32 +00:00
|
|
|
closeIcon?: VueNode | (() => VueNode);
|
|
|
|
appContext?: any;
|
2020-10-19 01:42:00 +00:00
|
|
|
}
|
|
|
|
|
2021-06-23 13:47:53 +00:00
|
|
|
function notice(args: NotificationArgsProps) {
|
2020-03-07 11:45:13 +00:00
|
|
|
const { icon, type, description, message, btn } = args;
|
2019-01-12 03:33:27 +00:00
|
|
|
const duration = args.duration === undefined ? defaultDuration : args.duration;
|
2021-09-25 08:51:32 +00:00
|
|
|
getNotificationInstance(args, notification => {
|
|
|
|
notification.notice({
|
2021-10-03 06:05:02 +00:00
|
|
|
content: ({ prefixCls: outerPrefixCls }) => {
|
|
|
|
const prefixCls = `${outerPrefixCls}-notice`;
|
2021-09-25 08:51:32 +00:00
|
|
|
let iconNode = null;
|
|
|
|
if (icon) {
|
|
|
|
iconNode = () => <span class={`${prefixCls}-icon`}>{renderHelper(icon)}</span>;
|
|
|
|
} else if (type) {
|
|
|
|
const Icon = typeToIcon[type];
|
|
|
|
iconNode = () => <Icon class={`${prefixCls}-icon ${prefixCls}-icon-${type}`} />;
|
|
|
|
}
|
|
|
|
return (
|
2020-03-07 11:45:13 +00:00
|
|
|
<div class={iconNode ? `${prefixCls}-with-icon` : ''}>
|
2020-08-03 03:22:52 +00:00
|
|
|
{iconNode && iconNode()}
|
2020-03-07 11:45:13 +00:00
|
|
|
<div class={`${prefixCls}-message`}>
|
|
|
|
{!description && iconNode ? (
|
|
|
|
<span class={`${prefixCls}-message-single-line-auto-margin`} />
|
|
|
|
) : null}
|
2021-09-25 08:51:32 +00:00
|
|
|
{renderHelper(message)}
|
2020-03-07 11:45:13 +00:00
|
|
|
</div>
|
2021-09-25 08:51:32 +00:00
|
|
|
<div class={`${prefixCls}-description`}>{renderHelper(description)}</div>
|
|
|
|
{btn ? <span class={`${prefixCls}-btn`}>{renderHelper(btn)}</span> : null}
|
2018-02-06 07:21:13 +00:00
|
|
|
</div>
|
2021-09-25 08:51:32 +00:00
|
|
|
);
|
|
|
|
},
|
|
|
|
duration,
|
|
|
|
closable: true,
|
|
|
|
onClose: args.onClose,
|
|
|
|
onClick: args.onClick,
|
|
|
|
key: args.key,
|
|
|
|
style: args.style || {},
|
|
|
|
class: args.class,
|
|
|
|
});
|
|
|
|
});
|
2018-02-06 07:21:13 +00:00
|
|
|
}
|
|
|
|
|
2021-07-11 06:46:45 +00:00
|
|
|
const apiBase = {
|
2018-02-06 07:21:13 +00:00
|
|
|
open: notice,
|
2020-10-19 01:42:00 +00:00
|
|
|
close(key: string) {
|
2019-01-12 03:33:27 +00:00
|
|
|
Object.keys(notificationInstance).forEach(cacheKey =>
|
|
|
|
notificationInstance[cacheKey].removeNotice(key),
|
|
|
|
);
|
2018-02-06 07:21:13 +00:00
|
|
|
},
|
|
|
|
config: setNotificationConfig,
|
2019-01-12 03:33:27 +00:00
|
|
|
destroy() {
|
2018-02-06 07:21:13 +00:00
|
|
|
Object.keys(notificationInstance).forEach(cacheKey => {
|
2019-01-12 03:33:27 +00:00
|
|
|
notificationInstance[cacheKey].destroy();
|
|
|
|
delete notificationInstance[cacheKey];
|
|
|
|
});
|
2018-02-06 07:21:13 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
|
2021-07-11 06:46:45 +00:00
|
|
|
type NotificationApi = typeof apiBase &
|
|
|
|
Record<IconType | 'warn', (args: Omit<NotificationArgsProps, 'type'>) => void>;
|
|
|
|
const api = apiBase as any as NotificationApi;
|
|
|
|
const iconTypes: IconType[] = ['success', 'info', 'warning', 'error'];
|
|
|
|
iconTypes.forEach(type => {
|
2019-01-12 03:33:27 +00:00
|
|
|
api[type] = args =>
|
|
|
|
api.open({
|
|
|
|
...args,
|
|
|
|
type,
|
|
|
|
});
|
|
|
|
});
|
2018-02-06 07:21:13 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
api.warn = api.warning;
|
|
|
|
export default api;
|