From 91435058b4dc5d0dcf920f3f41124e1554fc6ac2 Mon Sep 17 00:00:00 2001 From: xiejay97 Date: Fri, 31 Dec 2021 18:57:02 +0800 Subject: [PATCH] feat(ui): add `dEscClose` prop --- .../components/_alert-dialog/AlertDialog.tsx | 15 +-------------- packages/ui/src/components/_dialog/Dialog.tsx | 6 ++++-- packages/ui/src/components/drawer/Drawer.tsx | 3 +++ packages/ui/src/components/drawer/README.md | 1 + .../src/components/drawer/README.zh-Hant.md | 1 + .../components/notification/Notification.tsx | 19 ++++++++++++++++++- .../ui/src/components/notification/README.md | 1 + .../components/notification/README.zh-Hant.md | 1 + .../src/styles/components/_notification.scss | 1 + 9 files changed, 31 insertions(+), 17 deletions(-) diff --git a/packages/ui/src/components/_alert-dialog/AlertDialog.tsx b/packages/ui/src/components/_alert-dialog/AlertDialog.tsx index 7fd38388..41d85c4d 100644 --- a/packages/ui/src/components/_alert-dialog/AlertDialog.tsx +++ b/packages/ui/src/components/_alert-dialog/AlertDialog.tsx @@ -10,7 +10,7 @@ export interface DAlertDialogProps extends React.HTMLAttributes } export function DAlertDialog(props: DAlertDialogProps) { - const { dHidden, dDuration, dDialogRef, onClose, children, onKeyDown, onMouseEnter, onMouseLeave, ...restProps } = props; + const { dHidden, dDuration, dDialogRef, onClose, children, onMouseEnter, onMouseLeave, ...restProps } = props; const dataRef = useRef<{ clearTid: (() => void) | null }>({ clearTid: null, @@ -18,18 +18,6 @@ export function DAlertDialog(props: DAlertDialogProps) { const asyncCapture = useAsync(); - const handleKeyDown = useCallback>( - (e) => { - onKeyDown?.(e); - - if (e.code === 'Escape') { - dataRef.current.clearTid && dataRef.current.clearTid(); - onClose?.(); - } - }, - [onClose, onKeyDown] - ); - const handleMouseEnter = useCallback>( (e) => { onMouseEnter?.(e); @@ -72,7 +60,6 @@ export function DAlertDialog(props: DAlertDialogProps) { ref={dDialogRef} role="alertdialog" aria-modal="true" - onKeyDown={handleKeyDown} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > diff --git a/packages/ui/src/components/_dialog/Dialog.tsx b/packages/ui/src/components/_dialog/Dialog.tsx index ab09f841..00e73237 100644 --- a/packages/ui/src/components/_dialog/Dialog.tsx +++ b/packages/ui/src/components/_dialog/Dialog.tsx @@ -9,6 +9,7 @@ export interface DDialogProps extends React.HTMLAttributes { dHidden: boolean; dMask?: boolean; dMaskClosable?: boolean; + dEscClose?: boolean; dDestroy?: boolean; dDialogRef?: React.LegacyRef; onClose?: () => void; @@ -20,6 +21,7 @@ export function DDialog(props: DDialogProps) { dHidden, dMask = true, dMaskClosable = true, + dEscClose = true, dDestroy = false, dDialogRef, onClose, @@ -44,13 +46,13 @@ export function DDialog(props: DDialogProps) { //#region DidUpdate useEffect(() => { const [asyncGroup, asyncId] = asyncCapture.createGroup(); - if (dVisible) { + if (dVisible && dEscClose) { asyncGroup.onEscKeydown(() => onClose?.()); } return () => { asyncCapture.deleteGroup(asyncId); }; - }, [asyncCapture, dVisible, onClose]); + }, [asyncCapture, dEscClose, dVisible, onClose]); //#endregion return ( diff --git a/packages/ui/src/components/drawer/Drawer.tsx b/packages/ui/src/components/drawer/Drawer.tsx index ddb0a894..9e3f6451 100644 --- a/packages/ui/src/components/drawer/Drawer.tsx +++ b/packages/ui/src/components/drawer/Drawer.tsx @@ -33,6 +33,7 @@ export interface DDrawerProps extends React.HTMLAttributes { dZIndex?: number; dMask?: boolean; dMaskClosable?: boolean; + dEscClose?: boolean; dHeader?: React.ReactNode; dFooter?: React.ReactNode; dDestroy?: boolean; @@ -53,6 +54,7 @@ export function DDrawer(props: DDrawerProps) { dZIndex, dMask = true, dMaskClosable = true, + dEscClose = true, dHeader, dFooter, dDestroy = false, @@ -230,6 +232,7 @@ export function DDrawer(props: DDrawerProps) { dHidden={hidden} dMask={dMask} dMaskClosable={dMaskClosable} + dEscClose={dEscClose} dDestroy={dDestroy} dDialogRef={dialogRef} onClose={closeDrawer} diff --git a/packages/ui/src/components/drawer/README.md b/packages/ui/src/components/drawer/README.md index 310e4976..3b999be0 100644 --- a/packages/ui/src/components/drawer/README.md +++ b/packages/ui/src/components/drawer/README.md @@ -26,6 +26,7 @@ Extend `React.HTMLAttributes`. | dZIndex | Manually control the value of `z-index` | number | - | | dMask | Whether to show the mask | boolean | true | | dMaskClosable | Click on the mask to close the drawer | boolean | true | +| dEscClose | Whether to close by pressing Esc | boolean | true | | dHeader | Drawer header | React.ReactNode | - | | dFooter | Drawer footer | React.ReactNode | - | | dDestroy | Destroy the node after shutdown | boolean | false | diff --git a/packages/ui/src/components/drawer/README.zh-Hant.md b/packages/ui/src/components/drawer/README.zh-Hant.md index cee861be..551fb62b 100644 --- a/packages/ui/src/components/drawer/README.zh-Hant.md +++ b/packages/ui/src/components/drawer/README.zh-Hant.md @@ -25,6 +25,7 @@ title: 抽屉 | dZIndex | 手动控制 `z-index` 的值 | number | - | | dMask | 是否显示遮罩 | boolean | true | | dMaskClosable | 点击遮罩关闭抽屉 | boolean | true | +| dEscClose | 按下Esc是否关闭 | boolean | true | | dHeader | 抽屉的页头 | React.ReactNode | - | | dFooter | 抽屉的页脚 | React.ReactNode | - | | dDestroy | 关闭后销毁节点 | boolean | false | diff --git a/packages/ui/src/components/notification/Notification.tsx b/packages/ui/src/components/notification/Notification.tsx index 42343e25..dabb3740 100644 --- a/packages/ui/src/components/notification/Notification.tsx +++ b/packages/ui/src/components/notification/Notification.tsx @@ -1,5 +1,5 @@ import { isUndefined } from 'lodash'; -import React, { useId } from 'react'; +import React, { useCallback, useId } from 'react'; import { Subject } from 'rxjs'; import { usePrefixConfig, useComponentConfig, useRefCallback, useDTransition, useTranslation } from '../../hooks'; @@ -17,6 +17,7 @@ export interface DNotificationProps extends React.HTMLAttributes dPlacement?: 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'; dClosable?: boolean; dCloseIcon?: React.ReactNode; + dEscClose?: boolean; onClose?: () => void; afterVisibleChange?: (visible: boolean) => void; } @@ -85,9 +86,12 @@ export function DNotification(props: DNotificationProps & { dVisible: boolean }) dPlacement = 'right-top', dClosable = true, dCloseIcon, + dEscClose = true, onClose, afterVisibleChange, className, + tabIndex = -1, + onKeyDown, ...restProps } = useComponentConfig(DNotification.name, props); @@ -138,16 +142,29 @@ export function DNotification(props: DNotificationProps & { dVisible: boolean }) }, }); + const handleKeyDown = useCallback>( + (e) => { + onKeyDown?.(e); + + if (dEscClose && e.code === 'Escape') { + onClose?.(); + } + }, + [dEscClose, onClose, onKeyDown] + ); + return ( {(!isUndefined(dType) || !isUndefined(dIcon)) && (
diff --git a/packages/ui/src/components/notification/README.md b/packages/ui/src/components/notification/README.md index 6f26af21..db99f1a7 100644 --- a/packages/ui/src/components/notification/README.md +++ b/packages/ui/src/components/notification/README.md @@ -26,6 +26,7 @@ Extend `React.HTMLAttributes`. | dPlacement | Notification pop-up direction | 'left-top' \| 'right-top' \| 'left-bottom' \| 'right-bottom' | 'right-top' | | dClosable | Can be closed | boolean | true | | dCloseIcon | Customize the close icon | React.ReactNode | - | +| dEscClose | Whether to close by pressing Esc | boolean | true | | onClose | Callback when the notification is closed | `() => void` | - | | afterVisibleChange | Callback to the end of the opening/closing animation | `(visible: boolean) => void` | - | diff --git a/packages/ui/src/components/notification/README.zh-Hant.md b/packages/ui/src/components/notification/README.zh-Hant.md index 8680e754..13b163bc 100644 --- a/packages/ui/src/components/notification/README.zh-Hant.md +++ b/packages/ui/src/components/notification/README.zh-Hant.md @@ -25,6 +25,7 @@ title: 通知 | dPlacement | 通知弹出方向 | 'left-top' \| 'right-top' \| 'left-bottom' \| 'right-bottom' | 'right-top' | | dClosable | 是否可关闭 | boolean | true | | dCloseIcon | 自定义关闭图标 | React.ReactNode | - | +| dEscClose | 按下Esc是否关闭 | boolean | true | | onClose | 通知关闭时的回调 | `() => void` | - | | afterVisibleChange | 通知打开/关闭动画结束的回调 | `(visible: boolean) => void` | - | diff --git a/packages/ui/src/styles/components/_notification.scss b/packages/ui/src/styles/components/_notification.scss index 9ef5d57c..5dbcd0a0 100644 --- a/packages/ui/src/styles/components/_notification.scss +++ b/packages/ui/src/styles/components/_notification.scss @@ -39,6 +39,7 @@ overflow: hidden; background-color: var(--#{$variable-prefix}background-color); + outline: none; box-shadow: 0 4px 20px 0 var(--#{$variable-prefix}shadow-color); @include e(icon) {