From 2501e72fd6ca50b996b936588662ee30e7a636c6 Mon Sep 17 00:00:00 2001
From: Lyca <qmzmxfy@vip.qq.com>
Date: Fri, 14 May 2021 14:35:53 +0800
Subject: [PATCH] feat(.md): Form => FormLayout (#1427)

---
 packages/next/docs/components/FormCollapse.md | 14 ++++---
 packages/next/docs/components/FormDialog.md   | 24 +++++------
 packages/next/docs/components/FormDrawer.md   | 21 ++++++----
 packages/next/docs/components/Password.md     | 39 +++++++++++------
 packages/next/docs/components/PreviewText.md  | 20 +++++----
 packages/next/docs/components/Upload.md       | 42 +++++++++++++------
 6 files changed, 101 insertions(+), 59 deletions(-)

diff --git a/packages/next/docs/components/FormCollapse.md b/packages/next/docs/components/FormCollapse.md
index b12027a1570..890296413c1 100644
--- a/packages/next/docs/components/FormCollapse.md
+++ b/packages/next/docs/components/FormCollapse.md
@@ -14,10 +14,11 @@ import {
   Input,
   FormButtonGroup,
   Submit,
+  FormLayout,
 } from '@formily/next'
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/react'
-import { Button, Form } from '@alifd/next'
+import { Button } from '@alifd/next'
 
 const SchemaField = createSchemaField({
   components: {
@@ -33,7 +34,7 @@ const formCollapse = FormCollapse.createFormCollapse()
 export default () => {
   return (
     <FormProvider form={form}>
-      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 10 }}>
+      <FormLayout labelCol={6} wrapperCol={10}>
         <SchemaField>
           <SchemaField.Void
             title="折叠面板"
@@ -103,7 +104,7 @@ export default () => {
           </Button>
           <Submit onSubmit={console.log}>提交</Submit>
         </FormButtonGroup.FormItem>
-      </Form>
+      </FormLayout>
     </FormProvider>
   )
 }
@@ -119,10 +120,11 @@ import {
   Input,
   FormButtonGroup,
   Submit,
+  FormLayout,
 } from '@formily/next'
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/react'
-import { Button, Form } from '@alifd/next'
+import { Button } from '@alifd/next'
 
 const SchemaField = createSchemaField({
   components: {
@@ -203,7 +205,7 @@ const schema = {
 export default () => {
   return (
     <FormProvider form={form}>
-      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 10 }}>
+      <FormLayout labelCol={6} wrapperCol={10}>
         <SchemaField schema={schema} scope={{ formCollapse }} />
         <FormButtonGroup.FormItem>
           <Button
@@ -224,7 +226,7 @@ export default () => {
           </Button>
           <Submit onSubmit={console.log}>提交</Submit>
         </FormButtonGroup.FormItem>
-      </Form>
+      </FormLayout>
     </FormProvider>
   )
 }
diff --git a/packages/next/docs/components/FormDialog.md b/packages/next/docs/components/FormDialog.md
index bb9a5621386..06c3166b5f8 100644
--- a/packages/next/docs/components/FormDialog.md
+++ b/packages/next/docs/components/FormDialog.md
@@ -6,9 +6,9 @@
 
 ```tsx
 import React from 'react'
-import { FormDialog, FormItem, Input } from '@formily/next'
+import { FormDialog, FormItem, Input, FormLayout } from '@formily/next'
 import { createSchemaField } from '@formily/react'
-import { Button, Form } from '@alifd/next'
+import { Button } from '@alifd/next'
 
 const SchemaField = createSchemaField({
   components: {
@@ -23,7 +23,7 @@ export default () => {
       onClick={() => {
         FormDialog('弹窗表单', () => {
           return (
-            <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
+            <FormLayout labelCol={6} wrapperCol={14}>
               <SchemaField>
                 <SchemaField.String
                   name="aaa"
@@ -57,7 +57,7 @@ export default () => {
               <FormDialog.Footer>
                 <span style={{ marginLeft: 4 }}>扩展文案</span>
               </FormDialog.Footer>
-            </Form>
+            </FormLayout>
           )
         })
           .open({
@@ -78,9 +78,9 @@ export default () => {
 
 ```tsx
 import React from 'react'
-import { FormDialog, FormItem, Input } from '@formily/next'
+import { FormDialog, FormItem, Input, FormLayout } from '@formily/next'
 import { createSchemaField } from '@formily/react'
-import { Button, Form } from '@alifd/next'
+import { Button } from '@alifd/next'
 
 const SchemaField = createSchemaField({
   components: {
@@ -129,12 +129,12 @@ export default () => {
       onClick={() => {
         FormDialog('弹窗表单', () => {
           return (
-            <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
+            <FormLayout labelCol={6} wrapperCol={14}>
               <SchemaField schema={schema} />
               <FormDialog.Footer>
                 <span style={{ marginLeft: 4 }}>扩展文案</span>
               </FormDialog.Footer>
-            </Form>
+            </FormLayout>
           )
         })
           .open({
@@ -155,9 +155,9 @@ export default () => {
 
 ```tsx
 import React from 'react'
-import { FormDialog, FormItem, Input } from '@formily/next'
+import { FormDialog, FormItem, Input, FormLayout } from '@formily/next'
 import { Field } from '@formily/react'
-import { Button, Form } from '@alifd/next'
+import { Button } from '@alifd/next'
 
 export default () => {
   return (
@@ -165,7 +165,7 @@ export default () => {
       onClick={() => {
         FormDialog('弹窗表单', () => {
           return (
-            <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
+            <FormLayout labelCol={6} wrapperCol={14}>
               <Field
                 name="aaa"
                 required
@@ -197,7 +197,7 @@ export default () => {
               <FormDialog.Footer>
                 <span style={{ marginLeft: 4 }}>扩展文案</span>
               </FormDialog.Footer>
-            </Form>
+            </FormLayout>
           )
         })
           .open({
diff --git a/packages/next/docs/components/FormDrawer.md b/packages/next/docs/components/FormDrawer.md
index 4be50f3881a..de885e66b99 100644
--- a/packages/next/docs/components/FormDrawer.md
+++ b/packages/next/docs/components/FormDrawer.md
@@ -13,9 +13,10 @@ import {
   Submit,
   Reset,
   FormButtonGroup,
+  FormLayout,
 } from '@formily/next'
 import { createSchemaField } from '@formily/react'
-import { Button, Form } from '@alifd/next'
+import { Button } from '@alifd/next'
 
 const SchemaField = createSchemaField({
   components: {
@@ -30,7 +31,7 @@ export default () => {
       onClick={() => {
         FormDrawer('抽屉表单', (resolve) => {
           return (
-            <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
+            <FormLayout labelCol={6} wrapperCol={14}>
               <SchemaField>
                 <SchemaField.String
                   name="aaa"
@@ -67,7 +68,7 @@ export default () => {
                   <Reset>重置</Reset>
                 </FormButtonGroup>
               </FormDrawer.Footer>
-            </Form>
+            </FormLayout>
           )
         })
           .open({
@@ -95,9 +96,10 @@ import {
   Submit,
   Reset,
   FormButtonGroup,
+  FormLayout,
 } from '@formily/next'
 import { createSchemaField } from '@formily/react'
-import { Button, Form } from '@alifd/next'
+import { Button } from '@alifd/next'
 
 const SchemaField = createSchemaField({
   components: {
@@ -146,7 +148,7 @@ export default () => {
       onClick={() => {
         FormDrawer('弹窗表单', (resolve) => {
           return (
-            <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
+            <FormLayout labelCol={6} wrapperCol={14}>
               <SchemaField schema={schema} />
               <FormDrawer.Footer>
                 <FormButtonGroup align="right">
@@ -154,7 +156,7 @@ export default () => {
                   <Reset>重置</Reset>
                 </FormButtonGroup>
               </FormDrawer.Footer>
-            </Form>
+            </FormLayout>
           )
         })
           .open({
@@ -182,9 +184,10 @@ import {
   Submit,
   Reset,
   FormButtonGroup,
+  FormLayout,
 } from '@formily/next'
 import { Field } from '@formily/react'
-import { Button, Form } from '@alifd/next'
+import { Button } from '@alifd/next'
 
 export default () => {
   return (
@@ -192,7 +195,7 @@ export default () => {
       onClick={() => {
         FormDrawer('弹窗表单', (resolve) => {
           return (
-            <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
+            <FormLayout labelCol={6} wrapperCol={14}>
               <Field
                 name="aaa"
                 required
@@ -227,7 +230,7 @@ export default () => {
                   <Reset>重置</Reset>
                 </FormButtonGroup>
               </FormDrawer.Footer>
-            </Form>
+            </FormLayout>
           )
         })
           .open({
diff --git a/packages/next/docs/components/Password.md b/packages/next/docs/components/Password.md
index 96801f0ef17..00442d81f9d 100644
--- a/packages/next/docs/components/Password.md
+++ b/packages/next/docs/components/Password.md
@@ -6,10 +6,15 @@
 
 ```tsx
 import React from 'react'
-import { Password, FormItem, FormButtonGroup, Submit } from '@formily/next'
+import {
+  Password,
+  FormItem,
+  FormButtonGroup,
+  Submit,
+  FormLayout,
+} from '@formily/next'
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/react'
-import { Form } from '@alifd/next'
 
 const SchemaField = createSchemaField({
   components: {
@@ -22,7 +27,7 @@ const form = createForm()
 
 export default () => (
   <FormProvider form={form}>
-    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 10 }}>
+    <FormLayout labelCol={6} wrapperCol={10}>
       <SchemaField>
         <SchemaField.String
           name="input"
@@ -38,7 +43,7 @@ export default () => (
       <FormButtonGroup.FormItem>
         <Submit onSubmit={console.log}>提交</Submit>
       </FormButtonGroup.FormItem>
-    </Form>
+    </FormLayout>
   </FormProvider>
 )
 ```
@@ -47,10 +52,15 @@ export default () => (
 
 ```tsx
 import React from 'react'
-import { Password, FormItem, FormButtonGroup, Submit } from '@formily/next'
+import {
+  Password,
+  FormItem,
+  FormButtonGroup,
+  Submit,
+  FormLayout,
+} from '@formily/next'
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/react'
-import { Form } from '@alifd/next'
 const SchemaField = createSchemaField({
   components: {
     Password,
@@ -77,12 +87,12 @@ const schema = {
 
 export default () => (
   <FormProvider form={form}>
-    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 10 }}>
+    <FormLayout labelCol={6} wrapperCol={10}>
       <SchemaField schema={schema} />
       <FormButtonGroup.FormItem>
         <Submit onSubmit={console.log}>提交</Submit>
       </FormButtonGroup.FormItem>
-    </Form>
+    </FormLayout>
   </FormProvider>
 )
 ```
@@ -91,15 +101,20 @@ export default () => (
 
 ```tsx
 import React from 'react'
-import { Password, FormItem, FormButtonGroup, Submit } from '@formily/next'
+import {
+  Password,
+  FormItem,
+  FormButtonGroup,
+  Submit,
+  FormLayout,
+} from '@formily/next'
 import { createForm } from '@formily/core'
 import { FormProvider, Field } from '@formily/react'
-import { Form } from '@alifd/next'
 const form = createForm()
 
 export default () => (
   <FormProvider form={form}>
-    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 10 }}>
+    <FormLayout labelCol={6} wrapperCol={10}>
       <Field
         name="input"
         title="输入框"
@@ -115,7 +130,7 @@ export default () => (
       <FormButtonGroup.FormItem>
         <Submit onSubmit={console.log}>提交</Submit>
       </FormButtonGroup.FormItem>
-    </Form>
+    </FormLayout>
   </FormProvider>
 )
 ```
diff --git a/packages/next/docs/components/PreviewText.md b/packages/next/docs/components/PreviewText.md
index 50d427215bb..da9ab0f1b8a 100644
--- a/packages/next/docs/components/PreviewText.md
+++ b/packages/next/docs/components/PreviewText.md
@@ -6,10 +6,9 @@
 
 ```tsx
 import React from 'react'
-import { PreviewText, FormItem } from '@formily/next'
+import { PreviewText, FormItem, FormLayout } from '@formily/next'
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/react'
-import { Form } from '@alifd/next'
 
 const SchemaField = createSchemaField({
   components: {
@@ -22,7 +21,7 @@ const form = createForm()
 
 export default () => {
   return (
-    <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
+    <FormLayout labelCol={8} wrapperCol={16}>
       <FormProvider form={form}>
         <SchemaField>
           <SchemaField.String
@@ -68,7 +67,7 @@ export default () => {
           />
         </SchemaField>
       </FormProvider>
-    </Form>
+    </FormLayout>
   )
 }
 ```
@@ -77,7 +76,12 @@ export default () => {
 
 ```tsx
 import React from 'react'
-import { PreviewText, FormItem, FormButtonGroup } from '@formily/next'
+import {
+  PreviewText,
+  FormItem,
+  FormButtonGroup,
+  FormLayout,
+} from '@formily/next'
 import { createForm } from '@formily/core'
 import {
   FormProvider,
@@ -85,7 +89,7 @@ import {
   connect,
   createSchemaField,
 } from '@formily/react'
-import { Button, Form, Input as NextInput } from '@alifd/next'
+import { Button, Input as NextInput } from '@alifd/next'
 
 const Input = connect(NextInput, mapReadPretty(PreviewText.Input))
 
@@ -102,7 +106,7 @@ const form = createForm()
 export default () => {
   return (
     <PreviewText.Placeholder value="暂无数据">
-      <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
+      <FormLayout labelCol={8} wrapperCol={16}>
         <FormProvider form={form}>
           <SchemaField>
             <SchemaField.Markup
@@ -163,7 +167,7 @@ export default () => {
             </Button>
           </FormButtonGroup.FormItem>
         </FormProvider>
-      </Form>
+      </FormLayout>
     </PreviewText.Placeholder>
   )
 }
diff --git a/packages/next/docs/components/Upload.md b/packages/next/docs/components/Upload.md
index b9999cb04fb..cb28189fbb8 100644
--- a/packages/next/docs/components/Upload.md
+++ b/packages/next/docs/components/Upload.md
@@ -8,10 +8,16 @@
 
 ```tsx
 import React from 'react'
-import { Upload, FormItem, FormButtonGroup, Submit } from '@formily/next'
+import {
+  Upload,
+  FormItem,
+  FormButtonGroup,
+  Submit,
+  FormLayout,
+} from '@formily/next'
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/react'
-import { Button, Form } from '@alifd/next'
+import { Button } from '@alifd/next'
 import { UploadOutlined, InboxOutlined } from '@ant-design/icons'
 
 const NormalUpload = (props) => {
@@ -78,7 +84,7 @@ const form = createForm()
 
 export default () => (
   <FormProvider form={form}>
-    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
+    <FormLayout labelCol={6} wrapperCol={14}>
       <SchemaField>
         <SchemaField.Array
           name="upload"
@@ -105,7 +111,7 @@ export default () => (
       <FormButtonGroup.FormItem>
         <Submit onSubmit={console.log}>提交</Submit>
       </FormButtonGroup.FormItem>
-    </Form>
+    </FormLayout>
   </FormProvider>
 )
 ```
@@ -114,10 +120,16 @@ export default () => (
 
 ```tsx
 import React from 'react'
-import { Upload, FormItem, FormButtonGroup, Submit } from '@formily/next'
+import {
+  Upload,
+  FormItem,
+  FormButtonGroup,
+  Submit,
+  FormLayout,
+} from '@formily/next'
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/react'
-import { Button, Form } from '@alifd/next'
+import { Button } from '@alifd/next'
 import { UploadOutlined, InboxOutlined } from '@ant-design/icons'
 
 const NormalUpload = (props) => {
@@ -211,12 +223,12 @@ const schema = {
 
 export default () => (
   <FormProvider form={form}>
-    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
+    <FormLayout labelCol={6} wrapperCol={14}>
       <SchemaField schema={schema} />
       <FormButtonGroup.FormItem>
         <Submit onSubmit={console.log}>提交</Submit>
       </FormButtonGroup.FormItem>
-    </Form>
+    </FormLayout>
   </FormProvider>
 )
 ```
@@ -225,10 +237,16 @@ export default () => (
 
 ```tsx
 import React from 'react'
-import { Upload, FormItem, FormButtonGroup, Submit } from '@formily/next'
+import {
+  Upload,
+  FormItem,
+  FormButtonGroup,
+  Submit,
+  FormLayout,
+} from '@formily/next'
 import { createForm } from '@formily/core'
 import { FormProvider, Field } from '@formily/react'
-import { Button, Form } from '@alifd/next'
+import { Button } from '@alifd/next'
 import { UploadOutlined, InboxOutlined } from '@ant-design/icons'
 
 const NormalUpload = (props) => {
@@ -286,7 +304,7 @@ const form = createForm()
 
 export default () => (
   <FormProvider form={form}>
-    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
+    <FormLayout labelCol={6} wrapperCol={14}>
       <Field
         name="upload"
         title="上传"
@@ -311,7 +329,7 @@ export default () => (
       <FormButtonGroup.FormItem>
         <Submit onSubmit={console.log}>提交</Submit>
       </FormButtonGroup.FormItem>
-    </Form>
+    </FormLayout>
   </FormProvider>
 )
 ```