2019-01-12 11:33:27 +08:00
|
|
|
import Notification from '../vc-notification';
|
|
|
|
import Icon from '../icon';
|
2018-02-06 16:43:59 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
let defaultDuration = 3;
|
|
|
|
let defaultTop;
|
|
|
|
let messageInstance;
|
|
|
|
let key = 1;
|
|
|
|
let prefixCls = 'ant-message';
|
|
|
|
let transitionName = 'move-up';
|
|
|
|
let getContainer = () => document.body;
|
|
|
|
let maxCount;
|
2018-02-06 16:43:59 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
function getMessageInstance(callback) {
|
2018-02-06 16:43:59 +08:00
|
|
|
if (messageInstance) {
|
2019-01-12 11:33:27 +08:00
|
|
|
callback(messageInstance);
|
|
|
|
return;
|
2018-02-06 16:43:59 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
Notification.newInstance(
|
|
|
|
{
|
|
|
|
prefixCls,
|
|
|
|
transitionName,
|
|
|
|
style: { top: defaultTop }, // 覆盖原来的样式
|
|
|
|
getContainer,
|
|
|
|
maxCount,
|
|
|
|
},
|
|
|
|
instance => {
|
|
|
|
if (messageInstance) {
|
|
|
|
callback(messageInstance);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
messageInstance = instance;
|
|
|
|
callback(instance);
|
|
|
|
},
|
|
|
|
);
|
2018-02-06 16:43:59 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
function notice(args) {
|
|
|
|
const duration = args.duration !== undefined ? args.duration : defaultDuration;
|
|
|
|
const iconType = {
|
2018-02-06 16:43:59 +08:00
|
|
|
info: 'info-circle',
|
|
|
|
success: 'check-circle',
|
2018-12-09 18:37:41 +08:00
|
|
|
error: 'close-circle',
|
2018-02-06 16:43:59 +08:00
|
|
|
warning: 'exclamation-circle',
|
|
|
|
loading: 'loading',
|
2019-01-12 11:33:27 +08:00
|
|
|
}[args.type];
|
2018-02-06 16:43:59 +08:00
|
|
|
|
2020-03-07 19:45:13 +08:00
|
|
|
const target = args.key || key++;
|
2019-01-12 11:33:27 +08:00
|
|
|
const closePromise = new Promise(resolve => {
|
2018-09-05 21:28:54 +08:00
|
|
|
const callback = () => {
|
2018-12-09 18:37:41 +08:00
|
|
|
if (typeof args.onClose === 'function') {
|
2019-01-12 11:33:27 +08:00
|
|
|
args.onClose();
|
2018-09-05 21:28:54 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
return resolve(true);
|
|
|
|
};
|
|
|
|
getMessageInstance(instance => {
|
2018-09-05 21:28:54 +08:00
|
|
|
instance.notice({
|
|
|
|
key: target,
|
|
|
|
duration,
|
|
|
|
style: {},
|
2020-03-07 19:45:13 +08:00
|
|
|
content: h => {
|
|
|
|
const iconNode = (
|
|
|
|
<Icon type={iconType} theme={iconType === 'loading' ? 'outlined' : 'filled'} />
|
|
|
|
);
|
|
|
|
const switchIconNode = iconType ? iconNode : '';
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
class={`${prefixCls}-custom-content${args.type ? ` ${prefixCls}-${args.type}` : ''}`}
|
|
|
|
>
|
|
|
|
{args.icon
|
|
|
|
? typeof args.icon === 'function'
|
|
|
|
? args.icon(h)
|
|
|
|
: args.icon
|
|
|
|
: switchIconNode}
|
|
|
|
<span>{typeof args.content === 'function' ? args.content(h) : args.content}</span>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
2018-09-05 21:28:54 +08:00
|
|
|
onClose: callback,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-09-05 21:28:54 +08:00
|
|
|
const result = () => {
|
2018-02-06 16:43:59 +08:00
|
|
|
if (messageInstance) {
|
2019-01-12 11:33:27 +08:00
|
|
|
messageInstance.removeNotice(target);
|
2018-02-06 16:43:59 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
result.then = (filled, rejected) => closePromise.then(filled, rejected);
|
|
|
|
result.promise = closePromise;
|
|
|
|
return result;
|
2018-02-06 16:43:59 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// type ConfigContent = React.ReactNode | string;
|
|
|
|
// type ConfigDuration = number | (() => void);
|
|
|
|
// export type ConfigOnClose = () => void;
|
|
|
|
|
2020-03-07 19:45:13 +08:00
|
|
|
function isArgsProps(content) {
|
|
|
|
return Object.prototype.toString.call(content) === '[object Object]' && !!content.content;
|
|
|
|
}
|
|
|
|
|
2018-02-06 16:43:59 +08:00
|
|
|
// export interface ConfigOptions {
|
|
|
|
// top?: number;
|
|
|
|
// duration?: number;
|
|
|
|
// prefixCls?: string;
|
|
|
|
// getContainer?: () => HTMLElement;
|
2018-04-07 14:29:59 +08:00
|
|
|
// transitionName?: string;
|
2018-02-06 16:43:59 +08:00
|
|
|
// }
|
|
|
|
|
2018-12-09 18:37:41 +08:00
|
|
|
const api = {
|
|
|
|
open: notice,
|
2019-01-12 11:33:27 +08:00
|
|
|
config(options) {
|
2018-02-06 16:43:59 +08:00
|
|
|
if (options.top !== undefined) {
|
2019-01-12 11:33:27 +08:00
|
|
|
defaultTop = options.top;
|
|
|
|
messageInstance = null; // delete messageInstance for new defaultTop
|
2018-02-06 16:43:59 +08:00
|
|
|
}
|
|
|
|
if (options.duration !== undefined) {
|
2019-01-12 11:33:27 +08:00
|
|
|
defaultDuration = options.duration;
|
2018-02-06 16:43:59 +08:00
|
|
|
}
|
|
|
|
if (options.prefixCls !== undefined) {
|
2019-01-12 11:33:27 +08:00
|
|
|
prefixCls = options.prefixCls;
|
2018-02-06 16:43:59 +08:00
|
|
|
}
|
|
|
|
if (options.getContainer !== undefined) {
|
2019-01-12 11:33:27 +08:00
|
|
|
getContainer = options.getContainer;
|
2018-02-06 16:43:59 +08:00
|
|
|
}
|
2018-04-07 14:29:59 +08:00
|
|
|
if (options.transitionName !== undefined) {
|
2019-01-12 11:33:27 +08:00
|
|
|
transitionName = options.transitionName;
|
|
|
|
messageInstance = null; // delete messageInstance for new transitionName
|
2018-04-07 14:29:59 +08:00
|
|
|
}
|
2018-09-05 21:28:54 +08:00
|
|
|
if (options.maxCount !== undefined) {
|
2019-01-12 11:33:27 +08:00
|
|
|
maxCount = options.maxCount;
|
|
|
|
messageInstance = null;
|
2018-09-05 21:28:54 +08:00
|
|
|
}
|
2018-02-06 16:43:59 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
destroy() {
|
2018-02-06 16:43:59 +08:00
|
|
|
if (messageInstance) {
|
2019-01-12 11:33:27 +08:00
|
|
|
messageInstance.destroy();
|
|
|
|
messageInstance = null;
|
2018-02-06 16:43:59 +08:00
|
|
|
}
|
|
|
|
},
|
2018-12-09 18:37:41 +08:00
|
|
|
};
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
['success', 'info', 'warning', 'error', 'loading'].forEach(type => {
|
2018-12-09 18:37:41 +08:00
|
|
|
api[type] = (content, duration, onClose) => {
|
2020-03-07 19:45:13 +08:00
|
|
|
if (isArgsProps(content)) {
|
|
|
|
return api.open({ ...content, type });
|
|
|
|
}
|
2018-12-09 18:37:41 +08:00
|
|
|
if (typeof duration === 'function') {
|
2019-01-12 11:33:27 +08:00
|
|
|
onClose = duration;
|
|
|
|
duration = undefined;
|
2018-12-09 18:37:41 +08:00
|
|
|
}
|
2020-03-07 19:45:13 +08:00
|
|
|
return api.open({ content, duration, type, onClose });
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
});
|
2018-12-09 18:37:41 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
api.warn = api.warning;
|
2018-12-09 18:37:41 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
export default api;
|