ding-react-admin 1.0.4 → 2.0.4

package/src/crud/fields/FileField.tsx

@@ -0,0 +1,123 @@
+import { DeleteOutlined, PaperClipOutlined, UploadOutlined } from "@ant-design/icons";
+import { Button, Space, Typography } from "antd";
+import { useRef } from "react";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { FieldWrapper } from "./FieldWrapper";
+import {
+  getUploadFileName,
+  hasUploadValue,
+  type UploadFieldValue,
+} from "./uploadFieldUtils";
+
+export type FileFieldProps = BaseSourceProps & {
+  name?: string;
+  required?: boolean;
+  rules?: FieldRules;
+  hideLabel?: boolean;
+  /** Allow clearing an existing or newly selected file. */
+  clearable?: boolean;
+  accept?: string;
+};
+
+function FileFieldInput({
+  value,
+  onChange,
+  disabled,
+  clearable,
+  accept,
+}: {
+  value: UploadFieldValue;
+  onChange: (value: UploadFieldValue) => void;
+  disabled?: boolean;
+  clearable?: boolean;
+  accept?: string;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const fileName = getUploadFileName(value);
+  const existingUrl = typeof value === "string" && value.length > 0 ? value : undefined;
+  const showClear = clearable && hasUploadValue(value);
+
+  return (
+    <Space direction="vertical" size="middle" style={{ width: "100%" }}>
+      {fileName ? (
+        <Space>
+          <PaperClipOutlined />
+          {existingUrl ? (
+            <Typography.Link href={existingUrl} target="_blank" rel="noopener noreferrer">
+              {fileName}
+            </Typography.Link>
+          ) : (
+            <Typography.Text>{fileName}</Typography.Text>
+          )}
+        </Space>
+      ) : null}
+      <Space wrap>
+        <Button
+          icon={<UploadOutlined />}
+          disabled={disabled}
+          onClick={() => inputRef.current?.click()}
+        >
+          Choose file
+        </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 FileField({
+  source,
+  name,
+  label,
+  required,
+  rules,
+  hideLabel,
+  clearable,
+  accept,
+}: FileFieldProps) {
+  return (
+    <FieldWrapper
+      source={source}
+      name={name}
+      label={label}
+      required={required}
+      rules={rules}
+      hideLabel={hideLabel}
+    >
+      {({ value, onChange, disabled }) => (
+        <FileFieldInput
+          value={value as UploadFieldValue}
+          onChange={onChange}
+          disabled={disabled}
+          clearable={clearable}
+          accept={accept}
+        />
+      )}
+    </FieldWrapper>
+  );
+}

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,52 +1,52 @@
-import { InputNumber } from "antd";
-import type { CSSProperties } from "react";
-import type { BaseSourceProps, FieldRules } from "../types";
-import { FieldWrapper } from "./FieldWrapper";
-
-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,
-  inputStyle,
-  hideLabel,
-}: NumberFieldProps) {
-  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>
-  );
-}
+import { InputNumber } from "antd";
+import type { CSSProperties } from "react";
+import type { BaseSourceProps, FieldRules } from "../types";
+import { FieldWrapper } from "./FieldWrapper";
+
+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,
+  inputStyle,
+  hideLabel,
+}: NumberFieldProps) {
+  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>
+  );
+}

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",
+        }}
+      />
+    </>
+  );
+}