правки по драверу внутри формы контактов

src/pages/ContactFormPage/ContactFormPage.tsx

@@ -13,6 +13,8 @@ import DrawerNewField from "./DrawerParent";
 import WindowNewField from "./NewField/WindowNewField";
 import WindowMessengers from "./Massengers/WindowMessengers";
 
+
+
 export default function ContactFormPage() {
 
 
@@ -26,6 +28,12 @@ export default function ContactFormPage() {
         setActiveStep((prevActiveStep) => prevActiveStep - 1);
     };
 
+    const [drawerNewField, setDrawerNewField] = React.useState(false);
+    const [drawerMessenger, setDrawerMessenger] = React.useState(false);
+
+    const drawerNewFieldHC = (bool:boolean) => {setDrawerNewField(bool)}
+    const drawerMessengerHC = (bool:boolean) => {setDrawerMessenger(bool)}
+
     const theme = useTheme();
     return (
         <>
@@ -50,15 +58,22 @@ export default function ContactFormPage() {
                     <CustomTextField placeholder="+7 900 000 00 00" text={""} />
                     <Typography>Телефон*</Typography>
                     <CustomTextField placeholder="+7 900 000 00 00" text={""} />
-                    <DrawerNewField><WindowNewField/></DrawerNewField>
+                    <Button onClick={() => drawerNewFieldHC(true)} variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
-                    <DrawerNewField>
+                        Добавить поле +
-                    {/*    <Link sx={{*/}
+                    </Button>
-                    {/*    mt: "20px",*/}
+                    <DrawerNewField isOpen={drawerNewField} openHC={drawerNewFieldHC}><WindowNewField/></DrawerNewField>
-                    {/*    fontSize: "16px",*/}
+                    <Link
-                    {/*    lineHeight: "19px",*/}
+                        component='button'
-                    {/*    color: theme.palette.brightPurple.main,*/}
+                        onClick={() => drawerMessengerHC(true)}
-                    {/*    textDecorationColor: theme.palette.brightPurple.main*/}
+                        sx={{
-                    {/*}}>Добавить мессенджеры</Link>*/}
+                        fontSize: "16px",
+                        lineHeight: "19px",
+                        color: theme.palette.brightPurple.main,
+                        textDecorationColor: theme.palette.brightPurple.main,
+                            textAlign: 'left'
+                    }}>Добавить мессенджеры</Link>
+                    <DrawerNewField isOpen={drawerMessenger} openHC={drawerMessengerHC}>
+
                     <WindowMessengers/>
                     </DrawerNewField>
 

src/pages/ContactFormPage/DrawerParent.tsx

@@ -7,28 +7,17 @@ import {SxProps, Theme} from "@mui/material";
 interface Props {
     outerContainerSx?: SxProps<Theme>;
     children?: React.ReactNode;
+    isOpen: boolean;
+    openHC: (arg0: boolean) => void
 }
 
-export default function DrawerNewField({outerContainerSx: sx, children }: Props) {
+export default function DrawerNewField({outerContainerSx: sx, children, isOpen, openHC }: Props) {
-    const [state, setState] = React.useState({
-        right: false,
-    });
-
-    const toggleDrawer =
-        (anchor: 'right', open: boolean) =>
-            () => {
-                setState({ ...state, 'right' : open });
-            };
-
     return (
         <>
-            <Button onClick={toggleDrawer("right", true)} variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
-                Добавить поле +
-            </Button>
             <Drawer
                 anchor='right'
-                open={state['right']}
+                open={isOpen}
-                onClose={toggleDrawer("right", false)}
+                onClose={() => openHC(false)}
             >
                 <Box
                     sx={{ width: 450 }}

src/pages/ContactFormPage/Massengers/WindowMessengers.tsx

@@ -15,7 +15,7 @@ export default function WindowMessengers() {
     const [selectMessenger, setSelectMessenger] = useState<SelectMessenger>("contact");
     return(
         <>
-            <Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', background: theme.palette.background.default}}>
+            <Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default}}>
                 <Typography>Настройки мессенджеров</Typography>
                 <Button sx={{padding: 0}}><CloseIcon fontSize='large'/></Button>
             </Box>
@@ -61,6 +61,7 @@ export default function WindowMessengers() {
                 :
                 <></>
             }
+            <Button variant='contained' sx={{maxWidth: '125px', margin: '20px'}}>Добавить</Button>
         </>
     )
 }

src/pages/ContactFormPage/NewField/ButtonsNewField.tsx

@@ -26,11 +26,6 @@ export default function ButtonsNewField ({SSHC, switchState}:Props) {
     ]
 
     return (
-        <Box sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            width: '100%',
-        }}>
             <Box
                 sx={{
                     padding: '20px',
@@ -51,6 +46,5 @@ export default function ButtonsNewField ({SSHC, switchState}:Props) {
                     </MiniButtonSetting>
                 ))}
             </Box>
-        </Box>
     )
 }

src/pages/ContactFormPage/NewField/NewFieldParent.tsx

@@ -34,7 +34,7 @@ export default function NewFieldParent ({defaultValue, placeholderHelp, placehol
                     <TextField
                         disabled
                         id="outlined-disabled"
-                        defaultValue={defaultValue}
+                        value={defaultValue}
                         sx={{
                             "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
                                 border: 'none'

src/pages/ContactFormPage/NewField/SwitchNewField.tsx

@@ -11,6 +11,10 @@ interface Props {
 
 
 export default function SwitchNewField({switchState ='name'}: Props) {
+    const [SwitchMask, setSwitchMask] = React.useState(false);
+    const SwitchMaskHC = (bool:boolean) => {
+        setSwitchMask(bool)
+    }
     switch (switchState) {
         case 'name':
             return (<NewFieldParent placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>);
@@ -31,8 +35,16 @@ export default function SwitchNewField({switchState ='name'}: Props) {
                             display: 'flex',
                             justifyContent: 'space-between'
                         }}
+                        onClick={() => {
+                            SwitchMaskHC(!SwitchMask)
+                        }}
                     />
-                    <SelectMask/>
+                    {SwitchMask ?
+                        <SelectMask/>
+                        :
+                        <></>
+                    }
+
                 </NewFieldParent>
             );
             break;

src/pages/ContactFormPage/NewField/WindowNewField.tsx

@@ -10,7 +10,7 @@ import {useState} from "react";
 
 export default function WindowNewField() {
     const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState('setting');
+    const [switchState, setSwitchState] = React.useState('name');
     const SSHC = (data: string) => {
         setSwitchState(data)
     }
@@ -18,7 +18,7 @@ export default function WindowNewField() {
 
     return(
         <>
-            <Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', background: theme.palette.background.default}}>
+            <Box sx={{padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default}}>
                 <Typography>Новое поле</Typography>
                 <Button sx={{padding: 0}}><CloseIcon fontSize='large'/></Button>
             </Box>

src/pages/ContactFormPage/SelectMask.tsx

@@ -7,10 +7,10 @@ import {useState} from "react";
 type SelectMask = 'country'| 'mymask';
 export default function SelectMask () {
 
-    // const [State, setState] = React.useState('');
+    const [State, setState] = React.useState(false);
-    // const StateHC = (data: string) => {
+    const StateHC = (bool:boolean) => {
-    //     setState(data)
+        setState(bool)
-    // }
+    }
 
     const theme = useTheme()
     const [selectMask, setSelectMask] = useState<SelectMask>("country");
@@ -37,34 +37,39 @@ export default function SelectMask () {
                         component="button"
                         variant="body2"
                         sx={{color: theme.palette.brightPurple.main, textAlign: 'left'}}
-                        // onClick={() => {
+                        onClick={() => {
-                        //     StateHC()
+                            StateHC(!State)
-                        // }}
+                        }}
                     >
                         Расширенные настройки
                     </Link>
-                    <Box sx={{display: 'flex', flexDirection: 'column', gap: '20px'}}>
+                    {State ?
-                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
+                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '20px'}}>
-                            <Typography>Страна по умолчанию</Typography>
+                            <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
-                            <CustomTextField placeholder={'Введите страну на английском языке'}/>
+                                <Typography>Страна по умолчанию</Typography>
-                            <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Если ничего не выбрано, страна будет выбрана автоматически</Typography>
+                                <CustomTextField placeholder={'Введите страну на английском языке'}/>
+                                <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Если ничего не выбрано, страна будет выбрана автоматически</Typography>
+                            </Box>
+                            <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
+                                <Typography>Выделенные страны</Typography>
+                                <CustomTextField placeholder={'Введите страну на английском языке'}/>
+                                <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут показываться вверху списка</Typography>
+                            </Box>
+                            <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
+                                <Typography>Показываемые страны</Typography>
+                                <CustomTextField placeholder={'Введите страну на английском языке'}/>
+                                <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Будут показываться только выбранные страны</Typography>
+                            </Box>
+                            <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
+                                <Typography>Игнорируемые страны</Typography>
+                                <CustomTextField placeholder={'Введите страну на английском языке'}/>
+                                <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут не будут показываться в списке</Typography>
+                            </Box>
                         </Box>
-                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
+                        :
-                            <Typography>Выделенные страны</Typography>
+                        <></>
-                            <CustomTextField placeholder={'Введите страну на английском языке'}/>
+                    }
-                            <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут показываться вверху списка</Typography>
+
-                        </Box>
-                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
-                            <Typography>Показываемые страны</Typography>
-                            <CustomTextField placeholder={'Введите страну на английском языке'}/>
-                            <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Будут показываться только выбранные страны</Typography>
-                        </Box>
-                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
-                            <Typography>Игнорируемые страны</Typography>
-                            <CustomTextField placeholder={'Введите страну на английском языке'}/>
-                            <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут не будут показываться в списке</Typography>
-                        </Box>
-                    </Box>
                 </>
                 :
                 <>