import * as React from 'react'; import Notification from 'rc-notification'; import Icon from '../icon'; let defaultDuration = 3; let defaultTop: number; let messageInstance: any; let key = 1; let prefixCls = 'ant-message'; let getContainer: () => HTMLElement; function getMessageInstance(callback: (i: any) => void) { if (messageInstance) { callback(messageInstance); return; } Notification.newInstance({ prefixCls, transitionName: 'move-up', style: { top: defaultTop }, // 覆盖原来的样式 getContainer, }, (instance: any) => { messageInstance = instance; callback(instance); }); } type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading'; function notice( content: React.ReactNode, duration: (() => void) | number = defaultDuration, type: NoticeType, onClose?: () => void, ) { let iconType = ({ info: 'info-circle', success: 'check-circle', error: 'cross-circle', warning: 'exclamation-circle', loading: 'loading', })[type]; if (typeof duration === 'function') { onClose = duration; duration = defaultDuration; } const target = key++; getMessageInstance((instance) => { instance.notice({ key: target, duration, style: {}, content: (
{content}
), onClose, }); }); return () => { if (messageInstance) { messageInstance.removeNotice(target); } }; } type ConfigContent = React.ReactNode | string; type ConfigDuration = number | (() => void); export type ConfigOnClose = () => void; export interface ConfigOptions { top?: number; duration?: number; prefixCls?: string; getContainer?: () => HTMLElement; } export default { info(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) { return notice(content, duration, 'info', onClose); }, success(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) { return notice(content, duration, 'success', onClose); }, error(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) { return notice(content, duration, 'error', onClose); }, // Departed usage, please use warning() warn(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) { return notice(content, duration, 'warning', onClose); }, warning(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) { return notice(content, duration, 'warning', onClose); }, loading(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) { return notice(content, duration, 'loading', onClose); }, config(options: ConfigOptions) { if (options.top !== undefined) { defaultTop = options.top; messageInstance = null; // delete messageInstance for new defaultTop } if (options.duration !== undefined) { defaultDuration = options.duration; } if (options.prefixCls !== undefined) { prefixCls = options.prefixCls; } if (options.getContainer !== undefined) { getContainer = options.getContainer; } }, destroy() { if (messageInstance) { messageInstance.destroy(); messageInstance = null; } }, };