Improve documentation

components/drawer/demo/from-drawer.md

@@ -1,8 +1,8 @@
 ---
 order: 0
 title:
-  zh-CN: 用户信息
-  en-US: User Profile
+  zh-CN: 表单抽屉
+  en-US: from drawer
 ---
 
 ## zh-CN
@@ -47,22 +47,22 @@ class App extends React.Component {
           <Form layout="vertical" hideRequiredMark>
             <Row gutter={16}>
               <Col span={12}>
-                <Form.Item label="名称">
+                <Form.Item label="Name">
                   {getFieldDecorator('name', {
-                    rules: [{ required: true, message: '请输入' }],
-                  })(<Input placeholder="请输入" />)}
+                    rules: [{ required: true, message: 'please enter user name' }],
+                  })(<Input placeholder="please enter user name" />)}
                 </Form.Item>
               </Col>
               <Col span={12}>
-                <Form.Item label="域名">
+                <Form.Item label="Url">
                   {getFieldDecorator('url', {
-                    rules: [{ required: true, message: '请选择' }],
+                    rules: [{ required: true, message: 'please enter url' }],
                   })(
                     <Input
                       style={{ width: '100%' }}
                       addonBefore="http://"
                       addonAfter=".com"
-                      placeholder="请输入"
+                      placeholder="please enter url"
                     />
                   )}
                 </Form.Item>
@@ -70,25 +70,25 @@ class App extends React.Component {
             </Row>
             <Row gutter={16}>
               <Col span={12}>
-                <Form.Item label="管理员">
+                <Form.Item label="Owner">
                   {getFieldDecorator('owner', {
-                    rules: [{ required: true, message: '请选择管理员' }],
+                    rules: [{ required: true, message: 'Please select an owner' }],
                   })(
-                    <Select placeholder="请选择管理员">
-                      <Option value="xiao">付晓晓</Option>
-                      <Option value="mao">周毛毛</Option>
+                    <Select placeholder="Please select an owner">
+                      <Option value="xiao">Xiaoxiao Fu</Option>
+                      <Option value="mao">Maomao Zhou</Option>
                     </Select>
                   )}
                 </Form.Item>
               </Col>
               <Col span={12}>
-                <Form.Item label="类型">
+                <Form.Item label="Type">
                   {getFieldDecorator('type', {
-                    rules: [{ required: true, message: '请选择仓库类型' }],
+                    rules: [{ required: true, message: 'Please choose the type' }],
                   })(
-                    <Select placeholder="请选择类型">
-                      <Option value="private">私密</Option>
-                      <Option value="public">公开</Option>
+                    <Select placeholder="Please choose the type">
+                      <Option value="private">Private</Option>
+                      <Option value="public">Public</Option>
                     </Select>
                   )}
                 </Form.Item>
@@ -96,21 +96,21 @@ class App extends React.Component {
             </Row>
             <Row gutter={16}>
               <Col span={12}>
-                <Form.Item label="审批人">
+                <Form.Item label="Approver">
                   {getFieldDecorator('approver', {
-                    rules: [{ required: true, message: '请选择审批员' }],
+                    rules: [{ required: true, message: 'Please choose the approver' }],
                   })(
-                    <Select placeholder="请选择审批员">
-                      <Option value="xiao">付晓晓</Option>
-                      <Option value="mao">周毛毛</Option>
+                    <Select placeholder="Please choose the approver">
+                      <Option value="jack">Jack Ma</Option>
+                      <Option value="tom">Tom Liu</Option>
                     </Select>
                   )}
                 </Form.Item>
               </Col>
               <Col span={12}>
-                <Form.Item label="生效日期">
+                <Form.Item label="DateTime">
                   {getFieldDecorator('dateTime', {
-                    rules: [{ required: true, message: '请输入' }],
+                    rules: [{ required: true, message: 'Please choose the dateTime' }],
                   })(
                     <DatePicker.RangePicker
                       style={{ width: '100%' }}
@@ -122,10 +122,10 @@ class App extends React.Component {
             </Row>
             <Row gutter={16}>
               <Col span={24}>
-                <Form.Item label="描述">
-                  {getFieldDecorator('type', {
-                    rules: [{ required: true, message: '请输入描述' }],
-                  })(<Input.TextArea rows={4} placeholder="请输入描述" />)}
+                <Form.Item label="description">
+                  {getFieldDecorator('description', {
+                    rules: [{ required: true, message: 'please enter url description' }],
+                  })(<Input.TextArea rows={4} placeholder="please enter url description" />)}
                 </Form.Item>
               </Col>
             </Row>

components/drawer/index.en-US.md

@@ -1,14 +1,17 @@
 ---
 type: Feedback
 category: Components
-subtitle: Drawer
+subtitle: 
 title: Drawer
 ---
 
-Drawer container
+A drawer is a panel that is overlaid on a parent form and slides in from the outside of the parent form's border to carry information or action collections. The drawer interacts without leaving the parent form, and the user is in context and can handle tasks more easily and clearly.
 
 ## When To Use
 
+* Create or edit an object.
+* Carrying subtasks. In order to keep the subtasks still in the context of the main task, the subtasks are too complex for the Bubble Popover to use large drawers to carry.
+* Use the same form in multiple places
 
 ## API
 
@@ -26,5 +29,5 @@ Drawer container
 | width | Width of the Drawer dialog | string\|number | 520 |
 | wrapClassName | The class name of the container of the Drawer dialog | string | - |
 | zIndex | The `z-index` of the Drawer | Number | 1000 |
-| placement | The direction of the Drawer | 'left' | 'right' | 'left'
+| placement | The direction of the Drawer | 'left' \| 'right' | 'right'
 | onClose | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) | - |

components/drawer/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import RcDrawer from 'rc-drawer-menu';
+import RcDrawer from 'rc-drawer';
 import { isNull, isNumber } from 'util';
 import PropTypes from 'prop-types';
 
@@ -131,6 +131,7 @@ export default class Drawer extends React.Component<
     }
     return (
       <RcDrawer
+        level={null}
         {...rest}
         handleChild={false}
         open={this.state.visible}
@@ -138,6 +139,7 @@ export default class Drawer extends React.Component<
         showMask={this.props.mask}
         placement={this.props.placement}
         style={{ zIndex: zIndex }}
+
       >
         {this.renderBody()}
       </RcDrawer>

components/drawer/index.zh-CN.md

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

components/drawer/style/drawer.less

@@ -8,7 +8,7 @@
   width: 100%;
   height: 100%;
   pointer-events: none;
-
+  z-index: 99;
   >* {
     transition: transform .3s @ease-in-out-circ;
   }

site/theme/static/style.js

@@ -1,4 +1,4 @@
 import 'react-github-button/assets/style.css';
-import 'rc-drawer-menu/assets/index.css';
+import 'rc-drawer/assets/index.css';
 import 'docsearch.js/dist/cdn/docsearch.css';
 import './index.less';

site/theme/template/Content/MainContent.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'bisheng/router';
 import { Row, Col, Menu, Icon } from 'antd';
 import classNames from 'classnames';
-import MobileMenu from 'rc-drawer-menu';
+import MobileMenu from 'rc-drawer';
 import Article from './Article';
 import ComponentDoc from './ComponentDoc';
 import * as utils from '../utils';

typings/custom-typings.d.ts

@@ -40,7 +40,7 @@ declare module 'rc-progress';
 
 declare module 'rc-menu';
 
-declare module 'rc-drawer-menu';
+declare module 'rc-drawer';
 
 declare module 'rc-tabs*';