💄 improve Drawer demo and add snapshots

6 years ago · cde6dbe7c3
3 changed files with 284 additions and 26 deletions
--- a/components/drawer/tests/snapshots/demo.test.js.snap
+++ b/components/drawer/tests/snapshots/demo.test.js.snap
@ -0,0 +1,261 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/drawer/demo/basic-right.md correctly 1`] = `
+<div>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/drawer/demo/form-in-drawer.md correctly 1`] = `
+<div>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <i
+      class="anticon anticon-plus"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="plus"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+        />
+      </svg>
+    </i>
+    <span>
+       New account
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] = `
+<div>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open drawer
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
+<div>
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+    style="margin-right:8px"
+  >
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="top"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        top
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="right"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        right
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="bottom"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        bottom
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked"
+    >
+      <span
+        class="ant-radio ant-radio-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          type="radio"
+          value="left"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        left
+      </span>
+    </label>
+  </div>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
+<div>
+  <div
+    class="ant-list ant-list-split ant-list-bordered"
+  >
+    <div
+      class="ant-spin-nested-loading"
+    >
+      <div
+        class="ant-spin-container"
+      >
+        <div
+          class="ant-list-item"
+        >
+          <div
+            class="ant-list-item-meta"
+          >
+            <div
+              class="ant-list-item-meta-avatar"
+            >
+              <span
+                class="ant-avatar ant-avatar-circle ant-avatar-image"
+              >
+                <img
+                  src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
+                />
+              </span>
+            </div>
+            <div
+              class="ant-list-item-meta-content"
+            >
+              <h4
+                class="ant-list-item-meta-title"
+              >
+                <a
+                  href="https://ant.design/index-cn"
+                >
+                  Lily
+                </a>
+              </h4>
+              <div
+                class="ant-list-item-meta-description"
+              >
+                Progresser AFX
+              </div>
+            </div>
+          </div>
+          <ul
+            class="ant-list-item-action"
+          >
+            <li>
+              <a>
+                View Profile
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div
+          class="ant-list-item"
+        >
+          <div
+            class="ant-list-item-meta"
+          >
+            <div
+              class="ant-list-item-meta-avatar"
+            >
+              <span
+                class="ant-avatar ant-avatar-circle ant-avatar-image"
+              >
+                <img
+                  src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
+                />
+              </span>
+            </div>
+            <div
+              class="ant-list-item-meta-content"
+            >
+              <h4
+                class="ant-list-item-meta-title"
+              >
+                <a
+                  href="https://ant.design/index-cn"
+                >
+                  Lily
+                </a>
+              </h4>
+              <div
+                class="ant-list-item-meta-description"
+              >
+                Progresser AFX
+              </div>
+            </div>
+          </div>
+          <ul
+            class="ant-list-item-action"
+          >
+            <li>
+              <a>
+                View Profile
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/components/drawer/tests/demo.test.js
+++ b/components/drawer/tests/demo.test.js
@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('drawer');
--- a/components/drawer/demo/form-in-drawer.md
+++ b/components/drawer/demo/form-in-drawer.md
@ -1,21 +1,21 @@
 ---
 order: 3
 title:
-  zh-CN: 对象编辑
-  en-US: Edit item in drawer
+  zh-CN: 抽屉表单
+  en-US: Submit form in drawer
 ---

 ## zh-CN

-用于承载编辑相关操作，需要点击关闭按钮关闭。
+在抽屉中使用表单。

 ## en-US

-A drawer containing an editable form which needs to be collapsed by clicking the close button.
+Use form in drawer with submit button.

 ```jsx
 import {
-  Drawer, Form, Button, Col, Row, Input, Select, DatePicker,
+  Drawer, Form, Button, Col, Row, Input, Select, DatePicker, Icon,
 } from 'antd';

 const { Option } = Select;
@ -40,19 +40,17 @@ class DrawerForm extends React.Component {
    return (
      <div>
        <Button type="primary" onClick={this.showDrawer}>
-          Create
+          <Icon type="plus"/> New account
        </Button>
        <Drawer
-          title="Create"
+          title="Create a new account"
          width={720}
-          placement="right"
          onClose={this.onClose}
-          maskClosable={false}
          visible={this.state.visible}
          style={{
-            height: 'calc(100% - 55px)',
            overflow: 'auto',
-            paddingBottom: 53,
+            height: 'calc(100% - 108px)',
+            paddingBottom: '108px',
          }}
        >
          <Form layout="vertical" hideRequiredMark>
@ -60,20 +58,20 @@ class DrawerForm extends React.Component {
              <Col span={12}>
                <Form.Item label="Name">
                  {getFieldDecorator('name', {
-                    rules: [{ required: true, message: 'please enter user name' }],
-                  })(<Input placeholder="please enter user name" />)}
+                    rules: [{ required: true, message: 'Please enter user name' }],
+                  })(<Input placeholder="Please enter user name" />)}
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="Url">
                  {getFieldDecorator('url', {
-                    rules: [{ required: true, message: 'please enter url' }],
+                    rules: [{ required: true, message: 'Please enter url' }],
                  })(
                    <Input
                      style={{ width: '100%' }}
                      addonBefore="http://"
                      addonAfter=".com"
-                      placeholder="please enter url"
+                      placeholder="Please enter url"
                    />
                  )}
                </Form.Item>
@ -149,25 +147,21 @@ class DrawerForm extends React.Component {
          <div
            style={{
              position: 'absolute',
+              left: 0,
              bottom: 0,
              width: '100%',
-              borderTop: '1px solid #e8e8e8',
+              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
-              textAlign: 'right',
-              left: 0,
              background: '#fff',
-              borderRadius: '0 0 4px 4px',
+              textAlign: 'right',
            }}
          >
-            <Button
-              style={{
-                marginRight: 8,
-              }}
-              onClick={this.onClose}
-            >
+            <Button onClick={this.onClose} style={{ marginRight: 8 }}>
              Cancel
            </Button>
-            <Button onClick={this.onClose} type="primary">Submit</Button>
+            <Button onClick={this.onClose} type="primary">
+              Submit
+            </Button>
          </div>
        </Drawer>
      </div>