159 lines
4.0 KiB
TypeScript
159 lines
4.0 KiB
TypeScript
import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
|
||
import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
|
||
import NameIcon from "@icons/ContactFormIcon/NameIcon";
|
||
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
|
||
import TextIcon from "@icons/ContactFormIcon/TextIcon";
|
||
import {
|
||
FieldSettingsDrawerState,
|
||
FormContactFieldName,
|
||
} from "@model/quizSettings";
|
||
import CloseIcon from "@mui/icons-material/Close";
|
||
import { Typography, useTheme } from "@mui/material";
|
||
import Box from "@mui/material/Box";
|
||
import Button from "@mui/material/Button";
|
||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
|
||
import { useEffect, useState } from "react";
|
||
import SwitchNewField from "./SwitchNewField";
|
||
|
||
interface Props {
|
||
drawerState: FieldSettingsDrawerState;
|
||
closeDrawer: () => void;
|
||
}
|
||
|
||
export default function WindowNewField({ drawerState, closeDrawer }: Props) {
|
||
const quiz = useCurrentQuiz();
|
||
const theme = useTheme();
|
||
const [switchState, setSwitchState] = useState("");
|
||
|
||
useEffect(() => {
|
||
if (!quiz) return;
|
||
|
||
if (drawerState.isEdit) {
|
||
return setSwitchState(drawerState.field);
|
||
}
|
||
|
||
for (let val in quiz.config.formContact.fields) {
|
||
if (!quiz.config.formContact.fields[val as FormContactFieldName].used) {
|
||
setSwitchState(val);
|
||
return;
|
||
}
|
||
}
|
||
}, []);
|
||
|
||
if (!quiz) return null;
|
||
|
||
const SSHC = (data: string) => {
|
||
setSwitchState(data);
|
||
};
|
||
|
||
const buttonSetting: {
|
||
icon: JSX.Element;
|
||
title: string;
|
||
value: FormContactFieldName;
|
||
}[] = [
|
||
{
|
||
icon: (
|
||
<NameIcon
|
||
color={switchState === "name" ? "#ffffff" : theme.palette.grey3.main}
|
||
/>
|
||
),
|
||
title: "Имя",
|
||
value: "name",
|
||
},
|
||
{
|
||
icon: (
|
||
<EmailIcon
|
||
color={switchState === "email" ? "#ffffff" : theme.palette.grey3.main}
|
||
/>
|
||
),
|
||
title: "Email",
|
||
value: "email",
|
||
},
|
||
{
|
||
icon: (
|
||
<PhoneIcon
|
||
color={switchState === "phone" ? "#ffffff" : theme.palette.grey3.main}
|
||
/>
|
||
),
|
||
title: "Телефон",
|
||
value: "phone",
|
||
},
|
||
{
|
||
icon: (
|
||
<TextIcon
|
||
color={switchState === "text" ? "#ffffff" : theme.palette.grey3.main}
|
||
/>
|
||
),
|
||
title: "Текст",
|
||
value: "text",
|
||
},
|
||
{
|
||
icon: (
|
||
<AddressIcon
|
||
color={
|
||
switchState === "address" ? "#ffffff" : theme.palette.grey3.main
|
||
}
|
||
/>
|
||
),
|
||
title: "Адрес",
|
||
value: "address",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<>
|
||
<Box
|
||
sx={{
|
||
padding: "10px 10px 10px 20px",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
background: theme.palette.background.default,
|
||
}}
|
||
>
|
||
<Typography>Новое поле</Typography>
|
||
<Button onClick={closeDrawer} sx={{ padding: 0 }}>
|
||
<CloseIcon fontSize="large" />
|
||
</Button>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
padding: "20px",
|
||
display: "flex",
|
||
gap: "10px",
|
||
flexWrap: "wrap"
|
||
}}
|
||
>
|
||
{buttonSetting.flatMap((e, i) =>
|
||
drawerState.field === e.value || drawerState.field === "all" ? (
|
||
<MiniButtonSetting
|
||
disabled={quiz.config.formContact.fields[e.value].used}
|
||
key={i}
|
||
onClick={() => {
|
||
SSHC(e.value);
|
||
}}
|
||
sx={{
|
||
backgroundColor:
|
||
switchState === e.value
|
||
? theme.palette.brightPurple.main
|
||
: "transparent",
|
||
color:
|
||
switchState === e.value && drawerState.field === "all"
|
||
? "#ffffff"
|
||
: theme.palette.grey3.main,
|
||
}}
|
||
>
|
||
{e.icon}
|
||
{e.title}
|
||
</MiniButtonSetting>
|
||
) : (
|
||
[]
|
||
),
|
||
)}
|
||
</Box>
|
||
<SwitchNewField switchState={switchState} closeDrawer={closeDrawer} />
|
||
</>
|
||
);
|
||
}
|