Merge pull request #17316 from ant-design/key-drawer

fix: add maskClosable is false ESC close

components/drawer/index.en-US.md

@@ -36,6 +36,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' |
 | onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |
 | afterVisibleChange | Callback after the animation ends when switching drawers. | function(visible) | - |
+| keyboard | Whether support press esc to close | Boolean | true |
 
 <style>
 #_hj_feedback_container {

components/drawer/index.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import RcDrawer from 'rc-drawer';
 import createReactContext from '@ant-design/create-react-context';
 import warning from '../_util/warning';
@@ -10,7 +9,9 @@ import { tuple } from '../_util/type';
 
 const DrawerContext = createReactContext<Drawer | null>(null);
 
-type EventType = React.MouseEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement>;
+type EventType =
+  | React.KeyboardEvent<HTMLDivElement>
+  | React.MouseEvent<HTMLDivElement | HTMLButtonElement>;
 
 type getContainerFunc = () => HTMLElement;
 
@@ -39,6 +40,7 @@ export interface DrawerProps {
   afterVisibleChange?: (visible: boolean) => void;
   className?: string;
   handler?: React.ReactNode;
+  keyboard?: boolean;
 }
 
 export interface IDrawerState {
@@ -46,30 +48,6 @@ export interface IDrawerState {
 }
 
 class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerState> {
-  static propTypes = {
-    closable: PropTypes.bool,
-    destroyOnClose: PropTypes.bool,
-    getContainer: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.object as PropTypes.Requireable<HTMLElement>,
-      PropTypes.func,
-      PropTypes.bool,
-    ]),
-    maskClosable: PropTypes.bool,
-    mask: PropTypes.bool,
-    maskStyle: PropTypes.object,
-    style: PropTypes.object,
-    title: PropTypes.node,
-    visible: PropTypes.bool,
-    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    zIndex: PropTypes.number,
-    prefixCls: PropTypes.string,
-    placement: PropTypes.oneOf(PlacementTypes),
-    onClose: PropTypes.func,
-    afterVisibleChange: PropTypes.func,
-    className: PropTypes.string,
-  };
-
   static defaultProps = {
     width: 256,
     height: 256,
@@ -78,6 +56,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
     maskClosable: true,
     mask: true,
     level: null,
+    keyboard: true,
   };
 
   readonly state = {
@@ -106,7 +85,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
   };
 
   onMaskClick = (e: EventType) => {
-    if (!this.props.maskClosable) {
+    if (!this.props.maskClosable && !(e.nativeEvent instanceof KeyboardEvent)) {
       return;
     }
     this.close(e);

components/drawer/index.zh-CN.md

@@ -35,6 +35,7 @@ title: Drawer
 | placement | 抽屉的方向 | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' |
 | onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
 | afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | 无 |
+| keyboard | 是否支持键盘 esc 关闭 | boolean | true |
 
 <style>
 #_hj_feedback_container {