ding-react-admin 1.0.2 → 2.0.0

package/src/crud/fields/ImageField.tsx

@@ -0,0 +1,120 @@
+import { DeleteOutlined, UploadOutlined } from "@ant-design/icons";
+import { Button, Image, Space } from "antd";
+import { useRef } from "react";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { FieldWrapper } from "./FieldWrapper";
+import { hasUploadValue, type UploadFieldValue } from "./uploadFieldUtils";
+import { useUploadPreviewUrl } from "./useUploadPreviewUrl";
+
+export type ImageFieldProps = BaseSourceProps & {
+  name?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  hideLabel?: boolean;
+  /** Allow clearing an existing or newly selected image. */
+  clearable?: boolean;
+  accept?: string;
+  /** Max preview width in pixels. */
+  previewWidth?: number;
+};
+
+function ImageFieldInput({
+  value,
+  onChange,
+  disabled,
+  clearable,
+  accept = "image/*",
+  previewWidth = 200,
+}: {
+  value: UploadFieldValue;
+  onChange: (value: UploadFieldValue) => void;
+  disabled?: boolean;
+  clearable?: boolean;
+  accept?: string;
+  previewWidth?: number;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const previewUrl = useUploadPreviewUrl(value);
+  const showClear = clearable && hasUploadValue(value);
+
+  return (
+    <Space direction="vertical" size="middle" style={{ width: "100%" }}>
+      {previewUrl ? (
+        <Image
+          src={previewUrl}
+          alt=""
+          style={{ maxWidth: previewWidth, maxHeight: previewWidth, objectFit: "contain" }}
+        />
+      ) : null}
+      <Space wrap>
+        <Button
+          icon={<UploadOutlined />}
+          disabled={disabled}
+          onClick={() => inputRef.current?.click()}
+        >
+          Choose image
+        </Button>
+        {showClear ? (
+          <Button
+            icon={<DeleteOutlined />}
+            disabled={disabled}
+            onClick={() => {
+              onChange(null);
+              if (inputRef.current) inputRef.current.value = "";
+            }}
+          >
+            Clear
+          </Button>
+        ) : null}
+      </Space>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        disabled={disabled}
+        tabIndex={-1}
+        aria-hidden
+        style={{ display: "none" }}
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          onChange(file ?? null);
+          e.target.value = "";
+        }}
+      />
+    </Space>
+  );
+}
+
+export function ImageField({
+  source,
+  name,
+  label,
+  required,
+  rules,
+  hideLabel,
+  clearable,
+  accept,
+  previewWidth,
+}: ImageFieldProps) {
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, disabled }) => (
+        <ImageFieldInput
+          value={value as UploadFieldValue}
+          onChange={onChange}
+          disabled={disabled}
+          clearable={clearable}
+          accept={accept}
+          previewWidth={previewWidth}
+        />
+      )}
+    </FieldWrapper>
+  );
+}

package/src/crud/fields/NumberField.tsx

@@ -1,50 +1,52 @@
 import { InputNumber } from "antd";
 import type { CSSProperties } from "react";
-import type { BaseSourceProps, FieldRules, InlineFieldOptions } from "../types";
-import { useInlineOrFormField } from "./useInlineOrFormField";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { FieldWrapper } from "./FieldWrapper";
 
-export type NumberFieldProps = BaseSourceProps &
-  InlineFieldOptions & {
-    required?: boolean;
-    rules?: FieldRules;
-    min?: number;
-    max?: number;
-    step?: number;
-    inputStyle?: CSSProperties;
-  };
+export type NumberFieldProps = BaseSourceProps & {
+  name?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  min?: number;
+  max?: number;
+  step?: number;
+  inputStyle?: CSSProperties;
+  hideLabel?: boolean;
+};
 
 export function NumberField({
   source,
+  name,
   label,
   required,
   rules,
   min,
   max,
   step,
-  width: inlineWidth,
-  minWidth: inlineMinWidth,
   inputStyle,
+  hideLabel,
 }: 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 },
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ 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 }}
+        />
+      )}
+    </FieldWrapper>
   );
