ding-react-admin 1.0.2 → 2.0.0

package/package.json

@@ -1,59 +1,59 @@
-{
-  "name": "ding-react-admin",
-  "version": "1.0.2",
-  "type": "module",
-  "license": "MIT",
-  "description": "Composable admin shell (Ant Design + React Router): quick-start AdminApp or build your own layout.",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Muhammadinaam/ding-react-admin.git"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "src",
-    "docs/assets"
-  ],
-  "scripts": {
-    "build": "vite build && node -e \"require('fs').writeFileSync('dist/index.d.ts','export * from \\\"./src/index\\\";\\n')\"",
-    "dev:example": "yarn --cwd examples/playground dev",
-    "build:example": "yarn --cwd examples/playground build",
-    "build:example:gh-pages": "yarn --cwd examples/playground build:gh-pages",
-    "test": "vitest run",
-    "prepublishOnly": "yarn build"
-  },
-  "peerDependencies": {
-    "@ant-design/icons": ">=6",
-    "antd": ">=6",
-    "dayjs": ">=1",
-    "react": ">=18",
-    "react-dom": ">=18",
-    "react-hook-form": ">=7",
-    "react-router-dom": ">=6"
-  },
-  "devDependencies": {
-    "@ant-design/icons": "^6.0.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "antd": "^6.0.0",
-    "dayjs": "^1.11.13",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-hook-form": "^7.56.4",
-    "react-router-dom": "^7.14.2",
-    "typescript": "~6.0.2",
-    "vite": "^8.0.9",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.2.4"
-  },
-  "dependencies": {}
-}
+{
+  "name": "ding-react-admin",
+  "version": "2.0.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Composable admin shell (Ant Design + React Router): quick-start AdminApp or build your own layout.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Muhammadinaam/ding-react-admin.git"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "docs/assets"
+  ],
+  "scripts": {
+    "build": "vite build && node -e \"require('fs').writeFileSync('dist/index.d.ts','export * from \\\"./src/index\\\";\\n')\"",
+    "dev:example": "yarn --cwd examples/playground dev",
+    "build:example": "yarn --cwd examples/playground build",
+    "build:example:gh-pages": "yarn --cwd examples/playground build:gh-pages",
+    "test": "vitest run",
+    "prepublishOnly": "yarn build"
+  },
+  "peerDependencies": {
+    "@ant-design/icons": ">=6",
+    "antd": ">=6",
+    "dayjs": ">=1",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-hook-form": ">=7",
+    "react-router-dom": ">=6"
+  },
+  "devDependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "antd": "^6.0.0",
+    "dayjs": "^1.11.13",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-hook-form": "^7.56.4",
+    "react-router-dom": "^7.14.2",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.9",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
+  },
+  "dependencies": {}
+}

package/src/crud/InlineFormSet.tsx

@@ -1,72 +1,82 @@
 import { Button, Card, Space, Table, Typography } from "antd";
 import { useFieldArray, useFormContext, type FieldValues } from "react-hook-form";
 import { useMemo, type ReactNode } from "react";
-import {
-  InlineFormSetProvider,
-  useInlineFormSetContext,
-  type InlineFormSetLayout,
-} from "./context/InlineFormContext";
-import type { Identifier } from "../data/dataProviderTypes";
-import type { DataProvider } from "../data/dataProviderTypes";
-import { inlineArrayName as buildInlineArrayName } from "./utils/inlineArrayName";
-
-export type { InlineFormSetLayout } from "./context/InlineFormContext";
+import type {
+  InlineColumnDef,
+  InlineFormSetBaseProps,
+  InlineRowContext,
+} from "./types";
+import { nestedFieldPath } from "./utils/nestedFieldPath";
+import { useRegisterInlineField } from "./context/InlineFieldsRegistry";
+import { useRegisterPayloadField } from "./context/PayloadFieldsContext";
+
+export type InlineFormSetLayout = "tabular" | "stacked";
+
+export type InlineFormSetProps = InlineFormSetBaseProps & {
+  columns: InlineColumnDef[];
+};
 
