ding-react-admin 1.0.2 → 1.0.4

package/src/crud/utils/useResourceFormData.ts

@@ -0,0 +1,231 @@
+import type { MessageInstance } from "antd/es/message/interface";
+import {
+  useCallback,
+  useState,
+  type MutableRefObject,
+} from "react";
+import type { NavigateFunction } from "react-router-dom";
+import type { DataProvider } from "../../data/dataProviderTypes";
+import { isAbortError } from "../../data/abortError";
+import {
+  type DefaultValues,
+  type FieldValues,
+  type UseFormReturn,
+} from "react-hook-form";
+import {
+  loadInlineRows,
+  saveInlineRows,
+  type InlineFormSetProps,
+} from "../InlineFormSet";
+import { inlineArrayName } from "./inlineArrayName";
+import { pickBySources } from "./pickBySources";
+import { parseAndApplyFormErrors } from "./formErrors";
+import { useAbortableEffect } from "./useAbortableEffect";
+
+export type ResourceFormInlineConfig = Pick<
+  InlineFormSetProps,
+  "resource" | "foreignKey" | "name"
+>;
+
+export function resolveInlineArrayName(config: ResourceFormInlineConfig) {
+  return inlineArrayName(config.resource, config.name);
+}
+
+type LoadOptions<T extends FieldValues> = {
+  dp: DataProvider;
+  resource: string;
+  id: string | undefined;
+  isNew: boolean;
+  form: UseFormReturn<T>;
+  message: MessageInstance;
+  defaultValues?: Partial<T>;
+  inlines?: ResourceFormInlineConfig[];
+};
+
+/** Edit mode: fetch parent (+ inline rows) → form.reset → bump formVersion for field arrays. */
+export function useResourceFormLoad<T extends FieldValues>({
+  dp,
+  resource,
+  id,
+  isNew,
+  form,
+  message,
+  defaultValues,
+  inlines,
+}: LoadOptions<T>) {
+  const [loading, setLoading] = useState(!isNew);
+  const [formVersion, setFormVersion] = useState(0);
+  const [existingInlineIds, setExistingInlineIds] = useState<
+    Record<string, (string | number)[]>
+  >({});
+
+  const load = useCallback(
+    async (signal?: AbortSignal) => {
+      if (isNew || !id) {
+        if (defaultValues) {
+          form.reset({ ...defaultValues } as DefaultValues<T>);
+        }
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      try {
+        const res = await dp.getOne(resource, id, { signal });
+        if (signal?.aborted) return;
+        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;
+          }
+          if (signal?.aborted) return;
+          form.reset(merged);
+          setExistingInlineIds(idsMap);
+          setFormVersion((v) => v + 1);
+        } else {
+          form.reset(record);
+          setFormVersion((v) => v + 1);
+        }
+      } catch (e) {
+        if (!isAbortError(e)) {
+          message.error(e instanceof Error ? e.message : "Load failed");
+        }
+      } finally {
+        if (!signal?.aborted) setLoading(false);
+      }
+    },
+    [dp, resource, id, isNew, form, message, defaultValues, inlines],
+  );
+
+  useAbortableEffect((signal) => load(signal), [load]);
+
+  return { loading, formVersion, existingInlineIds };
+}
+
+type SubmitOptions<T extends FieldValues & { id?: unknown }> = {
+  dp: DataProvider;
+  resource: string;
+  id: string | undefined;
+  isNew: boolean;
+  form: UseFormReturn<T>;
+  message: MessageInstance;
+  navigate: NavigateFunction;
+  listPath: string;
+  submitFieldsRef: MutableRefObject<Set<string>>;
+  inlines?: ResourceFormInlineConfig[];
+  existingInlineIds: Record<string, (string | number)[]>;
+  onSaved?: (record: T) => void;
+  stayOnPage?: boolean;
+};
+
+/** Save: pickBySources → create/update parent → saveInlineRows for each inline config. */
+export function useResourceFormSubmit<T extends FieldValues & { id?: unknown }>({
+  dp,
+  resource,
+  id,
+  isNew,
+  form,
+  message,
+  navigate,
+  listPath,
+  submitFieldsRef,
+  inlines,
+  existingInlineIds,
+  onSaved,
+  stayOnPage,
+}: SubmitOptions<T>) {
+  return useCallback(
+    async (values: T) => {
+      try {
+        const raw = values as Record<string, unknown>;
+        let payload = pickBySources(raw, Array.from(submitFieldsRef.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(
+                      (existingId) => existingId === rowId,
+                    )
+                      ? "update"
+                      : "create",
+                  inlineArrayName: arrayName,
+                  rowIndex: index,
+                });
+              },
+            });
+            if (!inlineOk) return;
+          }
+        }
+
+        onSaved?.(saved);
+        if (!stayOnPage) navigate(listPath);
+      } catch (e) {
+        parseAndApplyFormErrors(dp, form, message, e, {
+          resource,
+          mutation: isNew ? "create" : "update",
+        });
+        message.error(e instanceof Error ? e.message : "Save failed");
+      }
+    },
+    [
+      dp,
+      resource,
+      id,
+      isNew,
+      form,
+      message,
+      navigate,
+      listPath,
+      submitFieldsRef,
+      inlines,
+      existingInlineIds,
+      onSaved,
+      stayOnPage,
+    ],
+  );
+}

