ding-react-admin 1.0.4 → 2.0.4

package/src/crud/fields/ReferenceManyField.tsx

@@ -1,76 +1,200 @@
-import { Select } from "antd";
-import { useMemo, useState } from "react";
-import type { BaseSourceProps, FieldRules, ReferenceProps } from "../types";
-import { useChoices } from "../utils/useChoices";
-import { FieldWrapper } from "./FieldWrapper";
-
-export type ReferenceManyFieldProps = BaseSourceProps &
-  ReferenceProps & {
-    name?: string;
-    required?: boolean;
-    rules?: FieldRules;
-    search?: boolean;
-    allowClear?: boolean;
-    hideLabel?: boolean;
-  };
-
-export function ReferenceManyField({
-  source,
-  name,
-  label,
-  reference,
-  choices,
-  optionLabel = "name",
-  optionValue = "id",
-  required,
-  rules,
-  search,
-  allowClear = true,
-  hideLabel,
-}: 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],
-  );
-
-  return (
-    <FieldWrapper
-      source={source}
-      name={name}
-      label={label}
-      required={required}
-      rules={rules}
-      hideLabel={hideLabel}
-    >
-      {({ 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%" }}
-        />
-      )}
-    </FieldWrapper>
-  );
-}
+import { Select } from "antd";
+import { useMemo, useState } from "react";
+import { useWatch } from "react-hook-form";
+import type { BaseSourceProps, FieldRules, ReferenceProps } from "../types";
+import { valuesAsIds } from "../utils/choiceSelectionUtils";
+import { referenceSelectNotFoundContent } from "../utils/referenceSelectNotFoundContent";
+import { useChoices } from "../utils/useChoices";
+import { FieldWrapper } from "./FieldWrapper";
+import { ReferenceInputActions } from "./ReferenceInputActions";
+import type { ResourcePermissions } from "../../permissions/resourcePermissions";
+import type { ReactNode } from "react";
+
+export type ReferenceManyFieldProps = BaseSourceProps &
+  ReferenceProps & {
+    name?: string;
+    required?: boolean;
+    rules?: FieldRules;
+    search?: boolean;
+    allowClear?: boolean;
+    hideLabel?: boolean;
+    referenceForm?: ReactNode;
+    referencePermissions?: ResourcePermissions;
+    referenceTitle?: string;
+    referenceDefaultValues?: Record<string, unknown>;
+    referenceModalWidth?: number;
+    /** When false, hide add button even if catalog defines a form. Default true. */
+    referenceActions?: boolean;
+  };
+
+type ReferenceManyFieldSelectProps = Omit<
+  ReferenceManyFieldProps,
+  "source" | "label" | "required" | "rules" | "hideLabel" | "name"
+> & {
+  value: unknown;
+  onChange: (value: unknown) => void;
+  disabled?: boolean;
+  selectedRecords?: Record<string, unknown> | Record<string, unknown>[];
+};
+
+function ReferenceManyFieldSelect({
+  reference,
+  choices,
+  optionLabel = "name",
+  optionValue = "id",
+  search,
+  allowClear = true,
+  lazy = true,
+  fetchSelected = true,
+  value,
+  onChange,
+  disabled,
+  selectedRecords,
+  referenceForm,
+  referencePermissions,
+  referenceTitle,
+  referenceDefaultValues,
+  referenceModalWidth,
+  referenceActions = true,
+}: ReferenceManyFieldSelectProps) {
+  const [searchText, setSearchText] = useState<string | undefined>();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const active = dropdownOpen || Boolean(searchText);
+  const selectValue = valuesAsIds(value, optionValue);
+
+  const { options, loading, reload } = useChoices(
+    choices,
+    reference,
+    optionLabel,
+    optionValue,
+    search ? searchText : undefined,
+    {
+      lazy,
+      active,
+      selectedValues: value,
+      selectedRecords,
+      fetchSelected,
+    },
+  );
+
+  const selectOptions = useMemo(
+    () =>
+      options.map((o) => ({
+        label: o.label,
+        value: o.value as string | number,
+      })),
+    [options],
+  );
+
+  const select = (
+    <Select
+      mode="multiple"
+      value={selectValue}
+      onChange={onChange}
+      options={selectOptions}
+      loading={loading}
+      notFoundContent={referenceSelectNotFoundContent(loading)}
+      showSearch={search}
+      filterOption={search ? false : undefined}
+      onSearch={search ? setSearchText : undefined}
+      onDropdownVisibleChange={(open) => {
+        setDropdownOpen(open);
+        if (!open) setSearchText(undefined);
+      }}
+      allowClear={allowClear}
+      disabled={disabled}
+      optionFilterProp="label"
+      style={{ width: "100%" }}
+    />
+  );
+
+  if (!referenceActions) return select;
+
+  return (
+    <div style={{ display: "flex", gap: 8, width: "100%", alignItems: "flex-start" }}>
+      <div style={{ flex: 1, minWidth: 0 }}>{select}</div>
+      <ReferenceInputActions
+        reference={reference}
+        referenceForm={referenceForm}
+        referencePermissions={referencePermissions}
+        referenceTitle={referenceTitle}
+        referenceDefaultValues={referenceDefaultValues}
+        referenceModalWidth={referenceModalWidth}
+        disabled={disabled}
+        onCreated={(record) => {
+          const id = record[optionValue];
+          const current = Array.isArray(selectValue) ? selectValue : [];
+          if (current.some((v) => v === id)) {
+            void reload();
+            return;
+          }
+          onChange([...current, id]);
+          void reload();
+        }}
+      />
+    </div>
+  );
+}
+
+export function ReferenceManyField({
+  source,
+  name,
+  label,
+  reference,
+  choices,
+  optionLabel = "name",
+  optionValue = "id",
+  required,
+  rules,
+  search,
+  allowClear = true,
+  hideLabel,
+  lazy = true,
+  recordSource,
+  fetchSelected = true,
+  referenceForm,
+  referencePermissions,
+  referenceTitle,
+  referenceDefaultValues,
+  referenceModalWidth,
+  referenceActions = true,
+}: ReferenceManyFieldProps) {
+  const embeddedRecords = useWatch({
+    name: recordSource ?? "",
+    disabled: !recordSource,
+  }) as Record<string, unknown> | Record<string, unknown>[] | undefined;
+
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, disabled }) => (
+        <ReferenceManyFieldSelect
+          reference={reference}
+          choices={choices}
+          optionLabel={optionLabel}
+          optionValue={optionValue}
+          search={search}
+          allowClear={allowClear}
+          lazy={lazy}
+          fetchSelected={fetchSelected}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          selectedRecords={recordSource ? embeddedRecords : undefined}
+          referenceForm={referenceForm}
+          referencePermissions={referencePermissions}
+          referenceTitle={referenceTitle}
+          referenceDefaultValues={referenceDefaultValues}
+          referenceModalWidth={referenceModalWidth}
+          referenceActions={referenceActions}
+        />
+      )}
+    </FieldWrapper>
+  );
+}

package/src/crud/fields/SelectField.tsx

@@ -1,48 +1,48 @@
-import { Select } from "antd";
-import type { BaseSourceProps, ChoiceOption, FieldRules } from "../types";
-import { FieldWrapper } from "./FieldWrapper";
-
-export type SelectFieldProps = BaseSourceProps & {
-  name?: string;
-  required?: boolean;
-  rules?: FieldRules;
-  choices: ChoiceOption[];
-  mode?: "multiple";
-  allowClear?: boolean;
-  hideLabel?: boolean;
-};
-
-export function SelectField({
-  source,
-  name,
-  label,
-  required,
-  rules,
-  choices,
-  mode,
-  allowClear,
-  hideLabel,
-}: SelectFieldProps) {
-  return (
-    <FieldWrapper
-      source={source}
-      name={name}
-      label={label}
-      required={required}
-      rules={rules}
-      hideLabel={hideLabel}
-    >
-      {({ 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>
-  );
-}
+import { Select } from "antd";
+import type { BaseSourceProps, ChoiceOption, FieldRules } from "../types";
+import { FieldWrapper } from "./FieldWrapper";
+
+export type SelectFieldProps = BaseSourceProps & {
+  name?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  choices: ChoiceOption[];
+  mode?: "multiple";
+  allowClear?: boolean;
+  hideLabel?: boolean;
+};
+
+export function SelectField({
+  source,
+  name,
+  label,
+  required,
+  rules,
+  choices,
+  mode,
+  allowClear,
+  hideLabel,
+}: SelectFieldProps) {
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ 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

@@ -1,46 +1,46 @@
-import { Input } from "antd";
-import type { CSSProperties } from "react";
-import type { BaseSourceProps, FieldRules } from "../types";
-import { FieldWrapper } from "./FieldWrapper";
-
-export type TextFieldProps = BaseSourceProps & {
-  name?: string;
-  required?: boolean;
-  rules?: FieldRules;
-  placeholder?: string;
-  inputStyle?: CSSProperties;
-  hideLabel?: boolean;
-};
-
-export function TextField({
-  source,
-  name,
-  label,
-  required,
-  rules,
-  placeholder,
-  inputStyle,
-  hideLabel,
-}: TextFieldProps) {
-  return (
-    <FieldWrapper
-      source={source}
-      name={name}
-      label={label}
-      required={required}
-      rules={rules}
-      hideLabel={hideLabel}
-    >
-      {({ value, onChange, onBlur, disabled }) => (
-        <Input
-          value={value as string | undefined}
-          onChange={(e) => onChange(e.target.value)}
-          onBlur={onBlur}
-          placeholder={placeholder}
-          disabled={disabled}
-          style={inputStyle}
-        />
-      )}
-    </FieldWrapper>
-  );
-}
+import { Input } from "antd";
+import type { CSSProperties } from "react";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { FieldWrapper } from "./FieldWrapper";
+
+export type TextFieldProps = BaseSourceProps & {
+  name?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  placeholder?: string;
+  inputStyle?: CSSProperties;
+  hideLabel?: boolean;
+};
+
+export function TextField({
+  source,
+  name,
+  label,
+  required,
+  rules,
+  placeholder,
+  inputStyle,
+  hideLabel,
+}: TextFieldProps) {
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, onBlur, disabled }) => (
+        <Input
+          value={value as string | undefined}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={onBlur}
+          placeholder={placeholder}
+          disabled={disabled}
+          style={inputStyle}
+        />
+      )}
+    </FieldWrapper>
+  );
+}

package/src/crud/fields/uploadFieldUtils.ts

@@ -0,0 +1,21 @@
+/** Form value for file/image fields — backend-agnostic. */
+export type UploadFieldValue = File | string | null | undefined;
+
+export function hasUploadValue(value: UploadFieldValue): boolean {
+  if (value instanceof File) return true;
+  return typeof value === "string" && value.length > 0;
+}
+
+export function getUploadFileName(value: UploadFieldValue): string | undefined {
+  if (value instanceof File) return value.name;
+  if (typeof value === "string" && value.length > 0) {
+    try {
+      const pathname = new URL(value, "http://local").pathname;
+      const name = pathname.split("/").filter(Boolean).pop();
+      return name || value;
+    } catch {
+      return value.split("/").filter(Boolean).pop() || value;
+    }
+  }
+  return undefined;
+}

package/src/crud/fields/useUploadPreviewUrl.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+import type { UploadFieldValue } from "./uploadFieldUtils";
+
+/** Preview URL for uploads — `URL.createObjectURL` for `File`, direct URL for existing strings. */
+export function useUploadPreviewUrl(value: UploadFieldValue): string | undefined {
+  const [objectUrl, setObjectUrl] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (value instanceof File) {
+      const url = URL.createObjectURL(value);
+      setObjectUrl(url);
+      return () => URL.revokeObjectURL(url);
+    }
+    setObjectUrl(undefined);
+  }, [value]);
+
+  if (value instanceof File) return objectUrl;
+  if (typeof value === "string" && value.length > 0) return value;
+  return undefined;
+}

