ding-react-admin 1.0.2 → 1.0.4

package/src/crud/fields/ReferenceManyField.tsx

@@ -2,18 +2,21 @@ import { Select } from "antd";
 import { useMemo, useState } from "react";
 import type { BaseSourceProps, FieldRules, ReferenceProps } from "../types";
 import { useChoices } from "../utils/useChoices";
-import { useInlineOrFormField } from "./useInlineOrFormField";
+import { FieldWrapper } from "./FieldWrapper";
 
 export type ReferenceManyFieldProps = BaseSourceProps &
   ReferenceProps & {
+    name?: string;
     required?: boolean;
     rules?: FieldRules;
     search?: boolean;
     allowClear?: boolean;
+    hideLabel?: boolean;
   };
 
 export function ReferenceManyField({
   source,
+  name,
   label,
   reference,
   choices,
@@ -23,6 +26,7 @@ export function ReferenceManyField({
   rules,
   search,
   allowClear = true,
+  hideLabel,
 }: ReferenceManyFieldProps) {
   const [searchText, setSearchText] = useState<string | undefined>();
   const { options, loading } = useChoices(
@@ -42,29 +46,31 @@ export function ReferenceManyField({
     [options],
   );
 
-  const field = useInlineOrFormField(
-    source,
-    label,
-    required,
-    rules,
-    ({ value, onChange, disabled }) => (
-      <Select
-        mode="multiple"
-        value={(value as (string | number)[] | undefined) ?? []}
-        onChange={onChange}
-        options={selectOptions}
-        loading={loading}
-        showSearch={search}
-        filterOption={search ? false : undefined}
-        onSearch={search ? setSearchText : undefined}
-        allowClear={allowClear}
-        disabled={disabled}
-        optionFilterProp="label"
-        style={{ width: "100%" }}
-      />
-    ),
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, disabled }) => (
+        <Select
+          mode="multiple"
+          value={(value as (string | number)[] | undefined) ?? []}
+          onChange={onChange}
+          options={selectOptions}
+          loading={loading}
+          showSearch={search}
+          filterOption={search ? false : undefined}
+          onSearch={search ? setSearchText : undefined}
+          allowClear={allowClear}
+          disabled={disabled}
+          optionFilterProp="label"
+          style={{ width: "100%" }}
+        />
+      )}
+    </FieldWrapper>
   );
-
-  if (field.mode === "inline") return null;
-  return field.element;
 }

package/src/crud/fields/SelectField.tsx

@@ -3,28 +3,34 @@ import type { BaseSourceProps, ChoiceOption, FieldRules } from "../types";
 import { FieldWrapper } from "./FieldWrapper";
 
 export type SelectFieldProps = BaseSourceProps & {
+  name?: string;
   required?: boolean;
   rules?: FieldRules;
   choices: ChoiceOption[];
   mode?: "multiple";
   allowClear?: boolean;
+  hideLabel?: boolean;
 };
 
 export function SelectField({
   source,
+  name,
   label,
   required,
   rules,
   choices,
   mode,
   allowClear,
+  hideLabel,
 }: SelectFieldProps) {
   return (
     <FieldWrapper
       source={source}
+      name={name}
       label={label}
       required={required}
       rules={rules}
+      hideLabel={hideLabel}
     >
       {({ value, onChange, disabled }) => (
         <Select

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/index.ts

@@ -10,10 +10,16 @@ export { ResourceFormModal } from "./ResourceFormModal";
 export type { ResourceFormModalProps } from "./ResourceFormModal";
 export {
   InlineFormSet,
+  InlineFormSetStacked,
   saveInlineRows,
   loadInlineRows,
 } from "./InlineFormSet";
-export type { InlineFormSetProps, SaveInlineOptions, InlineFormSetLayout } from "./InlineFormSet";
+export type {
+  InlineFormSetProps,
+  InlineFormSetStackedProps,
+  SaveInlineOptions,
+  InlineFormSetLayout,
+} from "./InlineFormSet";
 export { FormTabs, FormTab } from "./FormTabs";
 export type { FormTabsProps, FormTabProps } from "./FormTabs";
 export { FormSteps, FormStep } from "./FormSteps";
@@ -27,6 +33,8 @@ export { SelectField } from "./fields/SelectField";
 export { PasswordField } from "./fields/PasswordField";
 export { ReferenceField } from "./fields/ReferenceField";
 export { ReferenceManyField } from "./fields/ReferenceManyField";
+export { FieldWrapper } from "./fields/FieldWrapper";
+export type { FieldWrapperProps } from "./fields/FieldWrapper";
 
 export { TextColumn } from "./columns/TextColumn";
 export { NumberColumn } from "./columns/NumberColumn";
@@ -47,6 +55,7 @@ export {
 } from "./filters/ReferenceFilter";
 
 export { useListQueryState } from "./utils/useListQueryState";
+export { useAbortableEffect } from "./utils/useAbortableEffect";
 export type {
   ListQueryState,
   ListQueryActions,
@@ -55,8 +64,12 @@ export { useChoices } from "./utils/useChoices";
 export { getByPath } from "./utils/getByPath";
 export { pickBySources } from "./utils/pickBySources";
 export { inlineArrayName } from "./utils/inlineArrayName";
+export { inlineFieldName } from "./utils/inlineFieldName";
 export { setByPath } from "./utils/setByPath";
-export { useRegisterFormSource } from "./context/FormFieldsContext";
+export {
+  useSubmitField,
+  useSectionField,
+} from "./context/SubmitFieldsContext";
 
 export type {
   BaseSourceProps,
@@ -66,6 +79,10 @@ export type {
   DisplayProps,
   EditMode,
   FieldRules,
+  InlineCellContext,
+  InlineColumnDef,
+  InlineFormSetBaseProps,
+  InlineRowContext,
   ResourceListBuiltInActions,
   ResourceListBulkAction,
   ResourceListBulkActionHelpers,

package/src/crud/types.ts

@@ -1,130 +1,132 @@
-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 = {
+  resource: string;
+  foreignKey: string;
+  label?: string;
+  name?: string;
+};
+
+/** Passed to each tabular inline column's `cell` renderer. */
+export type InlineCellContext = {
+  /** Full RHF path, e.g. `__inline_invoice_lines.0.label`. */
+  name: string;
+  index: number;
+  arrayName: 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 = {
+  arrayName: string;
+  index: number;
+  /** RHF path helper — `name("label")` → `arrayName.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/inlineFieldName.ts

@@ -0,0 +1,8 @@
+/** RHF field path for one cell in an inline field array row. */
+export function inlineFieldName(
+  arrayName: string,
+  index: number,
+  source: string,
+) {
+  return `${arrayName}.${index}.${source}`;
+}

package/src/crud/utils/useAbortableEffect.ts

@@ -0,0 +1,17 @@
+import { useEffect, type DependencyList } from "react";
+
+/**
+ * Runs an async effect with an `AbortSignal` that aborts on cleanup.
+ * Use with `params.signal` on DataProvider reads and `isAbortError` in catch blocks.
+ */
+export function useAbortableEffect(
+  effect: (signal: AbortSignal) => void | Promise<void>,
+  deps: DependencyList,
+): void {
+  useEffect(() => {
+    const controller = new AbortController();
+    void effect(controller.signal);
+    return () => controller.abort();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}