import * as React from 'react'; import Notification from 'rc-notification'; import { NotificationInstance as RCNotificationInstance } from 'rc-notification/lib/Notification'; import { CloseOutlined, CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, InfoCircleOutlined, } from '@ant-design/icons'; import createUseNotification from './hooks/useNotification'; export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; export type IconType = 'success' | 'info' | 'error' | 'warning'; const notificationInstance: { [key: string]: RCNotificationInstance } = {}; let defaultDuration = 4.5; let defaultTop = 24; let defaultBottom = 24; let defaultPlacement: NotificationPlacement = 'topRight'; let defaultGetContainer: () => HTMLElement; let defaultCloseIcon: React.ReactNode; export interface ConfigProps { top?: number; bottom?: number; duration?: number; placement?: NotificationPlacement; getContainer?: () => HTMLElement; closeIcon?: React.ReactNode; } function setNotificationConfig(options: ConfigProps) { const { duration, placement, bottom, top, getContainer, closeIcon } = options; if (duration !== undefined) { defaultDuration = duration; } if (placement !== undefined) { defaultPlacement = placement; } if (bottom !== undefined) { defaultBottom = bottom; } if (top !== undefined) { defaultTop = top; } if (getContainer !== undefined) { defaultGetContainer = getContainer; } if (closeIcon !== undefined) { defaultCloseIcon = closeIcon; } } 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, } = args; const outerPrefixCls = args.prefixCls || 'ant-notification'; const prefixCls = `${outerPrefixCls}-notice`; const cacheKey = `${outerPrefixCls}-${placement}`; if (notificationInstance[cacheKey]) { callback({ prefixCls, instance: notificationInstance[cacheKey] }); return; } const closeIconToRender = ( {closeIcon || } ); Notification.newInstance( { prefixCls: outerPrefixCls, className: `${outerPrefixCls}-${placement}`, style: getPlacementStyle(placement, top, bottom), getContainer, closeIcon: closeIconToRender, }, notification => { notificationInstance[cacheKey] = notification; callback({ prefixCls, 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 = {args.icon}; } else if (args.type) { iconNode = React.createElement(typeToIcon[args.type] || null, { className: `${prefixCls}-icon ${prefixCls}-icon-${args.type}`, }); } const autoMarginTag = !args.description && iconNode ? ( ) : null; return { content: (
{iconNode}
{autoMarginTag} {args.message}
{args.description}
{args.btn ? {args.btn} : null}
), duration, closable: true, onClose: args.onClose, onClick: args.onClick, key: args.key, style: args.style || {}, className: args.className, }; } const api: any = { open: (args: ArgsProps) => { getNotificationInstance(args, ({ prefixCls, instance }) => { instance.notice(getRCNoticeProps(args, prefixCls)); }); }, close(key: string) { Object.keys(notificationInstance).forEach(cacheKey => notificationInstance[cacheKey].removeNotice(key), ); }, config: setNotificationConfig, destroy() { Object.keys(notificationInstance).forEach(cacheKey => { notificationInstance[cacheKey].destroy(); delete notificationInstance[cacheKey]; }); }, }; ['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]; } export default api as NotificationApi;