ant-design/components/notification/index.tsx

100 lines
2.3 KiB
TypeScript
Raw Normal View History

2016-07-07 20:25:03 +08:00
import * as React from 'react';
2015-07-28 15:40:28 +08:00
import Notification from 'rc-notification';
2015-11-20 11:05:34 +08:00
import Icon from '../icon';
2016-06-22 13:18:43 +08:00
import assign from 'object-assign';
let defaultTop = 24;
2015-08-06 15:19:45 +08:00
let notificationInstance;
let defaultDuration = 4.5;
2015-08-03 18:00:22 +08:00
function getNotificationInstance() {
2015-08-18 00:57:02 +08:00
if (notificationInstance) {
return notificationInstance;
}
notificationInstance = Notification.newInstance({
2015-08-15 15:08:55 +08:00
prefixCls: 'ant-notification',
style: {
top: defaultTop,
right: 0,
2016-05-11 09:32:33 +08:00
},
2015-08-15 15:08:55 +08:00
});
2015-08-03 18:00:22 +08:00
return notificationInstance;
2015-07-31 18:13:32 +08:00
}
2015-07-28 15:40:28 +08:00
2015-07-31 18:13:32 +08:00
function notice(args) {
2016-04-10 13:08:56 +08:00
const prefixCls = args.prefixCls || 'ant-notification-notice';
2015-08-06 15:32:18 +08:00
let duration;
if (args.duration === undefined) {
duration = defaultDuration;
2015-08-06 15:32:18 +08:00
} else {
duration = args.duration;
}
2015-08-06 20:55:30 +08:00
2016-04-10 13:08:56 +08:00
let iconType = '';
switch (args.icon) {
case 'success':
iconType = 'check-circle-o';
break;
case 'info':
iconType = 'info-circle-o';
break;
case 'error':
iconType = 'cross-circle-o';
break;
case 'warning':
iconType = 'exclamation-circle-o';
break;
default:
iconType = 'info-circle';
2015-07-28 15:40:28 +08:00
}
2016-04-10 13:08:56 +08:00
getNotificationInstance().notice({
content: (
<div className={`${prefixCls}-content ${args.icon ? `${prefixCls}-with-icon` : ''}`}>
{args.icon ? <Icon className={`${prefixCls}-icon ${prefixCls}-icon-${args.icon}`} type={iconType} /> : null}
<div className={`${prefixCls}-message`}>{args.message}</div>
<div className={`${prefixCls}-description`}>{args.description}</div>
{args.btn ? <span className={`${prefixCls}-btn`}>{args.btn}</span> : null}
</div>
),
duration,
closable: true,
onClose: args.onClose,
key: args.key,
style: {},
});
2015-07-31 18:13:32 +08:00
}
2015-07-28 15:40:28 +08:00
const api = {
open(args) {
2015-07-31 18:13:32 +08:00
notice(args);
},
close(key) {
2015-08-04 15:16:10 +08:00
if (notificationInstance) {
notificationInstance.removeNotice(key);
}
2015-08-03 18:00:22 +08:00
},
config(options) {
if ('top' in options) {
defaultTop = options.top;
}
if ('duration' in options) {
defaultDuration = options.duration;
}
},
destroy() {
if (notificationInstance) {
notificationInstance.destroy();
notificationInstance = null;
}
},
2015-07-31 18:13:32 +08:00
};
2015-08-04 15:16:10 +08:00
2016-03-28 14:38:25 +08:00
['success', 'info', 'warning', 'error'].forEach((type) => {
2016-07-13 11:14:24 +08:00
api[type] = (args) => api.open(assign({}, args, { icon: type }));
2015-08-04 15:16:10 +08:00
});
2016-05-31 15:29:24 +08:00
api.warn = api.warning;
2016-03-28 18:03:00 +08:00
2015-08-04 15:16:10 +08:00
export default api;