fix: Drawer cover other elements when closed

close #24287
ant-design · May 19, 2020 · 5198586 · 5198586
1 parent baa56b6
commit 5198586
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 42 deletions.
diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -13,7 +13,7 @@ exports[`Drawer className is test_drawer 1`] = `
     />
     <div
       class="ant-drawer-content-wrapper"
-      style="transform:translateX(100%);-ms-transform:translateX(100%);width:256px"
+      style="transform:translateX(100%);-ms-transform:translateX(100%)"
     >
       <div
         class="ant-drawer-content"
@@ -110,7 +110,7 @@ exports[`Drawer destroyOnClose is true 1`] = `
     />
     <div
       class="ant-drawer-content-wrapper"
-      style="transform:translateX(100%);-ms-transform:translateX(100%);width:256px"
+      style="transform:translateX(100%);-ms-transform:translateX(100%)"
     >
       <div
         class="ant-drawer-content"

diff --git a/components/drawer/__tests__/__snapshots__/demo.test.js.snap b/components/drawer/__tests__/__snapshots__/demo.test.js.snap
@@ -192,7 +192,7 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
       />
       <div
         class="ant-drawer-content-wrapper"
-        style="transform:translateX(100%);-ms-transform:translateX(100%);width:256px"
+        style="transform:translateX(100%);-ms-transform:translateX(100%)"
       >
         <div
           class="ant-drawer-content"

diff --git a/components/drawer/demo/basic-right.md b/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>
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
@@ -137,7 +137,10 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
   };
 
   getOffsetStyle() {
-    const { placement, width, height } = this.props;
+    const { placement, width, height, visible } = this.props;
+    if (!visible) {
+      return {};
+    }
     const offsetStyle: any = {};
     if (placement === 'left' || placement === 'right') {
       offsetStyle.width = width;