docs(antd): add close command demo (#3312)

alibaba · Aug 7, 2022 · e718f2b · e718f2b
1 parent 403d74c
commit e718f2b
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 13 deletions.
diff --git a/packages/antd/docs/components/FormDialog.md b/packages/antd/docs/components/FormDialog.md
@@ -21,7 +21,7 @@ export default () => {
   return (
     <Button
       onClick={() => {
-        FormDialog('Pop-up form', () => {
+        const dialog = FormDialog('Pop-up form', () => {
           return (
             <FormLayout labelCol={6} wrapperCol={10}>
               <SchemaField>
@@ -55,11 +55,19 @@ export default () => {
                 />
               </SchemaField>
               <FormDialog.Footer>
-                <span style={{ marginLeft: 4 }}>Extended copywriting</span>
+                <span
+                  onClick={() => {
+                    dialog.close()
+                  }}
+                  style={{ marginLeft: 4 }}
+                >
+                  Extended copywriting(Click me to close the form)
+                </span>
               </FormDialog.Footer>
             </FormLayout>
           )
         })
+        dialog
           .forOpen((payload, next) => {
             setTimeout(() => {
               next({
@@ -148,16 +156,24 @@ export default () => {
   return (
     <Button
       onClick={() => {
-        FormDialog('Pop-up form', () => {
+        const dialog = FormDialog('Pop-up form', () => {
           return (
             <FormLayout labelCol={6} wrapperCol={10}>
               <SchemaField schema={schema} />
               <FormDialog.Footer>
-                <span style={{ marginLeft: 4 }}>Extended copywriting</span>
+                <span
+                  onClick={() => {
+                    dialog.close()
+                  }}
+                  style={{ marginLeft: 4 }}
+                >
+                  Extended copywriting(Click me to close the form)
+                </span>
               </FormDialog.Footer>
             </FormLayout>
           )
         })
+        dialog
           .forOpen((payload, next) => {
             setTimeout(() => {
               next({
@@ -205,7 +221,7 @@ export default () => {
   return (
     <Button
       onClick={() => {
-        FormDialog('Pop-up form', () => {
+        const dialog = FormDialog('Pop-up form', () => {
           return (
             <FormLayout labelCol={6} wrapperCol={10}>
               <Field
@@ -237,11 +253,19 @@ export default () => {
                 component={[Input]}
               />
               <FormDialog.Footer>
-                <span style={{ marginLeft: 4 }}>Extended copywriting</span>
+                <span
+                  onClick={() => {
+                    dialog.close()
+                  }}
+                  style={{ marginLeft: 4 }}
+                >
+                  Extended copywriting(Click me to close the form)
+                </span>
               </FormDialog.Footer>
             </FormLayout>
           )
         })
+        dialog
           .forOpen((payload, next) => {
             setTimeout(() => {
               next({

diff --git a/packages/antd/docs/components/FormDialog.zh-CN.md b/packages/antd/docs/components/FormDialog.zh-CN.md
@@ -34,7 +34,7 @@ export default () => {
       <FormDialog.Portal id={PortalId}>
         <Button
           onClick={() => {
-            FormDialog('弹窗表单', PortalId, (form) => {
+            const dialog = FormDialog('弹窗表单', PortalId, (form) => {
               console.log(useContext(Context))
               return (
                 <FormLayout labelCol={6} wrapperCol={10}>
@@ -69,13 +69,19 @@ export default () => {
                     />
                   </SchemaField>
                   <FormDialog.Footer>
-                    <span style={{ marginLeft: 4 }}>
-                      扩展文案：{form.values.aaa}
+                    <span
+                      style={{ marginLeft: 4 }}
+                      onClick={() => {
+                        dialog.close()
+                      }}
+                    >
+                      扩展文案：{form.values.aaa}(点击关闭弹窗)
                     </span>
                   </FormDialog.Footer>
                 </FormLayout>
               )
             })
+            dialog
               .forOpen((payload, next) => {
                 setTimeout(() => {
                   next({
@@ -164,16 +170,25 @@ export default () => {
     <FormDialog.Portal>
       <Button
         onClick={() => {
-          FormDialog('弹窗表单', () => {
+          const dialog = FormDialog('弹窗表单', () => {
             return (
               <FormLayout labelCol={6} wrapperCol={10}>
                 <SchemaField schema={schema} />
                 <FormDialog.Footer>
-                  <span style={{ marginLeft: 4 }}>扩展文案</span>
+                  <span
+                    onClick={() => {
+                      dialog.close()
+                    }}
+                    style={{ marginLeft: 4 }}
+                  >
+                    扩展文案
+                  </span>
+                  (点击关闭弹窗)
                 </FormDialog.Footer>
               </FormLayout>
             )
           })
+          dialog
             .forOpen((payload, next) => {
               setTimeout(() => {
                 next({
@@ -218,7 +233,7 @@ export default () => {
   return (
     <Button
       onClick={() => {
-        FormDialog('弹窗表单', () => {
+        const dialog = FormDialog('弹窗表单', () => {
           return (
             <FormLayout labelCol={6} wrapperCol={10}>
               <Field
@@ -250,11 +265,20 @@ export default () => {
                 component={[Input]}
               />
               <FormDialog.Footer>
-                <span style={{ marginLeft: 4 }}>扩展文案</span>
+                <span
+                  onClick={() => {
+                    dialog.close()
+                  }}
+                  style={{ marginLeft: 4 }}
+                >
+                  扩展文案
+                </span>
+                (点击关闭弹窗)
               </FormDialog.Footer>
             </FormLayout>
           )
         })
+        dialog
           .forOpen((payload, next) => {
             setTimeout(() => {
               next({