fix: 🐛 ShadowModal button loading state

charlzyx · Aug 23, 2024 · f9354e7 · f9354e7
1 parent 2a22135
commit f9354e7
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 20 deletions.
diff --git a/src/pro-array-table/mixin.pro.tsx b/src/pro-array-table/mixin.pro.tsx
@@ -34,10 +34,10 @@ export const Flex = (
       start?: boolean;
       end?: boolean;
     } & Pick<React.CSSProperties, "marginTop" | "marginBottom">
-  >,
+  >
 ) => {
   const justifyContent = Object.keys(props).find((key) =>
-    justifyContentList.find((prop) => new RegExp(key).test(prop)),
+    justifyContentList.find((prop) => new RegExp(key).test(prop))
   );
 
   return props.hidden ? null : (
@@ -110,7 +110,7 @@ export const RowSelectionPro = (props: {
                   m[i] = true;
                   return m;
                 },
-                {},
+                {}
               );
               const keys: (string | number)[] = [];
               ds.forEach((item) => {
@@ -135,12 +135,12 @@ export interface CommonShadowPopup extends IShadowFormOptions {
   act?: string;
   onCancel?: (
     ctx: ReturnType<typeof useProArrayTableContext>,
-    querylistCtx: ReturnType<typeof useQueryListContext>,
+    querylistCtx: ReturnType<typeof useQueryListContext>
   ) => void | Promise<void>;
   onOk?: (
     data: any,
     ctx: ReturnType<typeof useProArrayTableContext>,
-    querylistCtx: ReturnType<typeof useQueryListContext>,
+    querylistCtx: ReturnType<typeof useQueryListContext>
   ) => void | Promise<void>;
 }
 
@@ -149,7 +149,7 @@ export const ArrayTableShowModal: React.FC<
     CommonShadowPopup
 > = (props) => {
   const { SchemaField, form, schema } = useShadowForm(
-    pick(props, "schema", "schemaFieldOptions", "subFormOptions"),
+    pick(props, "schema", "schemaFieldOptions", "subFormOptions")
   );
   const mySchema = useFieldSchema();
   const act = props.act ?? mySchema.name;
@@ -189,7 +189,6 @@ export const ArrayTableShowModal: React.FC<
       }, 200);
     }).finally(() => {
       pending.current = false;
-      setLoading(false);
     });
   };
 
@@ -201,9 +200,11 @@ export const ArrayTableShowModal: React.FC<
       onCancel={() => {
         if (pending.current) return;
         setLoading(true);
-        return Promise.resolve(props?.onCancel?.(ctx, queryListCtx)).then(() =>
-          reset(),
-        );
+        return Promise.resolve(props?.onCancel?.(ctx, queryListCtx))
+          .then(() => reset())
+          .finally(() => {
+            setLoading(false);
+          });
       }}
       cancelButtonProps={{
         loading,
@@ -218,13 +219,13 @@ export const ArrayTableShowModal: React.FC<
         return form
           .submit()
           .then((data) => {
-            return Promise.resolve(
-              props?.onOk?.(data, ctx, queryListCtx),
-            ).finally(() => {
-              pending.current = false;
-            });
+            return Promise.resolve(props?.onOk?.(data, ctx, queryListCtx));
           })
-          .then(() => reset());
+          .then(() => reset())
+          .finally(() => {
+            pending.current = false;
+            setLoading(false);
+          });
       }}
     >
       <FormProvider form={form}>

diff --git a/src/shadow-form/modal.tsx b/src/shadow-form/modal.tsx
@@ -26,6 +26,7 @@ export const ShadowModal: React.FC<
     const [visible, setVisible] = useState(false);
     const pending = useRef(false);
     const navRef = useRef<HTMLSpanElement>(null);
+    const [loading, setLoading] = useState(false);
 
     const init = (c = 0) => {
       if (!form) {
@@ -42,7 +43,7 @@ export const ShadowModal: React.FC<
         return Promise.resolve(initLoader.current(field.record)).then(
           (init) => {
             form?.setValues(toJS(init || {}));
-          },
+          }
         );
       } else {
         return Promise.resolve(form?.setValues(toJS(field.record)));
@@ -87,19 +88,31 @@ export const ShadowModal: React.FC<
         <Modal
           {...props}
           open={visible}
+          okButtonProps={{
+            loading,
+          }}
+          cancelButtonProps={{ loading }}
           onCancel={(e: any) => {
             if (pending.current) return;
+            setLoading(true);
             return form
               ?.reset()
               .then(() => props?.onCancel?.(e))
-              .then(() => reset());
+              .then(() => reset())
+              .finally(() => {
+                setLoading(false);
+              });
           }}
           onOk={() => {
             if (pending.current) return;
+            setLoading(true);
             return form
               ?.submit()
               .then((data: any) => props?.onOk?.(data))
-              .then(() => reset());
+              .then(() => reset())
+              .finally(() => {
+                setLoading(false);
+              });
           }}
         >
           <FormProvider form={form}>
@@ -122,5 +135,5 @@ export const ShadowModal: React.FC<
         )}
       </React.Fragment>
     );
-  },
+  }
 );