package/src/data/abortError.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { isAbortError } from "./abortError";
+
+describe("isAbortError", () => {
+  it("detects DOM AbortError", () => {
+    expect(isAbortError({ name: "AbortError" })).toBe(true);
+  });
+
+  it("detects axios CanceledError", () => {
+    expect(isAbortError({ name: "CanceledError", code: "ERR_CANCELED" })).toBe(
+      true,
+    );
+  });
+
+  it("returns false for ordinary errors", () => {
+    expect(isAbortError(new Error("Network Error"))).toBe(false);
+    expect(isAbortError(null)).toBe(false);
+  });
+});

package/src/data/abortError.ts

@@ -0,0 +1,10 @@
+/** True when a fetch/axios call was aborted via `AbortSignal` (not a real failure). */
+export function isAbortError(error: unknown): boolean {
+  if (error == null || typeof error !== "object") return false;
+  const e = error as { name?: string; code?: string };
+  return (
+    e.name === "AbortError" ||
+    e.name === "CanceledError" ||
+    e.code === "ERR_CANCELED"
+  );
+}

package/src/data/createMemoryResourceHandlers.ts

@@ -48,7 +48,7 @@ export function createMemoryResourceHandlers<
       return applyInMemoryListParams(asRows(base), params) as GetListResult<T>;
     },
 
