ding-react-admin 1.0.0

package/src/crud/fields/FieldWrapper.tsx

@@ -0,0 +1,109 @@
+import { Form } from "antd";
+import { Controller, useFormContext, type FieldValues } from "react-hook-form";
+import type { ReactNode } from "react";
+import type { FieldRules } from "../types";
+import { useFormMetaOptional } from "../context/FormContext";
+import { useRegisterFormSource } from "../context/FormFieldsContext";
+
+export type FieldWrapperProps = {
+  source: string;
+  label?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  children: (props: {
+    value: unknown;
+    onChange: (value: unknown) => void;
+    onBlur: () => void;
+    disabled?: boolean;
+  }) => ReactNode;
+};
+
+export function FieldWrapper({
+  source,
+  label,
+  required,
+  rules,
+  children,
+}: FieldWrapperProps) {
+  const { control } = useFormContext<FieldValues>();
+  const meta = useFormMetaOptional();
+  const fieldLabel = label ?? source;
+  useRegisterFormSource(source);
+
+  return (
+    <Controller
+      name={source}
+      control={control}
+      rules={{
+        required: required ? `${fieldLabel} is required` : false,
+        ...rules,
+      }}
+      render={({ field, fieldState }) => (
+        <Form.Item
+          label={fieldLabel}
+          validateStatus={fieldState.error ? "error" : undefined}
+          help={fieldState.error?.message}
+          required={required}
+        >
+          {children({
+            value: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            disabled: meta?.disabled,
+          })}
+        </Form.Item>
+      )}
+    />
+  );
+}
+
+export function InlineFieldWrapper({
+  name,
+  label,
+  required,
+  rules,
+  hideLabel,
+  children,
+}: {
+  name: string;
+  label?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  /** Tabular inlines use column headers — suppress per-cell labels. */
+  hideLabel?: boolean;
+  children: (props: {
+    value: unknown;
+    onChange: (value: unknown) => void;
+    onBlur: () => void;
+  }) => ReactNode;
+}) {
+  const { control } = useFormContext<FieldValues>();
+  const fieldLabel = hideLabel ? undefined : label;
+  const requiredMessage = label ?? "This field";
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={{
+        required: required ? `${requiredMessage} is required` : false,
+        ...rules,
+      }}
+      render={({ field, fieldState }) => (
+        <Form.Item
+          label={fieldLabel}
+          validateStatus={fieldState.error ? "error" : undefined}
+          help={fieldState.error?.message}
+          required={required && !hideLabel}
+          style={{ marginBottom: 0 }}
+        >
+          {children({
+            value: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+          })}
+        </Form.Item>
+      )}
+    />
+  );
+}

package/src/crud/fields/NumberField.tsx

@@ -0,0 +1,50 @@
+import { InputNumber } from "antd";
+import type { CSSProperties } from "react";
+import type { BaseSourceProps, FieldRules, InlineFieldOptions } from "../types";
+import { useInlineOrFormField } from "./useInlineOrFormField";
+
+export type NumberFieldProps = BaseSourceProps &
+  InlineFieldOptions & {
+    required?: boolean;
+    rules?: FieldRules;
+    min?: number;
+    max?: number;
+    step?: number;
+    inputStyle?: CSSProperties;
+  };
+
+export function NumberField({
+  source,
+  label,
+  required,
+  rules,
+  min,
+  max,
+  step,
+  width: inlineWidth,
+  minWidth: inlineMinWidth,
+  inputStyle,
+}: NumberFieldProps) {
+  const field = useInlineOrFormField(
+    source,
+    label,
+    required,
+    rules,
+    ({ value, onChange, onBlur, disabled }) => (
+      <InputNumber
+        value={value as number | undefined}
+        onChange={(v) => onChange(v)}
+        onBlur={onBlur}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        style={{ width: "100%", ...inputStyle }}
+      />
+    ),
+    { width: inlineWidth, minWidth: inlineMinWidth },
+  );
+
+  if (field.mode === "inline") return null;
+  return field.element;
+}

package/src/crud/fields/PasswordField.tsx

