@nish1896/rhf-mui-components
Version:
A suite of 20+ reusable Material UI components for React Hook Form to minimize your time and effort in creating and styling forms
51 lines (50 loc) • 4.15 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, Fragment } from 'react';
import { Controller } from 'react-hook-form';
import Box from '@mui/material/Box';
import { RHFMuiConfigContext } from '../../config/ConfigProvider';
import { FormControl, FormLabel, FormHelperText } from '../../mui/common';
import { fieldNameToLabel, keepLabelAboveFormField, validateFileList } from '../../utils';
import { FileItem, HiddenInput, UploadButton } from './components';
const RHFFileUploader = ({ fieldName, control, registerOptions, accept = '*', multiple, maxFiles, maxSize, hideFileList = false, showFileSize = false, renderUploadButton, renderFileItem, onValueChange, onUploadError, label, showLabelAboveFormField, formLabelProps, required, helperText, errorMessage, hideErrorMessage, formHelperTextProps, disabled, fullWidth = false }) => {
const { allLabelsAboveFields } = useContext(RHFMuiConfigContext);
const isError = Boolean(errorMessage);
const fieldLabel = label ?? fieldNameToLabel(fieldName);
const isLabelAboveFormField = keepLabelAboveFormField(showLabelAboveFormField, allLabelsAboveFields);
return (_jsxs(FormControl, { fullWidth: fullWidth, error: isError, children: [_jsx(FormLabel, { label: fieldLabel, isVisible: isLabelAboveFormField, required: required, error: isError, formLabelProps: formLabelProps }), _jsx(Controller, { name: fieldName, control: control, rules: registerOptions, render: ({ field }) => {
const { value, onChange, ...otherFieldParams } = field;
const handleFileChange = (event) => {
const fileList = event.target.files;
if (!fileList || fileList.length === 0) {
onChange(null);
onValueChange?.(null, event);
return;
}
const { acceptedFiles, rejectedFiles, errors } = validateFileList(fileList, accept, maxSize, maxFiles);
if (errors
&& errors.length > 0
&& rejectedFiles
&& rejectedFiles.length > 0) {
onUploadError?.(errors, rejectedFiles);
}
const selectedFiles = multiple
? acceptedFiles.length > 0
? acceptedFiles
: null
: acceptedFiles[0] ?? null;
onChange(selectedFiles);
onValueChange?.(selectedFiles, event);
};
const removeFile = (index) => {
if (multiple && Array.isArray(value)) {
const newFiles = value.filter((_, i) => i !== index);
onChange(newFiles.length > 0 ? newFiles : null);
}
else {
onChange(null);
}
};
return (_jsxs(Fragment, { children: [renderUploadButton ? (renderUploadButton(_jsx(HiddenInput, { type: "file", accept: accept, onChange: handleFileChange, multiple: multiple, disabled: disabled, ...otherFieldParams }))) : (_jsx(UploadButton, { label: fieldLabel, fieldName: fieldName, disabled: disabled, children: _jsx(HiddenInput, { type: "file", accept: accept, onChange: handleFileChange, multiple: multiple, disabled: disabled, ...otherFieldParams }) })), _jsx(FormHelperText, { error: isError, errorMessage: errorMessage, hideErrorMessage: hideErrorMessage, helperText: helperText, formHelperTextProps: formHelperTextProps }), !hideFileList && value && (_jsx(Box, { children: (Array.isArray(value) ? value : [value]).map((file, index) => (_jsx(Fragment, { children: renderFileItem ? (renderFileItem(file, index)) : (_jsx(FileItem, { index: index, file: file, showFileSize: showFileSize, removeFile: removeFile })) }, index))) }))] }));
} })] }));
};
export default RHFFileUploader;