feat: Update code

app/js/components/FormDrawer/index.tsx

@@ -23,7 +23,7 @@ type DrawerPicked =
 type FormOmitted = 'title' | 'onError' | 'children';
 type SubmitPicked = 'query' | 'method' | 'notify' | 'normalize' | 'onError' | 'onSuccess' | 'onComplete';
 
-function createFormId(id: string): string {
+function createFormName(id: string): string {
   return `form_${id.replace(/[^a-z_\d]/gi, '')}`;
 }
 
@@ -146,7 +146,7 @@ function FormDrawer<V extends Values, R>({
         extra={extra(submitting, wrapForm, onCloseHandler)}
         footer={footer?.(submitting, wrapForm, onCloseHandler)}
       >
-        <Form {...restProps} layout={layout} form={wrapForm} onFinish={onSubmit} name={name || createFormId(id)}>
+        <Form {...restProps} layout={layout} form={wrapForm} onFinish={onSubmit} name={name || createFormName(id)}>
           {children}
         </Form>
       </FlexDrawer>

app/js/hooks/useAction.tsx

@@ -5,22 +5,32 @@
 import useLatestRef from './useLatestRef';
 import { isObject } from '/js/utils/utils';
 import { TooltipRef } from 'antd/es/tooltip';
-import { Popconfirm, PopconfirmProps } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { GetProp, Popconfirm, PopconfirmProps } from 'antd';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import useSubmit, { Options as UseSubmitOptions, Values } from '/js/hooks/useSubmit';
 
+function createConfirmId(id: string): string {
+  return `confirm_${id.replace(/[^a-z_\d]/gi, '')}`;
+}
+
 export interface Options<V extends Values, R> extends UseSubmitOptions<V, R> {
   delay?: number;
   disabled?: boolean;
-  confirm?: string | Omit<PopconfirmProps, 'open' | 'trigger' | 'disabled' | 'onCancel' | 'onConfirm'>;
+  confirm?: string | ConfirmInit;
+}
+
+interface ConfirmInit extends Omit<PopconfirmProps, 'id' | 'open' | 'trigger' | 'disabled' | 'onCancel' | 'onConfirm'> {
+  okButtonProps?: Omit<GetProp<PopconfirmProps, 'okButtonProps'>, 'loading'>;
 }
 
 export default function useAction<V extends Values, R>(
   action: string,
   options: Options<V, R> = {}
 ): [loading: boolean, onAction: (values: V) => void, render: (children: React.ReactElement) => React.ReactElement] {
+  const id = useId();
   const valuesRef = useRef<V>();
+  const confirmId = createConfirmId(id);
   const [open, setOpen] = useState(false);
   const optionsRef = useLatestRef(options);
   const popconfirmRef = useRef<TooltipRef>(null);
@@ -53,13 +63,21 @@ export default function useAction<V extends Values, R>(
   }, []);
 
   useEffect(() => {
-    const onClick = (event: MouseEvent) => {
+    const onClick = ({ target }: MouseEvent) => {
       const { current: popconfirm } = popconfirmRef;
 
       if (popconfirm) {
         const { nativeElement } = popconfirm;
-
-        if (!nativeElement.contains(event.target as Node)) {
+        const confirm = document.getElementById(confirmId);
+
+        if (
+          !(
+            confirm === target ||
+            nativeElement === target ||
+            confirm?.contains(target as Node) ||
+            nativeElement?.contains(target as Node)
+          )
+        ) {
           setOpen(false);
         }
       }
@@ -87,10 +105,12 @@ export default function useAction<V extends Values, R>(
           {...props}
           open={open}
           trigger={[]}
-          ref={popconfirmRef}
+          id={confirmId}
           disabled={disabled}
           onCancel={onCancel}
+          ref={popconfirmRef}
           onConfirm={onConfirm}
+          okButtonProps={{ ...props.okButtonProps, loading }}
         >
           {children}
         </Popconfirm>

package.json

@@ -38,7 +38,7 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-nest-router": "^0.19.17",
-    "throttle-debounce": "^5.0.0"
+    "throttle-debounce": "^5.0.2"
   },
   "devDependencies": {
     "@nuintun/svgo-loader": "^0.2.9",
@@ -53,7 +53,7 @@
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "7.0.0",
-    "css-modules-types-loader": "^0.5.8",
+    "css-modules-types-loader": "^0.5.9",
     "find-free-ports": "^3.1.1",
     "html-webpack-plugin": "^5.6.0",
     "lightningcss": "^1.25.1",