@@ -0,0 +1,98 @@
+import { Input } from "antd";
+import { useWatch } from "react-hook-form";
+import type { BaseSourceProps, FieldRules, InlineFieldOptions } from "../types";
+import { useInlineOrFormField } from "./useInlineOrFormField";
+
+export type PasswordFieldProps = BaseSourceProps &
+  InlineFieldOptions & {
+    required?: boolean;
+    rules?: FieldRules;
+    /** When set, renders a second field and validates it matches `source`. */
+    confirmSource?: string;
+    confirmLabel?: string;
+    autoComplete?: string;
+  };
+
+function PasswordInputField({
+  source,
+  label,
+  required,
+  rules,
+  autoComplete,
+  width: inlineWidth,
+  minWidth: inlineMinWidth,
+}: PasswordFieldProps) {
+  const field = useInlineOrFormField(
+    source,
+    label,
+    required,
+    rules,
+    ({ value, onChange, onBlur, disabled }) => (
+      <Input.Password
+        value={value as string | undefined}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={onBlur}
+        disabled={disabled}
+        autoComplete={autoComplete}
+      />
+    ),
+    { width: inlineWidth, minWidth: inlineMinWidth },
+  );
+
+  if (field.mode === "inline") return null;
+  return field.element;
+}
+
+export function PasswordField({
+  source,
+  label,
+  required,
+  rules,
+  confirmSource,
+  confirmLabel = "Confirm password",
+  autoComplete = "new-password",
+  width,
+  minWidth,
+}: PasswordFieldProps) {
+  const password = useWatch({ name: source, disabled: !confirmSource });
+
+  if (!confirmSource) {
+    return (
+      <PasswordInputField
+        source={source}
+        label={label}
+        required={required}
+        rules={rules}
+        autoComplete={autoComplete}
+        width={width}
+        minWidth={minWidth}
+      />
+    );
+  }
+
+  return (
+    <>
+      <PasswordInputField
+        source={source}
+        label={label}
+        required={required}
+        rules={rules}
+        autoComplete={autoComplete}
+        width={width}
+        minWidth={minWidth}
+      />
+      <PasswordInputField
+        source={confirmSource}
+        label={confirmLabel}
+        required={required}
+        autoComplete={autoComplete}
+        width={width}
+        minWidth={minWidth}
+        rules={{
+          validate: (value: string) =>
+            !password || value === password || "Passwords do not match",
+        }}
+      />
+    </>
+  );
+}

package/src/crud/fields/ReferenceField.tsx

@@ -0,0 +1,191 @@
+import { Select } from "antd";
+
+import type { CSSProperties } from "react";
+
+import { useMemo, useState } from "react";
+
+import type {
+
+  BaseSourceProps,
+
+  ChoiceOption,
+
+  FieldRules,
+
+  InlineFieldOptions,
+
+  ReferenceProps,
+
+} from "../types";
+
+import { useChoices } from "../utils/useChoices";
+
+import { useInlineOrFormField } from "./useInlineOrFormField";
+
+
+
+export type ReferenceFieldProps = BaseSourceProps &
+
+  ReferenceProps &
+
+  InlineFieldOptions & {
+
+    required?: boolean;
+
+    rules?: FieldRules;
+
+    search?: boolean;
+
+    allowClear?: boolean;
+
+    disabled?: boolean;
+
+    /** Applied to the underlying Select / input control. */
+
+    inputStyle?: CSSProperties;
+
+    /** Called after the value changes (e.g. to update dependent fields). */
+
+    onValueChange?: (
+
+      value: unknown,
+
+      option: ChoiceOption | undefined,
+
+      meta: { name?: string; index?: number },
+
+    ) => void;
+
+  };
+
+
+
+export function ReferenceField({
+
+  source,
+
+  label,
+
+  reference,
+
+  choices,
+
+  optionLabel = "name",
+
+  optionValue = "id",
+
+  required,
+
+  rules,
+
+  search,
+
+  allowClear,
+
+  disabled: disabledProp,
+
+  width: inlineWidth,
+
+  minWidth: inlineMinWidth,
+
+  inputStyle,
+
+  onValueChange,
+
+}: ReferenceFieldProps) {
+
+  const [searchText, setSearchText] = useState<string | undefined>();
+
+  const { options, loading, optionForValue } = useChoices(
+
+    choices,
+
+    reference,
+
+    optionLabel,
+
+    optionValue,
+
+    search ? searchText : undefined,
+
+  );
+
+
+
+  const selectOptions = useMemo(
+
+    () =>
+
+      options.map((o) => ({
+
+        label: o.label,
+
+        value: o.value as string | number,
+
+      })),
+
+    [options],
+
+  );
+
+
+
+  const field = useInlineOrFormField(
+
+    source,
+
+    label,
+
+    required,
+
+    rules,
+
+    ({ value, onChange, disabled, name, index }) => (
+
+      <Select
+
+        value={value as string | number | undefined}
+
+        onChange={(next) => {
+
+          onChange(next);
+
+          onValueChange?.(next, optionForValue(next), { name, index });
+
+        }}
+
+        options={selectOptions}
+
+        loading={loading && options.length === 0}
+
+        showSearch={search}
+
+        filterOption={search ? false : undefined}
+
+        onSearch={search ? setSearchText : undefined}
+
+        allowClear={allowClear}
+
+        disabled={disabled || disabledProp}
+
+        optionFilterProp="label"
+
+        style={{ width: "100%", minWidth: 160, ...inputStyle }}
+
+      />
+
+    ),
+
+    { width: inlineWidth, minWidth: inlineMinWidth },
+
+  );
+
+
+
+  if (field.mode === "inline") return null;
+
+  return field.element;
+
+}
+
+

