ding-react-admin 2.0.0 → 2.0.4

package/src/crud/ListActionsBar.tsx

@@ -1,106 +1,106 @@
-import { Button, Select, Space, Typography } from "antd";
-import { useCallback, useMemo, useState } from "react";
-import type { ResourceListBulkAction } from "./types";
-
-export type ListActionsBarProps = {
-  selectedCount: number;
-  total: number;
-  allPageSelected: boolean;
-  allMatchingSelected: boolean;
-  onSelectAllMatching: () => void;
-  onClearSelection: () => void;
-  actions: ResourceListBulkAction[];
-  onExecute: (
-    action: ResourceListBulkAction,
-    selectedIds: (string | number)[],
-  ) => Promise<void>;
-  selectedIds: (string | number)[];
-  running?: boolean;
-};
-
-export function ListActionsBar({
-  selectedCount,
-  total,
-  allPageSelected,
-  allMatchingSelected,
-  onSelectAllMatching,
-  onClearSelection,
-  actions,
-  onExecute,
-  selectedIds,
-  running = false,
-}: ListActionsBarProps) {
-  const [actionKey, setActionKey] = useState<string | undefined>();
-
-  const options = useMemo(
-    () => actions.map((a) => ({ value: a.key, label: a.label })),
-    [actions],
-  );
-
-  const handleGo = useCallback(async () => {
-    const action = actions.find((a) => a.key === actionKey);
-    if (!action || selectedCount === 0) return;
-    await onExecute(action, selectedIds);
-    setActionKey(undefined);
-  }, [actions, actionKey, onExecute, selectedCount, selectedIds]);
-
-  const showSelectAllMatching =
-    allPageSelected &&
-    !allMatchingSelected &&
-    total > selectedCount;
-
-  return (
-    <Space
-      wrap
-      style={{ marginBottom: 16, width: "100%" }}
-      align="center"
-    >
-      <Typography.Text type="secondary">
-        {selectedCount} of {total} selected
-      </Typography.Text>
-      {selectedCount > 0 ? (
-        <Button type="link" size="small" onClick={onClearSelection} style={{ padding: 0 }}>
-          Clear selection
-        </Button>
-      ) : null}
-      {showSelectAllMatching ? (
-        <>
-          <Typography.Text type="secondary">·</Typography.Text>
-          <Button
-            type="link"
-            size="small"
-            onClick={onSelectAllMatching}
-            style={{ padding: 0 }}
-          >
-            Select all {total} items matching filter
-          </Button>
-        </>
-      ) : null}
-      {allMatchingSelected && total > 0 ? (
-        <>
-          <Typography.Text type="secondary">·</Typography.Text>
-          <Typography.Text type="success">
-            All {total} items selected
-          </Typography.Text>
-        </>
-      ) : null}
-      <Select
-        placeholder="Action"
-        style={{ minWidth: 200 }}
-        options={options}
-        value={actionKey}
-        onChange={setActionKey}
-        disabled={selectedCount === 0 || running}
-        allowClear
-      />
-      <Button
-        type="primary"
-        onClick={() => void handleGo()}
-        disabled={!actionKey || selectedCount === 0 || running}
-        loading={running}
-      >
-        Go
-      </Button>
-    </Space>
-  );
-}
+import { Button, Select, Space, Typography } from "antd";
+import { useCallback, useMemo, useState } from "react";
+import type { ResourceListBulkAction } from "./types";
+
+export type ListActionsBarProps = {
+  selectedCount: number;
+  total: number;
+  allPageSelected: boolean;
+  allMatchingSelected: boolean;
+  onSelectAllMatching: () => void;
+  onClearSelection: () => void;
+  actions: ResourceListBulkAction[];
+  onExecute: (
+    action: ResourceListBulkAction,
+    selectedIds: (string | number)[],
+  ) => Promise<void>;
+  selectedIds: (string | number)[];
+  running?: boolean;
+};
+
+export function ListActionsBar({
+  selectedCount,
+  total,
+  allPageSelected,
+  allMatchingSelected,
+  onSelectAllMatching,
+  onClearSelection,
+  actions,
+  onExecute,
+  selectedIds,
+  running = false,
+}: ListActionsBarProps) {
+  const [actionKey, setActionKey] = useState<string | undefined>();
+
+  const options = useMemo(
+    () => actions.map((a) => ({ value: a.key, label: a.label })),
+    [actions],
+  );
+
+  const handleGo = useCallback(async () => {
+    const action = actions.find((a) => a.key === actionKey);
+    if (!action || selectedCount === 0) return;
+    await onExecute(action, selectedIds);
+    setActionKey(undefined);
+  }, [actions, actionKey, onExecute, selectedCount, selectedIds]);
+
+  const showSelectAllMatching =
+    allPageSelected &&
+    !allMatchingSelected &&
+    total > selectedCount;
+
+  return (
+    <Space
+      wrap
+      style={{ marginBottom: 16, width: "100%" }}
+      align="center"
+    >
+      <Typography.Text type="secondary">
+        {selectedCount} of {total} selected
+      </Typography.Text>
+      {selectedCount > 0 ? (
+        <Button type="link" size="small" onClick={onClearSelection} style={{ padding: 0 }}>
+          Clear selection
+        </Button>
+      ) : null}
+      {showSelectAllMatching ? (
+        <>
+          <Typography.Text type="secondary">·</Typography.Text>
+          <Button
+            type="link"
+            size="small"
+            onClick={onSelectAllMatching}
+            style={{ padding: 0 }}
+          >
+            Select all {total} items matching filter
+          </Button>
+        </>
+      ) : null}
+      {allMatchingSelected && total > 0 ? (
+        <>
+          <Typography.Text type="secondary">·</Typography.Text>
+          <Typography.Text type="success">
+            All {total} items selected
+          </Typography.Text>
+        </>
+      ) : null}
+      <Select
+        placeholder="Action"
+        style={{ minWidth: 200 }}
+        options={options}
+        value={actionKey}
+        onChange={setActionKey}
+        disabled={selectedCount === 0 || running}
+        allowClear
+      />
+      <Button
+        type="primary"
+        onClick={() => void handleGo()}
+        disabled={!actionKey || selectedCount === 0 || running}
+        loading={running}
+      >
+        Go
+      </Button>
+    </Space>
+  );
+}

