fix: Drawer cover other elements when closed (#24290)

* fix: Drawer cover other elements when closed

close #24287

* Add no-mask demo for Drawer

components/drawer/__tests__/__snapshots__/demo.test.js.snap

@@ -57,6 +57,17 @@ exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] =
 </button>
 `;
 
+exports[`renders ./components/drawer/demo/no-mask.md correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Open
+  </span>
+</button>
+`;
+
 exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"

components/drawer/demo/basic-right.md

@@ -13,51 +13,43 @@ title:
 
 Basic drawer.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Drawer, Button } from 'antd';
 
-class App extends React.Component {
-  state = { visible: false };
-
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const showDrawer = () => {
+    setVisible(true);
   };
-
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
+  const onClose = () => {
+    setVisible(false);
   };
-
-  render() {
-    return (
-      <>
-        <Button type="primary" onClick={this.showDrawer}>
-          Open
-        </Button>
-        <Drawer
-          title="Basic Drawer"
-          placement="right"
-          closable={false}
-          onClose={this.onClose}
-          visible={this.state.visible}
-        >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-        </Drawer>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Button type="primary" onClick={showDrawer}>
+        Open
+      </Button>
+      <Drawer
+        title="Basic Drawer"
+        placement="right"
+        closable={false}
+        onClose={onClose}
+        visible={visible}
+      >
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Drawer>
+    </>
+  );
+};
 
 ReactDOM.render(<App />, mountNode);
 ```
 
-```css
+<style>
 [data-theme='compact'] .ant-drawer-body p {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
-```
+</style>

components/drawer/demo/no-mask.md

@@ -0,0 +1,50 @@
+---
+order: 99
+title:
+  zh-CN: 无遮罩
+  en-US: No mask
+debug: true
+---
+
+## zh-CN
+
+通过 `mask={false}` 去掉遮罩。
+
+## en-US
+
+Remove mask.
+
+```tsx
+import React, { useState } from 'react';
+import { Drawer, Button } from 'antd';
+
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const showDrawer = () => {
+    setVisible(true);
+  };
+  const onClose = () => {
+    setVisible(false);
+  };
+  return (
+    <>
+      <Button type="primary" onClick={showDrawer}>
+        Open
+      </Button>
+      <Drawer
+        title="Drawer without mask"
+        placement="right"
+        mask={false}
+        onClose={onClose}
+        visible={visible}
+      >
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Drawer>
+    </>
+  );
+};
+
+ReactDOM.render(<App />, mountNode);
+```

components/drawer/demo/placement.md

@@ -16,8 +16,6 @@ The Drawer can appear from any edge of the screen.
 ```jsx
 import { Drawer, Button, Radio, Space } from 'antd';
 
-const RadioGroup = Radio.Group;
-
 class App extends React.Component {
   state = { visible: false, placement: 'left' };
 
@@ -44,12 +42,12 @@ class App extends React.Component {
     return (
       <>
         <Space>
-          <RadioGroup defaultValue={placement} onChange={this.onChange}>
+          <Radio.Group defaultValue={placement} onChange={this.onChange}>
             <Radio value="top">top</Radio>
             <Radio value="right">right</Radio>
             <Radio value="bottom">bottom</Radio>
             <Radio value="left">left</Radio>
-          </RadioGroup>
+          </Radio.Group>
           <Button type="primary" onClick={this.showDrawer}>
             Open
           </Button>

components/drawer/index.tsx

@@ -137,7 +137,11 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
   };
 
   getOffsetStyle() {
-    const { placement, width, height } = this.props;
+    const { placement, width, height, visible, mask } = this.props;
+    // https://github.com/ant-design/ant-design/issues/24287
+    if (!visible && !mask) {
+      return {};
+    }
     const offsetStyle: any = {};
     if (placement === 'left' || placement === 'right') {
       offsetStyle.width = width;