-
-  if (field.mode === "inline") return null;
-  return field.element;
 }

package/src/crud/fields/PasswordField.tsx

@@ -1,71 +1,73 @@
 import { Input } from "antd";
 import { useWatch } from "react-hook-form";
-import type { BaseSourceProps, FieldRules, InlineFieldOptions } from "../types";
-import { useInlineOrFormField } from "./useInlineOrFormField";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { FieldWrapper } from "./FieldWrapper";
 
-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;
-  };
+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,
-  width: inlineWidth,
-  minWidth: inlineMinWidth,
+  hideLabel,
 }: 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 },
+  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>
   );
-
-  if (field.mode === "inline") return null;
-  return field.element;
 }
 
 export function PasswordField({
   source,
+  name,
   label,
   required,
   rules,
   confirmSource,
   confirmLabel = "Confirm password",
   autoComplete = "new-password",
-  width,
-  minWidth,
+  hideLabel,
 }: PasswordFieldProps) {
-  const password = useWatch({ name: source, disabled: !confirmSource });
+  const password = useWatch({ name: name ?? source, disabled: !confirmSource });
 
   if (!confirmSource) {
     return (
       <PasswordInputField
         source={source}
+        name={name}
         label={label}
         required={required}
         rules={rules}
         autoComplete={autoComplete}
-        width={width}
-        minWidth={minWidth}
+        hideLabel={hideLabel}
       />
     );
   }
@@ -74,20 +76,19 @@ export function PasswordField({
     <>
       <PasswordInputField
         source={source}
+        name={name}
         label={label}
         required={required}
         rules={rules}
         autoComplete={autoComplete}
-        width={width}
-        minWidth={minWidth}
+        hideLabel={hideLabel}
       />
       <PasswordInputField
         source={confirmSource}
         label={confirmLabel}
         required={required}
         autoComplete={autoComplete}
-        width={width}
-        minWidth={minWidth}
+        hideLabel={hideLabel}
         rules={{
           validate: (value: string) =>
             !password || value === password || "Passwords do not match",

package/src/crud/fields/ReferenceField.tsx

@@ -1,191 +1,96 @@
 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";
-
-
+import { FieldWrapper } from "./FieldWrapper";
 
 export type ReferenceFieldProps = BaseSourceProps &
-
-  ReferenceProps &
-
-  InlineFieldOptions & {
-
+  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; index?: number },
-
+      meta: { name: string },
     ) => void;
-
   };
 
-
-
 export function ReferenceField({
-
   source,
-
+  name,
   label,
-
   reference,
-
   choices,
-
   optionLabel = "name",
-
   optionValue = "id",
-
   required,
-
   rules,
-
   search,
-
   allowClear,
-
   disabled: disabledProp,
-
-  width: inlineWidth,
-
-  minWidth: inlineMinWidth,
-
+  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],
-
   );
 
-
-
-  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 },
-
+  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>
   );
-
-
-
-  if (field.mode === "inline") return null;
-
-  return field.element;
-
 }
-
-

package/src/crud/fields/ReferenceManyField.tsx

@@ -2,18 +2,21 @@ 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";
+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,
@@ -23,6 +26,7 @@ export function ReferenceManyField({
   rules,
   search,
   allowClear = true,
+  hideLabel,
 }: ReferenceManyFieldProps) {
   const [searchText, setSearchText] = useState<string | undefined>();
   const { options, loading } = useChoices(
@@ -42,29 +46,31 @@ export function ReferenceManyField({
     [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%" }}
-      />
-    ),
+  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>
   );
-
-  if (field.mode === "inline") return null;
-  return field.element;
 }

package/src/crud/fields/SelectField.tsx

@@ -3,28 +3,34 @@ 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