import React from 'react'; import Notification from 'rc-notification'; import Icon from '../icon'; export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; const notificationInstance = {}; let defaultDuration = 4.5; let defaultTop = 24; let defaultBottom = 24; let defaultPlacement: NotificationPlacement = 'topRight'; let defaultGetContainer; export interface ConfigProps { top?: number; bottom?: number; duration?: number; placement?: NotificationPlacement; getContainer?: () => HTMLElement; } function setNotificationConfig(options: ConfigProps) { const { duration, placement, bottom, top, getContainer } = 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; } } function getPlacementStyle(placement: NotificationPlacement) { let style; switch (placement) { case 'topLeft': style = { left: 0, top: defaultTop, bottom: 'auto', }; break; case 'topRight': style = { right: 0, top: defaultTop, bottom: 'auto', }; break; case 'bottomLeft': style = { left: 0, top: 'auto', bottom: defaultBottom, }; break; default: style = { right: 0, top: 'auto', bottom: defaultBottom, }; break; } return style; } function getNotificationInstance(prefixCls, placement, callback) { const cacheKey = `${prefixCls}-${placement}`; if (notificationInstance[cacheKey]) { callback(notificationInstance[cacheKey]); return; } (Notification as any).newInstance({ prefixCls, className: `${prefixCls}-${placement}`, style: getPlacementStyle(placement), getContainer: defaultGetContainer, }, (notification) => { notificationInstance[cacheKey] = notification; callback(notification); }); } const typeToIcon = { success: 'check-circle-o', info: 'info-circle-o', error: 'cross-circle-o', warning: 'exclamation-circle-o', }; export interface ArgsProps { message: React.ReactNode; description: React.ReactNode; btn?: React.ReactNode; key?: string; onClose?: () => void; duration?: number; icon?: React.ReactNode; placement?: NotificationPlacement; style?: React.CSSProperties; prefixCls?: string; className?: string; readonly type?: string; } function notice(args: ArgsProps) { const outerPrefixCls = args.prefixCls || 'ant-notification'; const prefixCls = `${outerPrefixCls}-notice`; const duration = args.duration === undefined ? defaultDuration : args.duration; let iconNode: React.ReactNode = null; if (args.icon) { iconNode = ( {args.icon} ); } else if (args.type) { const iconType = typeToIcon[args.type]; iconNode = ( ); } const autoMarginTag = (!args.description && iconNode) ? : null; getNotificationInstance(outerPrefixCls, args.placement || defaultPlacement, (notification) => { notification.notice({ content: (
{iconNode}
{autoMarginTag} {args.message}
{args.description}
{args.btn ? {args.btn} : null}
), duration, closable: true, onClose: args.onClose, key: args.key, style: args.style || {}, className: args.className, }); }); } const api: any = { open: notice, close(key) { 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; export interface NotificationApi { success(args: ArgsProps): void; error(args: ArgsProps): void; info(args: ArgsProps): void; warn(args: ArgsProps): void; warning(args: ArgsProps): void; open(args: ArgsProps): void; close(key: string): void; config(options: ConfigProps): void; destroy(): void; } export default api as NotificationApi;