edit doc and dom

components/drawer/__tests__/Drawer.test.js

@@ -6,10 +6,9 @@ import Drawer from '..';
 class DrawerTester extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { visible: false };
+    this.state = { visible: true };
   }
   componentDidMount() {
-    this.setState({ visible: true }); // eslint-disable-line react/no-did-mount-set-state
   }
   saveContainer = (container) => {
     this.container = container;
@@ -34,7 +33,7 @@ class DrawerTester extends React.Component {
 }
 
 describe('Drawer', () => {
-  it('render correctly', () => {
+  fit('render correctly', () => {
     const wrapper = mount(<DrawerTester width={400} />);
     const content = wrapper.find('.ant-drawer-body').getDOMNode().innerHTML;
     expect(content).toBe('Here is content of Drawer');

components/drawer/demo/basic.md

 ---
 order: 0
 title:
-  zh-CN: 基本
+  zh-CN: 基础抽屉
   en-US: Basic
 ---
 
 ## zh-CN
 
-第一个抽屉。
+基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭
 
 ## en-US
 
@@ -37,6 +37,7 @@ class App extends React.Component {
         <Drawer
           title="Basic Drawer"
           placement="right"
+          closable={false}
           onClose={this.onClose}
           visible={this.state.visible}
         >

components/drawer/demo/from-drawer.md

 ---
 order: 0
 title:
-  zh-CN: 表单抽屉
-  en-US: from drawer
+  zh-CN: 任务抽屉
+  en-US: Task drawer
 ---
 
 ## zh-CN
 
-展示用户的详细信息
+用于承载任务相关操作，需要点击关闭按钮关闭。
 
 ## en-US
 
-Display user details
+sed to carry tasks related operations, need to close by clicking the close button.
 
 ```jsx
 import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker } from 'antd';
@@ -42,6 +42,7 @@ class App extends React.Component {
           width={720}
           placement="right"
           onClose={this.onClose}
+          maskClosable={false}
           visible={this.state.visible}
         >
           <Form layout="vertical" hideRequiredMark>
@@ -122,7 +123,7 @@ class App extends React.Component {
             </Row>
             <Row gutter={16}>
               <Col span={24}>
-                <Form.Item label="description">
+                <Form.Item label="Description">
                   {getFieldDecorator('description', {
                     rules: [
                       {

components/drawer/demo/user-profile.md

 ---
 order: 0
 title:
-  zh-CN: 用户信息
-  en-US: User Profile
+  zh-CN: 信息预览抽屉
+  en-US: Preview drawer
 ---
 
 ## zh-CN
 
-展示用户的详细信息
+用于信息预览的抽屉，点击遮罩区关闭。
+
+- 需要快速预览对象概要时使用。如列表条目预览。
 
 ## en-US
 
-Display user details
+Drawer for information preview, click mask area off.
+
+- Use when you need to quickly preview the outline of the object. Such as list item preview.
 
 ```jsx
-import { Drawer, Divider, Button, Col, Row } from 'antd';
+import { Drawer, List, Avatar, Divider, Col, Row } from 'antd';
 
 const pStyle = {
   fontSize: 16,
@@ -63,23 +67,28 @@ class App extends React.Component {
   render() {
     return (
       <div>
-        <Button
-          ghost
-          type="primary"
-          onClick={this.showDrawer}
-          style={{
-            height: 80,
-            width: 80,
-          }}
-        >
-          <img
-            src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
-            width={32}
-            alt="logo"
-          />
-          <br />
-          <span>Lily</span>
-        </Button>
+        <List
+          dataSource={[
+            {
+              name: 'Lily',
+            },
+            {
+              name: 'Lily',
+            },
+          ]}
+          bordered
+          renderItem={item => (
+            <List.Item key={item.id} actions={[<a onClick={this.showDrawer}>View Profile</a>]}>
+              <List.Item.Meta
+                avatar={
+                  <Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
+                }
+                title={item.name}
+                description="Progresser AFX"
+              />
+            </List.Item>
+          )}
+        />
         <Drawer
           width={640}
           placement="right"
@@ -136,7 +145,7 @@ class App extends React.Component {
               <DescriptionItem title="Department" content="AFX" />
             </Col>
             <Col span={12}>
-              <DescriptionItem title="Superior" content={<a>Lin</a>} />
+              <DescriptionItem title="Supervisor" content={<a>Lin</a>} />
             </Col>
           </Row>
           <Row>