package/src/crud/fields/ReferenceManyField.tsx

@@ -0,0 +1,70 @@
+import { Select } from "antd";
+import { useMemo, useState } from "react";
+import type { BaseSourceProps, FieldRules, ReferenceProps } from "../types";
+import { useChoices } from "../utils/useChoices";
+import { useInlineOrFormField } from "./useInlineOrFormField";
+
+export type ReferenceManyFieldProps = BaseSourceProps &
+  ReferenceProps & {
+    required?: boolean;
+    rules?: FieldRules;
+    search?: boolean;
+    allowClear?: boolean;
+  };
+
+export function ReferenceManyField({
+  source,
+  label,
+  reference,
+  choices,
+  optionLabel = "name",
+  optionValue = "id",
+  required,
+  rules,
+  search,
+  allowClear = true,
+}: ReferenceManyFieldProps) {
+  const [searchText, setSearchText] = useState<string | undefined>();
+  const { options, loading } = useChoices(
+    choices,
+    reference,
+    optionLabel,
+    optionValue,
+    search ? searchText : undefined,
+  );
+
+  const selectOptions = useMemo(
+    () =>
+      options.map((o) => ({
+        label: o.label,
+        value: o.value as string | number,
+      })),
+    [options],
+  );
+
+  const field = useInlineOrFormField(
+    source,
+    label,
+    required,
+    rules,
+    ({ value, onChange, disabled }) => (
+      <Select
+        mode="multiple"
+        value={(value as (string | number)[] | undefined) ?? []}
+        onChange={onChange}
+        options={selectOptions}
+        loading={loading}
+        showSearch={search}
+        filterOption={search ? false : undefined}
+        onSearch={search ? setSearchText : undefined}
+        allowClear={allowClear}
+        disabled={disabled}
+        optionFilterProp="label"
+        style={{ width: "100%" }}
+      />
+    ),
+  );
+
+  if (field.mode === "inline") return null;
+  return field.element;
+}

package/src/crud/fields/SelectField.tsx

@@ -0,0 +1,42 @@
+import { Select } from "antd";
+import type { BaseSourceProps, ChoiceOption, FieldRules } from "../types";
+import { FieldWrapper } from "./FieldWrapper";
+
+export type SelectFieldProps = BaseSourceProps & {
+  required?: boolean;
+  rules?: FieldRules;
+  choices: ChoiceOption[];
+  mode?: "multiple";
+  allowClear?: boolean;
+};
+
+export function SelectField({
+  source,
+  label,
+  required,
+  rules,
+  choices,
+  mode,
+  allowClear,
+}: SelectFieldProps) {
+  return (
+    <FieldWrapper
+      source={source}
+      label={label}
+      required={required}
+      rules={rules}
+    >
+      {({ value, onChange, disabled }) => (
+        <Select
+          value={value as string | number | (string | number)[] | undefined}
+          onChange={onChange}
+          options={choices}
+          mode={mode}
+          allowClear={allowClear}
+          disabled={disabled}
+          style={{ width: "100%" }}
+        />
+      )}
+    </FieldWrapper>
+  );
+}

