mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
feat(notification): support role prop (#42484)
* fix: version error * fix: version error * docs: update version * docs: add version column * docs: fix CN docs * docs: update default value
This commit is contained in:
GUAN MING
GitHub
parent
ffedddb211
commit
75da87d730
@ -1,16 +1,16 @@
|
||||
import * as React from 'react';
|
||||
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
||||
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
||||
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
||||
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
|
||||
import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
|
||||
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
||||
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
||||
import { Notice } from 'rc-notification';
|
||||
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
||||
import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
|
||||
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
||||
import classNames from 'classnames';
|
||||
import { Notice } from 'rc-notification';
|
||||
import type { NoticeProps } from 'rc-notification/lib/Notice';
|
||||
import useStyle from './style';
|
||||
import * as React from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import type { IconType } from './interface';
|
||||
import useStyle from './style';
|
||||
|
||||
export const TypeIcon = {
|
||||
info: <InfoCircleFilled />,
|
||||
@ -37,6 +37,7 @@ export interface PureContentProps {
|
||||
description?: React.ReactNode;
|
||||
btn?: React.ReactNode;
|
||||
type?: IconType;
|
||||
role?: 'alert' | 'status';
|
||||
}
|
||||
|
||||
const typeToIcon = {
|
||||
@ -53,6 +54,7 @@ export function PureContent({
|
||||
message,
|
||||
description,
|
||||
btn,
|
||||
role = 'alert',
|
||||
}: PureContentProps) {
|
||||
let iconNode: React.ReactNode = null;
|
||||
if (icon) {
|
||||
@ -68,7 +70,7 @@ export function PureContent({
|
||||
className={classNames({
|
||||
[`${prefixCls}-with-icon`]: iconNode,
|
||||
})}
|
||||
role="alert"
|
||||
role={role}
|
||||
>
|
||||
{iconNode}
|
||||
<div className={`${prefixCls}-message`}>{message}</div>
|
||||
|
||||
@ -301,4 +301,16 @@ describe('notification', () => {
|
||||
|
||||
expect(document.querySelectorAll("[data-testid='test-notification']").length).toBe(1);
|
||||
});
|
||||
|
||||
it('support role', async () => {
|
||||
act(() => {
|
||||
notification.open({
|
||||
message: 'Notification Title',
|
||||
duration: 0,
|
||||
role: 'status',
|
||||
});
|
||||
});
|
||||
|
||||
expect(document.querySelectorAll('[role="status"]').length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
@ -44,21 +44,22 @@ To display a notification message at any of the four corners of the viewport. Ty
|
||||
|
||||
The properties of config are as follows:
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| btn | Customized close button | ReactNode | - |
|
||||
| className | Customized CSS class | string | - |
|
||||
| closeIcon | Custom close icon | ReactNode | - |
|
||||
| description | The content of notification box (required) | 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) | ReactNode | - |
|
||||
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
|
||||
| style | Customized inline style | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
|
||||
| onClick | Specify a function that will be called when the notification is clicked | function | - |
|
||||
| onClose | Trigger when notification closed | function | - |
|
||||
| props | An object that can contain `data-*`, `aria-*`, or `role` props, to be put on the notification `div`. This currently only allows `data-testid` instead of `data-*` in TypeScript. See https://github.com/microsoft/TypeScript/issues/28960. | Object | - |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| btn | Customized close button | ReactNode | - | - |
|
||||
| className | Customized CSS class | string | - | - |
|
||||
| closeIcon | Custom close icon | ReactNode | - | - |
|
||||
| description | The content of notification box (required) | 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) | ReactNode | - | - |
|
||||
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | - |
|
||||
| style | Customized inline style | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - | - |
|
||||
| role | The semantics of notification content recognized by screen readers. The default value is `alert`. When set as the default value, the screen reader will promptly interrupt any ongoing content reading and prioritize the notification content for immediate attention. | `alert \| status` | `alert` | 5.6.0 |
|
||||
| onClick | Specify a function that will be called when the notification is clicked | function | - | - |
|
||||
| onClose | Trigger when notification closed | function | - | - |
|
||||
| props | An object that can contain `data-*`, `aria-*`, or `role` props, to be put on the notification `div`. This currently only allows `data-testid` instead of `data-*` in TypeScript. See https://github.com/microsoft/TypeScript/issues/28960. | Object | - | - |
|
||||
|
||||
- `notification.useNotification(config)`
|
||||
|
||||
|
||||
@ -45,21 +45,22 @@ demo:
|
||||
|
||||
config 参数如下：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| btn | 自定义关闭按钮 | ReactNode | - |
|
||||
| className | 自定义 CSS class | string | - |
|
||||
| closeIcon | 自定义关闭图标 | ReactNode | - |
|
||||
| description | 通知提醒内容，必选 | ReactNode | - |
|
||||
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 |
|
||||
| icon | 自定义图标 | ReactNode | - |
|
||||
| key | 当前通知唯一标志 | string | - |
|
||||
| message | 通知提醒标题，必选 | ReactNode | - |
|
||||
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
|
||||
| style | 自定义内联样式 | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
|
||||
| onClick | 点击通知时触发的回调函数 | function | - |
|
||||
| onClose | 当通知关闭时触发 | function | - |
|
||||
| props | 透传至通知 `div` 上的 props 对象，支持传入 `data-*` `aria-*` 或 `role` 作为对象的属性。需要注意的是，虽然在 TypeScript 类型中声明的类型支持传入 `data-*` 作为对象的属性，但目前只允许传入 `data-testid` 作为对象的属性。 详见 https://github.com/microsoft/TypeScript/issues/28960 | Object | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| btn | 自定义关闭按钮 | ReactNode | - | - |
|
||||
| className | 自定义 CSS class | string | - | - |
|
||||
| closeIcon | 自定义关闭图标 | ReactNode | - | - |
|
||||
| description | 通知提醒内容，必选 | ReactNode | - | - |
|
||||
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
|
||||
| icon | 自定义图标 | ReactNode | - | - |
|
||||
| key | 当前通知唯一标志 | string | - | - |
|
||||
| message | 通知提醒标题，必选 | ReactNode | - | - |
|
||||
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | - | s |
|
||||
| style | 自定义内联样式 | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - | - |
|
||||
| role | 供屏幕阅读器识别的通知内容语义，默认为 `alert`。此情况下屏幕阅读器会立即打断当前正在阅读的其他内容，转而阅读通知内容 | `alert \| status` | `alert` | 5.6.0 |
|
||||
| onClick | 点击通知时触发的回调函数 | function | - | - |
|
||||
| onClose | 当通知关闭时触发 | function | - | - |
|
||||
| props | 透传至通知 `div` 上的 props 对象，支持传入 `data-*` `aria-*` 或 `role` 作为对象的属性。需要注意的是，虽然在 TypeScript 类型中声明的类型支持传入 `data-*` 作为对象的属性，但目前只允许传入 `data-testid` 作为对象的属性。 详见 https://github.com/microsoft/TypeScript/issues/28960 | Object | - | - |
|
||||
|
||||
- `notification.useNotification(config)`
|
||||
|
||||
|
||||
@ -29,6 +29,7 @@ export interface ArgsProps {
|
||||
onClick?: () => void;
|
||||
closeIcon?: React.ReactNode;
|
||||
props?: DivProps;
|
||||
role?: 'alert' | 'status';
|
||||
}
|
||||
|
||||
type StaticFn = (args: ArgsProps) => void;
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { useNotification as useRcNotification } from 'rc-notification';
|
||||
import type { NotificationAPI } from 'rc-notification/lib';
|
||||
import classNames from 'classnames';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import type {
|
||||
NotificationInstance,
|
||||
ArgsProps,
|
||||
NotificationPlacement,
|
||||
NotificationConfig,
|
||||
} from './interface';
|
||||
import { getPlacementStyle, getMotion } from './util';
|
||||
import * as React from 'react';
|
||||
import warning from '../_util/warning';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { PureContent, getCloseIcon } from './PurePanel';
|
||||
import type {
|
||||
ArgsProps,
|
||||
NotificationConfig,
|
||||
NotificationInstance,
|
||||
NotificationPlacement,
|
||||
} from './interface';
|
||||
import useStyle from './style';
|
||||
import { getCloseIcon, PureContent } from './PurePanel';
|
||||
import { getMotion, getPlacementStyle } from './util';
|
||||
|
||||
const DEFAULT_OFFSET = 24;
|
||||
const DEFAULT_DURATION = 4.5;
|
||||
@ -105,7 +105,16 @@ export function useInternalNotification(
|
||||
const { open: originOpen, prefixCls, hashId } = holderRef.current;
|
||||
const noticePrefixCls = `${prefixCls}-notice`;
|
||||
|
||||
const { message, description, icon, type, btn, className, ...restConfig } = config;
|
||||
const {
|
||||
message,
|
||||
description,
|
||||
icon,
|
||||
type,
|
||||
btn,
|
||||
className,
|
||||
role = 'alert',
|
||||
...restConfig
|
||||
} = config;
|
||||
|
||||
return originOpen({
|
||||
placement: 'topRight',
|
||||
@ -118,6 +127,7 @@ export function useInternalNotification(
|
||||
message={message}
|
||||
description={description}
|
||||
btn={btn}
|
||||
role={role}
|
||||
/>
|
||||
),
|
||||
className: classNames(type && `${noticePrefixCls}-${type}`, hashId, className),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user