ding-react-admin 2.0.0 → 2.0.4

package/src/crud/fields/PasswordField.tsx

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

package/src/crud/fields/ReferenceField.tsx

@@ -1,96 +1,237 @@
-import { Select } from "antd";
-import type { CSSProperties } from "react";
-import { useMemo, useState } from "react";
-import type {
-  BaseSourceProps,
-  ChoiceOption,
-  FieldRules,
-  ReferenceProps,
-} from "../types";
-import { useChoices } from "../utils/useChoices";
-import { FieldWrapper } from "./FieldWrapper";
-
-export type ReferenceFieldProps = BaseSourceProps &
-  ReferenceProps & {
-    name?: string;
-    required?: boolean;
-    rules?: FieldRules;
-    search?: boolean;
-    allowClear?: boolean;
-    disabled?: boolean;
-    hideLabel?: 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 },
-    ) => void;
-  };
-
-export function ReferenceField({
-  source,
-  name,
-  label,
-  reference,
-  choices,
-  optionLabel = "name",
-  optionValue = "id",
-  required,
-  rules,
-  search,
-  allowClear,
-  disabled: disabledProp,
-  hideLabel,
-  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],
-  );
-
-  return (
-    <FieldWrapper
-      source={source}
-      name={name}
-      label={label}
-      required={required}
-      rules={rules}
-      hideLabel={hideLabel}
-    >
-      {({ value, onChange, disabled, name: fieldName }) => (
-        <Select
-          value={value as string | number | undefined}
-          onChange={(next) => {
-            onChange(next);
-            onValueChange?.(next, optionForValue(next), { name: fieldName });
-          }}
-          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 }}
-        />
-      )}
-    </FieldWrapper>
-  );
-}
+import { Select } from "antd";
+import type { CSSProperties } from "react";
+import { useMemo, useState } from "react";
+import { useWatch } from "react-hook-form";
+import type {
+  BaseSourceProps,
+  ChoiceOption,
+  FieldRules,
+  ReferenceProps,
+} from "../types";
+import { valueAsId, resolveOptionLabel } 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 ReferenceFieldProps = BaseSourceProps &
+  ReferenceProps & {
+    name?: string;
+    required?: boolean;
+    rules?: FieldRules;
+    search?: boolean;
+    allowClear?: boolean;
+    disabled?: boolean;
+    hideLabel?: 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 },
+    ) => void;
+    /** Form fields shown in the add/edit modal. Omit to hide action buttons. */
+    referenceForm?: ReactNode;
+    /** Permissions for add/edit buttons (`add` and `change` slots). */
+    referencePermissions?: ResourcePermissions;
+    referenceTitle?: string;
+    referenceDefaultValues?: Record<string, unknown>;
+    referenceModalWidth?: number;
+    /** When false, hide add/edit buttons. Default true when `referenceForm` is set. */
+    referenceActions?: boolean;
+  };
+
+type ReferenceFieldSelectProps = Omit<
+  ReferenceFieldProps,
+  "source" | "label" | "required" | "rules" | "hideLabel" | "name"
+> & {
+  value: unknown;
+  onChange: (value: unknown) => void;
+  disabled?: boolean;
+  fieldName: string;
+  selectedRecords?: Record<string, unknown> | Record<string, unknown>[];
+};
+
+function ReferenceFieldSelect({
+  reference,
+  choices,
+  optionLabel = "name",
+  optionValue = "id",
+  search,
+  allowClear,
+  disabled,
+  inputStyle,
+  onValueChange,
+  lazy = true,
+  fetchSelected = true,
+  value,
+  onChange,
+  fieldName,
+  selectedRecords,
+  referenceForm,
+  referencePermissions,
+  referenceTitle,
+  referenceDefaultValues,
+  referenceModalWidth,
+  referenceActions = true,
+}: ReferenceFieldSelectProps) {
+  const [searchText, setSearchText] = useState<string | undefined>();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const active = dropdownOpen || Boolean(searchText);
+  const selectValue = valueAsId(value, optionValue);
+
+  const { options, loading, optionForValue, 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 applyRecord = (record: Record<string, unknown>) => {
+    const id = record[optionValue];
+    onChange(id);
+    onValueChange?.(
+      id,
+      {
+        label: resolveOptionLabel(record, optionLabel),
+        value: id,
+        record,
+      },
+      { name: fieldName },
+    );
+    void reload();
+  };
+
+  const select = (
+    <Select
+      value={selectValue}
+      onChange={(next) => {
+        onChange(next);
+        onValueChange?.(next, optionForValue(next), { name: fieldName });
+      }}
+      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%", minWidth: 160, ...inputStyle }}
+    />
+  );
+
+  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}
+        selectedId={selectValue}
+        disabled={disabled}
+        onCreated={applyRecord}
+        onUpdated={() => void reload()}
+      />
+    </div>
+  );
+}
+
+export function ReferenceField({
+  source,
+  name,
+  label,
+  reference,
+  choices,
+  optionLabel = "name",
+  optionValue = "id",
+  required,
+  rules,
+  search,
+  allowClear,
+  disabled: disabledProp,
+  hideLabel,
+  inputStyle,
+  onValueChange,
+  lazy = true,
+  recordSource,
+  fetchSelected = true,
+  referenceForm,
+  referencePermissions,
+  referenceTitle,
+  referenceDefaultValues,
+  referenceModalWidth,
+  referenceActions = true,
+}: ReferenceFieldProps) {
+  const embeddedRecord = useWatch({
+    name: recordSource ?? "",
+    disabled: !recordSource,
+  }) as Record<string, unknown> | undefined;
+
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, disabled, name: fieldName }) => (
+        <ReferenceFieldSelect
+          reference={reference}
+          choices={choices}
+          optionLabel={optionLabel}
+          optionValue={optionValue}
+          search={search}
+          allowClear={allowClear}
+          disabled={disabled || disabledProp}
+          inputStyle={inputStyle}
+          onValueChange={onValueChange}
+          lazy={lazy}
+          fetchSelected={fetchSelected}
+          value={value}
+          onChange={onChange}
+          fieldName={fieldName}
+          selectedRecords={recordSource ? embeddedRecord : undefined}
+          referenceForm={referenceForm}
+          referencePermissions={referencePermissions}
+          referenceTitle={referenceTitle}
+          referenceDefaultValues={referenceDefaultValues}
+          referenceModalWidth={referenceModalWidth}
+          referenceActions={referenceActions}
+        />
+      )}
+    </FieldWrapper>
+  );
+}

