add notification
tjz
parent
bb9ca79311
commit
92568220f4
|
|
@ -0,0 +1,63 @@
|
||||||
|
---
|
||||||
|
category: Components
|
||||||
|
type: Feedback
|
||||||
|
noinstant: true
|
||||||
|
title: Notification
|
||||||
|
---
|
||||||
|
|
||||||
|
Display a notification message globally.
|
||||||
|
|
||||||
|
## When To Use
|
||||||
|
|
||||||
|
To display a notification message at any of the four corners of the viewport. Typically it can be
|
||||||
|
used in the following cases:
|
||||||
|
|
||||||
|
- A notification with complex content.
|
||||||
|
- A notification providing a feedback based on the user interaction. Or it may show some details
|
||||||
|
about upcoming steps the user may have to follow.
|
||||||
|
- A notification that is pushed by the application.
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
- `notification.success(config)`
|
||||||
|
- `notification.error(config)`
|
||||||
|
- `notification.info(config)`
|
||||||
|
- `notification.warning(config)`
|
||||||
|
- `notification.warn(config)`
|
||||||
|
- `notification.close(key: String)`
|
||||||
|
- `notification.destroy()`
|
||||||
|
|
||||||
|
The properties of config are as follows:
|
||||||
|
|
||||||
|
| Property | Description | Type | Default |
|
||||||
|
| -------- | ----------- | ---- | ------- |
|
||||||
|
| btn | Customized close button | ReactNode | - |
|
||||||
|
| className | Customized CSS class | string | - |
|
||||||
|
| description | The content of notification box (required) | string\|ReactNode | - |
|
||||||
|
| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
|
||||||
|
| icon | Customized icon | ReactNode | - |
|
||||||
|
| key | The unique identifier of the Notification | string | - |
|
||||||
|
| message | The title of notification box (required) | string\|ReactNode | - |
|
||||||
|
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
|
||||||
|
| style | Customized inline style | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
|
||||||
|
| onClose | Specify a function that will be called when the close button is clicked | Function | - |
|
||||||
|
|
||||||
|
`notification` also provides a global `config()` method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options when displaying.
|
||||||
|
|
||||||
|
- `notification.config(options)`
|
||||||
|
|
||||||
|
```js
|
||||||
|
notification.config({
|
||||||
|
placement: 'bottomRight',
|
||||||
|
bottom: 50,
|
||||||
|
duration: 3,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
| Property | Description | Type | Default |
|
||||||
|
| -------- | ----------- | ---- | ------- |
|
||||||
|
| bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels). | number | 24 |
|
||||||
|
| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
|
||||||
|
| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |
|
||||||
|
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
|
||||||
|
| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels). | number | 24 |
|
||||||
|
|
@ -0,0 +1,201 @@
|
||||||
|
<script>
|
||||||
|
import Notification from './src/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) {
|
||||||
|
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: string, placement: NotificationPlacement, 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),
|
||||||
|
getContainer: defaultGetContainer,
|
||||||
|
}, (notification: any) => {
|
||||||
|
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: 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;
|
||||||
|
|
||||||
|
getNotificationInstance(outerPrefixCls, args.placement || defaultPlacement, (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,
|
||||||
|
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;
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
---
|
||||||
|
category: Components
|
||||||
|
type: Feedback
|
||||||
|
noinstant: true
|
||||||
|
title: Notification
|
||||||
|
subtitle: 通知提醒框
|
||||||
|
---
|
||||||
|
|
||||||
|
全局展示通知提醒信息。
|
||||||
|
|
||||||
|
## 何时使用
|
||||||
|
|
||||||
|
在系统四个角显示通知提醒信息。经常用于以下情况：
|
||||||
|
|
||||||
|
- 较为复杂的通知内容。
|
||||||
|
- 带有交互的通知，给出用户下一步的行动点。
|
||||||
|
- 系统主动推送。
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
- `notification.success(config)`
|
||||||
|
- `notification.error(config)`
|
||||||
|
- `notification.info(config)`
|
||||||
|
- `notification.warning(config)`
|
||||||
|
- `notification.warn(config)`
|
||||||
|
- `notification.close(key: String)`
|
||||||
|
- `notification.destroy()`
|
||||||
|
|
||||||
|
config 参数如下：
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| btn | 自定义关闭按钮 | ReactNode | - |
|
||||||
|
| className | 自定义 CSS class | string | - |
|
||||||
|
| description | 通知提醒内容，必选 | string\|ReactNode | - |
|
||||||
|
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 |
|
||||||
|
| icon | 自定义图标 | ReactNode | - |
|
||||||
|
| key | 当前通知唯一标志 | string | - |
|
||||||
|
| message | 通知提醒标题，必选 | string\|ReactNode | - |
|
||||||
|
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
|
||||||
|
| style | 自定义内联样式 | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
|
||||||
|
| onClose | 点击默认关闭按钮时触发的回调函数 | Function | - |
|
||||||
|
|
||||||
|
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
||||||
|
|
||||||
|
- `notification.config(options)`
|
||||||
|
|
||||||
|
```js
|
||||||
|
notification.config({
|
||||||
|
placement: 'bottomRight',
|
||||||
|
bottom: 50,
|
||||||
|
duration: 3,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| bottom | 消息从底部弹出时，距离底部的位置，单位像素。 | number | 24 |
|
||||||
|
| duration | 默认自动关闭延时，单位秒 | number | 4.5 |
|
||||||
|
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |
|
||||||
|
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
|
||||||
|
| top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | number | 24 |
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
import '../../style/index.less'
|
||||||
|
import './index.less'
|
||||||
|
|
@ -0,0 +1,199 @@
|
||||||
|
@import "../../style/themes/default";
|
||||||
|
@import "../../style/mixins/index";
|
||||||
|
|
||||||
|
@notification-prefix-cls: ~"@{ant-prefix}-notification";
|
||||||
|
@notification-width: 384px;
|
||||||
|
@notification-padding-vertical: 16px;
|
||||||
|
@notification-padding-horizontal: 24px;
|
||||||
|
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
|
||||||
|
@notification-margin-bottom: 16px;
|
||||||
|
|
||||||
|
.@{notification-prefix-cls} {
|
||||||
|
.reset-component;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
z-index: @zindex-notification;
|
||||||
|
width: @notification-width;
|
||||||
|
max-width: ~"calc(100vw - 32px)";
|
||||||
|
margin-right: 24px;
|
||||||
|
|
||||||
|
&-topLeft,
|
||||||
|
&-bottomLeft {
|
||||||
|
margin-left: 24px;
|
||||||
|
margin-right: 0;
|
||||||
|
|
||||||
|
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||||
|
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||||
|
animation-name: NotificationLeftFadeIn;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-notice {
|
||||||
|
padding: @notification-padding;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
box-shadow: @shadow-2;
|
||||||
|
background: @component-background;
|
||||||
|
line-height: 1.5;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: @notification-margin-bottom;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&-message {
|
||||||
|
font-size: @font-size-lg;
|
||||||
|
color: @heading-color;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
line-height: 24px;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
// https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
|
||||||
|
&-single-line-auto-margin {
|
||||||
|
width: ~"calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)";
|
||||||
|
background-color: transparent;
|
||||||
|
pointer-events: none;
|
||||||
|
display: block;
|
||||||
|
max-width: 4px;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-description {
|
||||||
|
font-size: @font-size-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-closable &-message {
|
||||||
|
padding-right: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-with-icon &-message {
|
||||||
|
font-size: @font-size-lg;
|
||||||
|
margin-left: 48px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-with-icon &-description {
|
||||||
|
margin-left: 48px;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icon {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-left: 4px;
|
||||||
|
|
||||||
|
&-success {
|
||||||
|
color: @success-color;
|
||||||
|
}
|
||||||
|
&-info {
|
||||||
|
color: @info-color;
|
||||||
|
}
|
||||||
|
&-warning {
|
||||||
|
color: @warning-color;
|
||||||
|
}
|
||||||
|
&-error {
|
||||||
|
color: @error-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-close-x:after {
|
||||||
|
font-size: @font-size-base;
|
||||||
|
content: "\e633";
|
||||||
|
font-family: "anticon";
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-close {
|
||||||
|
position: absolute;
|
||||||
|
right: 22px;
|
||||||
|
top: 16px;
|
||||||
|
color: @text-color-secondary;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
a&:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #404040;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-btn {
|
||||||
|
float: right;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-fade-effect {
|
||||||
|
animation-duration: 0.24s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
animation-timing-function: @ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-fade-enter,
|
||||||
|
&-fade-appear {
|
||||||
|
opacity: 0;
|
||||||
|
.notification-fade-effect();
|
||||||
|
animation-play-state: paused;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-fade-leave {
|
||||||
|
.notification-fade-effect();
|
||||||
|
animation-duration: 0.2s;
|
||||||
|
animation-play-state: paused;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-fade-enter&-fade-enter-active,
|
||||||
|
&-fade-appear&-fade-appear-active {
|
||||||
|
animation-name: NotificationFadeIn;
|
||||||
|
animation-play-state: running;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-fade-leave&-fade-leave-active {
|
||||||
|
animation-name: NotificationFadeOut;
|
||||||
|
animation-play-state: running;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes NotificationFadeIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
left: @notification-width;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: 0;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes NotificationLeftFadeIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
right: @notification-width;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
right: 0;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes NotificationFadeOut {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
margin-bottom: @notification-margin-bottom;
|
||||||
|
padding-top: @notification-padding;
|
||||||
|
padding-bottom: @notification-padding;
|
||||||
|
max-height: 150px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
max-height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue