ding-react-admin 1.0.2 → 1.0.4

package/src/crud/fields/DateField.tsx

@@ -1,47 +1,53 @@
 import { DatePicker } from "antd";
 import dayjs from "dayjs";
 import type { BaseSourceProps, FieldRules } from "../types";
-import { useInlineOrFormField } from "./useInlineOrFormField";
+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) {
-  const field = useInlineOrFormField(
-    source,
-    label,
-    required,
-    rules,
-    ({ 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%" }}
-      />
-    ),
+  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>
   );
-
-  if (field.mode === "inline") return null;
-  return field.element;
 }

package/src/crud/fields/FieldWrapper.tsx

@@ -3,87 +3,63 @@ 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 { useRegisterFormSource } from "../context/FormFieldsContext";
+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 = label ?? source;
-  useRegisterFormSource(source);
+  const fieldLabel = hideLabel ? undefined : (label ?? source);
+  const requiredMessage = label ?? source;
 
-  return (
-    <Controller
-      name={source}
-      control={control}
-      rules={{
-        required: required ? `${fieldLabel} is required` : false,
-        ...rules,
-      }}
-      render={({ field, fieldState }) => (
-        <Form.Item
-          label={fieldLabel}
-          validateStatus={fieldState.error ? "error" : undefined}
-          help={fieldState.error?.message}
-          required={required}
-        >
-          {children({
-            value: field.value,
-            onChange: field.onChange,
-            onBlur: field.onBlur,
-            disabled: meta?.disabled,
-          })}
-        </Form.Item>
-      )}
-    />
-  );
-}
+  // 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);
 
