fix: 优化 formSideSheet & formDialog

Author: prgrmr

packages/components/src/form-dialog/index.tsx

@@ -49,8 +49,14 @@ export interface IFormDialog {
 
 export interface IModalProps
   extends Omit<ModalReactProps, "onOk" | "onCancel"> {
-  onOk?: (e: React.MouseEvent) => void | boolean | Promise<any>;
-  onCancel?: (e: React.MouseEvent) => void | boolean | Promise<any>;
+  getModalProps?: (
+    props: IModalProps & {
+      triggerConfirm?: () => any;
+      triggerCancel?: () => any;
+    }
+  ) => IModalProps;
+  onOk?: (e: any) => void | Promise<any> | boolean;
+  onCancel?: (e: any) => void | Promise<any> | boolean;
   loadingText?: React.ReactNode;
 }
 
@@ -113,6 +119,11 @@ export function FormDialog(title: any, id: any, renderer?: any): IFormDialog {
       {() => (
         <Modal
           {...modal}
+          {...(modal?.getModalProps?.({
+            ...modal,
+            triggerConfirm: resolve,
+            triggerCancel: reject,
+          }) || {})}
           visible={visible}
           confirmLoading={env?.form?.submitting}
           onCancel={(e) => {
@@ -209,7 +220,9 @@ const DialogFooter: React.FC = (props) => {
   const ref = useRef<HTMLDivElement>(null);
   const [footer, setFooter] = useState<HTMLDivElement>();
   const footerRef = useRef<HTMLDivElement>();
-  const prefixCls = usePrefixCls("modal");
+  const prefixCls = usePrefixCls("", {
+    prefixCls: "semi-modal",
+  });
   useLayoutEffect(() => {
     const content = ref.current?.closest(`.${prefixCls}-content`);
     if (content) {

packages/components/src/form-side-sheet/demo/index_2.tsx

@@ -1,60 +1,73 @@
-import React from 'react';
-import { FormSideSheet, FormLayout, Submit, Reset, FormButtonGroup, SchemaRender } from '@formily/semi';
-import { Button } from '@douyinfe/semi-ui';
+import React from "react";
+import {
+  FormSideSheet,
+  FormLayout,
+  Submit,
+  Reset,
+  FormButtonGroup,
+  SchemaRender,
+} from "@formily/semi";
+import { Button } from "@douyinfe/semi-ui";
+import { Form } from "@formily/core";
 
 const schema = {
-  type: 'object',
+  type: "object",
   properties: {
     aaa: {
-      type: 'string',
-      title: '输入框1',
+      type: "string",
+      title: "输入框1",
       required: true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
+      "x-decorator": "FormItem",
+      "x-component": "Input",
     },
     bbb: {
-      type: 'string',
-      title: '输入框2',
+      type: "string",
+      title: "输入框2",
       required: true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
+      "x-decorator": "FormItem",
+      "x-component": "Input",
     },
     ccc: {
-      type: 'string',
-      title: '输入框3',
+      type: "string",
+      title: "输入框3",
       required: true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
+      "x-decorator": "FormItem",
+      "x-component": "Input",
     },
     ddd: {
-      type: 'string',
-      title: '输入框4',
+      type: "string",
+      title: "输入框4",
       required: true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
+      "x-decorator": "FormItem",
+      "x-component": "Input",
     },
   },
 };
 
 export default () => (
   <Button
     onClick={() => {
-      FormSideSheet('弹窗表单', resolve => (
+      FormSideSheet("弹窗表单", (form: Form) => (
         <FormLayout labelCol={6} wrapperCol={10}>
           <SchemaRender schema={schema} />
           <FormSideSheet.Footer>
             <FormButtonGroup align="right">
-              <Submit onClick={resolve}>提交</Submit>
+              <Submit onClick={form.submit}>提交</Submit>
               <Reset>重置</Reset>
             </FormButtonGroup>
           </FormSideSheet.Footer>
         </FormLayout>
       ))
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
+        .forOpen((form, next) => {
+          setTimeout(() => {
+            next({
+              initialValues: {
+                aaa: "123",
+              },
+            });
+          }, 1000);
         })
+        .open()
         .then(console.log);
     }}
   >