ding-react-admin 1.0.2 → 1.0.4

package/src/crud/ResourceForm.tsx

@@ -1,32 +1,21 @@
 import { ArrowLeftOutlined } from "@ant-design/icons";
 import { App, Button, Card, Form, Space, Spin, Typography, theme } from "antd";
-import {
-  FormProvider,
-  useForm,
-  type DefaultValues,
-  type FieldValues,
-} from "react-hook-form";
-import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { FormProvider, useForm, type DefaultValues, type FieldValues } from "react-hook-form";
+import { useEffect, useRef, type ReactNode } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { useDataProvider } from "../context/DataProvider";
 import { usePermissions } from "../context/PermissionsProvider";
 import type { ResourcePermissions } from "../permissions/resourcePermissions";
 import { checkResourcePermission } from "../permissions/resourcePermissions";
 import { FormMetaProvider } from "./context/FormContext";
-import { FormFieldsProvider } from "./context/FormFieldsContext";
-import { pickBySources } from "./utils/pickBySources";
+import { SubmitFieldsProvider } from "./context/SubmitFieldsContext";
 import {
-  loadInlineRows,
-  saveInlineRows,
-  type InlineFormSetProps,
-} from "./InlineFormSet";
-import { inlineArrayName } from "./utils/inlineArrayName";
-import { parseAndApplyFormErrors } from "./utils/formErrors";
+  useResourceFormLoad,
+  useResourceFormSubmit,
+  type ResourceFormInlineConfig,
+} from "./utils/useResourceFormData";
 