-export function InlineFieldWrapper({
-  name,
-  label,
-  required,
-  rules,
-  hideLabel,
-  children,
-}: {
-  name: string;
-  label?: string;
-  required?: boolean;
-  rules?: FieldRules;
-  /** Tabular inlines use column headers — suppress per-cell labels. */
-  hideLabel?: boolean;
-  children: (props: {
-    value: unknown;
-    onChange: (value: unknown) => void;
-    onBlur: () => void;
-  }) => ReactNode;
-}) {
-  const { control } = useFormContext<FieldValues>();
-  const fieldLabel = hideLabel ? undefined : label;
-  const requiredMessage = label ?? "This field";
+  // 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={name}
+      name={fieldName}
       control={control}
       rules={{
         required: required ? `${requiredMessage} is required` : false,
@@ -95,12 +71,14 @@ export function InlineFieldWrapper({
           validateStatus={fieldState.error ? "error" : undefined}
           help={fieldState.error?.message}
           required={required && !hideLabel}
-          style={{ marginBottom: 0 }}
+          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/NumberField.tsx

@@ -1,50 +1,52 @@
 import { InputNumber } 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 NumberFieldProps = BaseSourceProps &
-  InlineFieldOptions & {
-    required?: boolean;
-    rules?: FieldRules;
-    min?: number;
-    max?: number;
-    step?: number;
-    inputStyle?: CSSProperties;
-  };
+export type NumberFieldProps = BaseSourceProps & {
+  name?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  min?: number;
+  max?: number;
+  step?: number;
+  inputStyle?: CSSProperties;
+  hideLabel?: boolean;
+};
 
 export function NumberField({
   source,
+  name,
   label,
   required,
   rules,
   min,
   max,
   step,
-  width: inlineWidth,
-  minWidth: inlineMinWidth,
   inputStyle,
+  hideLabel,
 }: NumberFieldProps) {
-  const field = useInlineOrFormField(
-    source,
-    label,
-    required,
-    rules,
-    ({ value, onChange, onBlur, disabled }) => (
-      <InputNumber
-        value={value as number | undefined}
-        onChange={(v) => onChange(v)}
-        onBlur={onBlur}
-        min={min}
-        max={max}
-        step={step}
-        disabled={disabled}
-        style={{ width: "100%", ...inputStyle }}
-      />
-    ),
-    { width: inlineWidth, minWidth: inlineMinWidth },
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, onBlur, disabled }) => (
+        <InputNumber
+          value={value as number | undefined}
+          onChange={(v) => onChange(v)}
+          onBlur={onBlur}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          style={{ width: "100%", ...inputStyle }}
+        />
+      )}
+    </FieldWrapper>
   );
-
-  if (field.mode === "inline") return null;
-  return field.element;
 }

package/src/crud/fields/PasswordField.tsx

@@ -1,71 +1,73 @@
 import { Input } from "antd";
 import { useWatch } from "react-hook-form";
-import type { BaseSourceProps, FieldRules, InlineFieldOptions } from "../types";
-import { useInlineOrFormField } from "./useInlineOrFormField";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { FieldWrapper } from "./FieldWrapper";
 
-export type PasswordFieldProps = BaseSourceProps &
-  InlineFieldOptions & {
-    required?: boolean;
-    rules?: FieldRules;
-    /** When set, renders a second field and validates it matches `source`. */
-    confirmSource?: string;
-    confirmLabel?: string;
-    autoComplete?: string;
-  };
+export type PasswordFieldProps = BaseSourceProps & {
+  name?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  /** When set, renders a second field and validates it matches `source`. */
+  confirmSource?: string;
+  confirmLabel?: string;
+  autoComplete?: string;
+  hideLabel?: boolean;
+};
 
 function PasswordInputField({
   source,
+  name,
   label,
   required,
   rules,
   autoComplete,
-  width: inlineWidth,
-  minWidth: inlineMinWidth,
+  hideLabel,
 }: PasswordFieldProps) {
-  const field = useInlineOrFormField(
-    source,
-    label,
-    required,
-    rules,
-    ({ value, onChange, onBlur, disabled }) => (
-      <Input.Password
-        value={value as string | undefined}
-        onChange={(e) => onChange(e.target.value)}
-        onBlur={onBlur}
-        disabled={disabled}
-        autoComplete={autoComplete}
-      />
-    ),
-    { width: inlineWidth, minWidth: inlineMinWidth },
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, onBlur, disabled }) => (
+        <Input.Password
+          value={value as string | undefined}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={onBlur}
+          disabled={disabled}
+          autoComplete={autoComplete}
+        />
+      )}
+    </FieldWrapper>
   );
