79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
/**
|
|
* A form's file field.
|
|
*
|
|
* @module
|
|
*/
|
|
|
|
import {
|
|
Controller,
|
|
type FieldValues,
|
|
type Path,
|
|
type RegisterOptions,
|
|
useFormContext,
|
|
} from "react-hook-form";
|
|
|
|
import { FileDropZone } from "./FileDropZone.tsx";
|
|
|
|
/** The props of {@link FileField}. */
|
|
export interface FileFieldProps<T extends FieldValues> {
|
|
/** The field's name in the form. */
|
|
name: Path<T>;
|
|
/** The field's label. */
|
|
label?: string;
|
|
/** The drop zone's prompt. */
|
|
hint?: string;
|
|
/** Whether to state the size limit. */
|
|
showLimit?: boolean;
|
|
/** Whether the field takes no file. */
|
|
disabled?: boolean;
|
|
/** The field's validation rules. */
|
|
rules?: RegisterOptions<T, Path<T>>;
|
|
/** Side effect run after the field value changes (e.g. derive a title). */
|
|
onValueChange?: (file: File | null) => void;
|
|
}
|
|
|
|
/**
|
|
* Renders a `Controller`-wrapped {@link FileDropZone} bound to react-hook-form,
|
|
* with the field's error under it.
|
|
*/
|
|
export function FileField<T extends FieldValues>({
|
|
name,
|
|
label,
|
|
hint,
|
|
showLimit,
|
|
disabled,
|
|
rules,
|
|
onValueChange,
|
|
}: FileFieldProps<T>): React.JSX.Element {
|
|
const { control, formState: { errors } } = useFormContext<T>();
|
|
const error = errors[name];
|
|
|
|
return (
|
|
<div className="form-field">
|
|
{label && <span className="form-label">{label}</span>}
|
|
<Controller
|
|
name={name}
|
|
control={control}
|
|
rules={rules}
|
|
render={({ field }) => (
|
|
<FileDropZone
|
|
file={(field.value as File | null) ?? null}
|
|
onChange={(file) => {
|
|
field.onChange(file);
|
|
onValueChange?.(file);
|
|
}}
|
|
hint={hint}
|
|
showLimit={showLimit}
|
|
disabled={disabled}
|
|
/>
|
|
)}
|
|
/>
|
|
{error?.message && (
|
|
<span className="form-hint form-hint--error">
|
|
{String(error.message)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|