ding-react-admin 1.0.4 → 2.0.4

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

@@ -0,0 +1,166 @@
+import { App, Button, Form, Space, Spin } from "antd";
+import {
+  FormProvider,
+  useForm,
+  type DefaultValues,
+  type FieldValues,
+} from "react-hook-form";
+import { useRef, useState, type ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { useDataProvider } from "../context/DataProvider";
+import { FormMetaProvider } from "./context/FormContext";
+import { PayloadFieldsProvider } from "./context/PayloadFieldsContext";
+import {
+  InlineFieldsRegistryProvider,
+  type InlineFieldRegistration,
+} from "./context/InlineFieldsRegistry";
+import { FormGlobalErrorsAlert } from "./FormGlobalErrorsAlert";
+import { useFormRecordLoad, useFormRecordSave } from "./utils/useFormRecord";
+
+export type ResourceRecordFormProps<T extends FieldValues & { id?: unknown }> = {
+  resource: string;
+  id: string | undefined;
+  children: ReactNode;
+  defaultValues?: Partial<T>;
+  /** When false, skip loading (e.g. modal closed). Defaults to true. */
+  enabled?: boolean;
+  canSave?: boolean;
+  onCancel: () => void;
+  /** When set, Cancel renders as a router Link instead of a button. */
+  cancelHref?: string;
+  onSuccess?: (record: T) => void;
+  /** overlay: dim form + spinner; replace: show spinner instead of form. */
+  loadingMode?: "overlay" | "replace";
+};
+
+/**
+ * Shared create/edit form — load record, save, field providers, and actions.
+ * Used by ResourceForm (page) and ResourceFormModal.
+ */
+export function ResourceRecordForm<T extends FieldValues & { id?: unknown }>({
+  resource,
+  id,
+  children,
+  defaultValues,
+  enabled = true,
+  canSave = true,
+  onCancel,
+  cancelHref,
+  onSuccess,
+  loadingMode = "overlay",
+}: ResourceRecordFormProps<T>) {
+  const isNew = id === "new" || !id;
+  const recordId = isNew ? undefined : id;
+  const dp = useDataProvider();
+  const { message } = App.useApp();
+  const payloadFieldsRef = useRef(new Set<string>());
+  const inlineRegistryRef = useRef(new Map<string, InlineFieldRegistration>());
+  const [globalErrors, setGlobalErrors] = useState<string[]>([]);
+
+  const form = useForm<T>({
+    defaultValues: defaultValues as DefaultValues<T>,
+  });
+
+  const { loading, formVersion } = useFormRecordLoad({
+    dp,
+    resource,
+    id: recordId,
+    isNew,
+    form,
+    message,
+    defaultValues,
+    enabled,
+  });
+
+  const { onSubmit, saving } = useFormRecordSave({
+    dp,
+    resource,
+    id: recordId,
+    isNew,
+    form,
+    message,
+    payloadFieldsRef,
+    inlineRegistryRef,
+    setGlobalErrors,
+    onSuccess,
+  });
+
+  const busy = loading || saving;
+
+  const handleFinish = () => {
+    void form.handleSubmit(onSubmit, () => {
+      message.warning("Please fix the errors below.");
+    })();
+  };
+
+  const cancelButton = (
+    <Button disabled={busy} onClick={cancelHref ? undefined : onCancel}>
+      Cancel
+    </Button>
+  );
+
+  const formContent = (
+    <FormMetaProvider resource={resource} isNew={isNew}>
+      <PayloadFieldsProvider fieldsRef={payloadFieldsRef}>
+        <InlineFieldsRegistryProvider registryRef={inlineRegistryRef}>
+          <div style={{ position: "relative" }}>
+            {busy && loadingMode === "overlay" ? (
+              <div
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  zIndex: 1,
+                }}
+              >
+                <Spin />
+              </div>
+            ) : null}
+            <FormProvider {...form} key={formVersion}>
+              <Form
+                layout="vertical"
+                onFinish={handleFinish}
+                style={
+                  loadingMode === "overlay"
+                    ? {
+                        opacity: busy ? 0.4 : 1,
+                        pointerEvents: busy ? "none" : undefined,
+                      }
+                    : undefined
+                }
+              >
+                <FormGlobalErrorsAlert errors={globalErrors} />
+                {children}
+                <Form.Item style={{ marginTop: 16, marginBottom: 0 }}>
+                  <Space>
+                    <Button
+                      type="primary"
+                      htmlType="submit"
+                      loading={saving}
+                      disabled={busy || !canSave}
+                    >
+                      Save
+                    </Button>
+                    {cancelHref ? (
+                      <Link to={cancelHref}>{cancelButton}</Link>
+                    ) : (
+                      cancelButton
+                    )}
+                  </Space>
+                </Form.Item>
+              </Form>
+            </FormProvider>
+          </div>
+        </InlineFieldsRegistryProvider>
+      </PayloadFieldsProvider>
+    </FormMetaProvider>
+  );
+
+  if (loading && !saving && loadingMode === "replace") {
+    return <Spin />;
+  }
+
+  return formContent;
+}