-export type InlineFormSetProps = {
-  resource: string;
-  foreignKey: string;
-  label?: string;
-  children: ReactNode;
-  name?: string;
-  /** `tabular` (default) — Django TabularInline; `stacked` — Django StackedInline. */
-  layout?: InlineFormSetLayout;
+export type InlineFormSetStackedProps = InlineFormSetBaseProps & {
+  /** Field sources in each row — used when appending an empty row. */
+  sources: string[];
+  renderRow: (ctx: InlineRowContext) => ReactNode;
 };
 
-function useInlineRows(arrayName: string) {
-  const ctx = useInlineFormSetContext();
+function emptyRow(sources: string[]) {
+  const row: Record<string, unknown> = {};
+  for (const source of sources) row[source] = undefined;
+  return row;
+}
+
+function useInlineRows(field: string, sources: string[]) {
   const { control } = useFormContext<FieldValues>();
   const { fields, append, remove } = useFieldArray({
     control,
-    name: arrayName,
+    name: field,
+    keyName: "rowKey",
   });
 
-  const appendEmpty = () => {
-    if (!ctx) return;
-    const empty: Record<string, unknown> = {};
-    for (const f of ctx.fields) empty[f.source] = undefined;
-    append(empty);
-  };
+  const appendEmpty = () => append(emptyRow(sources));
 
-  return { ctx, fields, remove, appendEmpty };
+  return { fields, remove, appendEmpty };
 }
 
-function InlineFormSetTable({
-  arrayName,
+/** Tabular inline (Django TabularInline) — table with column headers. */
+export function InlineFormSet({
+  field,
   label,
-}: {
-  arrayName: string;
-  label?: string;
-}) {
-  const { ctx, fields, remove, appendEmpty } = useInlineRows(arrayName);
-
-  const columns = useMemo(() => {
-    if (!ctx) return [];
-    return ctx.fields.map((f) => ({
-      title: f.label ?? f.source,
-      key: f.source,
-      width: f.width,
-      onHeaderCell: () =>
-        f.minWidth != null
-          ? { style: { minWidth: f.minWidth } }
-          : {},
-      onCell: () =>
-        f.minWidth != null ? { style: { minWidth: f.minWidth } } : {},
-      render: (_: unknown, __: unknown, index: number) =>
-        f.render({ name: `${arrayName}.${index}.${f.source}`, index }),
-    }));
-  }, [ctx, arrayName]);
-
-  if (!ctx) return null;
+  payloadKey,
+  transformRows,
+  columns,
+}: InlineFormSetProps) {
+  const sources = useMemo(
+    () => columns.map((col) => col.source),
+    [columns],
+  );
+  const { fields, remove, appendEmpty } = useInlineRows(field, sources);
+
+  useRegisterPayloadField(field);
+  useRegisterInlineField(field, sources, payloadKey, transformRows);
+
+  const tableColumns = useMemo(
+    () =>
+      columns.map((col) => ({
+        title: col.label ?? col.source,
+        key: col.source,
+        width: col.width,
+        onHeaderCell: () =>
+          col.minWidth != null ? { style: { minWidth: col.minWidth } } : {},
+        onCell: () =>
+          col.minWidth != null ? { style: { minWidth: col.minWidth } } : {},
+        render: (_: unknown, __: unknown, index: number) =>
+          col.cell({
+            name: nestedFieldPath(field, index, col.source),
+            index,
+            field,
+          }),
+      })),
+    [columns, field],
+  );
 
   return (
     <div style={{ marginTop: 24 }}>
@@ -75,9 +85,9 @@ function InlineFormSetTable({
         size="small"
         pagination={false}
         scroll={{ x: "max-content" }}
-        dataSource={fields.map((f) => ({ ...f, key: f.id }))}
+        dataSource={fields.map((f) => ({ ...f, key: f.rowKey }))}
         columns={[
-          ...columns,
+          ...tableColumns,
           {
             title: "",
             key: "__remove",
@@ -102,40 +112,45 @@ function InlineFormSetTable({
   );
 }
 
-function InlineFormSetStacked({
-  arrayName,
+/** Stacked inline (Django StackedInline) — each row in a card with field labels. */
+export function InlineFormSetStacked({
+  field,
   label,
-}: {
-  arrayName: string;
-  label?: string;
-}) {
-  const { ctx, fields, remove, appendEmpty } = useInlineRows(arrayName);
+  payloadKey,
+  transformRows,
+  sources,
+  renderRow,
+}: InlineFormSetStackedProps) {
+  const { fields, remove, appendEmpty } = useInlineRows(field, sources);
 
-  if (!ctx) return null;
+  useRegisterPayloadField(field);
+  useRegisterInlineField(field, sources, payloadKey, transformRows);
 
   return (
     <div style={{ marginTop: 24 }}>
       <Typography.Title level={5}>{label ?? "Related items"}</Typography.Title>
       <Space orientation="vertical" size="middle" style={{ width: "100%" }}>
-        {fields.map((field, index) => (
+        {fields.map((rowField, index) => (
           <Card
-            key={field.id}
+            key={rowField.rowKey}
             size="small"
             title={`Item ${index + 1}`}
             extra={
-              <Button type="link" danger size="small" onClick={() => remove(index)}>
+              <Button
+                type="link"
+                danger
+                size="small"
+                onClick={() => remove(index)}
+              >
                 Remove
               </Button>
             }
           >
-            {ctx.fields.map((f) => (
-              <div key={f.source}>
-                {f.render({
-                  name: `${arrayName}.${index}.${f.source}`,
-                  index,
-                })}
-              </div>
-            ))}
+            {renderRow({
+              field,
+              index,
+              name: (source) => nestedFieldPath(field, index, source),
+            })}
           </Card>
         ))}
       </Space>
@@ -145,87 +160,3 @@ function InlineFormSetStacked({
     </div>
   );
 }
-
-export function InlineFormSet({
-  resource,
-  label,
-  children,
-  name,
-  layout = "tabular",
-}: InlineFormSetProps) {
-  const arrayName = buildInlineArrayName(resource, name);
-
-  return (
-    <InlineFormSetProvider arrayName={arrayName} layout={layout}>
-      {children}
-      {layout === "stacked" ? (
-        <InlineFormSetStacked arrayName={arrayName} label={label} />
-      ) : (
-        <InlineFormSetTable arrayName={arrayName} label={label} />
-      )}
-    </InlineFormSetProvider>
-  );
-}
-
-export type SaveInlineOptions = {
-  resource: string;
-  foreignKey: string;
-  parentId: Identifier;
-  rows: Record<string, unknown>[];
-  existingIds?: Identifier[];
-  /** Return true when the error was handled (field errors applied). Stops saving further rows. */
-  onRowError?: (error: unknown, index: number) => boolean;
-};
-
-export async function saveInlineRows(
-  dp: DataProvider,
-  opts: SaveInlineOptions,
-): Promise<boolean> {
-  const { resource, foreignKey, parentId, rows, existingIds = [], onRowError } =
-    opts;
-  const keptIds: Identifier[] = [];
-
-  for (let index = 0; index < rows.length; index++) {
-    const row = rows[index];
-    try {
-      const { id: _id, ...rest } = row;
-      const data = { ...rest, [foreignKey]: parentId };
-      const rowId = row.id as Identifier | undefined;
-      if (rowId != null && existingIds.some((e) => e === rowId)) {
-        await dp.update(resource, { id: rowId, data });
-        keptIds.push(rowId);
-      } else {
-        const res = await dp.create(resource, data);
-        const created = res.data as { id: Identifier };
-        keptIds.push(created.id);
-      }
-    } catch (e) {
-      if (onRowError?.(e, index)) return false;
-      throw e;
-    }
-  }
-
-  for (const oldId of existingIds) {
-    if (!keptIds.some((k) => k === oldId)) {
-      await dp.delete(resource, oldId);
-    }
-  }
-
-  return true;
-}
-
-export async function loadInlineRows(
-  dp: DataProvider,
-  resource: string,
-  foreignKey: string,
-  parentId: Identifier,
-) {
-  const res = await dp.getList(resource, {
-    filter: { [foreignKey]: Number(parentId) || parentId },
-    pagination: { page: 1, perPage: 500 },
-  });
-  return {
-    rows: res.data as Record<string, unknown>[],
-    ids: (res.data as { id: Identifier }[]).map((r) => r.id),
-  };
-}