ant-design/components/notification/index.jsx

107 lines
2.6 KiB
React
Raw Normal View History

2015-07-28 15:40:28 +08:00
import Notification from 'rc-notification';
2015-08-04 15:16:10 +08:00
import assign from 'object-assign';
import React from 'react';
2015-07-28 15:40:28 +08:00
2015-08-03 18:00:22 +08:00
let top = 24;
2015-08-06 15:19:45 +08:00
let notificationInstance;
2015-08-03 18:00:22 +08:00
function getNotificationInstance() {
notificationInstance = notificationInstance || Notification.newInstance({
2015-08-04 15:16:10 +08:00
prefixCls: 'ant-notification',
style: {
top: top,
right: 0
}
});
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) {
2015-07-28 15:40:28 +08:00
if (args.icon) {
2015-08-03 15:17:12 +08:00
let prefixCls = ' ant-notification-notice-content-icon-';
let iconClass = 'anticon anticon-';
switch (args.icon) {
2015-08-04 15:16:10 +08:00
case 'success':
iconClass += 'check-circle-o';
break;
case 'info':
iconClass += 'info-circle-o';
break;
case 'error':
iconClass += 'exclamation-circle-o';
break;
case 'warn':
iconClass += 'question-circle-o';
break;
default:
iconClass += 'info-circle';
2015-08-03 15:17:12 +08:00
}
2015-08-03 18:00:22 +08:00
getNotificationInstance().notice({
2015-07-28 15:40:28 +08:00
content: <div>
2015-08-03 15:17:12 +08:00
<i className={iconClass + prefixCls + 'icon-' + args.icon + prefixCls + 'icon'}></i>
2015-07-28 15:40:28 +08:00
<p className={prefixCls + 'message'}>{args.message}</p>
2015-07-29 20:08:16 +08:00
<p className={prefixCls + 'description'}>{args.description}</p>
2015-07-28 15:40:28 +08:00
</div>,
duration: null,
closable: true,
2015-08-03 19:23:25 +08:00
onClose: args.onClose,
2015-07-28 15:40:28 +08:00
style: {}
});
} else {
2015-08-03 15:17:12 +08:00
let prefixCls = 'ant-notification-notice-content-';
2015-07-28 15:40:28 +08:00
if (!args.btn) {
2015-08-03 18:00:22 +08:00
getNotificationInstance().notice({
2015-07-28 15:40:28 +08:00
content: <div>
2015-08-03 15:17:12 +08:00
<p className={prefixCls + 'message'}>{args.message}</p>
<p className={prefixCls + 'description'}>{args.description}</p>
</div>,
2015-07-28 15:40:28 +08:00
duration: null,
closable: true,
2015-08-03 19:23:25 +08:00
onClose: args.onClose,
2015-07-28 15:40:28 +08:00
style: {}
});
} else {
2015-08-03 18:00:22 +08:00
getNotificationInstance().notice({
2015-07-28 15:40:28 +08:00
content: <div>
<p className={prefixCls + 'message'}>{args.message}</p>
2015-07-29 20:08:16 +08:00
<p className={prefixCls + 'description'}>{args.description}</p>
2015-07-31 18:13:32 +08:00
<span className={prefixCls + 'btn'}>
2015-07-29 20:08:16 +08:00
{args.btn}
</span>
2015-07-28 15:40:28 +08:00
</div>,
duration: null,
closable: true,
2015-07-30 21:04:52 +08:00
onClose: args.onClose,
2015-07-31 18:13:32 +08:00
key: args.key,
2015-07-28 15:40:28 +08:00
style: {}
});
}
}
2015-07-31 18:13:32 +08:00
}
2015-07-28 15:40:28 +08:00
2015-08-04 15:16:10 +08:00
var api = {
2015-07-31 18:13:32 +08:00
open(args){
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) {
top = isNaN(options.top) ? 24 : options.top;
2015-07-31 18:13:32 +08:00
}
};
2015-08-04 15:16:10 +08:00
2015-08-06 15:19:45 +08:00
['success', 'info', 'warn', 'error'].forEach((type) => {
2015-08-04 15:16:10 +08:00
api[type] = (args) => {
var newArgs = assign({}, args, {
icon: type
});
return api.open(newArgs);
};
});
export default api;