mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
785c132262
* use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * ✅ Add test cases for hr_HR * 📝 update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
240 lines
5.7 KiB
TypeScript
Executable File
240 lines
5.7 KiB
TypeScript
Executable File
import * as React from 'react';
|
|
import Notification from 'rc-notification';
|
|
import Icon from '../icon';
|
|
|
|
export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
|
|
|
|
export type IconType = 'success' | 'info' | 'error' | 'warning';
|
|
|
|
const notificationInstance: { [key: string]: any } = {};
|
|
let defaultDuration = 4.5;
|
|
let defaultTop = 24;
|
|
let defaultBottom = 24;
|
|
let defaultPlacement: NotificationPlacement = 'topRight';
|
|
let defaultGetContainer: () => HTMLElement;
|
|
|
|
export interface ConfigProps {
|
|
top?: number;
|
|
bottom?: number;
|
|
duration?: number;
|
|
placement?: NotificationPlacement;
|
|
getContainer?: () => HTMLElement;
|
|
}
|
|
|
|
function setNotificationConfig(options: ConfigProps) {
|
|
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: NotificationPlacement,
|
|
top: number = defaultTop,
|
|
bottom: number = defaultBottom,
|
|
) {
|
|
let style;
|
|
switch (placement) {
|
|
case 'topLeft':
|
|
style = {
|
|
left: 0,
|
|
top,
|
|
bottom: 'auto',
|
|
};
|
|
break;
|
|
case 'topRight':
|
|
style = {
|
|
right: 0,
|
|
top,
|
|
bottom: 'auto',
|
|
};
|
|
break;
|
|
case 'bottomLeft':
|
|
style = {
|
|
left: 0,
|
|
top: 'auto',
|
|
bottom,
|
|
};
|
|
break;
|
|
default:
|
|
style = {
|
|
right: 0,
|
|
top: 'auto',
|
|
bottom,
|
|
};
|
|
break;
|
|
}
|
|
return style;
|
|
}
|
|
|
|
type NotificationInstanceProps = {
|
|
prefixCls: string;
|
|
placement?: NotificationPlacement;
|
|
getContainer?: () => HTMLElement;
|
|
top?: number;
|
|
bottom?: number;
|
|
};
|
|
|
|
function getNotificationInstance(
|
|
{
|
|
prefixCls,
|
|
placement = defaultPlacement,
|
|
getContainer = defaultGetContainer,
|
|
top,
|
|
bottom,
|
|
}: NotificationInstanceProps,
|
|
callback: (n: any) => void,
|
|
) {
|
|
const cacheKey = `${prefixCls}-${placement}`;
|
|
if (notificationInstance[cacheKey]) {
|
|
callback(notificationInstance[cacheKey]);
|
|
return;
|
|
}
|
|
(Notification as any).newInstance(
|
|
{
|
|
prefixCls,
|
|
className: `${prefixCls}-${placement}`,
|
|
style: getPlacementStyle(placement, top, bottom),
|
|
getContainer,
|
|
closeIcon: <Icon className={`${prefixCls}-close-icon`} type={'close'} />,
|
|
},
|
|
(notification: any) => {
|
|
notificationInstance[cacheKey] = notification;
|
|
callback(notification);
|
|
},
|
|
);
|
|
}
|
|
|
|
const typeToIcon = {
|
|
success: 'check-circle-o',
|
|
info: 'info-circle-o',
|
|
error: 'close-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;
|
|
onClick?: () => void;
|
|
top?: number;
|
|
bottom?: number;
|
|
getContainer?: () => HTMLElement;
|
|
}
|
|
|
|
function notice(args: ArgsProps) {
|
|
const outerPrefixCls = args.prefixCls || 'ant-notification';
|
|
const prefixCls = `${outerPrefixCls}-notice`;
|
|
const duration = args.duration === undefined ? defaultDuration : args.duration;
|
|
|
|
let iconNode: React.ReactNode = null;
|
|
if (args.icon) {
|
|
iconNode = <span className={`${prefixCls}-icon`}>{args.icon}</span>;
|
|
} else if (args.type) {
|
|
const iconType = typeToIcon[args.type];
|
|
iconNode = (
|
|
<Icon className={`${prefixCls}-icon ${prefixCls}-icon-${args.type}`} type={iconType} />
|
|
);
|
|
}
|
|
|
|
const autoMarginTag =
|
|
!args.description && iconNode ? (
|
|
<span className={`${prefixCls}-message-single-line-auto-margin`} />
|
|
) : null;
|
|
|
|
const { placement, top, bottom, getContainer } = args;
|
|
|
|
getNotificationInstance(
|
|
{
|
|
prefixCls: outerPrefixCls,
|
|
placement,
|
|
top,
|
|
bottom,
|
|
getContainer,
|
|
},
|
|
(notification: any) => {
|
|
notification.notice({
|
|
content: (
|
|
<div className={iconNode ? `${prefixCls}-with-icon` : ''}>
|
|
{iconNode}
|
|
<div className={`${prefixCls}-message`}>
|
|
{autoMarginTag}
|
|
{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,
|
|
onClick: args.onClick,
|
|
key: args.key,
|
|
style: args.style || {},
|
|
className: args.className,
|
|
});
|
|
},
|
|
);
|
|
}
|
|
|
|
const api: any = {
|
|
open: notice,
|
|
close(key: string) {
|
|
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: ArgsProps) =>
|
|
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 as NotificationApi;
|