ding-react-admin 1.0.0

package/src/crud/columns/DateColumn.tsx

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

package/src/crud/columns/NumberColumn.tsx

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

package/src/crud/columns/ReferenceColumn.tsx

@@ -0,0 +1,85 @@
+import { useMemo } from "react";
+import type { BaseSourceProps, DisplayProps, ReferenceProps } from "../types";
+import { useRegisterColumn } from "../context/ListContext";
+import { useChoices } from "../utils/useChoices";
+import { renderDisplayValue } from "./TextColumn";
+
+export type ReferenceColumnProps = BaseSourceProps &
+  ReferenceProps &
+  DisplayProps & {
+    sortable?: boolean;
+  };
+
+function ReferenceColumnCell({
+  record,
+  source,
+  display,
+  reference,
+  choices,
+  optionLabel,
+  optionValue,
+}: ReferenceColumnProps & { record: Record<string, unknown> }) {
+  const { labelForValue } = useChoices(
+    choices,
+    reference,
+    optionLabel,
+    optionValue,
+  );
+  const raw = record[source];
+  if (typeof display === "function") return <>{display(record)}</>;
+  if (display && display !== source) {
+    const nested = renderDisplayValue(record, source, display);
+    return <>{nested != null ? String(nested) : "—"}</>;
+  }
+  return <>{labelForValue(raw)}</>;
+}
+
+export function ReferenceColumn({
+  source,
+  label,
+  reference,
+  choices,
+  optionLabel = "name",
+  optionValue = "id",
+  display,
+  sortable = true,
+}: ReferenceColumnProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      sortable,
+      buildColumn: () => ({
+        title: label ?? source,
+        dataIndex: source,
+        key: source,
+        sorter: sortable ? true : undefined,
+        render: (_: unknown, record: Record<string, unknown>) => (
+          <ReferenceColumnCell
+            record={record}
+            source={source}
+            label={label}
+            reference={reference}
+            choices={choices}
+            optionLabel={optionLabel}
+            optionValue={optionValue}
+            display={display ?? optionLabel}
+          />
+        ),
+      }),
+    }),
+    [
+      source,
+      label,
+      sortable,
+      reference,
+      choices,
+      optionLabel,
+      optionValue,
+      display,
+    ],
+  );
+  useRegisterColumn(def);
+  return null;
+}

package/src/crud/columns/ReferenceManyColumn.tsx

@@ -0,0 +1,67 @@
+import { useMemo } from "react";
+import type { BaseSourceProps, DisplayProps, ReferenceProps } from "../types";
+import { useRegisterColumn } from "../context/ListContext";
+import { useChoices } from "../utils/useChoices";
+
+export type ReferenceManyColumnProps = BaseSourceProps &
+  ReferenceProps &
+  DisplayProps & {
+    sortable?: boolean;
+  };
+
+function ReferenceManyColumnCell({
+  record,
+  source,
+  reference,
+  choices,
+  optionLabel,
+  optionValue,
+}: ReferenceManyColumnProps & { record: Record<string, unknown> }) {
+  const { labelsForValues } = useChoices(
+    choices,
+    reference,
+    optionLabel,
+    optionValue,
+  );
+  const raw = record[source];
+  const values = Array.isArray(raw) ? raw : [];
+  return <>{labelsForValues(values)}</>;
+}
+
+export function ReferenceManyColumn({
+  source,
+  label,
+  reference,
+  choices,
+  optionLabel = "name",
+  optionValue = "id",
+  sortable = false,
+}: ReferenceManyColumnProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      sortable,
+      buildColumn: () => ({
+        title: label ?? source,
+        dataIndex: source,
+        key: source,
+        sorter: sortable ? true : undefined,
+        render: (_: unknown, record: Record<string, unknown>) => (
+          <ReferenceManyColumnCell
+            record={record}
+            source={source}
+            reference={reference}
+            choices={choices}
+            optionLabel={optionLabel}
+            optionValue={optionValue}
+          />
+        ),
+      }),
+    }),
+    [source, label, sortable, reference, choices, optionLabel, optionValue],
+  );
+  useRegisterColumn(def);
+  return null;
+}

