ding-react-admin 1.0.2 → 2.0.0

package/src/crud/fields/TextField.tsx

@@ -1,44 +1,46 @@
 import { Input } from "antd";
 import type { CSSProperties } from "react";
-import type { BaseSourceProps, FieldRules, InlineFieldOptions } from "../types";
-import { useInlineOrFormField } from "./useInlineOrFormField";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { FieldWrapper } from "./FieldWrapper";
 
-export type TextFieldProps = BaseSourceProps &
-  InlineFieldOptions & {
-    required?: boolean;
-    rules?: FieldRules;
-    placeholder?: string;
-    inputStyle?: CSSProperties;
-  };
+export type TextFieldProps = BaseSourceProps & {
+  name?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  placeholder?: string;
+  inputStyle?: CSSProperties;
+  hideLabel?: boolean;
+};
 
 export function TextField({
   source,
+  name,
   label,
   required,
   rules,
   placeholder,
-  width: inlineWidth,
-  minWidth: inlineMinWidth,
   inputStyle,
+  hideLabel,
 }: TextFieldProps) {
-  const field = useInlineOrFormField(
-    source,
-    label,
-    required,
-    rules,
-    ({ value, onChange, onBlur, disabled }) => (
-      <Input
-        value={value as string | undefined}
-        onChange={(e) => onChange(e.target.value)}
-        onBlur={onBlur}
-        placeholder={placeholder}
-        disabled={disabled}
-        style={inputStyle}
-      />
-    ),
-    { width: inlineWidth, minWidth: inlineMinWidth },
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, onBlur, disabled }) => (
+        <Input
+          value={value as string | undefined}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={onBlur}
+          placeholder={placeholder}
+          disabled={disabled}
+          style={inputStyle}
+        />
+      )}
+    </FieldWrapper>
   );
-
-  if (field.mode === "inline") return null;
-  return field.element;
 }

package/src/crud/fields/uploadFieldUtils.ts

@@ -0,0 +1,21 @@
+/** Form value for file/image fields — backend-agnostic. */
+export type UploadFieldValue = File | string | null | undefined;
+
+export function hasUploadValue(value: UploadFieldValue): boolean {
+  if (value instanceof File) return true;
+  return typeof value === "string" && value.length > 0;
+}
+
+export function getUploadFileName(value: UploadFieldValue): string | undefined {
+  if (value instanceof File) return value.name;
+  if (typeof value === "string" && value.length > 0) {
+    try {
+      const pathname = new URL(value, "http://local").pathname;
+      const name = pathname.split("/").filter(Boolean).pop();
+      return name || value;
+    } catch {
+      return value.split("/").filter(Boolean).pop() || value;
+    }
+  }
+  return undefined;
+}

package/src/crud/fields/useUploadPreviewUrl.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+import type { UploadFieldValue } from "./uploadFieldUtils";
+
+/** Preview URL for uploads — `URL.createObjectURL` for `File`, direct URL for existing strings. */
+export function useUploadPreviewUrl(value: UploadFieldValue): string | undefined {
+  const [objectUrl, setObjectUrl] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (value instanceof File) {
+      const url = URL.createObjectURL(value);
+      setObjectUrl(url);
+      return () => URL.revokeObjectURL(url);
+    }
+    setObjectUrl(undefined);
+  }, [value]);
+
+  if (value instanceof File) return objectUrl;
+  if (typeof value === "string" && value.length > 0) return value;
+  return undefined;
+}

package/src/crud/index.ts

@@ -2,18 +2,15 @@ export { ResourceList, useResourceListContext } from "./ResourceList";
 export type { ResourceListProps } from "./ResourceList";
 export { FilterBar } from "./FilterBar";
 export { ResourceForm } from "./ResourceForm";
-export type {
-  ResourceFormProps,
-  ResourceFormInlineConfig,
-} from "./ResourceForm";
+export type { ResourceFormProps } from "./ResourceForm";
 export { ResourceFormModal } from "./ResourceFormModal";
 export type { ResourceFormModalProps } from "./ResourceFormModal";
