ding-react-admin 1.0.0

package/src/crud/FormTabs.tsx

@@ -0,0 +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}
+    />
+  );
+}

package/src/crud/InlineFormSet.tsx

@@ -0,0 +1,231 @@
+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";
+
+export type InlineFormSetProps = {
+  resource: string;
+  foreignKey: string;
+  label?: string;
+  children: ReactNode;
+  name?: string;
+  /** `tabular` (default) — Django TabularInline; `stacked` — Django StackedInline. */
+  layout?: InlineFormSetLayout;
+};
+
+function useInlineRows(arrayName: string) {
+  const ctx = useInlineFormSetContext();
+  const { control } = useFormContext<FieldValues>();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: arrayName,
+  });
+
+  const appendEmpty = () => {
+    if (!ctx) return;
+    const empty: Record<string, unknown> = {};
+    for (const f of ctx.fields) empty[f.source] = undefined;
+    append(empty);
+  };
+
+  return { ctx, fields, remove, appendEmpty };
+}
+
+function InlineFormSetTable({
+  arrayName,
+  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;
+
+  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.id }))}
+        columns={[
+          ...columns,
+          {
+            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>
+  );
+}
+
+function InlineFormSetStacked({
+  arrayName,
+  label,
+}: {
+  arrayName: string;
+  label?: string;
+}) {
+  const { ctx, fields, remove, appendEmpty } = useInlineRows(arrayName);
+
+  if (!ctx) return null;
+
+  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) => (
+          <Card
+            key={field.id}
+            size="small"
+            title={`Item ${index + 1}`}
+            extra={
+              <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>
+            ))}
+          </Card>
+        ))}
+      </Space>
+      <Button type="dashed" style={{ marginTop: 8 }} onClick={appendEmpty}>
+        Add item
+      </Button>
+    </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),
+  };
+}

package/src/crud/ListActionsBar.tsx

@@ -0,0 +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>
+  );
+}