100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
import { Box, InputAdornment, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
|
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts";
|
|
import { useIMask, IMask } from "react-imask";
|
|
import { quizThemes } from "@utils/themes/Publication/themePublication.ts";
|
|
import { ChangeEvent, FC, HTMLInputTypeAttribute, useEffect, useState } from "react";
|
|
import { CountrySelector } from "@/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx";
|
|
import { phoneMasksByCountry } from "@utils/phoneMasksByCountry.tsx";
|
|
import { useQuizStore } from "@/stores/useQuizStore";
|
|
|
|
type InputProps = {
|
|
title: string;
|
|
desc: string;
|
|
Icon: FC<{ color: string; backgroundColor: string }>;
|
|
onChange: TextFieldProps["onChange"];
|
|
onChangePhone?: (phone: string) => void;
|
|
id: string;
|
|
isPhone?: boolean;
|
|
type?: HTMLInputTypeAttribute;
|
|
value?: string;
|
|
};
|
|
|
|
const TextField = MuiTextField as unknown as FC<TextFieldProps>;
|
|
let first = true;
|
|
|
|
function phoneChange(e: ChangeEvent<HTMLInputElement>, mask: string) {
|
|
const masked = IMask.createMask({
|
|
mask: "+7 (000) 000-00-00",
|
|
// ...and other options
|
|
});
|
|
masked.value = e.target.value;
|
|
const a = IMask.pipe(e.target.value, {
|
|
mask,
|
|
});
|
|
return a || "";
|
|
}
|
|
|
|
export const CustomInput = ({ title, desc, Icon, onChange, onChangePhone, isPhone, type, value }: InputProps) => {
|
|
const theme = useTheme();
|
|
const isMobile = useRootContainerSize() < 600;
|
|
const { settings } = useQuizStore();
|
|
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}
|
|
//@ts-ignore
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
|
isPhone ? onChangePhone?.(phoneChange(e, mask)) : onChange?.(e)
|
|
}
|
|
type={isPhone ? "tel" : type}
|
|
value={value}
|
|
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>
|
|
);
|
|
};
|