ding-react-admin 1.0.2 → 2.0.0

package/src/crud/ResourceForm.tsx

@@ -1,32 +1,19 @@
 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 { PayloadFieldsProvider } from "./context/PayloadFieldsContext";
 import {
-  loadInlineRows,
-  saveInlineRows,
-  type InlineFormSetProps,
-} from "./InlineFormSet";
-import { inlineArrayName } from "./utils/inlineArrayName";
-import { parseAndApplyFormErrors } from "./utils/formErrors";
-
-export type ResourceFormInlineConfig = Pick<
-  InlineFormSetProps,
-  "resource" | "foreignKey" | "name"
->;
+  InlineFieldsRegistryProvider,
+  type InlineFieldRegistration,
+} from "./context/InlineFieldsRegistry";
+import { useFormRecordLoad, useFormRecordSave } from "./utils/useFormRecord";
 
 export type ResourceFormProps<T extends FieldValues> = {
   resource: string;
@@ -36,15 +23,16 @@ export type ResourceFormProps<T extends FieldValues> = {
   defaultValues?: Partial<T>;
   onSaved?: (record: T) => void;
   stayOnPage?: boolean;
-  inlines?: ResourceFormInlineConfig[];
   /** Permission strings for create vs edit. Omit to allow all (demos only). */
   permissions?: Pick<ResourcePermissions, "add" | "change">;
 };
 
-function resolveInlineArrayName(config: ResourceFormInlineConfig) {
-  return inlineArrayName(config.resource, config.name);
-}
-
+/**
+ * Create/edit page — standard react-hook-form under the hood.
+ *
+ * Load: one `getOne` → `form.reset(record)` (nested inline arrays included).
+ * Save: one `create` or `update` with parent fields + nested inline rows.
+ */
 export function ResourceForm<T extends FieldValues & { id?: unknown }>({
   resource,
   title,
@@ -53,7 +41,6 @@ export function ResourceForm<T extends FieldValues & { id?: unknown }>({
   defaultValues,
   onSaved,
   stayOnPage,
-  inlines,
   permissions,
 }: ResourceFormProps<T>) {
   const { id } = useParams();
@@ -63,83 +50,37 @@ 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 payloadFieldsRef = useRef(new Set<string>());
+  const inlineRegistryRef = useRef(new Map<string, InlineFieldRegistration>());
 
   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 } = useFormRecordLoad({
+    dp,
+    resource,
+    id,
+    isNew,
+    form,
+    message,
+    defaultValues,
+  });
 
-  useEffect(() => {
-    void load();
-  }, [load]);
+  const onSubmit = useFormRecordSave({
+    dp,
+    resource,
+    id,
+    isNew,
+    form,
+    message,
+    navigate,
+    listPath,
+    payloadFieldsRef,
+    inlineRegistryRef,
+    onSaved,
+    stayOnPage,
+  });
 
   useEffect(() => {
     if (!permissions) return;
@@ -153,74 +94,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 +108,52 @@ 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 />
+        <PayloadFieldsProvider fieldsRef={payloadFieldsRef}>
+          <InlineFieldsRegistryProvider registryRef={inlineRegistryRef}>
+            <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>
-          ) : 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>
+          </InlineFieldsRegistryProvider>
+        </PayloadFieldsProvider>
       </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 { pickBySources } from "./utils/pickBySources";
-import { parseAndApplyFormErrors } from "./utils/formErrors";
+import { PayloadFieldsProvider } from "./context/PayloadFieldsContext";
+import { buildResourceFormSubmitBody } from "./utils/buildResourceFormSubmitBody";
+import { applyApiErrorsToForm } from "./utils/formErrors";
+import { useAbortableEffect } from "./utils/useAbortableEffect";
+import { isAbortError } from "../data/abortError";
 
 export type ResourceFormModalProps = {
   resource: string;
@@ -34,45 +36,55 @@ export function ResourceFormModal({
   const [loading, setLoading] = useState(!isNew);
 
   const form = useForm<FieldValues>();
-  const fieldSourcesRef = useRef(new Set<string>());
+  const payloadFieldsRef = 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(
+      const body = buildResourceFormSubmitBody(
         values as Record<string, unknown>,
-        Array.from(fieldSourcesRef.current),
+        Array.from(payloadFieldsRef.current),
       );
       if (isNew) {
-        await dp.create(resource, payload);
+        await dp.create(resource, body);
         message.success("Created");
       } else if (editId) {
-        await dp.update(resource, { id: editId, data: payload });
+        await dp.update(resource, { id: editId, data: body });
         message.success("Updated");
       }
       onClose();
     } catch (e) {
-      const handled = parseAndApplyFormErrors(dp, form, message, e, {
+      const handled = await applyApiErrorsToForm(dp, form, message, e, {
         resource,
         mutation: isNew ? "create" : "update",
       });
@@ -98,22 +110,22 @@ export function ResourceFormModal({
         <Spin />
       ) : (
         <FormMetaProvider resource={resource} isNew={isNew}>
-          <FormFieldsProvider sourcesRef={fieldSourcesRef}>
-          <FormProvider {...form}>
-            <Form
-              layout="vertical"
-              onFinish={() => void form.handleSubmit(onSubmit)()}
-            >
-              {children}
-              <Form.Item style={{ marginTop: 16, marginBottom: 0 }}>
-                <Button type="primary" htmlType="submit" style={{ marginRight: 8 }}>
-                  Save
-                </Button>
-                <Button onClick={onClose}>Cancel</Button>
-              </Form.Item>
-            </Form>
-          </FormProvider>
-          </FormFieldsProvider>
+          <PayloadFieldsProvider fieldsRef={payloadFieldsRef}>
+            <FormProvider {...form}>
+              <Form
+                layout="vertical"
+                onFinish={() => void form.handleSubmit(onSubmit)()}
+              >
+                {children}
+                <Form.Item style={{ marginTop: 16, marginBottom: 0 }}>
+                  <Button type="primary" htmlType="submit" style={{ marginRight: 8 }}>
+                    Save
+                  </Button>
+                  <Button onClick={onClose}>Cancel</Button>
+                </Form.Item>
+              </Form>
+            </FormProvider>
+          </PayloadFieldsProvider>
         </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 => ({
@@ -517,6 +526,7 @@ function ResourceListTable<T extends Record<string, unknown>>({
           loading={loading}
           columns={tableColumns}
           dataSource={data}
+          scroll={{ x: "max-content" }}
           rowSelection={
             showBulkActions
               ? {

package/src/crud/columns/ImageColumn.tsx

@@ -0,0 +1,58 @@
+import { useMemo, type CSSProperties } from "react";
+import type { BaseSourceProps } from "../types";
+import { useRegisterColumn } from "../context/ListContext";
+
+export type ImageColumnProps = BaseSourceProps & {
+  sortable?: boolean;
+  /** Thumbnail width in pixels. */
+  width?: number;
+  /** Thumbnail height in pixels. */
+  height?: number;
+  objectFit?: CSSProperties["objectFit"];
+  borderRadius?: number;
+  alt?: string;
+};
+
+export function ImageColumn({
+  source,
+  label,
+  sortable = false,
+  width = 40,
+  height = 40,
+  objectFit = "cover",
+  borderRadius = 4,
+  alt = "",
+}: ImageColumnProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      sortable,
+      buildColumn: () => ({
+        title: label ?? source,
+        dataIndex: source,
+        key: source,
+        sorter: sortable ? true : undefined,
+        render: (value: unknown) => {
+          if (value == null || value === "") return null;
+          return (
+            <img
+              src={String(value)}
+              alt={alt}
+              style={{
+                width,
+                height,
+                objectFit,
+                borderRadius,
+              }}
+            />
+          );
+        },
+      }),
+    }),
+    [source, label, sortable, width, height, objectFit, borderRadius, alt],
+  );
+  useRegisterColumn(def);
+  return null;
+}

package/src/crud/columns/TextColumn.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import type { BaseSourceProps } from "../types";
-import { getByPath } from "../utils/getByPath";
+import { getFormValue } from "../utils/getFormValue";
 import { useRegisterColumn } from "../context/ListContext";
 
 export type TextColumnProps = BaseSourceProps & {
@@ -33,6 +33,6 @@ export function renderDisplayValue(
   display?: string | ((record: Record<string, unknown>) => unknown),
 ): unknown {
   if (typeof display === "function") return display(record);
-  if (display) return getByPath(record, display);
+  if (display) return getFormValue(record, display);
   return record[source];
 }