2015-09-01 16:18:46 +08:00
|
|
|
import React from 'react';
|
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';
|
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() {
|
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: 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-08-06 15:32:18 +08:00
|
|
|
let duration;
|
|
|
|
if (args.duration === undefined) {
|
2015-08-29 13:02:37 +08:00
|
|
|
duration = 4.5;
|
2015-08-06 15:32:18 +08:00
|
|
|
} else {
|
|
|
|
duration = args.duration;
|
|
|
|
}
|
|
|
|
|
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-09-01 16:18:46 +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-08-06 20:55:30 +08:00
|
|
|
|
2015-07-28 15:40:28 +08:00
|
|
|
<p className={prefixCls + 'message'}>{args.message}</p>
|
2015-08-06 20:55:30 +08:00
|
|
|
|
2015-07-29 20:08:16 +08:00
|
|
|
<p className={prefixCls + 'description'}>{args.description}</p>
|
2015-07-28 15:40:28 +08:00
|
|
|
</div>,
|
2015-08-06 15:32:18 +08:00
|
|
|
duration: duration,
|
2015-07-28 15:40:28 +08:00
|
|
|
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>
|
2015-08-06 20:55:30 +08:00
|
|
|
|
2015-08-03 15:17:12 +08:00
|
|
|
<p className={prefixCls + 'description'}>{args.description}</p>
|
|
|
|
</div>,
|
2015-08-06 15:32:18 +08:00
|
|
|
duration: duration,
|
2015-07-28 15:40:28 +08:00
|
|
|
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-08-06 20:55:30 +08:00
|
|
|
|
2015-07-29 20:08:16 +08:00
|
|
|
<p className={prefixCls + 'description'}>{args.description}</p>
|
2015-08-18 00:57:02 +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>,
|
2015-08-06 15:32:18 +08:00
|
|
|
duration: duration,
|
2015-07-28 15:40:28 +08:00
|
|
|
closable: true,
|
2015-07-30 21:04:52 +08:00
|
|
|
onClose: args.onClose,
|
2015-08-18 00:57:02 +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-09-01 16:18:46 +08:00
|
|
|
let 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) => {
|
2015-09-01 16:18:46 +08:00
|
|
|
let newArgs = assign({}, args, {
|
2015-08-04 15:16:10 +08:00
|
|
|
icon: type
|
|
|
|
});
|
|
|
|
return api.open(newArgs);
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
export default api;
|