@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.
223 lines (222 loc) • 7.73 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 { useContext, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Controller } from "react-hook-form";
import MuiTextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import InputAdornment from "@mui/material/InputAdornment";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import Divider from "@mui/material/Divider";
import { FlagImage, defaultCountries, parseCountry, usePhoneInput } from "react-international-phone";
import "react-international-phone/style.css";
//#region src/misc/phone-input/index.tsx
/**
* Code Reference -
* https://react-international-phone.vercel.app/docs/Advanced%20Usage/useWithUiLibs
*/
const RHFPhoneInput = ({ fieldName, control, registerOptions, required, value, onValueChange, label, showLabelAboveFormField, formLabelProps, helperText, errorMessage, hideErrorMessage, formHelperTextProps, disabled: muiDisabled, phoneInputProps, slotProps, onBlur, autoComplete = "off", InputProps, ...rest }) => {
const { fieldId, labelId, helperTextId, errorId } = useFieldIds(fieldName);
const { allLabelsAboveFields } = useContext(RHFMuiConfigContext);
const fieldLabel = label ?? fieldNameToLabel(fieldName);
const isLabelAboveFormField = keepLabelAboveFormField(showLabelAboveFormField, allLabelsAboveFields);
const isError = !!errorMessage;
const showHelperTextElement = !!helperText || isError && !hideErrorMessage;
const { countries, hideDropdown, preferredCountries, forceDialCode, ...otherPhoneInputProps } = phoneInputProps ?? {};
const countryOptions = countries ?? defaultCountries;
/**
* Render preferred countries at the top of the list.
* Preferred countries will maintain the order in which they were
* specified in the props, while other countries will be sorted
* alphabetically.
*/
const { countriesToList, countriesToListAtTop } = useMemo(() => {
if (!preferredCountries?.length) return {
countriesToList: countryOptions,
countriesToListAtTop: []
};
const countriesToListAtTop = countryOptions.filter((country) => preferredCountries.includes(parseCountry(country).iso2)).sort((a, b) => preferredCountries.indexOf(parseCountry(a).iso2) - preferredCountries.indexOf(parseCountry(b).iso2));
return {
countriesToList: countryOptions.filter((country) => !preferredCountries.includes(parseCountry(country).iso2)),
countriesToListAtTop
};
}, [countryOptions, preferredCountries]);
const { inputValue, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
...otherPhoneInputProps,
value,
onChange: (phoneData) => {
onValueChange?.(phoneData);
},
countries: countryOptions,
preferredCountries,
forceDialCode: hideDropdown ?? forceDialCode
});
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,
defaultValue: inputValue,
render: ({ field: { name: rhfFieldName, onChange: rhfOnChange, onBlur: rhfOnBlur, ref: rhfRef } }) => {
const startAdornment = /* @__PURE__ */ jsx(InputAdornment, {
position: "start",
style: {
marginRight: "2px",
marginLeft: "-8px"
},
children: /* @__PURE__ */ jsxs(Select, {
MenuProps: {
style: {
height: "300px",
width: "360px",
top: "10px",
left: "-34px"
},
transformOrigin: {
vertical: "top",
horizontal: "left"
}
},
sx: {
width: "max-content",
fieldset: { display: "none" },
"&.Mui-focused:has(div[aria-expanded=\"false\"])": { fieldset: { display: "block" } },
".MuiSelect-select": {
padding: "8px",
paddingRight: "24px !important"
},
svg: { right: 0 }
},
value: country.iso2,
disabled: muiDisabled || hideDropdown,
onChange: (e) => {
setCountry(e.target.value);
},
renderValue: (value) => /* @__PURE__ */ jsx(FlagImage, {
iso2: value,
style: { display: "flex" }
}),
children: [
countriesToListAtTop.map((c) => {
const countryInfo = parseCountry(c);
return /* @__PURE__ */ jsxs(MenuItem, {
value: countryInfo.iso2,
children: [
/* @__PURE__ */ jsx(FlagImage, {
iso2: countryInfo.iso2,
style: { marginRight: "8px" }
}),
/* @__PURE__ */ jsx(Typography, {
marginRight: "8px",
children: countryInfo.name
}),
/* @__PURE__ */ jsxs(Typography, {
color: "gray",
children: ["+", countryInfo.dialCode]
})
]
}, countryInfo.iso2);
}),
countriesToListAtTop.length > 0 && /* @__PURE__ */ jsx(Divider, {}),
countriesToList.map((c) => {
const countryInfo = parseCountry(c);
return /* @__PURE__ */ jsxs(MenuItem, {
value: countryInfo.iso2,
children: [
/* @__PURE__ */ jsx(FlagImage, {
iso2: countryInfo.iso2,
style: { marginRight: "8px" }
}),
/* @__PURE__ */ jsx(Typography, {
marginRight: "8px",
children: countryInfo.name
}),
/* @__PURE__ */ jsxs(Typography, {
color: "gray",
children: ["+", countryInfo.dialCode]
})
]
}, countryInfo.iso2);
})
]
})
});
return /* @__PURE__ */ jsx(MuiTextField, {
id: fieldId,
name: rhfFieldName,
inputRef: (ref) => {
rhfRef(ref);
inputRef.current = ref;
},
value: inputValue,
autoComplete,
type: "tel",
onChange: (e) => {
handlePhoneValueChange(e);
rhfOnChange(e.target.value);
},
onBlur: (blurEvent) => {
rhfOnBlur();
onBlur?.(blurEvent);
},
label: !isLabelAboveFormField ? /* @__PURE__ */ jsx(FormLabelText, {
label: fieldLabel,
required
}) : void 0,
"aria-labelledby": isLabelAboveFormField ? labelId : void 0,
"aria-describedby": showHelperTextElement ? isError ? errorId : helperTextId : void 0,
"aria-required": required,
error: isError,
disabled: muiDisabled,
...isAboveMuiV5 ? { slotProps: {
...slotProps,
input: {
...slotProps?.input,
startAdornment
}
} } : { InputProps: {
...InputProps,
startAdornment
} },
...rest
});
}
}),
/* @__PURE__ */ jsx(FormHelperText, {
error: isError,
errorMessage,
hideErrorMessage,
helperText,
showHelperTextElement,
formHelperTextProps: {
id: isError ? errorId : helperTextId,
...formHelperTextProps
}
})
]
});
};
//#endregion
export { RHFPhoneInput as default };