2016-09-21 11:54:53 +08:00
|
|
|
import 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';
|
2015-08-06 15:19:45 +08:00
|
|
|
let notificationInstance;
|
2016-09-16 14:40:34 +08:00
|
|
|
let defaultDuration = 4.5;
|
2017-01-27 17:12:25 +08:00
|
|
|
let defaultTop = 24;
|
|
|
|
let defaultBottom = 24;
|
|
|
|
let defaultPlacement = 'topRight';
|
|
|
|
|
|
|
|
export type notificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
|
|
|
|
|
|
|
|
function getPlacementStyle(placement) {
|
|
|
|
let style;
|
|
|
|
switch (placement) {
|
|
|
|
case 'topLeft':
|
|
|
|
style = {
|
|
|
|
left: 0,
|
|
|
|
top: defaultTop,
|
|
|
|
bottom: 'auto',
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'bottomLeft':
|
|
|
|
style = {
|
|
|
|
left: 0,
|
|
|
|
top: 'auto',
|
|
|
|
bottom: defaultBottom,
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
case 'bottomRight':
|
|
|
|
style = {
|
|
|
|
right: 0,
|
|
|
|
top: 'auto',
|
|
|
|
bottom: defaultBottom,
|
|
|
|
};
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
style = {
|
|
|
|
right: 0,
|
|
|
|
top: defaultTop,
|
|
|
|
bottom: 'auto',
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return style;
|
|
|
|
}
|
2015-08-03 18:00:22 +08:00
|
|
|
|
2016-08-15 12:00:05 +08:00
|
|
|
export interface ArgsProps {
|
2017-01-20 20:10:50 +08:00
|
|
|
message: React.ReactNode;
|
|
|
|
description: React.ReactNode;
|
2016-08-15 12:00:05 +08:00
|
|
|
btn?: React.ReactNode;
|
|
|
|
key?: string;
|
|
|
|
onClose?: () => void;
|
|
|
|
duration?: number;
|
2016-08-28 17:45:27 +08:00
|
|
|
icon?: React.ReactNode;
|
2017-01-27 17:12:25 +08:00
|
|
|
placement?: notificationPlacement;
|
2017-02-27 13:39:37 +08:00
|
|
|
getContainer?: () => HTMLElement;
|
2016-08-15 12:00:05 +08:00
|
|
|
}
|
|
|
|
|
2016-09-19 10:17:07 +08:00
|
|
|
export interface ConfigProps {
|
|
|
|
top?: number;
|
2017-01-27 17:12:25 +08:00
|
|
|
bottom?: number;
|
2016-09-19 10:17:07 +08:00
|
|
|
duration?: number;
|
2017-01-27 17:12:25 +08:00
|
|
|
placement?: notificationPlacement;
|
2016-09-19 10:17:07 +08:00
|
|
|
}
|
|
|
|
|
2016-09-14 16:18:33 +08:00
|
|
|
function getNotificationInstance(prefixCls) {
|
2015-08-18 00:57:02 +08:00
|
|
|
if (notificationInstance) {
|
|
|
|
return notificationInstance;
|
|
|
|
}
|
2016-08-15 12:00:05 +08:00
|
|
|
notificationInstance = (Notification as any).newInstance({
|
2016-09-14 16:18:33 +08:00
|
|
|
prefixCls: prefixCls,
|
2017-01-27 17:12:25 +08:00
|
|
|
className: `${prefixCls}-${defaultPlacement}`,
|
|
|
|
style: getPlacementStyle(defaultPlacement),
|
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-09-14 16:18:33 +08:00
|
|
|
const outerPrefixCls = args.prefixCls || 'ant-notification';
|
|
|
|
const prefixCls = `${outerPrefixCls}-notice`;
|
2016-04-10 13:08:56 +08:00
|
|
|
|
2017-01-27 17:12:25 +08:00
|
|
|
if (args.placement !== undefined) {
|
|
|
|
defaultPlacement = args.placement;
|
|
|
|
notificationInstance = null; // delete notificationInstance for new defaultPlacement
|
|
|
|
}
|
|
|
|
|
2015-08-06 15:32:18 +08:00
|
|
|
let duration;
|
|
|
|
if (args.duration === undefined) {
|
2016-03-09 21:55:46 +08:00
|
|
|
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 = '';
|
2016-08-28 17:45:27 +08:00
|
|
|
switch (args.type) {
|
2016-04-10 13:08:56 +08:00
|
|
|
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
|
|
|
|
2016-08-28 17:45:27 +08:00
|
|
|
let iconNode;
|
|
|
|
if (args.icon) {
|
|
|
|
iconNode = (
|
|
|
|
<span className={`${prefixCls}-icon`}>
|
|
|
|
{args.icon}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
} else if (args.type) {
|
|
|
|
iconNode = <Icon className={`${prefixCls}-icon ${prefixCls}-icon-${args.type}`} type={iconType} />;
|
|
|
|
}
|
|
|
|
|
2016-09-14 16:18:33 +08:00
|
|
|
getNotificationInstance(outerPrefixCls).notice({
|
2016-04-10 13:08:56 +08:00
|
|
|
content: (
|
2016-12-14 17:58:06 +08:00
|
|
|
<div className={iconNode ? `${prefixCls}-with-icon` : ''}>
|
2016-08-28 17:45:27 +08:00
|
|
|
{iconNode}
|
2016-04-10 13:08:56 +08:00
|
|
|
<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
|
|
|
|
2016-10-18 11:55:00 +08:00
|
|
|
const api: {
|
|
|
|
success?(args: ArgsProps): void;
|
|
|
|
error?(args: ArgsProps): void;
|
|
|
|
info?(args: ArgsProps): void;
|
|
|
|
warn?(args: ArgsProps): void;
|
|
|
|
warning?(args: ArgsProps): void;
|
|
|
|
|
|
|
|
open(args: ArgsProps): void;
|
|
|
|
close(key: string): void;
|
|
|
|
config(options: ConfigProps): void;
|
|
|
|
destroy(): void;
|
|
|
|
} = {
|
|
|
|
open(args: ArgsProps) {
|
2015-07-31 18:13:32 +08:00
|
|
|
notice(args);
|
|
|
|
},
|
2016-01-07 14:21:29 +08:00
|
|
|
close(key) {
|
2015-08-04 15:16:10 +08:00
|
|
|
if (notificationInstance) {
|
|
|
|
notificationInstance.removeNotice(key);
|
|
|
|
}
|
2015-08-03 18:00:22 +08:00
|
|
|
},
|
2016-09-19 10:17:07 +08:00
|
|
|
config(options: ConfigProps) {
|
2017-01-27 17:12:25 +08:00
|
|
|
const { duration, placement, bottom, top } = options;
|
|
|
|
if (placement !== undefined) {
|
|
|
|
defaultPlacement = placement;
|
|
|
|
}
|
|
|
|
if (bottom !== undefined) {
|
|
|
|
defaultBottom = bottom;
|
|
|
|
}
|
|
|
|
if (top !== undefined) {
|
|
|
|
defaultTop = top;
|
|
|
|
}
|
|
|
|
// delete notificationInstance
|
|
|
|
if (placement !== undefined || bottom !== undefined || top !== undefined) {
|
|
|
|
notificationInstance = null;
|
2016-03-09 21:55:46 +08:00
|
|
|
}
|
2017-01-27 17:12:25 +08:00
|
|
|
if (duration !== undefined) {
|
|
|
|
defaultDuration = duration;
|
2016-03-09 21:55:46 +08:00
|
|
|
}
|
2016-01-21 14:13:28 +08:00
|
|
|
},
|
|
|
|
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-08-28 17:45:27 +08:00
|
|
|
api[type] = (args: ArgsProps) => api.open(assign({}, args, { type }));
|
2015-08-04 15:16:10 +08:00
|
|
|
});
|
|
|
|
|
2016-08-15 12:00:05 +08:00
|
|
|
(api as any).warn = (api as any).warning;
|
2016-03-28 18:03:00 +08:00
|
|
|
|
2015-08-04 15:16:10 +08:00
|
|
|
export default api;
|