docs: update demo

Author: zombieJ

assets/index.less

@@ -4,23 +4,27 @@
 @zIndex: 1050;
 
 .@{prefixCls} {
- // position: fixed;
- // inset: 0;
- // z-index: @zIndex;
- // pointer-events: none;
+ position: fixed;
+ inset: 0;
+ z-index: @zIndex;
+ pointer-events: none;
 
  &-mask {
  position: absolute;
  z-index: @zIndex;
  background: rgba(0, 0, 0, 0.5);
  inset: 0;
- // pointer-events: auto;
+ pointer-events: auto;
  }
 
  &-panel-wrapper {
  position: absolute;
  z-index: @zIndex;
 
+ &-hidden {
+ display: none;
+ }
+
  // Placement
  .@{prefixCls}-left & {
  top: 0;
@@ -36,10 +40,10 @@
  }
 
  &-panel {
- background: #fff;
  width: 100%;
  height: 100%;
- // pointer-events: auto;
+ background: #fff;
+ pointer-events: auto;
  }
 }
 

docs/examples/change-remove.tsx

@@ -1,11 +1,16 @@
-import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+ AppstoreOutlined,
+ MailOutlined,
+ SettingOutlined,
+} from '@ant-design/icons';
 import { Menu } from 'antd';
 import * as React from 'react';
 
 import Drawer from 'rc-drawer';
 
 import '../../assets/index.less';
 import './assets/index.less';
+import motionProps from './motion';
 
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
@@ -24,7 +29,12 @@ class Demo extends React.Component<any, { show: boolean }> {
  return (
  <div>
  {this.state.show && (
- <Drawer wrapperClassName="drawer-wrapper" width="20vw">
+ <Drawer
+ wrapperClassName="drawer-wrapper"
+ width="20vw"
+ open
+ {...motionProps}
+ >
  <Menu
  defaultSelectedKeys={['1']}
  defaultOpenKeys={['sub1']}

docs/examples/getContainer.tsx

@@ -1,4 +1,8 @@
-import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+ AppstoreOutlined,
+ MailOutlined,
+ SettingOutlined,
+} from '@ant-design/icons';
 import { Menu } from 'antd';
 import * as React from 'react';
 
@@ -26,8 +30,26 @@ class DrawerTester extends React.Component {
  public render() {
  return (
  <div>
- <div ref={this.saveContainer} id="container" />
- <Drawer width="20vw" getContainer={this.getContainer}>
+ <div
+ ref={this.saveContainer}
+ id="container"
+ style={{
+ height: 300,
+ background: 'rgba(0,0,0,0.05)',
+ overflow: 'auto',
+ }}
+ >
+ <div
+ style={{
+ display: 'inline-block',
+ height: 1000,
+ boxShadow: `0 0 1px red`,
+ }}
+ >
+ Hello World
+ </div>
+ </div>
+ <Drawer width="20vw" getContainer={this.getContainer} open>
  <Menu
  defaultSelectedKeys={['1']}
  defaultOpenKeys={['sub1']}

src/DrawerPopup.tsx

@@ -88,7 +88,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
 
  // ============================ Mask ============================
  const maskNode: React.ReactNode = mask && (
- <CSSMotion {...maskMotion} visible={open}>
+ <CSSMotion key="mask" {...maskMotion} visible={open}>
  {({ className: motionMaskClassName, style: motionMaskStyle }) => {
  return (
  <div
@@ -114,6 +114,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
  const panelNode: React.ReactNode = (
  <div className={`${prefixCls}-panel-wrapper`}>
  <CSSMotion
+ key="panel"
  {...motionProps}
  visible={open}
  onVisibleChanged={nextVisible => {
@@ -122,6 +123,8 @@ export default function DrawerPopup(props: DrawerPopupProps) {
  scrollLocker?.unLock();
  }
  }}
+ removeOnLeave={false}
+ leavedClassName={`${prefixCls}-panel-wrapper-hidden`}
  >
  {({ className: motionClassName, style: motionStyle }) => {
  return (