-export {
-  InlineFormSet,
-  saveInlineRows,
-  loadInlineRows,
+export { InlineFormSet, InlineFormSetStacked } from "./InlineFormSet";
+export type {
+  InlineFormSetProps,
+  InlineFormSetStackedProps,
+  InlineFormSetLayout,
 } from "./InlineFormSet";
-export type { InlineFormSetProps, SaveInlineOptions, InlineFormSetLayout } from "./InlineFormSet";
 export { FormTabs, FormTab } from "./FormTabs";
 export type { FormTabsProps, FormTabProps } from "./FormTabs";
 export { FormSteps, FormStep } from "./FormSteps";
@@ -27,6 +24,13 @@ export { SelectField } from "./fields/SelectField";
 export { PasswordField } from "./fields/PasswordField";
 export { ReferenceField } from "./fields/ReferenceField";
 export { ReferenceManyField } from "./fields/ReferenceManyField";
+export { ImageField } from "./fields/ImageField";
+export { FileField } from "./fields/FileField";
+export { FieldWrapper } from "./fields/FieldWrapper";
+export type { FieldWrapperProps } from "./fields/FieldWrapper";
+export type { ImageFieldProps } from "./fields/ImageField";
+export type { FileFieldProps } from "./fields/FileField";
+export type { UploadFieldValue } from "./fields/uploadFieldUtils";
 
 export { TextColumn } from "./columns/TextColumn";
 export { NumberColumn } from "./columns/NumberColumn";
@@ -34,6 +38,7 @@ export { BooleanColumn } from "./columns/BooleanColumn";
 export { DateColumn } from "./columns/DateColumn";
 export { ReferenceColumn } from "./columns/ReferenceColumn";
 export { ReferenceManyColumn } from "./columns/ReferenceManyColumn";
+export { ImageColumn } from "./columns/ImageColumn";
 export { CustomColumn } from "./columns/CustomColumn";
 
 export { TextFilter } from "./filters/TextFilter";
@@ -47,16 +52,28 @@ export {
 } from "./filters/ReferenceFilter";
 
 export { useListQueryState } from "./utils/useListQueryState";
+export { useAbortableEffect } from "./utils/useAbortableEffect";
 export type {
   ListQueryState,
   ListQueryActions,
 } from "./utils/useListQueryState";
 export { useChoices } from "./utils/useChoices";
-export { getByPath } from "./utils/getByPath";
-export { pickBySources } from "./utils/pickBySources";
-export { inlineArrayName } from "./utils/inlineArrayName";
-export { setByPath } from "./utils/setByPath";
-export { useRegisterFormSource } from "./context/FormFieldsContext";
+export { getFormValue } from "./utils/getFormValue";
+export { setFormValue } from "./utils/setFormValue";
+export { buildFormPayload } from "./utils/buildFormPayload";
+export { buildInlineRowsPayload } from "./utils/buildInlineRowsPayload";
+export { buildResourceFormSubmitBody } from "./utils/buildResourceFormSubmitBody";
+export { prepareFormSubmitBody } from "./utils/prepareFormSubmitBody";
+export { toFormData } from "./utils/toFormData";
+export { hasUploadValues } from "./utils/hasUploadValues";
+export type { ToFormDataOptions } from "./utils/toFormData";
+export type { PrepareFormSubmitBodyOptions } from "./utils/prepareFormSubmitBody";
+export { nestedFieldPath } from "./utils/nestedFieldPath";
+export {
+  useRegisterPayloadField,
+  useRegisterSectionField,
+} from "./context/PayloadFieldsContext";
+export type { InlineFieldRegistration } from "./context/InlineFieldsRegistry";
 
 export type {
   BaseSourceProps,
@@ -66,6 +83,10 @@ export type {
   DisplayProps,
   EditMode,
   FieldRules,
+  InlineCellContext,
+  InlineColumnDef,
+  InlineFormSetBaseProps,
+  InlineRowContext,
   ResourceListBuiltInActions,
   ResourceListBulkAction,
   ResourceListBulkActionHelpers,

package/src/crud/types.ts

@@ -1,130 +1,134 @@
-import type { ReactNode } from "react";
-import type { ColumnsType } from "antd/es/table";
-import type { DataProvider } from "../data/dataProviderTypes";
-import type { RegisterOptions } from "react-hook-form";
-
-export type BaseSourceProps = {
-  source: string;
-  label?: string;
-};
-
-export type ChoiceOption = {
-  label: string;
-  value: unknown;
-  /** Full record when loaded from a reference resource (for dependent fields). */
-  record?: Record<string, unknown>;
-};
-
-export type ChoicesContext = {
-  dataProvider: DataProvider;
-  search?: string;
-};
-
-export type ChoicesLoader =
-  | { resource: string; filter?: Record<string, unknown> }
-  | ChoiceOption[]
-  | ((ctx: ChoicesContext) => Promise<ChoiceOption[]>);
-
-export type ReferenceProps = {
-  reference?: string;
-  choices?: ChoicesLoader;
-  optionLabel?: string | ((record: Record<string, unknown>) => string);
-  optionValue?: string;
-};
-
-export type DisplayProps = {
-  display?: string | ((record: Record<string, unknown>) => ReactNode);
-};
-
-export type FieldRules = RegisterOptions;
-
-export type ColumnDefinition<T extends Record<string, unknown>> = {
-  key: string;
-  source: string;
-  label?: string;
-  sortable?: boolean;
-  buildColumn: () => ColumnsType<T>[number];
-};
-
-export type FilterDefinition = {
-  key: string;
-  source: string;
-  label?: string;
-  render: (props: {
-    value: unknown;
-    onChange: (value: unknown) => void;
-  }) => ReactNode;
-};
-
-export type InlineFieldDefinition = {
-  key: string;
-  source: string;
-  label?: string;
-  /** Column width in tabular inline tables (Ant Design Table `width`). */
-  width?: number | string;
-  /** Minimum column width in tabular inline tables. */
-  minWidth?: number | string;
-  render: (props: {
-    name: string;
-    index: number;
-  }) => ReactNode;
-};
-
-export type InlineFieldOptions = {
-  width?: number | string;
-  minWidth?: number | string;
-};
-
-export type FieldRenderProps = {
-  value: unknown;
-  onChange: (value: unknown) => void;
-  onBlur: () => void;
-  disabled?: boolean;
-  /** Set when rendered inside `InlineFormSet`. */
-  name?: string;
-  index?: number;
-};
-
-export type EditMode = "page" | "modal" | "both";
-
-/** Toggle built-in row actions. Omitted keys default to `true` (still gated by permissions). */
-export type ResourceListBuiltInActions = {
-  edit?: boolean;
-  quickEdit?: boolean;
-  delete?: boolean;
-};
-
-export type ResourceListRowActionsHelpers = {
-  reload: () => void;
-  openEditModal: (id: string | number) => void;
-};
-
-export type ResourceListBulkActionHelpers = {
-  reload: () => void;
-  clearSelection: () => void;
-};
-
-/** Bulk list action (Django admin–style). Runs on selected row ids. */
-export type ResourceListBulkAction = {
-  key: string;
-  label: string;
-  /** Optional confirmation message. Return false to cancel. */
-  confirm?:
-    | string
-    | ((
-        selectedIds: (string | number)[],
-        helpers: ResourceListBulkActionHelpers,
-      ) => string | false | Promise<string | false>);
-  execute: (
-    selectedIds: (string | number)[],
-    helpers: ResourceListBulkActionHelpers,
-  ) => void | Promise<void>;
-};
-
-export const LIST_QUERY_RESERVED = new Set([
-  "page",
-  "perPage",
-  "sort",
-  "create",
-  "edit",
-]);
+import type { ReactNode } from "react";
+import type { ColumnsType } from "antd/es/table";
+import type { DataProvider } from "../data/dataProviderTypes";
+import type { RegisterOptions } from "react-hook-form";
+
+export type BaseSourceProps = {
+  source: string;
+  label?: string;
+};
+
+export type ChoiceOption = {
+  label: string;
+  value: unknown;
+  /** Full record when loaded from a reference resource (for dependent fields). */
+  record?: Record<string, unknown>;
+};
+
+export type ChoicesContext = {
+  dataProvider: DataProvider;
+  search?: string;
+};
+
+export type ChoicesLoader =
+  | { resource: string; filter?: Record<string, unknown> }
+  | ChoiceOption[]
+  | ((ctx: ChoicesContext) => Promise<ChoiceOption[]>);
+
+export type ReferenceProps = {
+  reference?: string;
+  choices?: ChoicesLoader;
+  optionLabel?: string | ((record: Record<string, unknown>) => string);
+  optionValue?: string;
+};
+
+export type DisplayProps = {
+  display?: string | ((record: Record<string, unknown>) => ReactNode);
+};
+
+export type FieldRules = RegisterOptions;
+
+export type ColumnDefinition<T extends Record<string, unknown>> = {
+  key: string;
+  source: string;
+  label?: string;
+  sortable?: boolean;
+  buildColumn: () => ColumnsType<T>[number];
+};
+
+export type FilterDefinition = {
+  key: string;
+  source: string;
+  label?: string;
+  render: (props: {
+    value: unknown;
+    onChange: (value: unknown) => void;
+  }) => ReactNode;
+};
+
+export type InlineFormSetBaseProps = {
+  /** RHF `useFieldArray` name and default API nested key, e.g. `"lines"`. */
+  field: string;
+  label?: string;
+  /** API key when different from `field`. */
+  payloadKey?: string;
+  transformRows?: (rows: Record<string, unknown>[]) => unknown;
+};
+
+/** Passed to each tabular inline column's `cell` renderer. */
+export type InlineCellContext = {
+  /** Full RHF path, e.g. `lines.0.label`. */
+  name: string;
+  index: number;
+  field: string;
+};
+
+export type InlineColumnDef = {
+  source: string;
+  label?: string;
+  width?: number | string;
+  minWidth?: number | string;
+  cell: (ctx: InlineCellContext) => ReactNode;
+};
+
+/** Passed to `InlineFormSetStacked`'s `renderRow` for one related row. */
+export type InlineRowContext = {
+  field: string;
+  index: number;
+  /** RHF path helper — `name("label")` → `field.index.label`. */
+  name: (source: string) => string;
+};
+
+export type EditMode = "page" | "modal" | "both";
+
+/** Toggle built-in row actions. Omitted keys default to `true` (still gated by permissions). */
+export type ResourceListBuiltInActions = {
+  edit?: boolean;
+  quickEdit?: boolean;
+  delete?: boolean;
+};
+
+export type ResourceListRowActionsHelpers = {
+  reload: () => void;
+  openEditModal: (id: string | number) => void;
+};
+
+export type ResourceListBulkActionHelpers = {
+  reload: () => void;
+  clearSelection: () => void;
+};
+
+/** Bulk list action (Django admin–style). Runs on selected row ids. */
+export type ResourceListBulkAction = {
+  key: string;
+  label: string;
+  /** Optional confirmation message. Return false to cancel. */
+  confirm?:
+    | string
+    | ((
+        selectedIds: (string | number)[],
+        helpers: ResourceListBulkActionHelpers,
+      ) => string | false | Promise<string | false>);
+  execute: (
+    selectedIds: (string | number)[],
+    helpers: ResourceListBulkActionHelpers,
+  ) => void | Promise<void>;
+};
+
+export const LIST_QUERY_RESERVED = new Set([
+  "page",
+  "perPage",
+  "sort",
+  "create",
+  "edit",
+]);

package/src/crud/utils/buildFormPayload.ts

@@ -0,0 +1,24 @@
+import { getFormValue } from "./getFormValue";
+import { setFormValue } from "./setFormValue";
+
+/**
+ * Build the API save body from form values using registered field paths.
+ * Flat `email` → `{ email }`; nested `address.city` → `{ address: { city } }`.
+ */
+export function buildFormPayload(
+  values: Record<string, unknown>,
+  fieldPaths: string[],
+): Record<string, unknown> {
+  if (fieldPaths.length === 0) {
+    return { ...values };
+  }
+
+  const result: Record<string, unknown> = {};
+  for (const path of fieldPaths) {
+    const value = getFormValue(values, path);
+    if (value !== undefined) {
+      setFormValue(result, path, value);
+    }
+  }
+  return result;
+}

package/src/crud/utils/buildInlineRowsPayload.ts

@@ -0,0 +1,37 @@
+export type BuildInlineRowsPayloadOptions = {
+  transformRows?: (rows: Record<string, unknown>[]) => unknown;
+};
+
+/** Clean inline field-array rows for the API (strip RHF `rowKey`, keep record `id`). */
+export function buildInlineRowsPayload(
+  rows: unknown,
+  sources: string[],
+  options?: BuildInlineRowsPayloadOptions,
+): unknown {
+  if (!Array.isArray(rows)) return [];
+
+  const cleaned = rows.map((row) => {
+    if (!row || typeof row !== "object") return {};
+    const record = row as Record<string, unknown>;
+    const out: Record<string, unknown> = {};
+
+    for (const source of sources) {
+      const value = record[source];
+      if (value !== undefined) {
+        out[source] = value;
+      }
+    }
+
+    const id = record.id;
+    if (id !== undefined && id !== null) {
+      out.id = id;
+    }
+
+    return out;
+  });
+
+  if (options?.transformRows) {
+    return options.transformRows(cleaned);
+  }
+  return cleaned;
+}

package/src/crud/utils/buildResourceFormSubmitBody.ts

@@ -0,0 +1,29 @@
+import type { InlineFieldRegistration } from "../context/InlineFieldsRegistry";
+import { buildFormPayload } from "./buildFormPayload";
+import { buildInlineRowsPayload } from "./buildInlineRowsPayload";
+import {
+  prepareFormSubmitBody,
+  type PrepareFormSubmitBodyOptions,
+} from "./prepareFormSubmitBody";
+
+/** Build the create/update body from form values, auto-switching to multipart when needed. */
+export function buildResourceFormSubmitBody(
+  raw: Record<string, unknown>,
+  payloadFieldPaths: string[],
+  inlineRegistry?: Iterable<InlineFieldRegistration>,
+  options?: PrepareFormSubmitBodyOptions,
+): Record<string, unknown> | FormData {
+  const payload = buildFormPayload(raw, payloadFieldPaths);
+
+  if (inlineRegistry) {
+    for (const inline of inlineRegistry) {
+      const rows = raw[inline.field];
+      const key = inline.payloadKey ?? inline.field;
+      payload[key] = buildInlineRowsPayload(rows, inline.sources, {
+        transformRows: inline.transformRows,
+      });
+    }
+  }
+
+  return prepareFormSubmitBody(payload, options);
+}

package/src/crud/utils/formErrors.ts

@@ -1,38 +1,42 @@
-import type { MessageInstance } from "antd/es/message/interface";
-import type { FieldPath, FieldValues, UseFormReturn } from "react-hook-form";
-import type { DataProvider, ParseFormErrorContext } from "../../data/dataProviderTypes";
-
-function toMessages(value: string | string[] | undefined): string[] {
-  if (!value) return [];
-  return Array.isArray(value) ? value : [value];
-}
-
-export function applyFormErrors<T extends FieldValues>(
-  form: UseFormReturn<T>,
-  parsed: { fields?: Record<string, string | string[]>; global?: string | string[] },
-  message: MessageInstance,
-) {
-  for (const msg of toMessages(parsed.global)) {
-    message.error(msg);
-  }
-  for (const [path, msg] of Object.entries(parsed.fields ?? {})) {
-    const text = Array.isArray(msg) ? msg.join(", ") : msg;
-    form.setError(path as FieldPath<T>, { type: "server", message: text });
-  }
-}
-
-export function parseAndApplyFormErrors<T extends FieldValues>(
-  dp: DataProvider,
-  form: UseFormReturn<T>,
-  message: MessageInstance,
-  error: unknown,
-  context: ParseFormErrorContext,
-): boolean {
-  const parsed = dp.parseFormError?.(error, context);
-  if (!parsed) return false;
-  const hasFields = Object.keys(parsed.fields ?? {}).length > 0;
-  const hasGlobal = toMessages(parsed.global).length > 0;
-  if (!hasFields && !hasGlobal) return false;
-  applyFormErrors(form, parsed, message);
-  return true;
-}
+import type { MessageInstance } from "antd/es/message/interface";
+import type { FieldPath, FieldValues, UseFormReturn } from "react-hook-form";
+import type { DataProvider, ParseFormErrorContext } from "../../data/dataProviderTypes";
+import { resolveErrorBody } from "../../data/parseFormErrorHelpers";
+
+function toMessages(value: string | string[] | undefined): string[] {
+  if (!value) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+export function applyFormErrors<T extends FieldValues>(
+  form: UseFormReturn<T>,
+  parsed: { fields?: Record<string, string | string[]>; global?: string | string[] },
+  message: MessageInstance,
+) {
+  for (const msg of toMessages(parsed.global)) {
+    message.error(msg);
+  }
+  for (const [path, msg] of Object.entries(parsed.fields ?? {})) {
+    const text = Array.isArray(msg) ? msg.join(", ") : msg;
+    form.setError(path as FieldPath<T>, { type: "server", message: text });
+  }
+}
+
+export async function applyApiErrorsToForm<T extends FieldValues>(
+  dp: DataProvider,
+  form: UseFormReturn<T>,
+  message: MessageInstance,
+  error: unknown,
+  context: ParseFormErrorContext,
+): Promise<boolean> {
+  const body = await resolveErrorBody(error);
+  const normalizedError = body != null ? { body } : error;
+  const parsed = dp.parseFormError?.(normalizedError, context);
+  if (!parsed) return false;
+  const hasFields = Object.keys(parsed.fields ?? {}).length > 0;
+  const hasGlobal = toMessages(parsed.global).length > 0;
+  if (!hasFields && !hasGlobal) return false;
+  applyFormErrors(form, parsed, message);
+  return true;
+}
+

package/src/crud/utils/{getByPath.ts → getFormValue.ts}

@@ -1,5 +1,5 @@
-/** Read nested value from a record using dot notation, e.g. `brand.name`. */
-export function getByPath(
+/** Read a nested value from form values or a record, e.g. `lines.0.label`. */
+export function getFormValue(
   record: Record<string, unknown>,
   path: string,
 ): unknown {