package/src/crud/fields/TextField.tsx

@@ -0,0 +1,44 @@
+import { Input } from "antd";
+import type { CSSProperties } from "react";
+import type { BaseSourceProps, FieldRules, InlineFieldOptions } from "../types";
+import { useInlineOrFormField } from "./useInlineOrFormField";
+
+export type TextFieldProps = BaseSourceProps &
+  InlineFieldOptions & {
+    required?: boolean;
+    rules?: FieldRules;
+    placeholder?: string;
+    inputStyle?: CSSProperties;
+  };
+
+export function TextField({
+  source,
+  label,
+  required,
+  rules,
+  placeholder,
+  width: inlineWidth,
+  minWidth: inlineMinWidth,
+  inputStyle,
+}: TextFieldProps) {
+  const field = useInlineOrFormField(
+    source,
+    label,
+    required,
+    rules,
+    ({ value, onChange, onBlur, disabled }) => (
+      <Input
+        value={value as string | undefined}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={onBlur}
+        placeholder={placeholder}
+        disabled={disabled}
+        style={inputStyle}
+      />
+    ),
+    { width: inlineWidth, minWidth: inlineMinWidth },
+  );
+
+  if (field.mode === "inline") return null;
+  return field.element;
+}

package/src/crud/fields/useInlineOrFormField.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useMemo, useRef, type ReactNode } from "react";
+import { useInlineFormSetContext } from "../context/InlineFormContext";
+import type {
+  FieldRenderProps,
+  FieldRules,
+  InlineFieldDefinition,
+  InlineFieldOptions,
+} from "../types";
+import { FieldWrapper, InlineFieldWrapper } from "./FieldWrapper";
+
+export function useInlineOrFormField(
+  source: string,
+  label: string | undefined,
+  required: boolean | undefined,
+  rules: FieldRules | undefined,
+  renderInput: (props: FieldRenderProps) => ReactNode,
+  inlineOptions?: InlineFieldOptions,
+) {
+  const inlineCtx = useInlineFormSetContext();
+  const registerField = inlineCtx?.registerField;
+  const isInline = registerField != null;
+  const renderInputRef = useRef(renderInput);
+  renderInputRef.current = renderInput;
+
+  const inlineDef = useMemo((): InlineFieldDefinition | null => {
+    if (!registerField) return null;
+    return {
+      key: source,
+      source,
+      label,
+      width: inlineOptions?.width,
+      minWidth: inlineOptions?.minWidth,
+      render: ({ name, index }) => (
+        <InlineFieldWrapper
+          name={name}
+          label={label}
+          required={required}
+          rules={rules}
+          hideLabel={inlineCtx?.layout !== "stacked"}
+        >
+          {({ value, onChange, onBlur }) =>
+            renderInputRef.current({
+              value,
+              onChange,
+              onBlur,
+              name,
+              index,
+            })
+          }
+        </InlineFieldWrapper>
+      ),
+    };
+  }, [
+    registerField,
+    source,
+    label,
+    required,
+    rules,
+    inlineCtx?.layout,
+    inlineOptions?.width,
+    inlineOptions?.minWidth,
+  ]);
+
+  const inlineDefRef = useRef(inlineDef);
+  inlineDefRef.current = inlineDef;
+
+  useEffect(() => {
+    if (!registerField) return;
+    const def = inlineDefRef.current;
+    if (!def) return;
+    return registerField(def);
+  }, [registerField, source]);
+
+  if (isInline) return { mode: "inline" as const };
+
+  return {
+    mode: "form" as const,
+    element: (
+      <FieldWrapper
+        source={source}
+        label={label}
+        required={required}
+        rules={rules}
+      >
+        {({ value, onChange, onBlur, disabled }) =>
+          renderInput({ value, onChange, onBlur, disabled })
+        }
+      </FieldWrapper>
+    ),
+  };
+}