mui-custom-form
Version:
A versatile React form component utilizing MUI components and react-hook-form.
44 lines • 3.3 kB
JavaScript
import { Box, Button, FormControl, FormHelperText, FormLabel, IconButton, Stack, Typography, } from "@mui/material";
import { Close, InsertDriveFile } from "@mui/icons-material";
import React, { useRef } from "react";
import { Controller } from "react-hook-form";
export const FileField = ({ field, formControl, }) => {
const { control } = formControl;
const fileInputRef = useRef(null);
return (React.createElement(Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => {
const selectedFile = controlField.value?.[0];
const previewUrl = selectedFile
? URL.createObjectURL(selectedFile)
: null;
return (React.createElement(FormControl, { fullWidth: true, error: !!error },
React.createElement(FormLabel, { component: "legend", required: field.required }, field.label),
React.createElement(Stack, { direction: "row", alignItems: "center", spacing: 2 },
React.createElement(Box, { onClick: () => fileInputRef.current?.click(), sx: { cursor: "pointer" }, ...field.otherProps },
field.fileInputComponent ? (typeof field.fileInputComponent === "function" ? (React.createElement(field.fileInputComponent)) : (field.fileInputComponent)) : (React.createElement(Button, { variant: "contained", component: "span" }, "Upload File")),
React.createElement("input", { type: "file", hidden: true, ref: fileInputRef, onChange: (e) => {
const fileValue = e.target.files && e.target.files.length > 0
? e.target.files
: undefined;
controlField.onChange(fileValue);
} })),
selectedFile && (React.createElement(Stack, { direction: "row", alignItems: "center", spacing: 1 },
selectedFile.type.startsWith("image/") && previewUrl ? (React.createElement("img", { src: previewUrl, alt: "Preview", style: {
maxWidth: "50px",
maxHeight: "50px",
objectFit: "contain",
} })) : (React.createElement(InsertDriveFile, { sx: { fontSize: 50 } })),
React.createElement(Typography, { variant: "body2" }, selectedFile.name),
React.createElement(IconButton, { size: "small", onClick: () => {
controlField.onChange(undefined);
if (fileInputRef.current) {
fileInputRef.current.value = ""; // Clear the input element
}
if (previewUrl) {
URL.revokeObjectURL(previewUrl); // Clean up the object URL
}
} },
React.createElement(Close, { fontSize: "small" }))))),
error && React.createElement(FormHelperText, null, error.message)));
} }));
};
//# sourceMappingURL=FileField.js.map