package/src/crud/columns/TextColumn.tsx

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import type { BaseSourceProps } from "../types";
+import { getByPath } from "../utils/getByPath";
+import { useRegisterColumn } from "../context/ListContext";
+
+export type TextColumnProps = BaseSourceProps & {
+  sortable?: boolean;
+};
+
+export function TextColumn({ source, label, sortable = true }: TextColumnProps) {
+  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;
+}
+
+export function renderDisplayValue(
+  record: Record<string, unknown>,
+  source: string,
+  display?: string | ((record: Record<string, unknown>) => unknown),
+): unknown {
+  if (typeof display === "function") return display(record);
+  if (display) return getByPath(record, display);
+  return record[source];
+}

package/src/crud/context/FilterContext.tsx

@@ -0,0 +1,71 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import type { FilterDefinition } from "../types";
+
+type FilterContextValue = {
+  registerFilter: (def: FilterDefinition) => () => void;
+  filters: FilterDefinition[];
+  values: Record<string, unknown>;
+  setFilterValue: (source: string, value: unknown) => void;
+};
+
+const FilterContext = createContext<FilterContextValue | null>(null);
+
+export function FilterContextProvider({
+  children,
+  values,
+  setFilterValue,
+}: {
+  children: ReactNode;
+  values: Record<string, unknown>;
+  setFilterValue: (source: string, value: unknown) => void;
+}) {
+  const [filters, setFilters] = useState<FilterDefinition[]>([]);
+
+  const registerFilter = useCallback((def: FilterDefinition) => {
+    setFilters((prev) => {
+      const idx = prev.findIndex((f) => f.key === def.key);
+      if (idx < 0) return [...prev, def];
+      if (prev[idx] === def) return prev;
+      const next = [...prev];
+      next[idx] = def;
+      return next;
+    });
+    return () => {
+      setFilters((prev) => prev.filter((f) => f.key !== def.key));
+    };
+  }, []);
+
+  const value = useMemo(
+    (): FilterContextValue => ({
+      filters,
+      values,
+      setFilterValue,
+      registerFilter,
+    }),
+    [filters, values, setFilterValue, registerFilter],
+  );
+
+  return (
+    <FilterContext.Provider value={value}>{children}</FilterContext.Provider>
+  );
+}
+
+export function useFilterContext() {
+  return useContext(FilterContext);
+}
+
+export function useRegisterFilter(def: FilterDefinition) {
+  const registerFilter = useFilterContext()?.registerFilter;
+  useEffect(() => {
+    if (!registerFilter) return;
+    return registerFilter(def);
+  }, [registerFilter, def]);
+}

package/src/crud/context/FormContext.tsx

@@ -0,0 +1,39 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+type FormMetaContextValue = {
+  resource: string;
+  isNew: boolean;
+  disabled?: boolean;
+};
+
+const FormMetaContext = createContext<FormMetaContextValue | null>(null);
+
+export function FormMetaProvider({
+  children,
+  resource,
+  isNew,
+  disabled,
+}: {
+  children: ReactNode;
+  resource: string;
+  isNew: boolean;
+  disabled?: boolean;
+}) {
+  return (
+    <FormMetaContext.Provider value={{ resource, isNew, disabled }}>
+      {children}
+    </FormMetaContext.Provider>
+  );
+}
+
+export function useFormMeta() {
+  const ctx = useContext(FormMetaContext);
+  if (!ctx) {
+    throw new Error("Field components must be used within ResourceForm");
+  }
+  return ctx;
+}
+
+export function useFormMetaOptional() {
+  return useContext(FormMetaContext);
+}

package/src/crud/context/FormFieldsContext.tsx

@@ -0,0 +1,76 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  type MutableRefObject,
+  type ReactNode,
+} from "react";
+import { useFormSectionSourcesOptional } from "./FormSectionContext";
+
+type FormFieldsContextValue = {
+  registerSource: (source: string) => () => void;
+  getSources: () => string[];
+};
+
+const FormFieldsContext = createContext<FormFieldsContextValue | null>(null);
+
+export function FormFieldsProvider({
+  children,
+  sourcesRef: externalSourcesRef,
+}: {
+  children: ReactNode;
+  /** Optional ref shared with submit handler outside this provider. */
+  sourcesRef?: MutableRefObject<Set<string>>;
+}) {
+  const internalSourcesRef = useRef(new Set<string>());
+  const sourcesRef = externalSourcesRef ?? internalSourcesRef;
+
+  const registerSource = useCallback(
+    (source: string) => {
+      sourcesRef.current.add(source);
+      return () => {
+        sourcesRef.current.delete(source);
+      };
+    },
+    [sourcesRef],
+  );
+
+  const getSources = useCallback(
+    () => Array.from(sourcesRef.current),
+    [sourcesRef],
+  );
+
+  const value = useMemo(
+    () => ({ registerSource, getSources }),
+    [registerSource, getSources],
+  );
+
+  return (
+    <FormFieldsContext.Provider value={value}>
+      {children}
+    </FormFieldsContext.Provider>
+  );
+}
+
+export function useFormFieldsOptional() {
+  return useContext(FormFieldsContext);
+}
+
+export function useRegisterFormSource(source: string) {
+  const ctx = useFormFieldsOptional();
+  const registerSource = ctx?.registerSource;
+  const sectionSourcesRef = useFormSectionSourcesOptional();
+
+  useEffect(() => {
+    if (!registerSource) return;
+    const unregister = registerSource(source);
+    sectionSourcesRef?.current.add(source);
+    return () => {
+      unregister();
+      sectionSourcesRef?.current.delete(source);
+    };
+  }, [registerSource, sectionSourcesRef, source]);
+}