package/src/crud/columns/BooleanColumn.tsx

@@ -1,32 +1,32 @@
-import { useMemo } from "react";
-import type { BaseSourceProps } from "../types";
-import { useRegisterColumn } from "../context/ListContext";
-
-export type BooleanColumnProps = BaseSourceProps & {
-  sortable?: boolean;
-};
-
-export function BooleanColumn({
-  source,
-  label,
-  sortable = true,
-}: BooleanColumnProps) {
-  const def = useMemo(
-    () => ({
-      key: source,
-      source,
-      label,
-      sortable,
-      buildColumn: () => ({
-        title: label ?? source,
-        dataIndex: source,
-        key: source,
-        sorter: sortable ? true : undefined,
-        render: (v: boolean) => (v ? "Yes" : "No"),
-      }),
-    }),
-    [source, label, sortable],
-  );
-  useRegisterColumn(def);
-  return null;
-}
+import { useMemo } from "react";
+import type { BaseSourceProps } from "../types";
+import { useRegisterColumn } from "../context/ListContext";
+
+export type BooleanColumnProps = BaseSourceProps & {
+  sortable?: boolean;
+};
+
+export function BooleanColumn({
+  source,
+  label,
+  sortable = true,
+}: BooleanColumnProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      sortable,
+      buildColumn: () => ({
+        title: label ?? source,
+        dataIndex: source,
+        key: source,
+        sorter: sortable ? true : undefined,
+        render: (v: boolean) => (v ? "Yes" : "No"),
+      }),
+    }),
+    [source, label, sortable],
+  );
+  useRegisterColumn(def);
+  return null;
+}

package/src/crud/columns/CustomColumn.tsx

@@ -1,33 +1,33 @@
-import { useMemo, type ReactNode } from "react";
-import { useRegisterColumn } from "../context/ListContext";
-
-export type CustomColumnProps = {
-  source: string;
-  label?: string;
-  sortable?: boolean;
-  render: (record: Record<string, unknown>) => ReactNode;
-};
-
-export function CustomColumn({
-  source,
-  label,
-  sortable = false,
-  render,
-}: CustomColumnProps) {
-  const def = useMemo(
-    () => ({
-      key: source,
-      source,
-      label,
-      sortable,
-      buildColumn: () => ({
-        title: label ?? source,
-        key: source,
-        render: (_: unknown, record: Record<string, unknown>) => render(record),
-      }),
-    }),
-    [source, label, sortable, render],
-  );
-  useRegisterColumn(def);
-  return null;
-}
+import { useMemo, type ReactNode } from "react";
+import { useRegisterColumn } from "../context/ListContext";
+
+export type CustomColumnProps = {
+  source: string;
+  label?: string;
+  sortable?: boolean;
+  render: (record: Record<string, unknown>) => ReactNode;
+};
+
+export function CustomColumn({
+  source,
+  label,
+  sortable = false,
+  render,
+}: CustomColumnProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      sortable,
+      buildColumn: () => ({
+        title: label ?? source,
+        key: source,
+        render: (_: unknown, record: Record<string, unknown>) => render(record),
+      }),
+    }),
+    [source, label, sortable, render],
+  );
+  useRegisterColumn(def);
+  return null;
+}