package/src/crud/filters/BooleanFilter.tsx

@@ -1,38 +1,38 @@
-import { Select } from "antd";
-import { useMemo } from "react";
-import type { BaseSourceProps } from "../types";
-import { useRegisterFilter } from "../context/FilterContext";
-
-export type BooleanFilterProps = BaseSourceProps;
-
-export function BooleanFilter({ source, label }: BooleanFilterProps) {
-  const def = useMemo(
-    () => ({
-      key: source,
-      source,
-      label,
-      render: ({
-        value,
-        onChange,
-      }: {
-        value: unknown;
-        onChange: (value: unknown) => void;
-      }) => (
-        <Select
-          allowClear
-          placeholder={label ?? source}
-          value={value as boolean | undefined}
-          onChange={(v) => onChange(v)}
-          options={[
-            { label: "Yes", value: true },
-            { label: "No", value: false },
-          ]}
-          style={{ minWidth: 100 }}
-        />
-      ),
-    }),
-    [source, label],
-  );
-  useRegisterFilter(def);
-  return null;
-}
+import { Select } from "antd";
+import { useMemo } from "react";
+import type { BaseSourceProps } from "../types";
+import { useRegisterFilter } from "../context/FilterContext";
+
+export type BooleanFilterProps = BaseSourceProps;
+
+export function BooleanFilter({ source, label }: BooleanFilterProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      render: ({
+        value,
+        onChange,
+      }: {
+        value: unknown;
+        onChange: (value: unknown) => void;
+      }) => (
+        <Select
+          allowClear
+          placeholder={label ?? source}
+          value={value as boolean | undefined}
+          onChange={(v) => onChange(v)}
+          options={[
+            { label: "Yes", value: true },
+            { label: "No", value: false },
+          ]}
+          style={{ minWidth: 100 }}
+        />
+      ),
+    }),
+    [source, label],
+  );
+  useRegisterFilter(def);
+  return null;
+}

package/src/crud/filters/DateFilter.tsx

@@ -1,35 +1,35 @@
-import { DatePicker } from "antd";
-import dayjs from "dayjs";
-import { useMemo } from "react";
-import type { BaseSourceProps } from "../types";
-import { useRegisterFilter } from "../context/FilterContext";
-
-export type DateFilterProps = BaseSourceProps;
-
-export function DateFilter({ source, label }: DateFilterProps) {
-  const def = useMemo(
-    () => ({
-      key: source,
-      source,
-      label,
-      render: ({
-        value,
-        onChange,
-      }: {
-        value: unknown;
-        onChange: (value: unknown) => void;
-      }) => (
-        <DatePicker
-          allowClear
-          placeholder={label ?? source}
-          value={value ? dayjs(String(value)) : null}
-          onChange={(d) => onChange(d ? d.format("YYYY-MM-DD") : undefined)}
-          style={{ minWidth: 160 }}
-        />
-      ),
-    }),
-    [source, label],
-  );
-  useRegisterFilter(def);
-  return null;
-}
+import { DatePicker } from "antd";
+import dayjs from "dayjs";
+import { useMemo } from "react";
+import type { BaseSourceProps } from "../types";
+import { useRegisterFilter } from "../context/FilterContext";
+
+export type DateFilterProps = BaseSourceProps;
+
+export function DateFilter({ source, label }: DateFilterProps) {
+  const def = useMemo(
+    () => ({
+      key: source,
+      source,
+      label,
+      render: ({
+        value,
+        onChange,
+      }: {
+        value: unknown;
+        onChange: (value: unknown) => void;
+      }) => (
+        <DatePicker
+          allowClear
+          placeholder={label ?? source}
+          value={value ? dayjs(String(value)) : null}
+          onChange={(d) => onChange(d ? d.format("YYYY-MM-DD") : undefined)}
+          style={{ minWidth: 160 }}
+        />
+      ),
+    }),
+    [source, label],
+  );
+  useRegisterFilter(def);
+  return null;
+}