-export type ResourceFormInlineConfig = Pick<
-  InlineFormSetProps,
-  "resource" | "foreignKey" | "name"
->;
+export type { ResourceFormInlineConfig };
 
 export type ResourceFormProps<T extends FieldValues> = {
   resource: string;
@@ -41,10 +30,14 @@ export type ResourceFormProps<T extends FieldValues> = {
   permissions?: Pick<ResourcePermissions, "add" | "change">;
 };
 
-function resolveInlineArrayName(config: ResourceFormInlineConfig) {
-  return inlineArrayName(config.resource, config.name);
-}
-
+/**
+ * Create/edit page shell around react-hook-form.
+ *
+ * Flow:
+ * 1. Load — edit: getOne(parent) + loadInlineRows → form.reset (see useResourceFormLoad)
+ * 2. Edit — children render fields; useSubmitField tracks sources for the API payload
+ * 3. Save — pickBySources → create/update parent → saveInlineRows (see useResourceFormSubmit)
+ */
 export function ResourceForm<T extends FieldValues & { id?: unknown }>({
   resource,
   title,
@@ -63,83 +56,38 @@ export function ResourceForm<T extends FieldValues & { id?: unknown }>({
   const navigate = useNavigate();
   const { message } = App.useApp();
   const { token } = theme.useToken();
-  const [loading, setLoading] = useState(!isNew);
-  const [formVersion, setFormVersion] = useState(0);
-  const [existingInlineIds, setExistingInlineIds] = useState<
-    Record<string, (string | number)[]>
-  >({});
+  const submitFieldsRef = useRef(new Set<string>());
 
   const form = useForm<T>({
     defaultValues: defaultValues as DefaultValues<T>,
   });
-  const fieldSourcesRef = useRef(new Set<string>());
-
-  const loadInlines = useCallback(
-    async (parentId: string | number) => {
-      if (!inlines?.length) return;
-      const idsMap: Record<string, (string | number)[]> = {};
-      for (const cfg of inlines) {
-        const arrayName = resolveInlineArrayName(cfg);
-        const { rows, ids } = await loadInlineRows(
-          dp,
-          cfg.resource,
-          cfg.foreignKey,
-          parentId,
-        );
-        form.setValue(
-          arrayName as never,
-          rows as never,
-        );
-        idsMap[arrayName] = ids;
-      }
-      setExistingInlineIds(idsMap);
-    },
-    [dp, inlines, form],
-  );
 
-  const load = useCallback(async () => {
-    if (isNew || !id) {
-      if (defaultValues) {
-        form.reset({ ...defaultValues } as DefaultValues<T>);
-      }
-      setLoading(false);
-      return;
-    }
-    setLoading(true);
-    try {
-      const res = await dp.getOne(resource, id);
-      const record = res.data as DefaultValues<T>;
-      if (inlines?.length) {
-        const merged = { ...record } as DefaultValues<T>;
-        const idsMap: Record<string, (string | number)[]> = {};
-        for (const cfg of inlines) {
-          const arrayName = resolveInlineArrayName(cfg);
-          const { rows, ids } = await loadInlineRows(
-            dp,
-            cfg.resource,
-            cfg.foreignKey,
-            id,
-          );
-          (merged as Record<string, unknown>)[arrayName] = rows;
-          idsMap[arrayName] = ids;
-        }
-        form.reset(merged);
-        setExistingInlineIds(idsMap);
-        setFormVersion((v) => v + 1);
-      } else {
-        form.reset(record);
-        setFormVersion((v) => v + 1);
-      }
-    } catch (e) {
-      message.error(e instanceof Error ? e.message : "Load failed");
-    } finally {
-      setLoading(false);
-    }
-  }, [dp, resource, id, isNew, form, message, defaultValues, loadInlines]);
+  const { loading, formVersion, existingInlineIds } = useResourceFormLoad({
+    dp,
+    resource,
+    id,
+    isNew,
+    form,
+    message,
+    defaultValues,
+    inlines,
+  });
 
-  useEffect(() => {
-    void load();
-  }, [load]);
+  const onSubmit = useResourceFormSubmit({
+    dp,
+    resource,
+    id,
+    isNew,
+    form,
+    message,
+    navigate,
+    listPath,
+    submitFieldsRef,
+    inlines,
+    existingInlineIds,
+    onSaved,
+    stayOnPage,
+  });
 
   useEffect(() => {
     if (!permissions) return;
@@ -153,74 +101,6 @@ export function ResourceForm<T extends FieldValues & { id?: unknown }>({
     ? checkResourcePermission(can, permissions, isNew ? "add" : "change")
     : true;
 
-  async function onSubmit(values: T) {
-    try {
-      const raw = values as Record<string, unknown>;
-      let payload = pickBySources(raw, Array.from(fieldSourcesRef.current));
-      if (inlines?.length) {
-        for (const cfg of inlines) {
-          delete payload[resolveInlineArrayName(cfg)];
-        }
-      }
-
-      let saved: T;
-      if (isNew) {
-        const res = await dp.create(resource, payload);
-        saved = res.data as T;
-        message.success("Created");
-      } else if (id) {
-        const res = await dp.update(resource, { id, data: payload });
-        saved = res.data as T;
-        message.success("Updated");
-      } else {
-        return;
-      }
-
-      const parentId = saved.id as string | number;
-      if (inlines?.length && parentId != null) {
-        for (const cfg of inlines) {
-          const arrayName = resolveInlineArrayName(cfg);
-          const rows =
-            ((form.getValues(arrayName as never) as unknown) as
-              Record<string, unknown>[] | undefined) ?? [];
-          const inlineOk = await saveInlineRows(dp, {
-            resource: cfg.resource,
-            foreignKey: cfg.foreignKey,
-            parentId,
-            rows,
-            existingIds: existingInlineIds[arrayName] ?? [],
-            onRowError: (e, index) => {
-              const row = rows[index];
-              const rowId = row?.id as string | number | undefined;
-              return parseAndApplyFormErrors(dp, form, message, e, {
-                resource: cfg.resource,
-                mutation:
-                  rowId != null &&
-                  (existingInlineIds[arrayName] ?? []).some((id) => id === rowId)
-                    ? "update"
-                    : "create",
-                inlineArrayName: arrayName,
-                rowIndex: index,
-              });
-            },
-          });
-          if (!inlineOk) return;
-        }
-      }
-
-      onSaved?.(saved);
-      if (!stayOnPage) navigate(listPath);
-    } catch (e) {
-      const handled = parseAndApplyFormErrors(dp, form, message, e, {
-        resource,
-        mutation: isNew ? "create" : "update",
-      });
-      if (!handled) {
-        message.error(e instanceof Error ? e.message : "Save failed");
-      }
-    }
-  }
-
   return (
     <Card
       title={
@@ -235,46 +115,51 @@ export function ResourceForm<T extends FieldValues & { id?: unknown }>({
       }
     >
       <FormMetaProvider resource={resource} isNew={isNew}>
-        <FormFieldsProvider sourcesRef={fieldSourcesRef}>
-        <div style={{ position: "relative" }}>
-          {loading ? (
-            <div
-              style={{
-                position: "absolute",
-                inset: 0,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                zIndex: 1,
-              }}
-            >
-              <Spin />
-            </div>
-          ) : null}
-          <FormProvider {...form} key={formVersion}>
-            <Form
-              layout="vertical"
-              onFinish={() => void form.handleSubmit(onSubmit)()}
-              style={{
-                opacity: loading ? 0.4 : 1,
-                pointerEvents: loading ? "none" : undefined,
-              }}
-            >
-              {children}
-              <Form.Item style={{ marginTop: 16 }}>
-                <Space>
-                  <Button type="primary" htmlType="submit" disabled={loading || !canSave}>
-                    Save
-                  </Button>
-                  <Link to={listPath}>
-                    <Button disabled={loading}>Cancel</Button>
-                  </Link>
-                </Space>
-              </Form.Item>
-            </Form>
-          </FormProvider>
-        </div>
-        </FormFieldsProvider>
+        <SubmitFieldsProvider fieldsRef={submitFieldsRef}>
+          <div style={{ position: "relative" }}>
+            {loading ? (
+              <div
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  zIndex: 1,
+                }}
+              >
+                <Spin />
+              </div>
+            ) : null}
+            {/* formVersion remounts RHF after load so inline field arrays bind correctly */}
+            <FormProvider {...form} key={formVersion}>
+              <Form
+                layout="vertical"
+                onFinish={() => void form.handleSubmit(onSubmit)()}
+                style={{
+                  opacity: loading ? 0.4 : 1,
+                  pointerEvents: loading ? "none" : undefined,
+                }}
+              >
+                {children}
+                <Form.Item style={{ marginTop: 16 }}>
+                  <Space>
+                    <Button
+                      type="primary"
+                      htmlType="submit"
+                      disabled={loading || !canSave}
+                    >
+                      Save
+                    </Button>
+                    <Link to={listPath}>
+                      <Button disabled={loading}>Cancel</Button>
+                    </Link>
+                  </Space>
+                </Form.Item>
+              </Form>
+            </FormProvider>
+          </div>
+        </SubmitFieldsProvider>
       </FormMetaProvider>
     </Card>
   );

package/src/crud/ResourceFormModal.tsx

@@ -5,12 +5,14 @@ import {
   type DefaultValues,
   type FieldValues,
 } from "react-hook-form";
-import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { useCallback, useRef, useState, type ReactNode } from "react";
 import { useDataProvider } from "../context/DataProvider";
 import { FormMetaProvider } from "./context/FormContext";
-import { FormFieldsProvider } from "./context/FormFieldsContext";
+import { SubmitFieldsProvider } from "./context/SubmitFieldsContext";
 import { pickBySources } from "./utils/pickBySources";
 import { parseAndApplyFormErrors } from "./utils/formErrors";
+import { useAbortableEffect } from "./utils/useAbortableEffect";
+import { isAbortError } from "../data/abortError";
 
 export type ResourceFormModalProps = {
   resource: string;
@@ -34,34 +36,44 @@ export function ResourceFormModal({
   const [loading, setLoading] = useState(!isNew);
 
   const form = useForm<FieldValues>();
-  const fieldSourcesRef = useRef(new Set<string>());
+  const submitFieldsRef = useRef(new Set<string>());
 
-  const load = useCallback(async () => {
-    if (isNew || !editId) {
-      form.reset({} as DefaultValues<FieldValues>);
-      setLoading(false);
-      return;
-    }
-    setLoading(true);
-    try {
-      const res = await dp.getOne(resource, editId);
-      form.reset(res.data as DefaultValues<FieldValues>);
-    } catch (e) {
-      message.error(e instanceof Error ? e.message : "Load failed");
-    } finally {
-      setLoading(false);
-    }
-  }, [dp, resource, editId, isNew, form, message]);
+  const load = useCallback(
+    async (signal?: AbortSignal) => {
+      if (isNew || !editId) {
+        form.reset({} as DefaultValues<FieldValues>);
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      try {
+        const res = await dp.getOne(resource, editId, { signal });
+        if (signal?.aborted) return;
+        form.reset(res.data as DefaultValues<FieldValues>);
+      } catch (e) {
+        if (!isAbortError(e)) {
+          message.error(e instanceof Error ? e.message : "Load failed");
+        }
+      } finally {
+        if (!signal?.aborted) setLoading(false);
+      }
+    },
+    [dp, resource, editId, isNew, form, message],
+  );
 
-  useEffect(() => {
-    if (open) void load();
-  }, [open, load]);
+  useAbortableEffect(
+    (signal) => {
+      if (!open) return;
+      return load(signal);
+    },
+    [open, load],
+  );
 
   async function onSubmit(values: FieldValues) {
     try {
       const payload = pickBySources(
         values as Record<string, unknown>,
-        Array.from(fieldSourcesRef.current),
+        Array.from(submitFieldsRef.current),
       );
       if (isNew) {
         await dp.create(resource, payload);
@@ -98,7 +110,7 @@ export function ResourceFormModal({
         <Spin />
       ) : (
         <FormMetaProvider resource={resource} isNew={isNew}>
-          <FormFieldsProvider sourcesRef={fieldSourcesRef}>
+          <SubmitFieldsProvider fieldsRef={submitFieldsRef}>
           <FormProvider {...form}>
             <Form
               layout="vertical"
@@ -113,7 +125,7 @@ export function ResourceFormModal({
               </Form.Item>
             </Form>
           </FormProvider>
-          </FormFieldsProvider>
+          </SubmitFieldsProvider>
         </FormMetaProvider>
       )}
     </Modal>

package/src/crud/ResourceList.tsx

@@ -9,7 +9,6 @@ import {
   createContext,
   useCallback,
   useContext,
-  useEffect,
   useMemo,
   useState,
   type Key,
@@ -32,6 +31,8 @@ import type {
   ResourceListRowActionsHelpers,
 } from "./types";
 import { useListQueryState } from "./utils/useListQueryState";
+import { useAbortableEffect } from "./utils/useAbortableEffect";
+import { isAbortError } from "../data/abortError";
 
 type ResourceListContextValue = {
   filterValues: Record<string, unknown>;
@@ -263,32 +264,40 @@ function ResourceListTable<T extends Record<string, unknown>>({
     [queryActions, queryState.sort.length],
   );
 
-  const load = useCallback(async () => {
-    setLoading(true);
-    try {
-      const sort =
-        queryState.sort.length === 0
-          ? undefined
-          : queryState.sort.length === 1
-            ? queryState.sort[0]
-            : queryState.sort;
-      const res = await dp.getList(resource, {
-        pagination: { page: queryState.page, perPage: queryState.perPage },
-        sort,
-        filter: queryState.filter,
-      });
-      setData(res.data as T[]);
-      setTotal(res.total);
-    } catch (e) {
-      message.error(e instanceof Error ? e.message : "Load failed");
-    } finally {
-      setLoading(false);
-    }
-  }, [dp, resource, queryState, message]);
+  const listParams = useMemo(() => {
+    const sort =
+      queryState.sort.length === 0
+        ? undefined
+        : queryState.sort.length === 1
+          ? queryState.sort[0]
+          : queryState.sort;
+    return {
+      pagination: { page: queryState.page, perPage: queryState.perPage },
+      sort,
+      filter: queryState.filter,
+    };
+  }, [queryState]);
+
+  const load = useCallback(
+    async (signal?: AbortSignal) => {
+      setLoading(true);
+      try {
+        const res = await dp.getList(resource, { ...listParams, signal });
+        if (signal?.aborted) return;
+        setData(res.data as T[]);
+        setTotal(res.total);
+      } catch (e) {
+        if (!isAbortError(e)) {
+          message.error(e instanceof Error ? e.message : "Load failed");
+        }
+      } finally {
+        if (!signal?.aborted) setLoading(false);
+      }
+    },
+    [dp, resource, listParams, message],
+  );
 
-  useEffect(() => {
-    void load();
-  }, [load]);
+  useAbortableEffect((signal) => load(signal), [load]);
 
   const bulkActionHelpers = useMemo(
     (): ResourceListBulkActionHelpers => ({

package/src/crud/context/SubmitFieldsContext.tsx

@@ -0,0 +1,62 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  type MutableRefObject,
+  type ReactNode,
+} from "react";
+import { useFormSectionSourcesOptional } from "./FormSectionContext";
+
+const SubmitFieldsContext =
+  createContext<MutableRefObject<Set<string>> | null>(null);
+
+/** Tracks which top-level field sources are included in the save payload. */
+export function SubmitFieldsProvider({
+  children,
+  fieldsRef,
+}: {
+  children: ReactNode;
+  fieldsRef: MutableRefObject<Set<string>>;
+}) {
+  return (
+    <SubmitFieldsContext.Provider value={fieldsRef}>
+      {children}
+    </SubmitFieldsContext.Provider>
+  );
+}
+
+export function useSubmitFieldsOptional() {
+  return useContext(SubmitFieldsContext);
+}
+
+/**
+ * Remember a field's `source` for submit (`pickBySources`).
+ * Top-level fields only — skip for inline row cells (nested `name` paths).
+ */
+export function useSubmitField(source: string, enabled = true) {
+  const fieldsRef = useSubmitFieldsOptional();
+
+  useEffect(() => {
+    if (!enabled || !fieldsRef) return;
+    fieldsRef.current.add(source);
+    return () => {
+      fieldsRef.current.delete(source);
+    };
+  }, [fieldsRef, source, enabled]);
+}
+
+/**
+ * Remember a field's `source` for tab/step error highlighting.
+ * Top-level fields only — no-op outside FormTabs / FormSteps.
+ */
+export function useSectionField(source: string, enabled = true) {
+  const sectionRef = useFormSectionSourcesOptional();
+
+  useEffect(() => {
+    if (!enabled || !sectionRef) return;
+    sectionRef.current.add(source);
+    return () => {
+      sectionRef.current.delete(source);
+    };
+  }, [sectionRef, source, enabled]);
+}

package/src/crud/fields/BooleanField.tsx

@@ -1,32 +1,38 @@
 import { Switch } from "antd";
 import type { BaseSourceProps, FieldRules } from "../types";
-import { useInlineOrFormField } from "./useInlineOrFormField";
+import { FieldWrapper } from "./FieldWrapper";
 
 export type BooleanFieldProps = BaseSourceProps & {
+  name?: string;
   required?: boolean;
   rules?: FieldRules;
+  hideLabel?: boolean;
 };
 
 export function BooleanField({
   source,
+  name,
   label,
   required,
   rules,
+  hideLabel,
 }: BooleanFieldProps) {
-  const field = useInlineOrFormField(
-    source,
-    label,
-    required,
-    rules,
-    ({ value, onChange, disabled }) => (
-      <Switch
-        checked={Boolean(value)}
-        onChange={onChange}
-        disabled={disabled}
-      />
-    ),
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, disabled }) => (
+        <Switch
+          checked={Boolean(value)}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      )}
+    </FieldWrapper>
   );
-
-  if (field.mode === "inline") return null;
-  return field.element;
 }