ant-design/components/notification/index.tsx
叶枫 10c326ee94
feat: 添加全局静态配置 (#29285)
* feat: 添加全局静态配置

* chore: change globalConfig

* chore: change globalPrefixCls

* chore: review

* feat: 恢复 message 静态 prefix

* feat: modal

* feat: notification

* fix: prefix

* fix: prefix

* fix: 添加 test

* chore: review

* docs: doc

* chore: en

* chore: test

* fix: notification config set empty

* chore: link

* chore: change name

* chore: doc

* chore: doc
2021-02-09 21:49:15 +08:00

290 lines
7.6 KiB
TypeScript
Executable File

import * as React from 'react';
import Notification from 'rc-notification';
import { NotificationInstance as RCNotificationInstance } from 'rc-notification/lib/Notification';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import classNames from 'classnames';
import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
import createUseNotification from './hooks/useNotification';
import { globalConfig } from '../config-provider';
export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
export type IconType = 'success' | 'info' | 'error' | 'warning';
const notificationInstance: {
[key: string]: Promise<RCNotificationInstance>;
} = {};
let defaultDuration = 4.5;
let defaultTop = 24;
let defaultBottom = 24;
let defaultPrefixCls = '';
let defaultPlacement: NotificationPlacement = 'topRight';
let defaultGetContainer: () => HTMLElement;
let defaultCloseIcon: React.ReactNode;
let rtl = false;
export interface ConfigProps {
top?: number;
bottom?: number;
duration?: number;
prefixCls?: string;
placement?: NotificationPlacement;
getContainer?: () => HTMLElement;
closeIcon?: React.ReactNode;
rtl?: boolean;
}
function setNotificationConfig(options: ConfigProps) {
const { duration, placement, bottom, top, getContainer, closeIcon, prefixCls } = options;
if (prefixCls !== undefined) {
defaultPrefixCls = prefixCls;
}
if (duration !== undefined) {
defaultDuration = duration;
}
if (placement !== undefined) {
defaultPlacement = placement;
} else if (options.rtl) {
defaultPlacement = 'topLeft';
}
if (bottom !== undefined) {
defaultBottom = bottom;
}
if (top !== undefined) {
defaultTop = top;
}
if (getContainer !== undefined) {
defaultGetContainer = getContainer;
}
if (closeIcon !== undefined) {
defaultCloseIcon = closeIcon;
}
if (options.rtl !== undefined) {
rtl = options.rtl;
}
}
function getPlacementStyle(
placement: NotificationPlacement,
top: number = defaultTop,
bottom: number = defaultBottom,
) {
let style;
switch (placement) {
case 'topLeft':
style = {
left: 0,
top,
bottom: 'auto',
};
break;
case 'topRight':
style = {
right: 0,
top,
bottom: 'auto',
};
break;
case 'bottomLeft':
style = {
left: 0,
top: 'auto',
bottom,
};
break;
default:
style = {
right: 0,
top: 'auto',
bottom,
};
break;
}
return style;
}
function getNotificationInstance(
args: ArgsProps,
callback: (info: { prefixCls: string; instance: RCNotificationInstance }) => void,
) {
const {
placement = defaultPlacement,
top,
bottom,
getContainer = defaultGetContainer,
closeIcon = defaultCloseIcon,
prefixCls: customizePrefixCls,
} = args;
const { getPrefixCls } = globalConfig();
const prefixCls = getPrefixCls('notification', customizePrefixCls || defaultPrefixCls);
const cacheKey = `${prefixCls}-${placement}`;
const cacheInstance = notificationInstance[cacheKey];
if (cacheInstance) {
Promise.resolve(cacheInstance).then(instance => {
callback({ prefixCls: `${prefixCls}-notice`, instance });
});
return;
}
const closeIconToRender = (
<span className={`${prefixCls}-close-x`}>
{closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />}
</span>
);
const notificationClass = classNames(`${prefixCls}-${placement}`, {
[`${prefixCls}-rtl`]: rtl === true,
});
notificationInstance[cacheKey] = new Promise(resolve => {
Notification.newInstance(
{
prefixCls,
className: notificationClass,
style: getPlacementStyle(placement, top, bottom),
getContainer,
closeIcon: closeIconToRender,
},
notification => {
resolve(notification);
callback({
prefixCls: `${prefixCls}-notice`,
instance: notification,
});
},
);
});
}
const typeToIcon = {
success: CheckCircleOutlined,
info: InfoCircleOutlined,
error: CloseCircleOutlined,
warning: ExclamationCircleOutlined,
};
export interface ArgsProps {
message: React.ReactNode;
description?: React.ReactNode;
btn?: React.ReactNode;
key?: string;
onClose?: () => void;
duration?: number | null;
icon?: React.ReactNode;
placement?: NotificationPlacement;
style?: React.CSSProperties;
prefixCls?: string;
className?: string;
readonly type?: IconType;
onClick?: () => void;
top?: number;
bottom?: number;
getContainer?: () => HTMLElement;
closeIcon?: React.ReactNode;
}
function getRCNoticeProps(args: ArgsProps, prefixCls: string) {
const duration = args.duration === undefined ? defaultDuration : args.duration;
let iconNode: React.ReactNode = null;
if (args.icon) {
iconNode = <span className={`${prefixCls}-icon`}>{args.icon}</span>;
} else if (args.type) {
iconNode = React.createElement(typeToIcon[args.type] || null, {
className: `${prefixCls}-icon ${prefixCls}-icon-${args.type}`,
});
}
const autoMarginTag =
!args.description && iconNode ? (
<span className={`${prefixCls}-message-single-line-auto-margin`} />
) : null;
return {
content: (
<div className={iconNode ? `${prefixCls}-with-icon` : ''} role="alert">
{iconNode}
<div className={`${prefixCls}-message`}>
{autoMarginTag}
{args.message}
</div>
<div className={`${prefixCls}-description`}>{args.description}</div>
{args.btn ? <span className={`${prefixCls}-btn`}>{args.btn}</span> : null}
</div>
),
duration,
closable: true,
onClose: args.onClose,
onClick: args.onClick,
key: args.key,
style: args.style || {},
className: args.className,
};
}
function notice(args: ArgsProps) {
getNotificationInstance(args, ({ prefixCls, instance }) => {
instance.notice(getRCNoticeProps(args, prefixCls));
});
}
const api: any = {
open: notice,
close(key: string) {
Object.keys(notificationInstance).forEach(cacheKey =>
Promise.resolve(notificationInstance[cacheKey]).then(instance => {
instance.removeNotice(key);
}),
);
},
config: setNotificationConfig,
destroy() {
Object.keys(notificationInstance).forEach(cacheKey => {
Promise.resolve(notificationInstance[cacheKey]).then(instance => {
instance.destroy();
});
delete notificationInstance[cacheKey]; // lgtm[js/missing-await]
});
},
};
['success', 'info', 'warning', 'error'].forEach(type => {
api[type] = (args: ArgsProps) =>
api.open({
...args,
type,
});
});
api.warn = api.warning;
api.useNotification = createUseNotification(getNotificationInstance, getRCNoticeProps);
export interface NotificationInstance {
success(args: ArgsProps): void;
error(args: ArgsProps): void;
info(args: ArgsProps): void;
warning(args: ArgsProps): void;
open(args: ArgsProps): void;
}
export interface NotificationApi extends NotificationInstance {
warn(args: ArgsProps): void;
close(key: string): void;
config(options: ConfigProps): void;
destroy(): void;
// Hooks
useNotification: () => [NotificationInstance, React.ReactElement];
}
/** @private test only function. Not work on production */
export const getInstance = async (cacheKey: string) =>
process.env.NODE_ENV === 'test' ? notificationInstance[cacheKey] : null;
export default api as NotificationApi;