-    async getOne(id): Promise<GetOneResult<T>> {
+    async getOne(id, _params?): Promise<GetOneResult<T>> {
       return { data: getById(config.getRows(), id) as T };
     },
 

package/src/data/createRestResourceHandlers.ts

@@ -1,11 +1,11 @@
-import type { GetListParams, Identifier } from "./dataProviderTypes";
+import type { GetListParams, GetOneParams, Identifier } from "./dataProviderTypes";
 import type { ResourceHandlers } from "./resourceHandlers";
 
 export type RestResourceHandlersConfig<
   T extends Record<string, unknown> = Record<string, unknown>,
 > = {
   list: (params: GetListParams) => Promise<{ data: T[]; total: number }>;
-  retrieve: (id: Identifier) => Promise<T>;
+  retrieve: (id: Identifier, params?: GetOneParams) => Promise<T>;
   create: (data: Record<string, unknown>) => Promise<T>;
   update: (id: Identifier, data: Record<string, unknown>) => Promise<T>;
   destroy: (id: Identifier) => Promise<void>;
@@ -27,8 +27,8 @@ export function createRestResourceHandlers<
       return config.list(params);
     },
 
-    async getOne(id) {
-      return { data: await config.retrieve(id) };
+    async getOne(id, params) {
+      return { data: await config.retrieve(id, params) };
     },
 
     async create(data) {

package/src/data/dataProviderTypes.ts

@@ -13,12 +13,19 @@ export type PaginationParams = {
   perPage: number;
 };
 
+export type GetOneParams = {
+  /** Forward to fetch/axios to cancel in-flight reads when the UI unmounts or deps change. */
+  signal?: AbortSignal;
+};
+
 export type GetListParams = {
   pagination?: PaginationParams;
   /** Single or multi-column sort. */
   sort?: SortSpec | SortSpec[];
   /** Filter values; arrays mean "match any of" for that field. */
   filter?: Record<string, unknown>;
+  /** Forward to fetch/axios to cancel in-flight reads when the UI unmounts or deps change. */
+  signal?: AbortSignal;
 };
 
 export type GetListResult<RecordType extends Record<string, unknown>> = {
@@ -83,6 +90,7 @@ export type DataProvider<
   getOne: (
     resource: string,
     id: Identifier,
+    params?: GetOneParams,
   ) => Promise<GetOneResult<RecordType>>;
   create: (
     resource: string,

package/src/data/resourceHandlers.ts

@@ -7,6 +7,7 @@ import type {
   DeleteResult,
   GetListParams,
   GetListResult,
+  GetOneParams,
   GetOneResult,
   Identifier,
   ParseFormError,
@@ -27,7 +28,7 @@ export type ResourceHandlers<
   RecordType extends Record<string, unknown> = Record<string, unknown>,
 > = {
   getList: (params: GetListParams) => Promise<GetListResult<RecordType>>;
-  getOne: (id: Identifier) => Promise<GetOneResult<RecordType>>;
+  getOne: (id: Identifier, params?: GetOneParams) => Promise<GetOneResult<RecordType>>;
   create: (data: Partial<RecordType>) => Promise<CreateResult<RecordType>>;
   update: (
     params: UpdateParams<RecordType>,
@@ -95,11 +96,11 @@ export function combineResourceHandlers(
       assertPermission(can, permissions, "list");
       return h.getList(params);
     },
-    async getOne(resource, id) {
+    async getOne(resource, id, params) {
       const { handlers: h, permissions } = resolve(resource);
       guard?.(resource, "read");
       assertPermission(can, permissions, "read");
-      return h.getOne(id);
+      return h.getOne(id, params);
     },
     async create(resource, data) {
       const { handlers: h, permissions } = resolve(resource);

package/src/index.ts

@@ -28,6 +28,7 @@ export type {
   DeleteResult,
   GetListParams,
   GetListResult,
+  GetOneParams,
   GetOneResult,
   Identifier,
   PaginationParams,
@@ -41,6 +42,7 @@ export type {
   ParseFormErrorContext,
 } from "./data/dataProviderTypes";
 export { combineResourceHandlers } from "./data/resourceHandlers";
+export { isAbortError } from "./data/abortError";
 export {
   parseDjangoDRFFormErrors,
   parseDotNetFormErrors,
@@ -118,6 +120,7 @@ export {
   ResourceForm,
   ResourceFormModal,
   InlineFormSet,
+  InlineFormSetStacked,
   FormTabs,
   FormTab,
   FormSteps,
@@ -132,6 +135,7 @@ export {
   PasswordField,
   ReferenceField,
   ReferenceManyField,
+  FieldWrapper,
   TextColumn,
   NumberColumn,
   BooleanColumn,
@@ -148,17 +152,21 @@ export {
   ReferenceManyFilter,
   useListQueryState,
   useChoices,
+  useAbortableEffect,
   getByPath,
   pickBySources,
   inlineArrayName,
+  inlineFieldName,
   useResourceListContext,
-  useRegisterFormSource,
+  useSubmitField,
+  useSectionField,
 } from "./crud";
 export type {
   ResourceFormProps,
   ResourceFormInlineConfig,
   ResourceFormModalProps,
   InlineFormSetProps,
+  InlineFormSetStackedProps,
   FormTabsProps,
   FormTabProps,
   FormStepsProps,
@@ -173,6 +181,11 @@ export type {
   DisplayProps,
   EditMode,
   FieldRules,
+  InlineCellContext,
+  InlineColumnDef,
+  InlineFormSetBaseProps,
+  InlineRowContext,
+  FieldWrapperProps,
   ResourceListBuiltInActions,
   ResourceListBulkAction,
   ResourceListBulkActionHelpers,

package/dist/src/crud/context/FormFieldsContext.d.ts

@@ -1,14 +0,0 @@
-import { MutableRefObject, ReactNode } from 'react';
-type FormFieldsContextValue = {
-    registerSource: (source: string) => () => void;
-    getSources: () => string[];
-};
-export declare function FormFieldsProvider({ children, sourcesRef: externalSourcesRef, }: {
-    children: ReactNode;
-    /** Optional ref shared with submit handler outside this provider. */
-    sourcesRef?: MutableRefObject<Set<string>>;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function useFormFieldsOptional(): FormFieldsContextValue | null;
-export declare function useRegisterFormSource(source: string): void;
-export {};
-//# sourceMappingURL=FormFieldsContext.d.ts.map

package/dist/src/crud/context/FormFieldsContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormFieldsContext.d.ts","sourceRoot":"","sources":["../../../../src/crud/context/FormFieldsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,KAAK,sBAAsB,GAAG;IAC5B,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,IAAI,CAAC;IAC/C,UAAU,EAAE,MAAM,MAAM,EAAE,CAAC;CAC5B,CAAC;AAIF,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,UAAU,EAAE,kBAAkB,GAC/B,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,qEAAqE;IACrE,UAAU,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;CAC5C,2CA6BA;AAED,wBAAgB,qBAAqB,kCAEpC;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,QAcnD"}

package/dist/src/crud/context/InlineFormContext.d.ts

@@ -1,16 +0,0 @@
-import { ReactNode } from 'react';
-import { InlineFieldDefinition } from '../types';
-export type InlineFormSetLayout = "tabular" | "stacked";
-export declare function InlineFormSetProvider({ children, arrayName, layout, }: {
-    children: ReactNode;
-    arrayName: string;
-    layout?: InlineFormSetLayout;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function useInlineFormSetContext(): {
-    fields: InlineFieldDefinition[];
-    registerField: (def: InlineFieldDefinition) => () => void;
-    arrayName: string;
-    layout: InlineFormSetLayout;
-} | null;
-export declare function useRegisterInlineField(def: InlineFieldDefinition): void;
-//# sourceMappingURL=InlineFormContext.d.ts.map

package/dist/src/crud/context/InlineFormContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InlineFormContext.d.ts","sourceRoot":"","sources":["../../../../src/crud/context/InlineFormContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,CAAC;AAWxD,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,SAAS,EACT,MAAkB,GACnB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B,2CAyBA;AAED,wBAAgB,uBAAuB;;mBA3CtB,CAAC,GAAG,EAAE,qBAAqB,KAAK,MAAM,IAAI;eAC9C,MAAM;YACT,mBAAmB;SA8C5B;AAED,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,qBAAqB,QAMhE"}

package/dist/src/crud/fields/useInlineOrFormField.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-import { FieldRenderProps, FieldRules, InlineFieldOptions } from '../types';
-export declare function useInlineOrFormField(source: string, label: string | undefined, required: boolean | undefined, rules: FieldRules | undefined, renderInput: (props: FieldRenderProps) => ReactNode, inlineOptions?: InlineFieldOptions): {
-    mode: "inline";
-    element?: undefined;
-} | {
-    mode: "form";
-    element: import("react/jsx-runtime").JSX.Element;
-};
-//# sourceMappingURL=useInlineOrFormField.d.ts.map

package/dist/src/crud/fields/useInlineOrFormField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useInlineOrFormField.d.ts","sourceRoot":"","sources":["../../../../src/crud/fields/useInlineOrFormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EACV,gBAAgB,EAChB,UAAU,EAEV,kBAAkB,EACnB,MAAM,UAAU,CAAC;AAGlB,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,QAAQ,EAAE,OAAO,GAAG,SAAS,EAC7B,KAAK,EAAE,UAAU,GAAG,SAAS,EAC7B,WAAW,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,SAAS,EACnD,aAAa,CAAC,EAAE,kBAAkB;;;;;;EA0EnC"}

package/src/crud/context/FormFieldsContext.tsx

@@ -1,76 +0,0 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  type MutableRefObject,
-  type ReactNode,
-} from "react";
-import { useFormSectionSourcesOptional } from "./FormSectionContext";
-
-type FormFieldsContextValue = {
-  registerSource: (source: string) => () => void;
-  getSources: () => string[];
-};
-
-const FormFieldsContext = createContext<FormFieldsContextValue | null>(null);
-
-export function FormFieldsProvider({
-  children,
-  sourcesRef: externalSourcesRef,
-}: {
-  children: ReactNode;
-  /** Optional ref shared with submit handler outside this provider. */
-  sourcesRef?: MutableRefObject<Set<string>>;
-}) {
-  const internalSourcesRef = useRef(new Set<string>());
-  const sourcesRef = externalSourcesRef ?? internalSourcesRef;
-
-  const registerSource = useCallback(
-    (source: string) => {
-      sourcesRef.current.add(source);
-      return () => {
-        sourcesRef.current.delete(source);
-      };
-    },
-    [sourcesRef],
-  );
-
-  const getSources = useCallback(
-    () => Array.from(sourcesRef.current),
-    [sourcesRef],
-  );
-
-  const value = useMemo(
-    () => ({ registerSource, getSources }),
-    [registerSource, getSources],
-  );
-
-  return (
-    <FormFieldsContext.Provider value={value}>
-      {children}
-    </FormFieldsContext.Provider>
-  );
-}
-
-export function useFormFieldsOptional() {
-  return useContext(FormFieldsContext);
-}
-
-export function useRegisterFormSource(source: string) {
-  const ctx = useFormFieldsOptional();
-  const registerSource = ctx?.registerSource;
-  const sectionSourcesRef = useFormSectionSourcesOptional();
-
-  useEffect(() => {
-    if (!registerSource) return;
-    const unregister = registerSource(source);
-    sectionSourcesRef?.current.add(source);
-    return () => {
-      unregister();
-      sectionSourcesRef?.current.delete(source);
-    };
-  }, [registerSource, sectionSourcesRef, source]);
-}

package/src/crud/context/InlineFormContext.tsx

@@ -1,71 +0,0 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactNode,
-} from "react";
-import type { InlineFieldDefinition } from "../types";
-
-export type InlineFormSetLayout = "tabular" | "stacked";
-
-type InlineFormSetMeta = {
-  registerField: (def: InlineFieldDefinition) => () => void;
-  arrayName: string;
-  layout: InlineFormSetLayout;
-};
-
-const InlineFormSetMetaContext = createContext<InlineFormSetMeta | null>(null);
-const InlineFormSetFieldsContext = createContext<InlineFieldDefinition[]>([]);
-
-export function InlineFormSetProvider({
-  children,
-  arrayName,
-  layout = "tabular",
-}: {
-  children: ReactNode;
-  arrayName: string;
-  layout?: InlineFormSetLayout;
-}) {
-  const [fields, setFields] = useState<InlineFieldDefinition[]>([]);
-
-  const registerField = useCallback((def: InlineFieldDefinition) => {
-    setFields((prev) => {
-      if (prev.some((f) => f.key === def.key)) return prev;
-      return [...prev, def];
-    });
-    return () => {
-      setFields((prev) => prev.filter((f) => f.key !== def.key));
-    };
-  }, []);
-
-  const meta = useMemo(
-    (): InlineFormSetMeta => ({ arrayName, registerField, layout }),
-    [arrayName, registerField, layout],
-  );
-
-  return (
-    <InlineFormSetMetaContext.Provider value={meta}>
-      <InlineFormSetFieldsContext.Provider value={fields}>
-        {children}
-      </InlineFormSetFieldsContext.Provider>
-    </InlineFormSetMetaContext.Provider>
-  );
-}
-
-export function useInlineFormSetContext() {
-  const meta = useContext(InlineFormSetMetaContext);
-  const fields = useContext(InlineFormSetFieldsContext);
-  if (!meta) return null;
-  return { ...meta, fields };
-}
-
-export function useRegisterInlineField(def: InlineFieldDefinition) {
-  const registerField = useContext(InlineFormSetMetaContext)?.registerField;
-  useEffect(() => {
-    if (!registerField) return;
-    return registerField(def);
-  }, [registerField, def]);
-}