package/src/crud/fields/ReferenceInputActions.tsx

@@ -0,0 +1,106 @@
+import { EditOutlined, PlusOutlined } from "@ant-design/icons";
+import { Button, Space, Tooltip } from "antd";
+import { useState, type ReactNode } from "react";
+import { usePermissions } from "../../context/PermissionsProvider";
+import {
+  checkResourcePermission,
+  type ResourcePermissions,
+} from "../../permissions/resourcePermissions";
+import { ResourceFormModal } from "../ResourceFormModal";
+
+export type ReferenceInputActionsProps = {
+  reference?: string;
+  referenceForm?: ReactNode;
+  referencePermissions?: ResourcePermissions;
+  referenceTitle?: string;
+  referenceDefaultValues?: Record<string, unknown>;
+  referenceModalWidth?: number;
+  selectedId?: unknown;
+  disabled?: boolean;
+  onCreated?: (record: Record<string, unknown>) => void;
+  onUpdated?: (record: Record<string, unknown>) => void;
+};
+
+export function ReferenceInputActions({
+  reference,
+  referenceForm,
+  referencePermissions,
+  referenceTitle,
+  referenceDefaultValues,
+  referenceModalWidth,
+  selectedId,
+  disabled,
+  onCreated,
+  onUpdated,
+}: ReferenceInputActionsProps) {
+  const can = usePermissions();
+  const title = referenceTitle ?? reference;
+
+  const canAdd =
+    Boolean(reference && referenceForm) &&
+    checkResourcePermission(can, referencePermissions, "add");
+  const canEdit =
+    Boolean(
+      reference && referenceForm && selectedId != null && selectedId !== "",
+    ) && checkResourcePermission(can, referencePermissions, "change");
+
+  const [editId, setEditId] = useState<string | null>(null);
+
+  if (!canAdd && !canEdit) return null;
+
+  const closeModal = () => setEditId(null);
+
+  return (
+    <>
+      <Space size={4}>
+        {canAdd ? (
+          <Tooltip title={`Add ${title ?? "record"}`}>
+            <Button
+              type="default"
+              icon={<PlusOutlined />}
+              disabled={disabled}
+              aria-label={`Add ${title ?? "record"}`}
+              onClick={() => setEditId("new")}
+            />
+          </Tooltip>
+        ) : null}
+        {canEdit ? (
+          <Tooltip title={`Edit ${title ?? "record"}`}>
+            <Button
+              type="default"
+              icon={<EditOutlined />}
+              disabled={disabled}
+              aria-label={`Edit ${title ?? "record"}`}
+              onClick={() => setEditId(String(selectedId))}
+            />
+          </Tooltip>
+        ) : null}
+      </Space>
+      {reference && referenceForm && editId != null ? (
+        <ResourceFormModal
+          resource={reference}
+          editId={editId}
+          onClose={closeModal}
+          title={
+            editId === "new"
+              ? `New ${title ?? reference}`
+              : `Edit ${title ?? reference}`
+          }
+          permissions={referencePermissions}
+          defaultValues={editId === "new" ? referenceDefaultValues : undefined}
+          width={referenceModalWidth}
+          onSuccess={(record) => {
+            const row = record as Record<string, unknown>;
+            if (editId === "new") {
+              onCreated?.(row);
+            } else {
+              onUpdated?.(row);
+            }
+          }}
+        >
+          {referenceForm}
+        </ResourceFormModal>
+      ) : null}
+    </>
+  );
+}