package/src/crud/context/FormSectionContext.tsx

@@ -0,0 +1,22 @@
+import { createContext, useContext, type MutableRefObject, type ReactNode } from "react";
+
+const FormSectionSourcesContext =
+  createContext<MutableRefObject<Set<string>> | null>(null);
+
+export function FormSectionSourcesProvider({
+  sourcesRef,
+  children,
+}: {
+  sourcesRef: MutableRefObject<Set<string>>;
+  children: ReactNode;
+}) {
+  return (
+    <FormSectionSourcesContext.Provider value={sourcesRef}>
+      {children}
+    </FormSectionSourcesContext.Provider>
+  );
+}
+
+export function useFormSectionSourcesOptional() {
+  return useContext(FormSectionSourcesContext);
+}

package/src/crud/context/InlineFormContext.tsx

@@ -0,0 +1,71 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import type { InlineFieldDefinition } from "../types";
+
+export type InlineFormSetLayout = "tabular" | "stacked";
+
+type InlineFormSetMeta = {
+  registerField: (def: InlineFieldDefinition) => () => void;
+  arrayName: string;
+  layout: InlineFormSetLayout;
+};
+
+const InlineFormSetMetaContext = createContext<InlineFormSetMeta | null>(null);
+const InlineFormSetFieldsContext = createContext<InlineFieldDefinition[]>([]);
+
+export function InlineFormSetProvider({
+  children,
+  arrayName,
+  layout = "tabular",
+}: {
+  children: ReactNode;
+  arrayName: string;
+  layout?: InlineFormSetLayout;
+}) {
+  const [fields, setFields] = useState<InlineFieldDefinition[]>([]);
+
+  const registerField = useCallback((def: InlineFieldDefinition) => {
+    setFields((prev) => {
+      if (prev.some((f) => f.key === def.key)) return prev;
+      return [...prev, def];
+    });
+    return () => {
+      setFields((prev) => prev.filter((f) => f.key !== def.key));
+    };
+  }, []);
+
+  const meta = useMemo(
+    (): InlineFormSetMeta => ({ arrayName, registerField, layout }),
+    [arrayName, registerField, layout],
+  );
+
+  return (
+    <InlineFormSetMetaContext.Provider value={meta}>
+      <InlineFormSetFieldsContext.Provider value={fields}>
+        {children}
+      </InlineFormSetFieldsContext.Provider>
+    </InlineFormSetMetaContext.Provider>
+  );
+}
+
+export function useInlineFormSetContext() {
+  const meta = useContext(InlineFormSetMetaContext);
+  const fields = useContext(InlineFormSetFieldsContext);
+  if (!meta) return null;
+  return { ...meta, fields };
+}
+
+export function useRegisterInlineField(def: InlineFieldDefinition) {
+  const registerField = useContext(InlineFormSetMetaContext)?.registerField;
+  useEffect(() => {
+    if (!registerField) return;
+    return registerField(def);
+  }, [registerField, def]);
+}

package/src/crud/context/ListContext.tsx

