ding-react-admin 1.0.4 → 2.0.0

package/src/crud/ResourceFormModal.tsx

@@ -8,9 +8,9 @@ import {
 import { useCallback, useRef, useState, type ReactNode } from "react";
 import { useDataProvider } from "../context/DataProvider";
 import { FormMetaProvider } from "./context/FormContext";
-import { SubmitFieldsProvider } from "./context/SubmitFieldsContext";
-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";
 
@@ -36,7 +36,7 @@ export function ResourceFormModal({
   const [loading, setLoading] = useState(!isNew);
 
   const form = useForm<FieldValues>();
-  const submitFieldsRef = useRef(new Set<string>());
+  const payloadFieldsRef = useRef(new Set<string>());
 
   const load = useCallback(
     async (signal?: AbortSignal) => {
@@ -71,20 +71,20 @@ export function ResourceFormModal({
 
   async function onSubmit(values: FieldValues) {
     try {
-      const payload = pickBySources(
+      const body = buildResourceFormSubmitBody(
         values as Record<string, unknown>,
-        Array.from(submitFieldsRef.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",
       });
@@ -110,22 +110,22 @@ export function ResourceFormModal({
         <Spin />
       ) : (
         <FormMetaProvider resource={resource} isNew={isNew}>
-          <SubmitFieldsProvider fieldsRef={submitFieldsRef}>
-          <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>
-          </SubmitFieldsProvider>
+          <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

@@ -526,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];
 }

package/src/crud/context/InlineFieldsRegistry.tsx

@@ -0,0 +1,61 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  type RefObject,
+  type ReactNode,
+} from "react";
+
+export type InlineFieldRegistration = {
+  field: string;
+  sources: string[];
+  payloadKey?: string;
+  transformRows?: (rows: Record<string, unknown>[]) => unknown;
+};
+
+const InlineFieldsRegistryContext =
+  createContext<RefObject<Map<string, InlineFieldRegistration>> | null>(
+    null,
+  );
+
+export function InlineFieldsRegistryProvider({
+  children,
+  registryRef,
+}: {
+  children: ReactNode;
+  registryRef: RefObject<Map<string, InlineFieldRegistration>>;
+}) {
+  return (
+    <InlineFieldsRegistryContext.Provider value={registryRef}>
+      {children}
+    </InlineFieldsRegistryContext.Provider>
+  );
+}
+
+export function useInlineFieldsRegistryOptional() {
+  return useContext(InlineFieldsRegistryContext);
+}
+
+/** Register an inline field array (`useFieldArray` name) for save payload cleaning. */
+export function useRegisterInlineField(
+  field: string,
+  sources: string[],
+  payloadKey?: string,
+  transformRows?: (rows: Record<string, unknown>[]) => unknown,
+  enabled = true,
+) {
+  const registryRef = useInlineFieldsRegistryOptional();
+
+  useEffect(() => {
+    if (!enabled || !registryRef) return;
+    registryRef.current.set(field, {
+      field,
+      sources,
+      payloadKey,
+      transformRows,
+    });
+    return () => {
+      registryRef.current.delete(field);
+    };
+  }, [registryRef, field, sources, payloadKey, transformRows, enabled]);
+}

package/src/crud/context/PayloadFieldsContext.tsx

@@ -0,0 +1,62 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  type RefObject,
+  type ReactNode,
+} from "react";
+import { useFormSectionSourcesOptional } from "./FormSectionContext";
+
+const PayloadFieldsContext =
+  createContext<RefObject<Set<string>> | null>(null);
+
+/** Tracks which field paths are included in the save payload. */
+export function PayloadFieldsProvider({
+  children,
+  fieldsRef,
+}: {
+  children: ReactNode;
+  fieldsRef: RefObject<Set<string>>;
+}) {
+  return (
+    <PayloadFieldsContext.Provider value={fieldsRef}>
+      {children}
+    </PayloadFieldsContext.Provider>
+  );
+}
+
+export function usePayloadFieldsRefOptional() {
+  return useContext(PayloadFieldsContext);
+}
+
+/**
+ * Register a field path for the save payload (`buildFormPayload`).
+ * Top-level fields use `source`; inline arrays register their `field` name.
+ */
+export function useRegisterPayloadField(fieldPath: string, enabled = true) {
+  const fieldsRef = usePayloadFieldsRefOptional();
+
+  useEffect(() => {
+    if (!enabled || !fieldsRef) return;
+    fieldsRef.current.add(fieldPath);
+    return () => {
+      fieldsRef.current.delete(fieldPath);
+    };
+  }, [fieldsRef, fieldPath, enabled]);
+}
+
+/**
+ * Register a field for tab/step error highlighting.
+ * Top-level fields only — no-op outside FormTabs / FormSteps.
+ */
+export function useRegisterSectionField(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/FieldWrapper.tsx

@@ -1,87 +1,87 @@
-import { Form } from "antd";
-import { Controller, useFormContext, type FieldValues } from "react-hook-form";
-import type { ReactNode } from "react";
-import type { FieldRules } from "../types";
-import { useFormMetaOptional } from "../context/FormContext";
-import {
-  useSectionField,
-  useSubmitField,
-} from "../context/SubmitFieldsContext";
-
-export type FieldWrapperProps = {
-  /** Logical field name — used for submit payload tracking on top-level fields. */
-  source: string;
-  /** Full RHF path. Defaults to `source`. Inline cells pass e.g. `lines.0.label`. */
-  name?: string;
-  label?: string;
-  required?: boolean;
-  rules?: FieldRules;
-  /** Tabular inline cells: column header replaces the label. */
-  hideLabel?: boolean;
-  children: (props: {
-    value: unknown;
-    onChange: (value: unknown) => void;
-    onBlur: () => void;
-    disabled?: boolean;
-    name: string;
-  }) => ReactNode;
-};
-
-export function FieldWrapper({
-  source,
-  name,
-  label,
-  required,
-  rules,
-  hideLabel,
-  children,
-}: FieldWrapperProps) {
-  const fieldName = name ?? source;
-  const isTopLevel = !fieldName.includes(".");
-
-  // react-hook-form: connect this field to the form from <ResourceForm>'s FormProvider.
-  // `control` is passed to <Controller> below so value, onChange, and validation work.
-  const { control } = useFormContext<FieldValues>();
-
-  // ding-react-admin: optional form-wide flags from <FormMetaProvider> (inside ResourceForm).
-  // Used here for `disabled` on inputs (e.g. read-only view mode). Returns null outside a form page.
-  const meta = useFormMetaOptional();
-  const fieldLabel = hideLabel ? undefined : (label ?? source);
-  const requiredMessage = label ?? source;
-
-  // ding-react-admin: remember this `source` so Save sends only fields you rendered in JSX
-  // (see pickBySources in ResourceForm). Skipped for inline row cells — nested `name` paths.
-  useSubmitField(source, isTopLevel);
-
-  // ding-react-admin: group this field with the current FormTab / FormStep for error highlighting
-  // and "jump to first invalid tab" on Save. No-op outside tabs/steps.
-  useSectionField(source, isTopLevel);
-
-  return (
-    <Controller
-      name={fieldName}
-      control={control}
-      rules={{
-        required: required ? `${requiredMessage} is required` : false,
-        ...rules,
-      }}
-      render={({ field, fieldState }) => (
-        <Form.Item
-          label={fieldLabel}
-          validateStatus={fieldState.error ? "error" : undefined}
-          help={fieldState.error?.message}
-          required={required && !hideLabel}
-          style={hideLabel ? { marginBottom: 0 } : undefined}
-        >
-          {children({
-            value: field.value,
-            onChange: field.onChange,
-            onBlur: field.onBlur,
-            disabled: meta?.disabled,
-            name: fieldName,
-          })}
-        </Form.Item>
-      )}
-    />
-  );
-}
+import { Form } from "antd";
+import { Controller, useFormContext, type FieldValues } from "react-hook-form";
+import type { ReactNode } from "react";
+import type { FieldRules } from "../types";
+import { useFormMetaOptional } from "../context/FormContext";
+import {
+  useRegisterPayloadField,
+  useRegisterSectionField,
+} from "../context/PayloadFieldsContext";
+
+export type FieldWrapperProps = {
+  /** Logical field name — used for submit payload tracking on top-level fields. */
+  source: string;
+  /** Full RHF path. Defaults to `source`. Inline cells pass e.g. `lines.0.label`. */
+  name?: string;
+  label?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  /** Tabular inline cells: column header replaces the label. */
+  hideLabel?: boolean;
+  children: (props: {
+    value: unknown;
+    onChange: (value: unknown) => void;
+    onBlur: () => void;
+    disabled?: boolean;
+    name: string;
+  }) => ReactNode;
+};
+
+export function FieldWrapper({
+  source,
+  name,
+  label,
+  required,
+  rules,
+  hideLabel,
+  children,
+}: FieldWrapperProps) {
+  const fieldName = name ?? source;
+  const isTopLevel = !fieldName.includes(".");
+
+  // react-hook-form: connect this field to the form from <ResourceForm>'s FormProvider.
+  // `control` is passed to <Controller> below so value, onChange, and validation work.
+  const { control } = useFormContext<FieldValues>();
+
+  // ding-react-admin: optional form-wide flags from <FormMetaProvider> (inside ResourceForm).
+  // Used here for `disabled` on inputs (e.g. read-only view mode). Returns null outside a form page.
+  const meta = useFormMetaOptional();
+  const fieldLabel = hideLabel ? undefined : (label ?? source);
+  const requiredMessage = label ?? source;
+
+  // Add this field's `source` to the Save payload (ResourceForm → buildFormPayload).
+  // `isTopLevel` is false when `name` contains "." (e.g. inline cell `__inline_lines.0.label`) —
+  // those values live in the inline array and are saved by saveInlineRows, not the parent PATCH.
+  useRegisterPayloadField(source, isTopLevel);
+
+  // Same top-level check: attach this field to the current FormTab / FormStep for error highlighting.
+  useRegisterSectionField(source, isTopLevel);
+
+  return (
+    <Controller
+      name={fieldName}
+      control={control}
+      rules={{
+        required: required ? `${requiredMessage} is required` : false,
+        ...rules,
+      }}
+      render={({ field, fieldState }) => (
+        <Form.Item
+          label={fieldLabel}
+          validateStatus={fieldState.error ? "error" : undefined}
+          help={fieldState.error?.message}
+          required={required && !hideLabel}
+          style={hideLabel ? { marginBottom: 0 } : undefined}
+        >
+          {children({
+            value: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            disabled: meta?.disabled,
+            name: fieldName,
+          })}
+        </Form.Item>
+      )}
+    />
+  );
+}

package/src/crud/fields/FileField.tsx

@@ -0,0 +1,123 @@
+import { DeleteOutlined, PaperClipOutlined, UploadOutlined } from "@ant-design/icons";
+import { Button, Space, Typography } from "antd";
+import { useRef } from "react";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { FieldWrapper } from "./FieldWrapper";
+import {
+  getUploadFileName,
+  hasUploadValue,
+  type UploadFieldValue,
+} from "./uploadFieldUtils";
+
+export type FileFieldProps = BaseSourceProps & {
+  name?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  hideLabel?: boolean;
+  /** Allow clearing an existing or newly selected file. */
+  clearable?: boolean;
+  accept?: string;
+};
+
+function FileFieldInput({
+  value,
+  onChange,
+  disabled,
+  clearable,
+  accept,
+}: {
+  value: UploadFieldValue;
+  onChange: (value: UploadFieldValue) => void;
+  disabled?: boolean;
+  clearable?: boolean;
+  accept?: string;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const fileName = getUploadFileName(value);
+  const existingUrl = typeof value === "string" && value.length > 0 ? value : undefined;
+  const showClear = clearable && hasUploadValue(value);
+
+  return (
+    <Space direction="vertical" size="middle" style={{ width: "100%" }}>
+      {fileName ? (
+        <Space>
+          <PaperClipOutlined />
+          {existingUrl ? (
+            <Typography.Link href={existingUrl} target="_blank" rel="noopener noreferrer">
+              {fileName}
+            </Typography.Link>
+          ) : (
+            <Typography.Text>{fileName}</Typography.Text>
+          )}
+        </Space>
+      ) : null}
+      <Space wrap>
+        <Button
+          icon={<UploadOutlined />}
+          disabled={disabled}
+          onClick={() => inputRef.current?.click()}
+        >
+          Choose file
+        </Button>
+        {showClear ? (
+          <Button
+            icon={<DeleteOutlined />}
+            disabled={disabled}
+            onClick={() => {
+              onChange(null);
+              if (inputRef.current) inputRef.current.value = "";
+            }}
+          >
+            Clear
+          </Button>
+        ) : null}
+      </Space>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        disabled={disabled}
+        tabIndex={-1}
+        aria-hidden
+        style={{ display: "none" }}
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          onChange(file ?? null);
+          e.target.value = "";
+        }}
+      />
+    </Space>
+  );
+}
+
+export function FileField({
+  source,
+  name,
+  label,
+  required,
+  rules,
+  hideLabel,
+  clearable,
+  accept,
+}: FileFieldProps) {
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, disabled }) => (
+        <FileFieldInput
+          value={value as UploadFieldValue}
+          onChange={onChange}
+          disabled={disabled}
+          clearable={clearable}
+          accept={accept}
+        />
+      )}
+    </FieldWrapper>
+  );
+}