ant-design/components/message/index.tsx

163 lines
4.4 KiB
TypeScript
Raw Normal View History

/* global Promise */
import * as React from 'react';
import Notification from 'rc-notification';
2015-11-20 11:05:34 +08:00
import Icon from '../icon';
2017-07-18 12:50:17 +08:00
let defaultDuration = 3;
let defaultTop: number;
let messageInstance: any;
2016-10-26 11:05:00 +08:00
let key = 1;
let prefixCls = 'ant-message';
let transitionName = 'move-up';
let getContainer: () => HTMLElement;
let maxCount: number;
2016-10-26 11:05:00 +08:00
function getMessageInstance(callback: (i: any) => void) {
if (messageInstance) {
callback(messageInstance);
return;
}
Notification.newInstance({
prefixCls,
transitionName,
style: { top: defaultTop }, // 覆盖原来的样式
getContainer,
maxCount,
}, (instance: any) => {
if (messageInstance) {
callback(messageInstance);
return;
}
messageInstance = instance;
callback(instance);
});
2015-07-23 11:59:56 +08:00
}
2016-07-29 16:32:12 +08:00
type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
export interface ThenableArgument {
(_: any): any;
}
export interface MessageType {
(): void;
then: (fill: ThenableArgument, reject: ThenableArgument) => Promise<any>;
promise: Promise<any>;
}
2016-07-29 16:32:12 +08:00
function notice(
content: React.ReactNode,
duration: (() => void) | number = defaultDuration,
2016-07-29 16:32:12 +08:00
type: NoticeType,
onClose?: () => void,
): MessageType {
const 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++;
const closePromise = new Promise((resolve) => {
const callback = () => {
if (typeof onClose === 'function') {
onClose();
}
return resolve(true);
};
getMessageInstance((instance) => {
instance.notice({
key: target,
duration,
style: {},
content: (
<div className={`${prefixCls}-custom-content ${prefixCls}-${type}`}>
<Icon type={iconType} />
<span>{content}</span>
</div>
),
onClose: callback,
});
});
2015-07-23 11:59:56 +08:00
});
const result: any = () => {
if (messageInstance) {
messageInstance.removeNotice(target);
}
};
result.then = (filled: ThenableArgument, rejected: ThenableArgument) => closePromise.then(filled, rejected);
result.promise = closePromise;
return result;
2015-07-23 11:59:56 +08:00
}
type ConfigContent = React.ReactNode | string;
type ConfigDuration = number | (() => void);
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;
getContainer?: () => HTMLElement;
transitionName?: string;
maxCount?: number;
2016-07-29 16:32:12 +08:00
}
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-12-19 16:46:39 +08:00
messageInstance = null; // delete messageInstance for new defaultTop
}
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;
}
if (options.getContainer !== undefined) {
getContainer = options.getContainer;
}
if (options.transitionName !== undefined) {
transitionName = options.transitionName;
messageInstance = null; // delete messageInstance for new transitionName
}
if (options.maxCount !== undefined) {
maxCount = options.maxCount;
messageInstance = null;
}
},
destroy() {
if (messageInstance) {
messageInstance.destroy();
messageInstance = null;
}
},
};