ding-react-admin 2.0.0 → 2.0.4

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

@@ -1,58 +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;
-}
+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;
+}