feat(ui): add dEscClose prop

DevCloudFE · Dec 31, 2021 · 9143505 · 9143505
1 parent 9abbaa6
commit 9143505
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 17 deletions.
diff --git a/packages/ui/src/components/_alert-dialog/AlertDialog.tsx b/packages/ui/src/components/_alert-dialog/AlertDialog.tsx
@@ -10,26 +10,14 @@ export interface DAlertDialogProps extends React.HTMLAttributes<HTMLDivElement>
 }
 
 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,
   });
 
   const asyncCapture = useAsync();
 
-  const handleKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(
-    (e) => {
-      onKeyDown?.(e);
-
-      if (e.code === 'Escape') {
-        dataRef.current.clearTid && dataRef.current.clearTid();
-        onClose?.();
-      }
-    },
-    [onClose, onKeyDown]
-  );
-
   const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(
     (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
@@ -9,6 +9,7 @@ export interface DDialogProps extends React.HTMLAttributes<HTMLDivElement> {
   dHidden: boolean;
   dMask?: boolean;
   dMaskClosable?: boolean;
+  dEscClose?: boolean;
   dDestroy?: boolean;
   dDialogRef?: React.LegacyRef<HTMLDivElement>;
   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
@@ -33,6 +33,7 @@ export interface DDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
   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
@@ -26,6 +26,7 @@ Extend `React.HTMLAttributes<HTMLDivElement>`.
 | 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
@@ -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
@@ -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<HTMLDivElement>
   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<React.KeyboardEventHandler<HTMLDivElement>>(
+    (e) => {
+      onKeyDown?.(e);
+
+      if (dEscClose && e.code === 'Escape') {
+        onClose?.();
+      }
+    },
+    [dEscClose, onClose, onKeyDown]
+  );
+
   return (
     <DAlertDialog
       {...restProps}
       className={getClassName(className, `${dPrefix}notification`)}
+      tabIndex={tabIndex}
       aria-labelledby={isUndefined(dTitle) ? undefined : `${dPrefix}notification-header-${uniqueId}`}
       aria-describedby={`${dPrefix}notification-content-${uniqueId}`}
       dHidden={hidden}
       dDuration={dDuration}
       dDialogRef={dialogRef}
       onClose={onClose}
+      onKeyDown={handleKeyDown}
     >
       {(!isUndefined(dType) || !isUndefined(dIcon)) && (
         <div className={`${dPrefix}notification__icon`}>

diff --git a/packages/ui/src/components/notification/README.md b/packages/ui/src/components/notification/README.md
@@ -26,6 +26,7 @@ Extend `React.HTMLAttributes<HTMLDivElement>`.
 | 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` | - |
 <!-- prettier-ignore-end -->

diff --git 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` | - |
 <!-- prettier-ignore-end -->

diff --git 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) {