add multi-level-drawer

components/drawer/demo/from-drawer.md

@@ -162,9 +162,9 @@ class App extends React.Component {
               }}
               onClick={this.onClose}
             >
-              取消
+              Cancel
             </Button>
-            <Button type="primary">提交</Button>
+            <Button onClick={this.onClose} type="primary">Submit</Button>
           </div>
         </Drawer>
       </div>

components/drawer/demo/multi-level-drawer.md

@@ -0,0 +1,146 @@
+---
+order: 5
+title:
+  zh-CN: 多层抽屉
+  en-US: Multi-level drawer
+---
+
+## zh-CN
+
+在抽屉内打开新的抽屉，用以解决多分支任务的复杂状况。
+
+## en-US
+
+Open a new drawer on top of an existing drawer to handle multi branch tasks
+
+```jsx
+import { Drawer, List, Form, Button, Input, Tag } from 'antd';
+
+const vegetables = ['asparagus', 'bamboo', 'potato', 'carrot', 'cilantro', 'potato', 'eggplant'];
+
+const TagList = ({ value, onChange, show }) => {
+  return (
+    <div>
+      {value.map(item => {
+        return <Tag>{item}</Tag>;
+      })}
+      <Tag onClick={() => show()}>+</Tag>
+    </div>
+  );
+};
+
+class App extends React.Component {
+  state = { visible: false, childrenDrawer: false };
+  showDrawer = () => {
+    this.setState({
+      visible: true,
+    });
+  };
+  onClose = () => {
+    this.setState({
+      visible: false,
+    });
+  };
+  showChildrenDrawer = () => {
+    this.setState({
+      childrenDrawer: true,
+    });
+  };
+  onChildrenDrawerClose = () => {
+    this.setState({
+      childrenDrawer: false,
+    });
+  };
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <div>
+        <Button type="primary" onClick={this.showDrawer}>
+          New Cookbook
+        </Button>
+        <Drawer
+          title="Cookbook"
+          width={520}
+          closable={false}
+          onClose={this.onClose}
+          wrapperClassName="cookbook"
+          visible={this.state.visible}
+        >
+          <Form hideRequiredMark>
+            <Form.Item label="Name">
+              {getFieldDecorator('name', {
+                rules: [{ required: true, message: 'please enter cookbook name' }],
+              })(<Input placeholder="please enter cookbook name" />)}
+            </Form.Item>
+            <Form.Item label="Food">
+              {getFieldDecorator('Food', {
+                rules: [{ required: true, message: 'please enter food' }],
+                initialValue: ['potato', 'eggplant'],
+              })(<TagList show={this.showChildrenDrawer} />)}
+            </Form.Item>
+          </Form>
+          <Drawer
+            title="Food"
+            width={320}
+            closable={false}
+            wrapperClassName="cookbook_children"
+            onClose={this.onChildrenDrawerClose}
+            visible={this.state.childrenDrawer}
+            levelMove={250}
+            level=".cookbook"
+          >
+            <List
+              size="small"
+              header={<div>Vegetables</div>}
+              dataSource={vegetables}
+              renderItem={item => <List.Item>{item}</List.Item>}
+            />
+          </Drawer>
+          <div
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              width: '100%',
+              borderTop: '1px solid #e8e8e8',
+              padding: '10px 16px',
+              textAlign: 'right',
+              left: 0,
+              background: '#fff',
+              borderRadius: '0 0 4px 4px',
+            }}
+          >
+            <Button
+              style={{
+                marginRight: 8,
+              }}
+              onClick={this.onClose}
+            >
+              Cancel
+            </Button>
+            <Button onClick={this.onClose} type="primary">
+              Submit
+            </Button>
+          </div>
+        </Drawer>
+      </div>
+    );
+  }
+}
+const WarpApp = Form.create()(App);
+
+ReactDOM.render(<WarpApp />, mountNode);
+```
+
+<style>
+#_hj_feedback_container{
+  display:none
+}
+.cookbook,.cookbook_children{
+   position: fixed;
+   top: 0;
+   width: 100%;
+   height: 100%;
+   z-index: 9999;
+   pointer-events: none;
+}
+</style>

components/drawer/index.tsx

@@ -56,6 +56,7 @@ export default class Drawer extends React.Component<
     prefixCls: 'ant-drawer',
     width: 256,
     closable: true,
+    placement: 'right',
     maskClosable: true,
   };