92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
import {
|
|
Box,
|
|
InputAdornment,
|
|
TextField as MuiTextField,
|
|
TextFieldProps,
|
|
Typography,
|
|
useTheme
|
|
} from "@mui/material";
|
|
import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
|
|
import {useQuizData} from "@contexts/QuizDataContext.ts";
|
|
import {useIMask} from "react-imask";
|
|
import {quizThemes} from "@utils/themes/Publication/themePublication.ts";
|
|
import {FC, useState} from "react";
|
|
import {
|
|
CountrySelector
|
|
} from "@/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx";
|
|
import {phoneMasksByCountry} from "@utils/phoneMasksByCountry.tsx";
|
|
|
|
type InputProps = {
|
|
title: string;
|
|
desc: string;
|
|
Icon: FC<{ color: string; backgroundColor: string }>;
|
|
onChange: TextFieldProps["onChange"];
|
|
id: string;
|
|
isPhone?:boolean
|
|
};
|
|
|
|
const TextField = MuiTextField as unknown as FC<TextFieldProps>;
|
|
|
|
|
|
export const CustomInput = ({ title, desc, Icon, onChange ,isPhone}: InputProps) => {
|
|
const theme = useTheme();
|
|
const isMobile = useRootContainerSize() < 600;
|
|
const { settings } = useQuizData();
|
|
const [mask, setMask] = useState(phoneMasksByCountry['RU'][1]);
|
|
const { ref } = useIMask({mask});
|
|
return (
|
|
<Box m="10px 0">
|
|
<Typography mb="7px" color={theme.palette.text.primary} fontSize={"16px"}>
|
|
{title}
|
|
</Typography>
|
|
|
|
<TextField
|
|
inputRef={isPhone? ref : null}
|
|
onChange={onChange}
|
|
sx={{
|
|
width: isMobile ? "100%" : "390px",
|
|
backgroundColor: theme.palette.background.default,
|
|
fontSize: "16px",
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: "#9A9AAF80",
|
|
borderRadius: "12px",
|
|
},
|
|
"& .MuiInputBase-root": {
|
|
paddingLeft: 0,
|
|
},
|
|
"& .MuiOutlinedInput-input": {
|
|
paddingLeft: "10px",
|
|
},
|
|
"& .MuiOutlinedInput-root": {
|
|
"&:hover fieldset": {
|
|
borderColor: theme.palette.primary.main,
|
|
},
|
|
},
|
|
}}
|
|
placeholder={desc}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start" >
|
|
<Icon
|
|
color="gray"
|
|
backgroundColor={
|
|
quizThemes[settings.cfg.theme].isLight
|
|
? "#F2F3F7"
|
|
: "#F2F3F71A"
|
|
}
|
|
/>
|
|
</InputAdornment>
|
|
),
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
{isPhone && (
|
|
<CountrySelector setMask={setMask} />)}
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
|
|
</Box>
|
|
);
|
|
};
|