-
-  if (field.mode === "inline") return null;
-  return field.element;
 }
 
 export function PasswordField({
   source,
+  name,
   label,
   required,
   rules,
   confirmSource,
   confirmLabel = "Confirm password",
   autoComplete = "new-password",
-  width,
-  minWidth,
+  hideLabel,
 }: PasswordFieldProps) {
-  const password = useWatch({ name: source, disabled: !confirmSource });
+  const password = useWatch({ name: name ?? source, disabled: !confirmSource });
 
   if (!confirmSource) {
     return (
       <PasswordInputField
         source={source}
+        name={name}
         label={label}
         required={required}
         rules={rules}
         autoComplete={autoComplete}
-        width={width}
-        minWidth={minWidth}
+        hideLabel={hideLabel}
       />
     );
   }
@@ -74,20 +76,19 @@ export function PasswordField({
     <>
       <PasswordInputField
         source={source}
+        name={name}
         label={label}
         required={required}
         rules={rules}
         autoComplete={autoComplete}
-        width={width}
-        minWidth={minWidth}
+        hideLabel={hideLabel}
       />
       <PasswordInputField
         source={confirmSource}
         label={confirmLabel}
         required={required}
         autoComplete={autoComplete}
-        width={width}
-        minWidth={minWidth}
+        hideLabel={hideLabel}
         rules={{
           validate: (value: string) =>
             !password || value === password || "Passwords do not match",

package/src/crud/fields/ReferenceField.tsx

@@ -1,191 +1,96 @@
 import { Select } from "antd";
-
 import type { CSSProperties } from "react";
-
 import { useMemo, useState } from "react";
-
 import type {
-
   BaseSourceProps,
-
   ChoiceOption,
-
   FieldRules,
-
-  InlineFieldOptions,
-
   ReferenceProps,
-
 } from "../types";
-
 import { useChoices } from "../utils/useChoices";
-
-import { useInlineOrFormField } from "./useInlineOrFormField";
-
-
+import { FieldWrapper } from "./FieldWrapper";
 
 export type ReferenceFieldProps = BaseSourceProps &
-
-  ReferenceProps &
-
-  InlineFieldOptions & {
-
+  ReferenceProps & {
+    name?: string;
     required?: boolean;
-
     rules?: FieldRules;
-
     search?: boolean;
-
     allowClear?: boolean;
-
     disabled?: boolean;
-
+    hideLabel?: boolean;
     /** Applied to the underlying Select / input control. */
-
     inputStyle?: CSSProperties;
-
     /** Called after the value changes (e.g. to update dependent fields). */
-
     onValueChange?: (
-
       value: unknown,
-
       option: ChoiceOption | undefined,
-
-      meta: { name?: string; index?: number },
-
+      meta: { name: string },
     ) => void;
-
   };
 
-
-
 export function ReferenceField({
-
   source,
-
+  name,
   label,
-
   reference,
-
   choices,
-
   optionLabel = "name",
-
   optionValue = "id",
-
   required,
-
   rules,
-
   search,
-
   allowClear,
-
   disabled: disabledProp,
-
-  width: inlineWidth,
-
-  minWidth: inlineMinWidth,
-
+  hideLabel,
   inputStyle,
-
   onValueChange,
-
 }: ReferenceFieldProps) {
-
   const [searchText, setSearchText] = useState<string | undefined>();
-
   const { options, loading, optionForValue } = useChoices(
-
     choices,
-
     reference,
-
     optionLabel,
-
     optionValue,
-
     search ? searchText : undefined,
-
   );
 
-
-
   const selectOptions = useMemo(
-
     () =>
-
       options.map((o) => ({
-
         label: o.label,
-
         value: o.value as string | number,
-
       })),
-
     [options],
-
   );
 
-
-
-  const field = useInlineOrFormField(
-
-    source,
-
-    label,
-
-    required,
-
-    rules,
-
-    ({ value, onChange, disabled, name, index }) => (
-
-      <Select
-
-        value={value as string | number | undefined}
-
-        onChange={(next) => {
-
-          onChange(next);
-
-          onValueChange?.(next, optionForValue(next), { name, index });
-
-        }}
-
-        options={selectOptions}
-
-        loading={loading && options.length === 0}
-
-        showSearch={search}
-
-        filterOption={search ? false : undefined}
-
-        onSearch={search ? setSearchText : undefined}
-
-        allowClear={allowClear}
-
-        disabled={disabled || disabledProp}
-
-        optionFilterProp="label"
-
-        style={{ width: "100%", minWidth: 160, ...inputStyle }}
-
-      />
-
-    ),
-
-    { width: inlineWidth, minWidth: inlineMinWidth },
-
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, disabled, name: fieldName }) => (
+        <Select
+          value={value as string | number | undefined}
+          onChange={(next) => {
+            onChange(next);
+            onValueChange?.(next, optionForValue(next), { name: fieldName });
+          }}
+          options={selectOptions}
+          loading={loading && options.length === 0}
+          showSearch={search}
+          filterOption={search ? false : undefined}
+          onSearch={search ? setSearchText : undefined}
+          allowClear={allowClear}
+          disabled={disabled || disabledProp}
+          optionFilterProp="label"
+          style={{ width: "100%", minWidth: 160, ...inputStyle }}
+        />
+      )}
+    </FieldWrapper>
   );
-
-
-
-  if (field.mode === "inline") return null;
-
-  return field.element;
-
 }
-
-