@@ -0,0 +1,93 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import type { ColumnDefinition } from "../types";
+import { sortPrioritiesFromSpecs } from "../utils/sortQueryParam";
+
+type ListContextValue = {
+  registerColumn: (def: ColumnDefinition<Record<string, unknown>>) => () => void;
+  columns: ColumnDefinition<Record<string, unknown>>[];
+  toggleSort: (field: string) => void;
+  sortFields: Set<string>;
+  sortOrders: Map<string, "ASC" | "DESC">;
+  sortPriorities: Map<string, number>;
+};
+
+const ListContext = createContext<ListContextValue | null>(null);
+
+export function ListContextProvider({
+  children,
+  toggleSort,
+  sort,
+}: {
+  children: ReactNode;
+  toggleSort: (field: string) => void;
+  sort: { field: string; order: "ASC" | "DESC" }[];
+}) {
+  const [columns, setColumns] = useState<
+    ColumnDefinition<Record<string, unknown>>[]
+  >([]);
+
+  const sortFields = useMemo(() => new Set(sort.map((s) => s.field)), [sort]);
+  const sortOrders = useMemo(
+    () => new Map(sort.map((s) => [s.field, s.order])),
+    [sort],
+  );
+  const sortPriorities = useMemo(() => sortPrioritiesFromSpecs(sort), [sort]);
+
+  const registerColumn = useCallback(
+    (def: ColumnDefinition<Record<string, unknown>>) => {
+      setColumns((prev) => {
+        const idx = prev.findIndex((c) => c.key === def.key);
+        if (idx < 0) return [...prev, def];
+        if (prev[idx] === def) return prev;
+        const next = [...prev];
+        next[idx] = def;
+        return next;
+      });
+      return () => {
+        setColumns((prev) => prev.filter((c) => c.key !== def.key));
+      };
+    },
+    [],
+  );
+
+  const value = useMemo(
+    (): ListContextValue => ({
+      columns,
+      toggleSort,
+      sortFields,
+      sortOrders,
+      sortPriorities,
+      registerColumn,
+    }),
+    [columns, toggleSort, sortFields, sortOrders, sortPriorities, registerColumn],
+  );
+
+  return (
+    <ListContext.Provider value={value}>{children}</ListContext.Provider>
+  );
+}
+
+export function useListContext() {
+  const ctx = useContext(ListContext);
+  if (!ctx) {
+    throw new Error("Column components must be used within ResourceList");
+  }
+  return ctx;
+}
+
+export function useRegisterColumn(
+  def: ColumnDefinition<Record<string, unknown>>,
+) {
+  const { registerColumn } = useListContext();
+  useEffect(() => {
+    return registerColumn(def);
+  }, [registerColumn, def]);
+}

package/src/crud/fields/BooleanField.tsx

@@ -0,0 +1,32 @@
+import { Switch } from "antd";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { useInlineOrFormField } from "./useInlineOrFormField";
+
+export type BooleanFieldProps = BaseSourceProps & {
+  required?: boolean;
+  rules?: FieldRules;
+};
+
+export function BooleanField({
+  source,
+  label,
+  required,
+  rules,
+}: BooleanFieldProps) {
+  const field = useInlineOrFormField(
+    source,
+    label,
+    required,
+    rules,
+    ({ value, onChange, disabled }) => (
+      <Switch
+        checked={Boolean(value)}
+        onChange={onChange}
+        disabled={disabled}
+      />
+    ),
+  );
+
+  if (field.mode === "inline") return null;
+  return field.element;
+}

package/src/crud/fields/DateField.tsx

@@ -0,0 +1,47 @@
+import { DatePicker } from "antd";
+import dayjs from "dayjs";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { useInlineOrFormField } from "./useInlineOrFormField";
+
+const DATE_FORMAT = "YYYY-MM-DD";
+
+export type DateFieldProps = BaseSourceProps & {
+  required?: boolean;
+  rules?: FieldRules;
+  showTime?: boolean;
+};
+
+export function DateField({
+  source,
+  label,
+  required,
+  rules,
+  showTime,
+}: DateFieldProps) {
+  const field = useInlineOrFormField(
+    source,
+    label,
+    required,
+    rules,
+    ({ value, onChange, onBlur, disabled }) => (
+      <DatePicker
+        value={value ? dayjs(String(value)) : null}
+        onChange={(d) =>
+          onChange(
+            d
+              ? d.format(showTime ? `${DATE_FORMAT} HH:mm:ss` : DATE_FORMAT)
+              : null,
+          )
+        }
+        onBlur={onBlur}
+        showTime={showTime}
+        disabled={disabled}
+        format={showTime ? `${DATE_FORMAT} HH:mm:ss` : DATE_FORMAT}
+        style={{ width: "100%" }}
+      />
+    ),
+  );
+
+  if (field.mode === "inline") return null;
+  return field.element;
+}