Perfect api

components/drawer/demo/basic.md

@@ -37,6 +37,8 @@ class App extends React.Component {
         <Drawer
           title="Basic Drawer"
           width={400}
+          placement="right"
+          zIndex={9999}
           onClose={this.onClose}
           visible={this.state.visible}
         >

components/drawer/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import RcDrawer from 'rc-drawer-menu';
 import { isNull, isNumber } from 'util';
+import PropTypes from 'prop-types';
 
 type EventType =
   | React.MouseEvent<HTMLDivElement>
@@ -8,7 +9,6 @@ type EventType =
 
 export interface IDrawerProps {
   closable?: boolean;
-  // @todo  下一步增加
   destroyOnClose?: boolean;
   getContainer?: HTMLElement;
   maskClosable?: boolean;
@@ -19,7 +19,6 @@ export interface IDrawerProps {
   visible?: boolean;
   width?: number | string;
   wrapClassName?: string;
-  // @todo  下一步增加
   zIndex?: number;
   prefixCls?: string;
   placement?: 'left' | 'right';
@@ -34,9 +33,26 @@ export default class Drawer extends React.Component<
   IDrawerProps,
   IDrawerState
 > {
+  static propTypes = {
+    closable: PropTypes.bool,
+    destroyOnClose: PropTypes.bool,
+    getContainer: HTMLElement,
+    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]),
+    wrapClassName: PropTypes.string,
+    zIndex: PropTypes.number,
+    prefixCls: PropTypes.string,
+    placement: PropTypes.string,
+    onClose: PropTypes.func,
+  };
   static defaultProps = {
     prefixCls: 'ant-drawer',
-    width: 325,
+    width: 256,
     closable: true,
   };
   static getDerivedStateFromProps(
@@ -73,6 +89,9 @@ export default class Drawer extends React.Component<
     this.close(e);
   }
   renderBody = () => {
+    if (this.props.destroyOnClose && this.props.visible) {
+      return null;
+    }
     const { prefixCls, title, closable } = this.props;
     let header;
     if (title) {
@@ -106,18 +125,19 @@ export default class Drawer extends React.Component<
     );
   }
   render() {
-    let { width } = this.props;
+    let { width, zIndex, style, ...rest } = this.props;
     if (isNumber(width)) {
       width = `${width}px`;
     }
     return (
       <RcDrawer
-        {...this.props}
+        {...rest}
         handleChild={false}
         open={this.state.visible}
         onMaskClick={this.close}
         showMask={this.props.mask}
         placement={this.props.placement}
+        style={{ zIndex: zIndex }}
       >
         {this.renderBody()}
       </RcDrawer>

components/drawer/index.zh-CN.md

@@ -5,9 +5,12 @@ subtitle: 抽屉
 title: Drawer
 ---
 
-抽屉容器
+抽屉是一种覆盖在父窗体上的面板，从父窗体边框外滑入，用来承载信息或操作集合。抽屉在不离开父窗体情况下进行互动，用户身处上下文环境中，能更方便清楚地处理任务。
 
 ## 何时使用
+* 创建或者编辑一个对象。
+* 承载子任务。为了让子任务仍然置于主任务的上下文环境中，子任务对气泡 Popover 来说又过于复杂时，使用大号的抽屉来承载。
+* 同一表单在多处使用
 
 
 ## API
@@ -21,10 +24,10 @@ title: Drawer
 | mask | 是否展示遮罩 | Boolean | true |
 | maskStyle | 遮罩样式 | object | {} |
 | style | 可用于设置 Drawer 的样式，调整浮层位置等 | object | - |
-| title | 标题 | string\|ReactNode | 无 |
+| title | 标题 | string \| ReactNode | 无 |
 | visible | Drawer 是否可见 | boolean | 无 |
-| width | 宽度 | string\|number | 325 |
+| width | 宽度 | string \| number | 256 |
 | wrapClassName | 对话框外层容器的类名 | string | - |
 | zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |
-| placement | 抽屉的方向 | 'left' | 'right' | 'left'
+| placement | 抽屉的方向 | 'left' \| 'right' | 'left'
 | onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |

components/drawer/style/drawer.less

@@ -15,7 +15,6 @@
 
   &-content-wrapper {
     position: absolute;
-    z-index: @zindex-modal-mask + 1;
   }
 
   &-left,
@@ -149,7 +148,6 @@
     background-color: #373737;
     background-color: @modal-mask-bg; // lesshint duplicateProperty: false
     height: 100%;
-    z-index: @zindex-modal-mask;
     filter: ~"alpha(opacity=50)";
   }