package/src/crud/columns/DateColumn.tsx

@@ -1,28 +1,28 @@
-import { useMemo } from "react";
-import type { BaseSourceProps } from "../types";
-import { useRegisterColumn } from "../context/ListContext";
-
-export type DateColumnProps = BaseSourceProps & {
-  sortable?: boolean;
-};
-
-export function DateColumn({ source, label, sortable = true }: DateColumnProps) {
-  const def = useMemo(
-    () => ({
-      key: source,
-      source,
-      label,
-      sortable,
-      buildColumn: () => ({
-        title: label ?? source,
-        dataIndex: source,
-        key: source,
-        sorter: sortable ? true : undefined,
-        render: (v: string) => (v ? String(v).slice(0, 10) : "—"),
-      }),
-    }),
-    [source, label, sortable],
-  );
-  useRegisterColumn(def);
-  return null;
-}
+import { useMemo } from "react";
+import type { BaseSourceProps } from "../types";
+import { useRegisterColumn } from "../context/ListContext";
+
+export type DateColumnProps = BaseSourceProps & {
+  sortable?: boolean;
+};
+
+export function DateColumn({ source, label, sortable = true }: DateColumnProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      sortable,
+      buildColumn: () => ({
+        title: label ?? source,
+        dataIndex: source,
+        key: source,
+        sorter: sortable ? true : undefined,
+        render: (v: string) => (v ? String(v).slice(0, 10) : "—"),
+      }),
+    }),
+    [source, label, sortable],
+  );
+  useRegisterColumn(def);
+  return null;
+}

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

@@ -1,31 +1,31 @@
-import { useMemo } from "react";
-import type { BaseSourceProps } from "../types";
-import { useRegisterColumn } from "../context/ListContext";
-
-export type NumberColumnProps = BaseSourceProps & {
-  sortable?: boolean;
-};
-
-export function NumberColumn({
-  source,
-  label,
-  sortable = true,
-}: NumberColumnProps) {
-  const def = useMemo(
-    () => ({
-      key: source,
-      source,
-      label,
-      sortable,
-      buildColumn: () => ({
-        title: label ?? source,
-        dataIndex: source,
-        key: source,
-        sorter: sortable ? true : undefined,
-      }),
-    }),
-    [source, label, sortable],
-  );
-  useRegisterColumn(def);
-  return null;
-}
+import { useMemo } from "react";
+import type { BaseSourceProps } from "../types";
+import { useRegisterColumn } from "../context/ListContext";
+
+export type NumberColumnProps = BaseSourceProps & {
+  sortable?: boolean;
+};
+
+export function NumberColumn({
+  source,
+  label,
+  sortable = true,
+}: NumberColumnProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      sortable,
+      buildColumn: () => ({
+        title: label ?? source,
+        dataIndex: source,
+        key: source,
+        sorter: sortable ? true : undefined,
+      }),
+    }),
+    [source, label, sortable],
+  );
+  useRegisterColumn(def);
+  return null;
+}

package/src/crud/columns/ReferenceColumn.tsx

