ding-react-admin 2.0.0 → 2.0.5

package/src/crud/FormTabs.tsx

@@ -1,126 +1,126 @@
-import { Tabs, theme, type TabsProps } from "antd";
-import {
-  Children,
-  isValidElement,
-  useCallback,
-  useMemo,
-  useState,
-  type ReactElement,
-  type ReactNode,
-} from "react";
-import { useFormContext, useFormState } from "react-hook-form";
-import { FormSectionSourcesProvider } from "./context/FormSectionContext";
-import {
-  sectionHasError,
-  useActivateFirstErrorSection,
-  useSectionSourceRefs,
-} from "./utils/formSectionErrors";
-
-export type FormTabProps = {
-  label: ReactNode;
-  children: ReactNode;
-  disabled?: boolean;
-};
-
-export function FormTab(_props: FormTabProps) {
-  return null;
-}
-
-function isFormTab(child: ReactNode): child is ReactElement<FormTabProps> {
-  return isValidElement(child) && child.type === FormTab;
-}
-
-export type FormTabsProps = Omit<TabsProps, "items"> & {
-  children: ReactNode;
-};
-
-export function FormTabs({
-  children,
-  defaultActiveKey,
-  activeKey: controlledActiveKey,
-  onChange,
-  ...tabsProps
-}: FormTabsProps) {
-  const { token } = theme.useToken();
-  const tabs = useMemo(
-    () =>
-      Children.toArray(children)
-        .filter(isFormTab)
-        .map((tab, index) => ({
-          key: (tab.key as string | undefined) ?? String(index),
-          label: tab.props.label,
-          disabled: tab.props.disabled,
-          children: tab.props.children,
-        })),
-    [children],
-  );
-
-  const sectionRefs = useSectionSourceRefs(tabs.length);
-  const isControlled = controlledActiveKey !== undefined;
-  const [internalActiveKey, setInternalActiveKey] = useState(
-    () => (defaultActiveKey as string | undefined) ?? tabs[0]?.key ?? "0",
-  );
-  const activeKey = isControlled ? controlledActiveKey : internalActiveKey;
-
-  const setActiveKey = useCallback(
-    (key: string) => {
-      if (!isControlled) {
-        setInternalActiveKey(key);
-      }
-      onChange?.(key);
-    },
-    [isControlled, onChange],
-  );
-
-  const activateByIndex = useCallback(
-    (index: number) => {
-      const key = tabs[index]?.key;
-      if (key != null) {
-        setActiveKey(key);
-      }
-    },
-    [setActiveKey, tabs],
-  );
-
-  useActivateFirstErrorSection(sectionRefs, activateByIndex);
-
-  const { control, getFieldState } = useFormContext();
-  const formState = useFormState({ control });
-
-  const items = useMemo(
-    () =>
-      tabs.map((tab, index) => {
-        const hasError = sectionHasError(
-          sectionRefs[index].current,
-          getFieldState,
-          formState,
-        );
-
-        return {
-          key: tab.key,
-          label: hasError ? (
-            <span style={{ color: token.colorError }}>{tab.label}</span>
-          ) : (
-            tab.label
-          ),
-          disabled: tab.disabled,
-          children: (
-            <FormSectionSourcesProvider sourcesRef={sectionRefs[index]}>
-              {tab.children}
-            </FormSectionSourcesProvider>
-          ),
-        };
-      }),
-    [formState, getFieldState, sectionRefs, tabs, token.colorError],
-  );
-
-  return (
-    <Tabs
-      destroyOnHidden={false}
-      items={items}
-      activeKey={activeKey}
-      onChange={setActiveKey}
-      {...tabsProps}
-    />
-  );
-}
+import { Tabs, theme, type TabsProps } from "antd";
+import {
+  Children,
+  isValidElement,
+  useCallback,
+  useMemo,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { useFormContext, useFormState } from "react-hook-form";
+import { FormSectionSourcesProvider } from "./context/FormSectionContext";
+import {
+  sectionHasError,
+  useActivateFirstErrorSection,
+  useSectionSourceRefs,
+} from "./utils/formSectionErrors";
+
+export type FormTabProps = {
+  label: ReactNode;
+  children: ReactNode;
+  disabled?: boolean;
+};
+
+export function FormTab(_props: FormTabProps) {
+  return null;
+}
+
+function isFormTab(child: ReactNode): child is ReactElement<FormTabProps> {
+  return isValidElement(child) && child.type === FormTab;
+}
+
+export type FormTabsProps = Omit<TabsProps, "items"> & {
+  children: ReactNode;
+};
+
+export function FormTabs({
+  children,
+  defaultActiveKey,
+  activeKey: controlledActiveKey,
+  onChange,
+  ...tabsProps
+}: FormTabsProps) {
+  const { token } = theme.useToken();
+  const tabs = useMemo(
+    () =>
+      Children.toArray(children)
+        .filter(isFormTab)
+        .map((tab, index) => ({
+          key: (tab.key as string | undefined) ?? String(index),
+          label: tab.props.label,
+          disabled: tab.props.disabled,
+          children: tab.props.children,
+        })),
+    [children],
+  );
+
+  const sectionRefs = useSectionSourceRefs(tabs.length);
+  const isControlled = controlledActiveKey !== undefined;
+  const [internalActiveKey, setInternalActiveKey] = useState(
+    () => (defaultActiveKey as string | undefined) ?? tabs[0]?.key ?? "0",
+  );
+  const activeKey = isControlled ? controlledActiveKey : internalActiveKey;
+
+  const setActiveKey = useCallback(
+    (key: string) => {
+      if (!isControlled) {
+        setInternalActiveKey(key);
+      }
+      onChange?.(key);
+    },
+    [isControlled, onChange],
+  );
+
+  const activateByIndex = useCallback(
+    (index: number) => {
+      const key = tabs[index]?.key;
+      if (key != null) {
+        setActiveKey(key);
+      }
+    },
+    [setActiveKey, tabs],
+  );
+
+  useActivateFirstErrorSection(sectionRefs, activateByIndex);
+
+  const { control, getFieldState } = useFormContext();
+  const formState = useFormState({ control });
+
+  const items = useMemo(
+    () =>
+      tabs.map((tab, index) => {
+        const hasError = sectionHasError(
+          sectionRefs[index].current,
+          getFieldState,
+          formState,
+        );
+
+        return {
+          key: tab.key,
+          label: hasError ? (
+            <span style={{ color: token.colorError }}>{tab.label}</span>
+          ) : (
+            tab.label
+          ),
+          disabled: tab.disabled,
+          children: (
+            <FormSectionSourcesProvider sourcesRef={sectionRefs[index]}>
+              {tab.children}
+            </FormSectionSourcesProvider>
+          ),
+        };
+      }),
+    [formState, getFieldState, sectionRefs, tabs, token.colorError],
+  );
+
+  return (
+    <Tabs
+      destroyOnHidden={false}
+      items={items}
+      activeKey={activeKey}
+      onChange={setActiveKey}
+      {...tabsProps}
+    />
+  );
+}

package/src/crud/InlineFormSet.tsx

@@ -1,162 +1,162 @@
-import { Button, Card, Space, Table, Typography } from "antd";
-import { useFieldArray, useFormContext, type FieldValues } from "react-hook-form";
-import { useMemo, type ReactNode } from "react";
-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 InlineFormSetStackedProps = InlineFormSetBaseProps & {
-  /** Field sources in each row — used when appending an empty row. */
-  sources: string[];
-  renderRow: (ctx: InlineRowContext) => ReactNode;
-};
-
-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: field,
-    keyName: "rowKey",
-  });
-
-  const appendEmpty = () => append(emptyRow(sources));
-
-  return { fields, remove, appendEmpty };
-}
-
-/** Tabular inline (Django TabularInline) — table with column headers. */
-export function InlineFormSet({
-  field,
-  label,
-  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 }}>
-      <Typography.Title level={5}>{label ?? "Related items"}</Typography.Title>
-      <Table
-        size="small"
-        pagination={false}
-        scroll={{ x: "max-content" }}
-        dataSource={fields.map((f) => ({ ...f, key: f.rowKey }))}
-        columns={[
-          ...tableColumns,
-          {
-            title: "",
-            key: "__remove",
-            width: 80,
-            render: (_: unknown, __: unknown, index: number) => (
-              <Button
-                type="link"
-                danger
-                size="small"
-                onClick={() => remove(index)}
-              >
-                Remove
-              </Button>
-            ),
-          },
-        ]}
-      />
-      <Button type="dashed" style={{ marginTop: 8 }} onClick={appendEmpty}>
-        Add row
-      </Button>
-    </div>
-  );
-}
-
-/** Stacked inline (Django StackedInline) — each row in a card with field labels. */
-export function InlineFormSetStacked({
-  field,
-  label,
-  payloadKey,
-  transformRows,
-  sources,
-  renderRow,
-}: InlineFormSetStackedProps) {
-  const { fields, remove, appendEmpty } = useInlineRows(field, sources);
-
-  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((rowField, index) => (
-          <Card
-            key={rowField.rowKey}
-            size="small"
-            title={`Item ${index + 1}`}
-            extra={
-              <Button
-                type="link"
-                danger
-                size="small"
-                onClick={() => remove(index)}
-              >
-                Remove
-              </Button>
-            }
-          >
-            {renderRow({
-              field,
-              index,
-              name: (source) => nestedFieldPath(field, index, source),
-            })}
-          </Card>
-        ))}
-      </Space>
-      <Button type="dashed" style={{ marginTop: 8 }} onClick={appendEmpty}>
-        Add item
-      </Button>
-    </div>
-  );
-}
+import { Button, Card, Space, Table, Typography } from "antd";
+import { useFieldArray, useFormContext, type FieldValues } from "react-hook-form";
+import { useMemo, type ReactNode } from "react";
+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 InlineFormSetStackedProps = InlineFormSetBaseProps & {
+  /** Field sources in each row — used when appending an empty row. */
+  sources: string[];
+  renderRow: (ctx: InlineRowContext) => ReactNode;
+};
+
+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: field,
+    keyName: "rowKey",
+  });
+
+  const appendEmpty = () => append(emptyRow(sources));
+
+  return { fields, remove, appendEmpty };
+}
+
+/** Tabular inline (Django TabularInline) — table with column headers. */
+export function InlineFormSet({
+  field,
+  label,
+  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 }}>
+      <Typography.Title level={5}>{label ?? "Related items"}</Typography.Title>
+      <Table
+        size="small"
+        pagination={false}
+        scroll={{ x: "max-content" }}
+        dataSource={fields.map((f) => ({ ...f, key: f.rowKey }))}
+        columns={[
+          ...tableColumns,
+          {
+            title: "",
+            key: "__remove",
+            width: 80,
+            render: (_: unknown, __: unknown, index: number) => (
+              <Button
+                type="link"
+                danger
+                size="small"
+                onClick={() => remove(index)}
+              >
+                Remove
+              </Button>
+            ),
+          },
+        ]}
+      />
+      <Button type="dashed" style={{ marginTop: 8 }} onClick={appendEmpty}>
+        Add row
+      </Button>
+    </div>
+  );
+}
+
+/** Stacked inline (Django StackedInline) — each row in a card with field labels. */
+export function InlineFormSetStacked({
+  field,
+  label,
+  payloadKey,
+  transformRows,
+  sources,
+  renderRow,
+}: InlineFormSetStackedProps) {
+  const { fields, remove, appendEmpty } = useInlineRows(field, sources);
+
+  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((rowField, index) => (
+          <Card
+            key={rowField.rowKey}
+            size="small"
+            title={`Item ${index + 1}`}
+            extra={
+              <Button
+                type="link"
+                danger
+                size="small"
+                onClick={() => remove(index)}
+              >
+                Remove
+              </Button>
+            }
+          >
+            {renderRow({
+              field,
+              index,
+              name: (source) => nestedFieldPath(field, index, source),
+            })}
+          </Card>
+        ))}
+      </Space>
+      <Button type="dashed" style={{ marginTop: 8 }} onClick={appendEmpty}>
+        Add item
+      </Button>
+    </div>
+  );
+}