2016-09-21 11:54:53 +08:00
|
|
|
import React from 'react';
|
2015-07-11 16:40:59 +08:00
|
|
|
import Notification from 'rc-notification';
|
2015-11-20 11:05:34 +08:00
|
|
|
import Icon from '../icon';
|
2015-07-11 16:40:59 +08:00
|
|
|
|
2016-10-27 17:39:28 +08:00
|
|
|
let defaultDuration = 1.5;
|
2016-10-26 11:05:00 +08:00
|
|
|
let defaultTop;
|
2016-10-27 17:39:28 +08:00
|
|
|
let messageInstance;
|
2016-10-26 11:05:00 +08:00
|
|
|
let key = 1;
|
2016-10-27 17:39:28 +08:00
|
|
|
let prefixCls = 'ant-message';
|
2016-10-26 11:05:00 +08:00
|
|
|
|
2015-07-23 11:59:56 +08:00
|
|
|
function getMessageInstance() {
|
2016-10-27 17:39:28 +08:00
|
|
|
messageInstance = messageInstance || Notification.newInstance({
|
2016-10-27 17:39:46 +08:00
|
|
|
prefixCls,
|
2016-10-27 17:39:28 +08:00
|
|
|
transitionName: 'move-up',
|
|
|
|
style: { top: defaultTop }, // 覆盖原来的样式
|
|
|
|
});
|
|
|
|
return messageInstance;
|
2015-07-23 11:59:56 +08:00
|
|
|
}
|
|
|
|
|
2016-07-29 16:32:12 +08:00
|
|
|
type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
|
|
|
|
|
|
|
|
function notice(
|
|
|
|
content: React.ReactNode,
|
|
|
|
duration: number = defaultDuration,
|
|
|
|
type: NoticeType,
|
2016-10-27 17:39:28 +08:00
|
|
|
onClose?: () => void) {
|
|
|
|
let iconType = ({
|
|
|
|
info: 'info-circle',
|
|
|
|
success: 'check-circle',
|
|
|
|
error: 'cross-circle',
|
|
|
|
warning: 'exclamation-circle',
|
|
|
|
loading: 'loading',
|
|
|
|
})[type];
|
|
|
|
|
|
|
|
let instance = getMessageInstance();
|
2015-09-07 12:27:09 +08:00
|
|
|
instance.notice({
|
2016-01-07 17:46:46 +08:00
|
|
|
key,
|
|
|
|
duration,
|
2015-07-23 11:59:56 +08:00
|
|
|
style: {},
|
2016-04-16 17:38:30 +08:00
|
|
|
content: (
|
|
|
|
<div className={`${prefixCls}-custom-content ${prefixCls}-${type}`}>
|
|
|
|
<Icon type={iconType} />
|
|
|
|
<span>{content}</span>
|
|
|
|
</div>
|
|
|
|
),
|
|
|
|
onClose,
|
2015-07-23 11:59:56 +08:00
|
|
|
});
|
2016-01-14 16:46:38 +08:00
|
|
|
return (function () {
|
2015-09-07 12:27:09 +08:00
|
|
|
let target = key++;
|
2016-01-14 16:46:38 +08:00
|
|
|
return function () {
|
2015-09-07 12:27:09 +08:00
|
|
|
instance.removeNotice(target);
|
|
|
|
};
|
2016-01-23 15:22:16 +08:00
|
|
|
}());
|
2015-07-23 11:59:56 +08:00
|
|
|
}
|
2015-07-11 16:40:59 +08:00
|
|
|
|
2016-09-19 10:17:07 +08:00
|
|
|
type ConfigContent = React.ReactNode | string;
|
2016-07-29 16:32:12 +08:00
|
|
|
type ConfigDuration = number;
|
2016-10-18 11:55:00 +08:00
|
|
|
export type ConfigOnClose = () => void;
|
2016-07-29 16:32:12 +08:00
|
|
|
|
2016-09-13 15:31:29 +08:00
|
|
|
export interface ConfigOptions {
|
2016-07-29 16:32:12 +08:00
|
|
|
top?: number;
|
|
|
|
duration?: number;
|
|
|
|
prefixCls?: string;
|
|
|
|
}
|
|
|
|
|
2015-07-11 18:00:58 +08:00
|
|
|
export default {
|
2016-10-24 12:04:26 +08:00
|
|
|
info(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
|
2015-09-07 12:27:09 +08:00
|
|
|
return notice(content, duration, 'info', onClose);
|
2015-07-11 16:40:59 +08:00
|
|
|
},
|
2016-07-29 16:32:12 +08:00
|
|
|
success(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
|
2015-09-07 12:27:09 +08:00
|
|
|
return notice(content, duration, 'success', onClose);
|
2015-07-11 16:40:59 +08:00
|
|
|
},
|
2016-07-29 16:32:12 +08:00
|
|
|
error(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
|
2015-09-07 12:27:09 +08:00
|
|
|
return notice(content, duration, 'error', onClose);
|
|
|
|
},
|
2016-03-28 18:03:00 +08:00
|
|
|
// Departed usage, please use warning()
|
2016-07-29 16:32:12 +08:00
|
|
|
warn(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
|
2016-03-28 18:03:00 +08:00
|
|
|
return notice(content, duration, 'warning', onClose);
|
|
|
|
},
|
2016-07-29 16:32:12 +08:00
|
|
|
warning(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
|
2016-03-28 14:38:25 +08:00
|
|
|
return notice(content, duration, 'warning', onClose);
|
2015-12-10 16:41:41 +08:00
|
|
|
},
|
2016-07-29 16:32:12 +08:00
|
|
|
loading(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) {
|
2015-09-07 12:27:09 +08:00
|
|
|
return notice(content, duration, 'loading', onClose);
|
2015-07-30 11:47:46 +08:00
|
|
|
},
|
2016-07-29 16:32:12 +08:00
|
|
|
|
|
|
|
config(options: ConfigOptions) {
|
2016-10-24 12:04:26 +08:00
|
|
|
if (options.top !== undefined) {
|
2016-03-09 21:55:46 +08:00
|
|
|
defaultTop = options.top;
|
|
|
|
}
|
2016-10-24 12:04:26 +08:00
|
|
|
if (options.duration !== undefined) {
|
2016-03-09 21:55:46 +08:00
|
|
|
defaultDuration = options.duration;
|
2015-07-30 11:47:46 +08:00
|
|
|
}
|
2016-10-24 12:04:26 +08:00
|
|
|
if (options.prefixCls !== undefined) {
|
2016-04-16 17:38:30 +08:00
|
|
|
prefixCls = options.prefixCls;
|
|
|
|
}
|
2016-01-21 14:13:28 +08:00
|
|
|
},
|
|
|
|
destroy() {
|
2016-10-27 17:39:28 +08:00
|
|
|
if (messageInstance) {
|
|
|
|
messageInstance.destroy();
|
|
|
|
messageInstance = null;
|
2016-01-21 14:13:28 +08:00
|
|
|
}
|
|
|
|
},
|
2015-07-11 16:40:59 +08:00
|
|
|
};
|