205 lines
5.1 KiB
JavaScript
205 lines
5.1 KiB
JavaScript
import Notification from '../vc-notification'
|
|
import Icon from '../icon'
|
|
|
|
// export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
|
|
|
|
// export type IconType = 'success' | 'info' | 'error' | 'warning';
|
|
|
|
const notificationInstance = {}
|
|
let defaultDuration = 4.5
|
|
let defaultTop = '24px'
|
|
let defaultBottom = '24px'
|
|
let defaultPlacement = 'topRight'
|
|
let defaultGetContainer = () => document.body
|
|
|
|
// export interface ConfigProps {
|
|
// top?: number;
|
|
// bottom?: number;
|
|
// duration?: number;
|
|
// placement?: NotificationPlacement;
|
|
// getContainer?: () => HTMLElement;
|
|
// }
|
|
function setNotificationConfig (options) {
|
|
const { duration, placement, bottom, top, getContainer } = options
|
|
if (duration !== undefined) {
|
|
defaultDuration = duration
|
|
}
|
|
if (placement !== undefined) {
|
|
defaultPlacement = placement
|
|
}
|
|
if (bottom !== undefined) {
|
|
defaultBottom = bottom
|
|
}
|
|
if (top !== undefined) {
|
|
defaultTop = top
|
|
}
|
|
if (getContainer !== undefined) {
|
|
defaultGetContainer = getContainer
|
|
}
|
|
}
|
|
|
|
function getPlacementStyle (placement) {
|
|
let style
|
|
switch (placement) {
|
|
case 'topLeft':
|
|
style = {
|
|
left: 0,
|
|
top: defaultTop,
|
|
bottom: 'auto',
|
|
}
|
|
break
|
|
case 'topRight':
|
|
style = {
|
|
right: 0,
|
|
top: defaultTop,
|
|
bottom: 'auto',
|
|
}
|
|
break
|
|
case 'bottomLeft':
|
|
style = {
|
|
left: 0,
|
|
top: 'auto',
|
|
bottom: defaultBottom,
|
|
}
|
|
break
|
|
default:
|
|
style = {
|
|
right: 0,
|
|
top: 'auto',
|
|
bottom: defaultBottom,
|
|
}
|
|
break
|
|
}
|
|
return style
|
|
}
|
|
|
|
function getNotificationInstance (prefixCls, placement, callback) {
|
|
const cacheKey = `${prefixCls}-${placement}`
|
|
if (notificationInstance[cacheKey]) {
|
|
callback(notificationInstance[cacheKey])
|
|
return
|
|
}
|
|
Notification.newInstance({
|
|
prefixCls,
|
|
class: `${prefixCls}-${placement}`,
|
|
style: getPlacementStyle(placement),
|
|
getContainer: defaultGetContainer,
|
|
}, (notification) => {
|
|
notificationInstance[cacheKey] = notification
|
|
callback(notification)
|
|
})
|
|
}
|
|
|
|
const typeToIcon = {
|
|
success: 'check-circle-o',
|
|
info: 'info-circle-o',
|
|
error: 'cross-circle-o',
|
|
warning: 'exclamation-circle-o',
|
|
}
|
|
|
|
// export interface ArgsProps {
|
|
// message: React.ReactNode;
|
|
// description: React.ReactNode;
|
|
// btn?: React.ReactNode;
|
|
// key?: string;
|
|
// onClose?: () => void;
|
|
// duration?: number | null;
|
|
// icon?: React.ReactNode;
|
|
// placement?: NotificationPlacement;
|
|
// style?: React.CSSProperties;
|
|
// prefixCls?: string;
|
|
// className?: string;
|
|
// readonly type?: IconType;
|
|
// }
|
|
function notice (args) {
|
|
const { icon, type, description, placement, message, btn } = args
|
|
const outerPrefixCls = args.prefixCls || 'ant-notification'
|
|
const prefixCls = `${outerPrefixCls}-notice`
|
|
const duration = args.duration === undefined ? defaultDuration : args.duration
|
|
|
|
let iconNode = null
|
|
if (icon) {
|
|
iconNode = (h) => (
|
|
<span class={`${prefixCls}-icon`}>
|
|
{typeof icon === 'function' ? icon(h) : icon}
|
|
</span>
|
|
)
|
|
} else if (type) {
|
|
const iconType = typeToIcon[type]
|
|
iconNode = (h) => (
|
|
<Icon
|
|
class={`${prefixCls}-icon ${prefixCls}-icon-${type}`}
|
|
type={iconType}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const autoMarginTag = (!description && iconNode)
|
|
? <span class={`${prefixCls}-message-single-line-auto-margin`} />
|
|
: null
|
|
|
|
getNotificationInstance(outerPrefixCls, placement || defaultPlacement, (notification) => {
|
|
notification.notice({
|
|
content: (h) => (
|
|
<div class={iconNode ? `${prefixCls}-with-icon` : ''}>
|
|
{iconNode && iconNode(h)}
|
|
<div class={`${prefixCls}-message`}>
|
|
{autoMarginTag}
|
|
{typeof message === 'function' ? message(h) : message}
|
|
</div>
|
|
<div class={`${prefixCls}-description`}>
|
|
{typeof description === 'function' ? description(h) : description}
|
|
</div>
|
|
{btn ? <span class={`${prefixCls}-btn`}>
|
|
{typeof btn === 'function' ? btn(h) : btn}
|
|
</span> : null}
|
|
</div>
|
|
),
|
|
duration,
|
|
closable: true,
|
|
onClose: args.onClose,
|
|
key: args.key,
|
|
style: args.style || {},
|
|
class: args.class,
|
|
})
|
|
})
|
|
}
|
|
|
|
const api = {
|
|
open: notice,
|
|
close (key) {
|
|
Object.keys(notificationInstance)
|
|
.forEach(cacheKey => notificationInstance[cacheKey].removeNotice(key))
|
|
},
|
|
config: setNotificationConfig,
|
|
destroy () {
|
|
Object.keys(notificationInstance).forEach(cacheKey => {
|
|
notificationInstance[cacheKey].destroy()
|
|
delete notificationInstance[cacheKey]
|
|
})
|
|
},
|
|
};
|
|
|
|
['success', 'info', 'warning', 'error'].forEach((type) => {
|
|
api[type] = (args) => api.open({
|
|
...args,
|
|
type,
|
|
})
|
|
})
|
|
|
|
api.warn = api.warning
|
|
|
|
// export interface NotificationApi {
|
|
// 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;
|
|
// }
|
|
export default api
|
|
|