ding-react-admin 1.0.4 → 2.0.4

package/src/crud/context/ListContext.tsx

@@ -1,93 +1,93 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactNode,
-} from "react";
-import type { ColumnDefinition } from "../types";
-import { sortPrioritiesFromSpecs } from "../utils/sortQueryParam";
-
-type ListContextValue = {
-  registerColumn: (def: ColumnDefinition<Record<string, unknown>>) => () => void;
-  columns: ColumnDefinition<Record<string, unknown>>[];
-  toggleSort: (field: string) => void;
-  sortFields: Set<string>;
-  sortOrders: Map<string, "ASC" | "DESC">;
-  sortPriorities: Map<string, number>;
-};
-
-const ListContext = createContext<ListContextValue | null>(null);
-
-export function ListContextProvider({
-  children,
-  toggleSort,
-  sort,
-}: {
-  children: ReactNode;
-  toggleSort: (field: string) => void;
-  sort: { field: string; order: "ASC" | "DESC" }[];
-}) {
-  const [columns, setColumns] = useState<
-    ColumnDefinition<Record<string, unknown>>[]
-  >([]);
-
-  const sortFields = useMemo(() => new Set(sort.map((s) => s.field)), [sort]);
-  const sortOrders = useMemo(
-    () => new Map(sort.map((s) => [s.field, s.order])),
-    [sort],
-  );
-  const sortPriorities = useMemo(() => sortPrioritiesFromSpecs(sort), [sort]);
-
-  const registerColumn = useCallback(
-    (def: ColumnDefinition<Record<string, unknown>>) => {
-      setColumns((prev) => {
-        const idx = prev.findIndex((c) => c.key === def.key);
-        if (idx < 0) return [...prev, def];
-        if (prev[idx] === def) return prev;
-        const next = [...prev];
-        next[idx] = def;
-        return next;
-      });
-      return () => {
-        setColumns((prev) => prev.filter((c) => c.key !== def.key));
-      };
-    },
-    [],
-  );
-
-  const value = useMemo(
-    (): ListContextValue => ({
-      columns,
-      toggleSort,
-      sortFields,
-      sortOrders,
-      sortPriorities,
-      registerColumn,
-    }),
-    [columns, toggleSort, sortFields, sortOrders, sortPriorities, registerColumn],
-  );
-
-  return (
-    <ListContext.Provider value={value}>{children}</ListContext.Provider>
-  );
-}
-
-export function useListContext() {
-  const ctx = useContext(ListContext);
-  if (!ctx) {
-    throw new Error("Column components must be used within ResourceList");
-  }
-  return ctx;
-}
-
-export function useRegisterColumn(
-  def: ColumnDefinition<Record<string, unknown>>,
-) {
-  const { registerColumn } = useListContext();
-  useEffect(() => {
-    return registerColumn(def);
-  }, [registerColumn, def]);
-}
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import type { ColumnDefinition } from "../types";
+import { sortPrioritiesFromSpecs } from "../utils/sortQueryParam";
+
+type ListContextValue = {
+  registerColumn: (def: ColumnDefinition<Record<string, unknown>>) => () => void;
+  columns: ColumnDefinition<Record<string, unknown>>[];
+  toggleSort: (field: string) => void;
+  sortFields: Set<string>;
+  sortOrders: Map<string, "ASC" | "DESC">;
+  sortPriorities: Map<string, number>;
+};
+
+const ListContext = createContext<ListContextValue | null>(null);
+
+export function ListContextProvider({
+  children,
+  toggleSort,
+  sort,
+}: {
+  children: ReactNode;
+  toggleSort: (field: string) => void;
+  sort: { field: string; order: "ASC" | "DESC" }[];
+}) {
+  const [columns, setColumns] = useState<
+    ColumnDefinition<Record<string, unknown>>[]
+  >([]);
+
+  const sortFields = useMemo(() => new Set(sort.map((s) => s.field)), [sort]);
+  const sortOrders = useMemo(
+    () => new Map(sort.map((s) => [s.field, s.order])),
+    [sort],
+  );
+  const sortPriorities = useMemo(() => sortPrioritiesFromSpecs(sort), [sort]);
+
+  const registerColumn = useCallback(
+    (def: ColumnDefinition<Record<string, unknown>>) => {
+      setColumns((prev) => {
+        const idx = prev.findIndex((c) => c.key === def.key);
+        if (idx < 0) return [...prev, def];
+        if (prev[idx] === def) return prev;
+        const next = [...prev];
+        next[idx] = def;
+        return next;
+      });
+      return () => {
+        setColumns((prev) => prev.filter((c) => c.key !== def.key));
+      };
+    },
+    [],
+  );
+
+  const value = useMemo(
+    (): ListContextValue => ({
+      columns,
+      toggleSort,
+      sortFields,
+      sortOrders,
+      sortPriorities,
+      registerColumn,
+    }),
+    [columns, toggleSort, sortFields, sortOrders, sortPriorities, registerColumn],
+  );
+
+  return (
+    <ListContext.Provider value={value}>{children}</ListContext.Provider>
+  );
+}
+
+export function useListContext() {
+  const ctx = useContext(ListContext);
+  if (!ctx) {
+    throw new Error("Column components must be used within ResourceList");
+  }
+  return ctx;
+}
+
+export function useRegisterColumn(
+  def: ColumnDefinition<Record<string, unknown>>,
+) {
+  const { registerColumn } = useListContext();
+  useEffect(() => {
+    return registerColumn(def);
+  }, [registerColumn, def]);
+}

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/BooleanField.tsx

