ding-react-admin 1.0.2 → 2.0.0

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

@@ -1,32 +1,38 @@
 import { Switch } from "antd";
 import type { BaseSourceProps, FieldRules } from "../types";
-import { useInlineOrFormField } from "./useInlineOrFormField";
+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) {
-  const field = useInlineOrFormField(
-    source,
-    label,
-    required,
-    rules,
-    ({ value, onChange, disabled }) => (
-      <Switch
-        checked={Boolean(value)}
-        onChange={onChange}
-        disabled={disabled}
-      />
-    ),
+  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>
   );
-
-  if (field.mode === "inline") return null;
-  return field.element;
 }

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

@@ -1,109 +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 { useRegisterFormSource } from "../context/FormFieldsContext";
-
-export type FieldWrapperProps = {
-  source: string;
-  label?: string;
-  required?: boolean;
-  rules?: FieldRules;
-  children: (props: {
-    value: unknown;
-    onChange: (value: unknown) => void;
-    onBlur: () => void;
-    disabled?: boolean;
-  }) => ReactNode;
-};
-
-export function FieldWrapper({
-  source,
-  label,
-  required,
-  rules,
-  children,
-}: FieldWrapperProps) {
-  const { control } = useFormContext<FieldValues>();
-  const meta = useFormMetaOptional();
-  const fieldLabel = label ?? source;
-  useRegisterFormSource(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>
-      )}
-    />
-  );
-}
-
-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";
-
-  return (
-    <Controller
-      name={name}
-      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={{ marginBottom: 0 }}
-        >
-          {children({
-            value: field.value,
-            onChange: field.onChange,
-            onBlur: field.onBlur,
-          })}
-        </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>
+  );
+}