package/src/crud/ResourceForm.tsx

@@ -1,160 +1,83 @@
-import { ArrowLeftOutlined } from "@ant-design/icons";
-import { App, Button, Card, Form, Space, Spin, Typography, theme } from "antd";
-import { FormProvider, useForm, type DefaultValues, type FieldValues } from "react-hook-form";
-import { useEffect, useRef, type ReactNode } from "react";
-import { Link, useNavigate, useParams } from "react-router-dom";
-import { useDataProvider } from "../context/DataProvider";
-import { usePermissions } from "../context/PermissionsProvider";
-import type { ResourcePermissions } from "../permissions/resourcePermissions";
-import { checkResourcePermission } from "../permissions/resourcePermissions";
-import { FormMetaProvider } from "./context/FormContext";
-import { PayloadFieldsProvider } from "./context/PayloadFieldsContext";
-import {
-  InlineFieldsRegistryProvider,
-  type InlineFieldRegistration,
-} from "./context/InlineFieldsRegistry";
-import { useFormRecordLoad, useFormRecordSave } from "./utils/useFormRecord";
-
-export type ResourceFormProps<T extends FieldValues> = {
-  resource: string;
-  title: string;
-  listPath: string;
-  children: ReactNode;
-  defaultValues?: Partial<T>;
-  onSaved?: (record: T) => void;
-  stayOnPage?: boolean;
-  /** Permission strings for create vs edit. Omit to allow all (demos only). */
-  permissions?: Pick<ResourcePermissions, "add" | "change">;
-};
-
-/**
- * Create/edit page — standard react-hook-form under the hood.
- *
- * Load: one `getOne` → `form.reset(record)` (nested inline arrays included).
- * Save: one `create` or `update` with parent fields + nested inline rows.
- */
-export function ResourceForm<T extends FieldValues & { id?: unknown }>({
-  resource,
-  title,
-  listPath,
-  children,
-  defaultValues,
-  onSaved,
-  stayOnPage,
-  permissions,
-}: ResourceFormProps<T>) {
-  const { id } = useParams();
-  const isNew = id === "new" || !id;
-  const dp = useDataProvider();
-  const can = usePermissions();
-  const navigate = useNavigate();
-  const { message } = App.useApp();
-  const { token } = theme.useToken();
-  const payloadFieldsRef = useRef(new Set<string>());
-  const inlineRegistryRef = useRef(new Map<string, InlineFieldRegistration>());
-
-  const form = useForm<T>({
-    defaultValues: defaultValues as DefaultValues<T>,
-  });
-
-  const { loading, formVersion } = useFormRecordLoad({
-    dp,
-    resource,
-    id,
-    isNew,
-    form,
-    message,
-    defaultValues,
-  });
-
-  const onSubmit = useFormRecordSave({
-    dp,
-    resource,
-    id,
-    isNew,
-    form,
-    message,
-    navigate,
-    listPath,
-    payloadFieldsRef,
-    inlineRegistryRef,
-    onSaved,
-    stayOnPage,
-  });
-
-  useEffect(() => {
-    if (!permissions) return;
-    const slot = isNew ? "add" : "change";
-    if (!checkResourcePermission(can, permissions, slot)) {
-      navigate(listPath, { replace: true });
-    }
-  }, [permissions, isNew, can, navigate, listPath]);
-
-  const canSave = permissions
-    ? checkResourcePermission(can, permissions, isNew ? "add" : "change")
-    : true;
-
-  return (
-    <Card
-      title={
-        <Space>
-          <Link to={listPath} style={{ color: token.colorText }}>
-            <ArrowLeftOutlined /> Back
-          </Link>
-          <Typography.Title level={5} style={{ margin: 0 }}>
-            {title}
-          </Typography.Title>
-        </Space>
-      }
-    >
-      <FormMetaProvider resource={resource} isNew={isNew}>
-        <PayloadFieldsProvider fieldsRef={payloadFieldsRef}>
-          <InlineFieldsRegistryProvider registryRef={inlineRegistryRef}>
-            <div style={{ position: "relative" }}>
-              {loading ? (
-                <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={() => void form.handleSubmit(onSubmit)()}
-                  style={{
-                    opacity: loading ? 0.4 : 1,
-                    pointerEvents: loading ? "none" : undefined,
-                  }}
-                >
-                  {children}
-                  <Form.Item style={{ marginTop: 16 }}>
-                    <Space>
-                      <Button
-                        type="primary"
-                        htmlType="submit"
-                        disabled={loading || !canSave}
-                      >
-                        Save
-                      </Button>
-                      <Link to={listPath}>
-                        <Button disabled={loading}>Cancel</Button>
-                      </Link>
-                    </Space>
-                  </Form.Item>
-                </Form>
-              </FormProvider>
-            </div>
-          </InlineFieldsRegistryProvider>
-        </PayloadFieldsProvider>
-      </FormMetaProvider>
-    </Card>
-  );
-}
+import { ArrowLeftOutlined } from "@ant-design/icons";
+import { Card, Space, Typography, theme } from "antd";
+import { type FieldValues } from "react-hook-form";
+import { useEffect, type ReactNode } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { usePermissions } from "../context/PermissionsProvider";
+import type { ResourcePermissions } from "../permissions/resourcePermissions";
+import { checkResourcePermission } from "../permissions/resourcePermissions";
+import { ResourceRecordForm } from "./ResourceRecordForm";
+
+export type ResourceFormProps<T extends FieldValues> = {
+  resource: string;
+  title: string;
+  listPath: string;
+  children: ReactNode;
+  defaultValues?: Partial<T>;
+  onSaved?: (record: T) => void;
+  stayOnPage?: boolean;
+  /** Permission strings for create vs edit. Omit to allow all (demos only). */
+  permissions?: Pick<ResourcePermissions, "add" | "change">;
+};
+
+/**
+ * Create/edit page — Card chrome around {@link ResourceRecordForm}.
+ */
+export function ResourceForm<T extends FieldValues & { id?: unknown }>({
+  resource,
+  title,
+  listPath,
+  children,
+  defaultValues,
+  onSaved,
+  stayOnPage,
+  permissions,
+}: ResourceFormProps<T>) {
+  const { id } = useParams();
+  const isNew = id === "new" || !id;
+  const can = usePermissions();
+  const navigate = useNavigate();
+  const { token } = theme.useToken();
+
+  useEffect(() => {
+    if (!permissions) return;
+    const slot = isNew ? "add" : "change";
+    if (!checkResourcePermission(can, permissions, slot)) {
+      navigate(listPath, { replace: true });
+    }
+  }, [permissions, isNew, can, navigate, listPath]);
+
+  const canSave = permissions
+    ? checkResourcePermission(can, permissions, isNew ? "add" : "change")
+    : true;
+
+  return (
+    <Card
+      title={
+        <Space>
+          <Link to={listPath} style={{ color: token.colorText }}>
+            <ArrowLeftOutlined /> Back
+          </Link>
+          <Typography.Title level={5} style={{ margin: 0 }}>
+            {title}
+          </Typography.Title>
+        </Space>
+      }
+    >
+      <ResourceRecordForm<T>
+        resource={resource}
+        id={id}
+        defaultValues={defaultValues}
+        canSave={canSave}
+        cancelHref={listPath}
+        onCancel={() => navigate(listPath)}
+        onSuccess={(saved) => {
+          onSaved?.(saved);
+          if (!stayOnPage) navigate(listPath);
+        }}
+      >
+        {children}
+      </ResourceRecordForm>
+    </Card>
+  );
+}

package/src/crud/ResourceFormModal.tsx

@@ -1,133 +1,75 @@
-import { App, Button, Form, Modal, Spin } from "antd";
-import {
-  FormProvider,
-  useForm,
-  type DefaultValues,
-  type FieldValues,
-} from "react-hook-form";
-import { useCallback, useRef, useState, type ReactNode } from "react";
-import { useDataProvider } from "../context/DataProvider";
-import { FormMetaProvider } from "./context/FormContext";
-import { PayloadFieldsProvider } from "./context/PayloadFieldsContext";
-import { buildResourceFormSubmitBody } from "./utils/buildResourceFormSubmitBody";
-import { applyApiErrorsToForm } from "./utils/formErrors";
-import { useAbortableEffect } from "./utils/useAbortableEffect";
-import { isAbortError } from "../data/abortError";
-
-export type ResourceFormModalProps = {
-  resource: string;
-  editId: string | null;
-  onClose: () => void;
-  children: ReactNode;
-  title?: string;
-};
-
-export function ResourceFormModal({
-  resource,
-  editId,
-  onClose,
-  children,
-  title,
-}: ResourceFormModalProps) {
-  const isNew = editId === "new" || editId == null;
-  const open = editId != null;
-  const dp = useDataProvider();
-  const { message } = App.useApp();
-  const [loading, setLoading] = useState(!isNew);
-
-  const form = useForm<FieldValues>();
-  const payloadFieldsRef = useRef(new Set<string>());
-
-  const load = useCallback(
-    async (signal?: AbortSignal) => {
-      if (isNew || !editId) {
-        form.reset({} as DefaultValues<FieldValues>);
-        setLoading(false);
-        return;
-      }
-      setLoading(true);
-      try {
-        const res = await dp.getOne(resource, editId, { signal });
-        if (signal?.aborted) return;
-        form.reset(res.data as DefaultValues<FieldValues>);
-      } catch (e) {
-        if (!isAbortError(e)) {
-          message.error(e instanceof Error ? e.message : "Load failed");
-        }
-      } finally {
-        if (!signal?.aborted) setLoading(false);
-      }
-    },
-    [dp, resource, editId, isNew, form, message],
-  );
-
-  useAbortableEffect(
-    (signal) => {
-      if (!open) return;
-      return load(signal);
-    },
-    [open, load],
-  );
-
-  async function onSubmit(values: FieldValues) {
-    try {
-      const body = buildResourceFormSubmitBody(
-        values as Record<string, unknown>,
-        Array.from(payloadFieldsRef.current),
-      );
-      if (isNew) {
-        await dp.create(resource, body);
-        message.success("Created");
-      } else if (editId) {
-        await dp.update(resource, { id: editId, data: body });
-        message.success("Updated");
-      }
-      onClose();
-    } catch (e) {
-      const handled = await applyApiErrorsToForm(dp, form, message, e, {
-        resource,
-        mutation: isNew ? "create" : "update",
-      });
-      if (!handled) {
-        message.error(e instanceof Error ? e.message : "Save failed");
-      }
-    }
-  }
-
-  const modalTitle =
-    title ?? (isNew ? `New ${resource}` : `Edit ${resource}`);
-
-  return (
-    <Modal
-      open={open}
-      title={modalTitle}
-      onCancel={onClose}
-      footer={null}
-      destroyOnHidden
-      width={560}
-    >
-      {loading ? (
-        <Spin />
-      ) : (
-        <FormMetaProvider resource={resource} isNew={isNew}>
-          <PayloadFieldsProvider fieldsRef={payloadFieldsRef}>
-            <FormProvider {...form}>
-              <Form
-                layout="vertical"
-                onFinish={() => void form.handleSubmit(onSubmit)()}
-              >
-                {children}
-                <Form.Item style={{ marginTop: 16, marginBottom: 0 }}>
-                  <Button type="primary" htmlType="submit" style={{ marginRight: 8 }}>
-                    Save
-                  </Button>
-                  <Button onClick={onClose}>Cancel</Button>
-                </Form.Item>
-              </Form>
-            </FormProvider>
-          </PayloadFieldsProvider>
-        </FormMetaProvider>
-      )}
-    </Modal>
-  );
-}
+import { App, Modal } from "antd";
+import { type FieldValues } from "react-hook-form";
+import { type ReactNode } from "react";
+import { usePermissions } from "../context/PermissionsProvider";
+import {
+  checkResourcePermission,
+  type ResourcePermissions,
+} from "../permissions/resourcePermissions";
+import { ResourceRecordForm } from "./ResourceRecordForm";
+
+export type ResourceFormModalProps = {
+  resource: string;
+  editId: string | null;
+  onClose: () => void;
+  children: ReactNode;
+  title?: string;
+  permissions?: Pick<ResourcePermissions, "add" | "change">;
+  defaultValues?: Partial<FieldValues>;
+  width?: number;
+  onSuccess?: (record: FieldValues) => void;
+};
+
+export function ResourceFormModal({
+  resource,
+  editId,
+  onClose,
+  children,
+  title,
+  permissions,
+  defaultValues,
+  width = 560,
+  onSuccess,
+}: ResourceFormModalProps) {
+  const isNew = editId === "new";
+  const open = editId != null;
+  const can = usePermissions();
+
+  const modalTitle =
+    title ?? (isNew ? `New ${resource}` : `Edit ${resource}`);
+
+  const canSave = permissions
+    ? checkResourcePermission(can, permissions, isNew ? "add" : "change")
+    : true;
+
+  return (
+    <Modal
+      open={open}
+      title={modalTitle}
+      onCancel={onClose}
+      footer={null}
+      destroyOnHidden
+      width={width}
+      maskClosable={false}
+    >
+      {/* Nested App so message/toast works when Modal is portaled to document.body. */}
+      <App>
+        <ResourceRecordForm<FieldValues>
+          resource={resource}
+          id={editId ?? undefined}
+          enabled={open}
+          loadingMode="overlay"
+          defaultValues={defaultValues}
+          canSave={canSave}
+          onCancel={onClose}
+          onSuccess={(record) => {
+            onSuccess?.(record);
+            onClose();
+          }}
+        >
+          {children}
+        </ResourceRecordForm>
+      </App>
+    </Modal>
+  );
+}