demo: fix Deprecated usage in form demo (#41860)

* demo: fix Deprecated usage in form demo * test: update snapshot * test: update snapshot
2 years ago · 107a28fa94
5 changed files with 177 additions and 141 deletions
--- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx
+++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx
@ -91,6 +91,7 @@ function SubTokenTable({ defaultOpen, tokens, title }: SubTokenTableProps) {
          dataSource={data}
          style={{ marginBottom: token.margin }}
          pagination={false}
+          rowKey={(record) => record.name}
        />
      </ConfigProvider>
    </details>
--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders components/form/demo/advanced-search.tsx extend context correctly 1`] = `
-<div>
+Array [
  <form
    class="ant-form ant-form-horizontal"
    id="advanced_search"
@ -132,16 +132,16 @@ exports[`renders components/form/demo/advanced-search.tsx extend context correct
                          style="height: 0px; width: 0px; overflow: hidden;"
                        >
                          <div
-                            aria-label="1"
-                            aria-selected="false"
+                            aria-label="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+                            aria-selected="true"
                            id="advanced_search_field-1_list_0"
                            role="option"
                          >
                            1
                          </div>
                          <div
-                            aria-label="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
-                            aria-selected="true"
+                            aria-label="222"
+                            aria-selected="false"
                            id="advanced_search_field-1_list_1"
                            role="option"
                          >
@ -162,14 +162,14 @@ exports[`renders components/form/demo/advanced-search.tsx extend context correct
                                style="display: flex; flex-direction: column;"
                              >
                                <div
-                                  aria-selected="false"
-                                  class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                                  title="1"
+                                  aria-selected="true"
+                                  class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                                  title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
                                >
                                  <div
                                    class="ant-select-item-option-content"
                                  >
-                                    1
+                                    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
                                  </div>
                                  <span
                                    aria-hidden="true"
@ -179,14 +179,14 @@ exports[`renders components/form/demo/advanced-search.tsx extend context correct
                                  />
                                </div>
                                <div
-                                  aria-selected="true"
-                                  class="ant-select-item ant-select-item-option ant-select-item-option-selected"
-                                  title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+                                  aria-selected="false"
+                                  class="ant-select-item ant-select-item-option"
+                                  title="222"
                                >
                                  <div
                                    class="ant-select-item-option-content"
                                  >
-                                    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+                                    222
                                  </div>
                                  <span
                                    aria-hidden="true"
@ -399,16 +399,16 @@ exports[`renders components/form/demo/advanced-search.tsx extend context correct
                          style="height: 0px; width: 0px; overflow: hidden;"
                        >
                          <div
-                            aria-label="1"
-                            aria-selected="false"
+                            aria-label="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+                            aria-selected="true"
                            id="advanced_search_field-4_list_0"
                            role="option"
                          >
                            1
                          </div>
                          <div
-                            aria-label="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
-                            aria-selected="true"
+                            aria-label="222"
+                            aria-selected="false"
                            id="advanced_search_field-4_list_1"
                            role="option"
                          >
@ -429,14 +429,14 @@ exports[`renders components/form/demo/advanced-search.tsx extend context correct
                                style="display: flex; flex-direction: column;"
                              >
                                <div
-                                  aria-selected="false"
-                                  class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                                  title="1"
+                                  aria-selected="true"
+                                  class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                                  title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
                                >
                                  <div
                                    class="ant-select-item-option-content"
                                  >
-                                    1
+                                    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
                                  </div>
                                  <span
                                    aria-hidden="true"
@ -446,14 +446,14 @@ exports[`renders components/form/demo/advanced-search.tsx extend context correct
                                  />
                                </div>
                                <div
-                                  aria-selected="true"
-                                  class="ant-select-item ant-select-item-option ant-select-item-option-selected"
-                                  title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
+                                  aria-selected="false"
+                                  class="ant-select-item ant-select-item-option"
+                                  title="222"
                                >
                                  <div
                                    class="ant-select-item-option-content"
                                  >
-                                    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+                                    222
                                  </div>
                                  <span
                                    aria-hidden="true"
@ -547,62 +547,74 @@ exports[`renders components/form/demo/advanced-search.tsx extend context correct
      </div>
    </div>
    <div
-      class="ant-row"
+      style="text-align: right;"
    >
      <div
-        class="ant-col ant-col-24"
-        style="text-align: right;"
+        class="ant-space ant-space-horizontal ant-space-align-center"
      >
-        <button
-          class="ant-btn ant-btn-primary"
-          type="submit"
+        <div
+          class="ant-space-item"
+          style="margin-right: 8px;"
        >
-          <span>
-            Search
-          </span>
-        </button>
-        <button
-          class="ant-btn ant-btn-default"
-          style="margin: 0px 8px;"
-          type="button"
-        >
-          <span>
-            Clear
-          </span>
-        </button>
-        <a
-          style="font-size: 12px;"
+          <button
+            class="ant-btn ant-btn-primary"
+            type="submit"
+          >
+            <span>
+              Search
+            </span>
+          </button>
+        </div>
+        <div
+          class="ant-space-item"
+          style="margin-right: 8px;"
        >
-          <span
-            aria-label="down"
-            class="anticon anticon-down"
-            role="img"
+          <button
+            class="ant-btn ant-btn-default"
+            type="button"
          >
-            <svg
-              aria-hidden="true"
-              data-icon="down"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span>
+              Clear
+            </span>
+          </button>
+        </div>
+        <div
+          class="ant-space-item"
+        >
+          <a
+            style="font-size: 12px;"
+          >
+            <span
+              aria-label="down"
+              class="anticon anticon-down"
+              role="img"
            >
-              <path
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-              />
-            </svg>
-          </span>
-           Collapse
-        </a>
+              <svg
+                aria-hidden="true"
+                data-icon="down"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                />
+              </svg>
+            </span>
+             Collapse
+          </a>
+        </div>
      </div>
    </div>
-  </form>
+  </form>,
  <div
    style="line-height: 200px; text-align: center; background: rgba(0, 0, 0, 0.02); border-radius: 8px; margin-top: 16px;"
  >
    Search Result List
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders components/form/demo/basic.tsx extend context correctly 1`] = `
--- a/components/form/tests/snapshots/demo.test.tsx.snap
+++ b/components/form/tests/snapshots/demo.test.tsx.snap
@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders components/form/demo/advanced-search.tsx correctly 1`] = `
-<div>
+Array [
  <form
    class="ant-form ant-form-horizontal"
    id="advanced_search"
@ -387,62 +387,74 @@ exports[`renders components/form/demo/advanced-search.tsx correctly 1`] = `
      </div>
    </div>
    <div
-      class="ant-row"
+      style="text-align:right"
    >
      <div
-        class="ant-col ant-col-24"
-        style="text-align:right"
+        class="ant-space ant-space-horizontal ant-space-align-center"
      >
-        <button
-          class="ant-btn ant-btn-primary"
-          type="submit"
+        <div
+          class="ant-space-item"
+          style="margin-right:8px"
        >
-          <span>
-            Search
-          </span>
-        </button>
-        <button
-          class="ant-btn ant-btn-default"
-          style="margin:0 8px"
-          type="button"
-        >
-          <span>
-            Clear
-          </span>
-        </button>
-        <a
-          style="font-size:12px"
+          <button
+            class="ant-btn ant-btn-primary"
+            type="submit"
+          >
+            <span>
+              Search
+            </span>
+          </button>
+        </div>
+        <div
+          class="ant-space-item"
+          style="margin-right:8px"
        >
-          <span
-            aria-label="down"
-            class="anticon anticon-down"
-            role="img"
+          <button
+            class="ant-btn ant-btn-default"
+            type="button"
          >
-            <svg
-              aria-hidden="true"
-              data-icon="down"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span>
+              Clear
+            </span>
+          </button>
+        </div>
+        <div
+          class="ant-space-item"
+        >
+          <a
+            style="font-size:12px"
+          >
+            <span
+              aria-label="down"
+              class="anticon anticon-down"
+              role="img"
            >
-              <path
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-              />
-            </svg>
-          </span>
-           Collapse
-        </a>
+              <svg
+                aria-hidden="true"
+                data-icon="down"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                />
+              </svg>
+            </span>
+             Collapse
+          </a>
+        </div>
      </div>
    </div>
-  </form>
+  </form>,
  <div
    style="line-height:200px;text-align:center;background:rgba(0, 0, 0, 0.02);border-radius:8px;margin-top:16px"
  >
    Search Result List
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders components/form/demo/basic.tsx correctly 1`] = `
--- a/components/form/demo/advanced-search.tsx
+++ b/components/form/demo/advanced-search.tsx
@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { DownOutlined, UpOutlined } from '@ant-design/icons';
-import { Button, Col, Form, Input, Row, Select, theme } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import { Button, Col, Form, Input, Row, Select, Space, theme } from 'antd';

 const { Option } = Select;

@ -22,27 +22,39 @@ const AdvancedSearchForm = () => {
    for (let i = 0; i < count; i++) {
      children.push(
        <Col span={8} key={i}>
-          <Form.Item
-            name={`field-${i}`}
-            label={`Field ${i}`}
-            rules={[
-              {
-                required: true,
-                message: 'Input something!',
-              },
-            ]}
-          >
-            {i % 3 !== 1 ? (
+          {i % 3 !== 1 ? (
+            <Form.Item
+              name={`field-${i}`}
+              label={`Field ${i}`}
+              rules={[
+                {
+                  required: true,
+                  message: 'Input something!',
+                },
+              ]}
+            >
              <Input placeholder="placeholder" />
-            ) : (
-              <Select defaultValue="2">
-                <Option value="1">1</Option>
-                <Option value="2">
+            </Form.Item>
+          ) : (
+            <Form.Item
+              name={`field-${i}`}
+              label={`Field ${i}`}
+              rules={[
+                {
+                  required: true,
+                  message: 'Select something!',
+                },
+              ]}
+              initialValue="1"
+            >
+              <Select>
+                <Option value="1">
                  longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
                </Option>
+                <Option value="2">222</Option>
              </Select>
-            )}
-          </Form.Item>
+            </Form.Item>
+          )}
        </Col>,
      );
    }
@ -56,13 +68,12 @@ const AdvancedSearchForm = () => {
  return (
    <Form form={form} name="advanced_search" style={formStyle} onFinish={onFinish}>
      <Row gutter={24}>{getFields()}</Row>
-      <Row>
-        <Col span={24} style={{ textAlign: 'right' }}>
+      <div style={{ textAlign: 'right' }}>
+        <Space size="small">
          <Button type="primary" htmlType="submit">
            Search
          </Button>
          <Button
-            style={{ margin: '0 8px' }}
            onClick={() => {
              form.resetFields();
            }}
@ -75,10 +86,10 @@ const AdvancedSearchForm = () => {
              setExpand(!expand);
            }}
          >
-            {expand ? <UpOutlined /> : <DownOutlined />} Collapse
+            <DownOutlined rotate={expand ? 180 : 0} /> Collapse
          </a>
-        </Col>
-      </Row>
+        </Space>
+      </div>
    </Form>
  );
 };
@ -95,10 +106,10 @@ const App: React.FC = () => {
  };

  return (
-    <div>
+    <>
      <AdvancedSearchForm />
      <div style={listStyle}>Search Result List</div>
-    </div>
+    </>
  );
 };

--- a/components/form/demo/complex-form-control.tsx
+++ b/components/form/demo/complex-form-control.tsx
@ -30,7 +30,7 @@ const App: React.FC = () => (
      </Space>
    </Form.Item>
    <Form.Item label="Address">
-      <Input.Group compact>
+      <Space.Compact>
        <Form.Item
          name={['address', 'province']}
          noStyle
@ -48,7 +48,7 @@ const App: React.FC = () => (
        >
          <Input style={{ width: '50%' }} placeholder="Input street" />
        </Form.Item>
-      </Input.Group>
+      </Space.Compact>
    </Form.Item>
    <Form.Item label="BirthDate" style={{ marginBottom: 0 }}>
      <Form.Item