@nish1896/rhf-mui-components
Version:
A suite of 20+ production-ready react-hook-form components built with material-ui. Fully typed, tree-shakable, and optimized for enterprise-grade forms.
164 lines (163 loc) • 6.62 kB
JavaScript
"use client";
import { RHFMuiConfigContext } from "../../config/ConfigProvider.js";
import { keepLabelAboveFormField } from "../../utils/control.js";
import { isAboveMuiV5 } from "../../utils/mui.js";
import { fieldNameToLabel } from "../../utils/text-transform.js";
import { useFieldIds } from "../../utils/useFieldIds.js";
import FormControl from "../../common/FormControl.js";
import FormHelperText from "../../common/FormHelperText.js";
import FormLabel from "../../common/FormLabel.js";
import FormLabelText from "../../common/FormLabelText.js";
import CountryMenuItem from "./CountryMenuItem.js";
import { countryList } from "./countries.js";
import { useContext, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Controller } from "react-hook-form";
import Autocomplete from "@mui/material/Autocomplete";
import MuiTextField from "@mui/material/TextField";
import Chip from "@mui/material/Chip";
import Box from "@mui/material/Box";
//#region src/mui/country-select/index.tsx
const RHFCountrySelect = ({ fieldName, control, registerOptions, countries, preferredCountries, valueKey = "iso", onValueChange, disabled: muiDisabled, label, showLabelAboveFormField, formLabelProps, required, helperText, errorMessage, hideErrorMessage, formHelperTextProps, multiple, textFieldProps, displayFlagOnSelect, slotProps, ChipProps, onBlur, ...otherAutoCompleteProps }) => {
const { fieldId, labelId, helperTextId, errorId } = useFieldIds(fieldName);
const { allLabelsAboveFields } = useContext(RHFMuiConfigContext);
const isLabelAboveFormField = keepLabelAboveFormField(showLabelAboveFormField, allLabelsAboveFields);
const fieldLabel = label ?? fieldNameToLabel(fieldName);
const isError = !!errorMessage;
const showHelperTextElement = !!helperText || isError && !hideErrorMessage;
const countryOptions = countries ?? countryList;
const countrySelectOptions = useMemo(() => {
let countriesToList = countryOptions;
let countriesToListAtTop = [];
if (preferredCountries?.length) {
countriesToListAtTop = countryOptions.filter((country) => preferredCountries.includes(country.iso));
countriesToListAtTop.sort((a, b) => preferredCountries.indexOf(a.iso) - preferredCountries.indexOf(b.iso));
countriesToList = countryOptions.filter((country) => !preferredCountries.includes(country.iso));
}
return [...countriesToListAtTop, ...countriesToList];
}, [countryOptions, preferredCountries]);
const countryMap = useMemo(() => {
const map = /* @__PURE__ */ new Map();
countrySelectOptions.forEach((c) => {
map.set(c[valueKey], c);
});
return map;
}, [countrySelectOptions, valueKey]);
return /* @__PURE__ */ jsxs(FormControl, {
error: isError,
children: [
/* @__PURE__ */ jsx(FormLabel, {
label: fieldLabel,
isVisible: isLabelAboveFormField,
required,
error: isError,
formLabelProps: {
id: labelId,
htmlFor: fieldId,
...formLabelProps
}
}),
/* @__PURE__ */ jsx(Controller, {
name: fieldName,
control,
rules: registerOptions,
render: ({ field: { name: rhfFieldName, value: rhfValue, onChange: rhfOnChange, onBlur: rhfOnBlur, ref: rhfRef } }) => {
return /* @__PURE__ */ jsx(Autocomplete, {
id: fieldId,
options: countrySelectOptions,
multiple,
value: multiple ? (rhfValue ?? []).map((val) => countryMap.get(val)).filter((country) => !!country) : countryMap.get(rhfValue) ?? null,
onChange: (event, newValue, reason, details) => {
rhfOnChange(Array.isArray(newValue) ? (newValue ?? []).map((item) => item[valueKey]) : newValue?.[valueKey] ?? null);
onValueChange?.(newValue, event, reason, details);
},
onBlur: (blurEvent) => {
rhfOnBlur();
onBlur?.(blurEvent);
},
autoHighlight: true,
blurOnSelect: !multiple,
disableCloseOnSelect: multiple,
fullWidth: true,
disabled: muiDisabled,
limitTags: 2,
getLimitTagsText: (more) => more === 1 ? "+1 Country" : `+${more} Countries`,
getOptionKey: (option) => option[valueKey],
getOptionLabel: (option) => option.name,
isOptionEqualToValue: (option, value) => option[valueKey] === value[valueKey],
renderInput: (params) => {
const { InputProps, inputProps, disabled: paramsDisabled, ...otherInputParams } = params ?? {};
const { autoComplete = "off", ...otherTextFieldProps } = textFieldProps ?? {};
const textFieldInputProps = {
...inputProps,
"aria-required": required,
"aria-invalid": isError,
"aria-labelledby": isLabelAboveFormField ? labelId : void 0,
"aria-describedby": showHelperTextElement ? isError ? errorId : helperTextId : void 0,
autoComplete
};
return /* @__PURE__ */ jsx(MuiTextField, {
name: rhfFieldName,
inputRef: rhfRef,
disabled: paramsDisabled || muiDisabled,
...otherTextFieldProps,
...otherInputParams,
label: !isLabelAboveFormField ? /* @__PURE__ */ jsx(FormLabelText, {
label: fieldLabel,
required
}) : void 0,
error: isError,
...isAboveMuiV5 ? { slotProps: {
...textFieldProps?.slotProps,
input: {
...InputProps,
...textFieldProps?.slotProps?.input
},
htmlInput: textFieldInputProps
} } : {
InputProps: {
...InputProps,
...textFieldProps?.InputProps
},
inputProps: textFieldInputProps
}
});
},
renderOption: (props, option) => /* @__PURE__ */ jsx(Box, {
component: "li",
sx: {
display: "flex",
alignItems: "center"
},
...props,
children: /* @__PURE__ */ jsx(CountryMenuItem, { countryInfo: option })
}),
renderTags: (value, getTagProps) => value.map((option, index) => {
const { key, ...otherChipProps } = getTagProps({ index });
return /* @__PURE__ */ jsx(Chip, {
...otherChipProps,
label: displayFlagOnSelect ? /* @__PURE__ */ jsx(CountryMenuItem, { countryInfo: option }) : option.name,
...ChipProps
}, key);
}),
...isAboveMuiV5 ? { slotProps } : { ChipProps },
...otherAutoCompleteProps
});
}
}),
/* @__PURE__ */ jsx(FormHelperText, {
error: isError,
errorMessage,
hideErrorMessage,
helperText,
showHelperTextElement,
formHelperTextProps: {
id: isError ? errorId : helperTextId,
...formHelperTextProps
}
})
]
});
};
//#endregion
export { countryList, RHFCountrySelect as default };