@@ -1,38 +1,38 @@
-import { Switch } from "antd";
-import type { BaseSourceProps, FieldRules } from "../types";
-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) {
-  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>
-  );
-}
+import { Switch } from "antd";
+import type { BaseSourceProps, FieldRules } from "../types";
+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) {
+  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>
+  );
+}

package/src/crud/fields/DateField.tsx

@@ -1,53 +1,53 @@
-import { DatePicker } from "antd";
-import dayjs from "dayjs";
-import type { BaseSourceProps, FieldRules } from "../types";
-import { FieldWrapper } from "./FieldWrapper";
-
-const DATE_FORMAT = "YYYY-MM-DD";
-
-export type DateFieldProps = BaseSourceProps & {
-  name?: string;
-  required?: boolean;
-  rules?: FieldRules;
-  showTime?: boolean;
-  hideLabel?: boolean;
-};
-
-export function DateField({
-  source,
-  name,
-  label,
-  required,
-  rules,
-  showTime,
-  hideLabel,
-}: DateFieldProps) {
-  return (
-    <FieldWrapper
-      source={source}
-      name={name}
-      label={label}
-      required={required}
-      rules={rules}
-      hideLabel={hideLabel}
-    >
-      {({ value, onChange, onBlur, disabled }) => (
-        <DatePicker
-          value={value ? dayjs(String(value)) : null}
-          onChange={(d) =>
-            onChange(
-              d
-                ? d.format(showTime ? `${DATE_FORMAT} HH:mm:ss` : DATE_FORMAT)
-                : null,
-            )
-          }
-          onBlur={onBlur}
-          showTime={showTime}
-          disabled={disabled}
-          format={showTime ? `${DATE_FORMAT} HH:mm:ss` : DATE_FORMAT}
-          style={{ width: "100%" }}
-        />
-      )}
-    </FieldWrapper>
-  );
-}
+import { DatePicker } from "antd";
+import dayjs from "dayjs";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { FieldWrapper } from "./FieldWrapper";
+
+const DATE_FORMAT = "YYYY-MM-DD";
+
+export type DateFieldProps = BaseSourceProps & {
+  name?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  showTime?: boolean;
+  hideLabel?: boolean;
+};
+
+export function DateField({
+  source,
+  name,
+  label,
+  required,
+  rules,
+  showTime,
+  hideLabel,
+}: DateFieldProps) {
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, onBlur, disabled }) => (
+        <DatePicker
+          value={value ? dayjs(String(value)) : null}
+          onChange={(d) =>
+            onChange(
+              d
+                ? d.format(showTime ? `${DATE_FORMAT} HH:mm:ss` : DATE_FORMAT)
+                : null,
+            )
+          }
+          onBlur={onBlur}
+          showTime={showTime}
+          disabled={disabled}
+          format={showTime ? `${DATE_FORMAT} HH:mm:ss` : DATE_FORMAT}
+          style={{ width: "100%" }}
+        />
+      )}
+    </FieldWrapper>
+  );
+}

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>
+      )}
+    />
+  );
+}