@@ -1,85 +1,85 @@
-import { useMemo } from "react";
-import type { BaseSourceProps, DisplayProps, ReferenceProps } from "../types";
-import { useRegisterColumn } from "../context/ListContext";
-import { useChoices } from "../utils/useChoices";
-import { renderDisplayValue } from "./TextColumn";
-
-export type ReferenceColumnProps = BaseSourceProps &
-  ReferenceProps &
-  DisplayProps & {
-    sortable?: boolean;
-  };
-
-function ReferenceColumnCell({
-  record,
-  source,
-  display,
-  reference,
-  choices,
-  optionLabel,
-  optionValue,
-}: ReferenceColumnProps & { record: Record<string, unknown> }) {
-  const { labelForValue } = useChoices(
-    choices,
-    reference,
-    optionLabel,
-    optionValue,
-  );
-  const raw = record[source];
-  if (typeof display === "function") return <>{display(record)}</>;
-  if (display && display !== source) {
-    const nested = renderDisplayValue(record, source, display);
-    return <>{nested != null ? String(nested) : "—"}</>;
-  }
-  return <>{labelForValue(raw)}</>;
-}
-
-export function ReferenceColumn({
-  source,
-  label,
-  reference,
-  choices,
-  optionLabel = "name",
-  optionValue = "id",
-  display,
-  sortable = true,
-}: ReferenceColumnProps) {
-  const def = useMemo(
-    () => ({
-      key: source,
-      source,
-      label,
-      sortable,
-      buildColumn: () => ({
-        title: label ?? source,
-        dataIndex: source,
-        key: source,
-        sorter: sortable ? true : undefined,
-        render: (_: unknown, record: Record<string, unknown>) => (
-          <ReferenceColumnCell
-            record={record}
-            source={source}
-            label={label}
-            reference={reference}
-            choices={choices}
-            optionLabel={optionLabel}
-            optionValue={optionValue}
-            display={display ?? optionLabel}
-          />
-        ),
-      }),
-    }),
-    [
-      source,
-      label,
-      sortable,
-      reference,
-      choices,
-      optionLabel,
-      optionValue,
-      display,
-    ],
-  );
-  useRegisterColumn(def);
-  return null;
-}
+import { useMemo } from "react";
+import type { BaseSourceProps, DisplayProps, ReferenceProps } from "../types";
+import { useRegisterColumn } from "../context/ListContext";
+import { useChoices } from "../utils/useChoices";
+import { renderDisplayValue } from "./TextColumn";
+
+export type ReferenceColumnProps = BaseSourceProps &
+  ReferenceProps &
+  DisplayProps & {
+    sortable?: boolean;
+  };
+
+function ReferenceColumnCell({
+  record,
+  source,
+  display,
+  reference,
+  choices,
+  optionLabel,
+  optionValue,
+}: ReferenceColumnProps & { record: Record<string, unknown> }) {
+  const { labelForValue } = useChoices(
+    choices,
+    reference,
+    optionLabel,
+    optionValue,
+  );
+  const raw = record[source];
+  if (typeof display === "function") return <>{display(record)}</>;
+  if (display && display !== source) {
+    const nested = renderDisplayValue(record, source, display);
+    return <>{nested != null ? String(nested) : "—"}</>;
+  }
+  return <>{labelForValue(raw)}</>;
+}
+
+export function ReferenceColumn({
+  source,
+  label,
+  reference,
+  choices,
+  optionLabel = "name",
+  optionValue = "id",
+  display,
+  sortable = true,
+}: ReferenceColumnProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      sortable,
+      buildColumn: () => ({
+        title: label ?? source,
+        dataIndex: source,
+        key: source,
+        sorter: sortable ? true : undefined,
+        render: (_: unknown, record: Record<string, unknown>) => (
+          <ReferenceColumnCell
+            record={record}
+            source={source}
+            label={label}
+            reference={reference}
+            choices={choices}
+            optionLabel={optionLabel}
+            optionValue={optionValue}
+            display={display ?? optionLabel}
+          />
+        ),
+      }),
+    }),
+    [
+      source,
+      label,
+      sortable,
+      reference,
+      choices,
+      optionLabel,
+      optionValue,
+      display,
+    ],
+  );
+  useRegisterColumn(def);
+  return null;
+}