ant-design/components/message/index.tsx

105 lines
2.7 KiB
TypeScript
Raw Normal View History

2016-09-21 11:54:53 +08:00
import React from 'react';
import Notification from 'rc-notification';
2015-11-20 11:05:34 +08:00
import Icon from '../icon';
2015-07-23 11:59:56 +08:00
let defaultDuration = 1.5;
let defaultTop;
2015-09-01 16:18:46 +08:00
let messageInstance;
2015-09-07 12:27:09 +08:00
let key = 1;
2016-04-16 17:38:30 +08:00
let prefixCls = 'ant-message';
2015-07-30 21:32:12 +08:00
2015-07-23 11:59:56 +08:00
function getMessageInstance() {
2015-07-30 21:32:12 +08:00
messageInstance = messageInstance || Notification.newInstance({
2016-04-16 17:38:30 +08:00
prefixCls,
transitionName: 'move-up',
style: { top: defaultTop }, // 覆盖原来的样式
});
2015-07-30 21:32:12 +08:00
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-24 12:04:26 +08:00
onClose?: () => void) {
let iconType = ({
info: 'info-circle',
success: 'check-circle',
2016-03-28 16:09:13 +08:00
error: 'cross-circle',
2016-03-28 14:38:25 +08:00
warning: 'exclamation-circle',
2016-05-11 09:32:33 +08:00
loading: 'loading',
})[type];
2015-09-07 12:27:09 +08:00
let instance = getMessageInstance();
instance.notice({
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
});
return (function () {
2015-09-07 12:27:09 +08:00
let target = key++;
return function () {
2015-09-07 12:27:09 +08:00
instance.removeNotice(target);
};
}());
2015-07-23 11:59:56 +08:00
}
type ConfigContent = React.ReactNode | string;
2016-07-29 16:32:12 +08:00
type ConfigDuration = number;
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);
},
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);
},
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);
},
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) {
defaultTop = options.top;
}
2016-10-24 12:04:26 +08:00
if (options.duration !== undefined) {
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;
}
},
destroy() {
if (messageInstance) {
messageInstance.destroy();
messageInstance = null;
}
},
};