@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
78 lines (77 loc) • 5.86 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext } from 'react';
import { Controller } from 'react-hook-form';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Chip from '@mui/material/Chip';
import { RHFMuiConfigContext } from '../../config/ConfigProvider';
import { FormControl, FormLabel, FormLabelText, FormHelperText } from '../../mui/common';
import { fieldNameToLabel, validateArray, isKeyValueOption, isAboveMuiV5 } from '../../utils';
const RHFAutocomplete = ({ fieldName, control, registerOptions, options, multiple, labelKey, valueKey, onValueChange, label, showLabelAboveFormField, formLabelProps, required, helperText, errorMessage, hideErrorMessage, formHelperTextProps, textFieldProps, slotProps, ChipProps, ...otherAutoCompleteProps }) => {
validateArray('RHFAutocomplete', options, labelKey, valueKey);
const { allLabelsAboveFields } = useContext(RHFMuiConfigContext);
const isLabelAboveFormField = showLabelAboveFormField ?? allLabelsAboveFields;
const fieldLabel = label ?? fieldNameToLabel(fieldName);
const isError = Boolean(errorMessage);
const renderOptionLabel = (option) => labelKey && isKeyValueOption(option, labelKey, valueKey)
? option[labelKey]
: option;
return (_jsxs(FormControl, { 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: { value, onChange, ...otherFieldProps } }) => {
/**
* When considering for the case when options is an array of objects,
* the values would be an array or a single "valueKey" from these options.
* So, I need to get back the selected options using these values and then
* pass back these list of options as the value prop for Autocomplete.
*/
const selectedOptions = multiple
? (value ?? []).map(val => options.find(opn => valueKey && isKeyValueOption(opn, labelKey, valueKey)
? opn[valueKey] === val
: opn === val))
: options.find(opn => valueKey && isKeyValueOption(opn, labelKey, valueKey)
? opn[valueKey] === value
: opn === value) ?? null;
return (_jsx(Autocomplete, { ...otherFieldProps, id: fieldName, options: options, multiple: multiple, value: selectedOptions, autoHighlight: true, blurOnSelect: !multiple, disableCloseOnSelect: multiple, fullWidth: true, renderTags: (value, getTagProps) => value.map((option, index) => {
const { key, ...otherChipProps } = getTagProps({ index });
return (_jsx(Chip, { ...otherChipProps, label: renderOptionLabel(option), ...ChipProps }, key));
}), onChange: (event, newValue, reason, details) => {
const fieldValue = newValue === null
? null
: Array.isArray(newValue)
? (newValue ?? []).map(item => valueKey && isKeyValueOption(item, labelKey, valueKey)
? item[valueKey]
: item)
: valueKey && isKeyValueOption(newValue, labelKey, valueKey)
? newValue[valueKey]
: newValue;
onChange(fieldValue);
onValueChange?.(fieldValue, event, reason, details);
}, limitTags: 2, getLimitTagsText: value => `+${value} More`, getOptionLabel: renderOptionLabel, isOptionEqualToValue: (option, value) => {
if (valueKey && isKeyValueOption(option, labelKey, valueKey)) {
return (option[valueKey] === value[valueKey]);
}
return option === value;
}, renderInput: params => {
const textFieldInputProps = {
...params.inputProps,
autoComplete: fieldName
};
return (_jsx(TextField, { ...textFieldProps, ...params, label: !isLabelAboveFormField ? (_jsx(FormLabelText, { label: fieldLabel, required: required })) : undefined, error: isError, ...(isAboveMuiV5
? {
slotProps: {
htmlInput: textFieldInputProps
}
}
: {
inputProps: textFieldInputProps
}) }));
}, ...(isAboveMuiV5
? {
slotProps: {
...slotProps,
chip: ChipProps
}
}
: { ChipProps, slotProps }), ...otherAutoCompleteProps }));
} }), _jsx(FormHelperText, { error: isError, errorMessage: errorMessage, hideErrorMessage: hideErrorMessage, helperText: helperText, formHelperTextProps: formHelperTextProps })] }));
};
export default RHFAutocomplete;