From 0dc20955bbcedc10cdfa9a09c8c86661d19ba440 Mon Sep 17 00:00:00 2001
From: Tamara <tomka-zel@yandex.ru>
Date: Tue, 18 Apr 2023 01:02:46 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=BF?=
 =?UTF-8?q?=D0=BE=20=D0=B4=D1=80=D0=B0=D0=B2=D0=B5=D1=80=D1=83=20=D0=B2?=
 =?UTF-8?q?=D0=BD=D1=83=D1=82=D1=80=D0=B8=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B?=
 =?UTF-8?q?=20=D0=BA=D0=BE=D0=BD=D1=82=D0=B0=D0=BA=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ContactFormPage/ContactFormPage.tsx | 33 +++++++---
 src/pages/ContactFormPage/DrawerParent.tsx    | 21 ++-----
 .../Massengers/WindowMessengers.tsx           |  3 +-
 .../NewField/ButtonsNewField.tsx              |  6 --
 .../NewField/NewFieldParent.tsx               |  2 +-
 .../NewField/SwitchNewField.tsx               | 14 ++++-
 .../NewField/WindowNewField.tsx               |  4 +-
 src/pages/ContactFormPage/SelectMask.tsx      | 61 ++++++++++---------
 8 files changed, 80 insertions(+), 64 deletions(-)

diff --git a/src/pages/ContactFormPage/ContactFormPage.tsx b/src/pages/ContactFormPage/ContactFormPage.tsx
index 3bd46748..285399a9 100644
--- a/src/pages/ContactFormPage/ContactFormPage.tsx
+++ b/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>
-                    <DrawerNewField>
-                    {/*    <Link sx={{*/}
-                    {/*    mt: "20px",*/}
-                    {/*    fontSize: "16px",*/}
-                    {/*    lineHeight: "19px",*/}
-                    {/*    color: theme.palette.brightPurple.main,*/}
-                    {/*    textDecorationColor: theme.palette.brightPurple.main*/}
-                    {/*}}>Добавить мессенджеры</Link>*/}
+                    <Button onClick={() => drawerNewFieldHC(true)} variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
+                        Добавить поле +
+                    </Button>
+                    <DrawerNewField isOpen={drawerNewField} openHC={drawerNewFieldHC}><WindowNewField/></DrawerNewField>
+                    <Link
+                        component='button'
+                        onClick={() => drawerMessengerHC(true)}
+                        sx={{
+                        fontSize: "16px",
+                        lineHeight: "19px",
+                        color: theme.palette.brightPurple.main,
+                        textDecorationColor: theme.palette.brightPurple.main,
+                            textAlign: 'left'
+                    }}>Добавить мессенджеры</Link>
+                    <DrawerNewField isOpen={drawerMessenger} openHC={drawerMessengerHC}>
+
                     <WindowMessengers/>
                     </DrawerNewField>
 
diff --git a/src/pages/ContactFormPage/DrawerParent.tsx b/src/pages/ContactFormPage/DrawerParent.tsx
index 8a931ce0..df22bc8e 100644
--- a/src/pages/ContactFormPage/DrawerParent.tsx
+++ b/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) {
-    const [state, setState] = React.useState({
-        right: false,
-    });
-
-    const toggleDrawer =
-        (anchor: 'right', open: boolean) =>
-            () => {
-                setState({ ...state, 'right' : open });
-            };
-
+export default function DrawerNewField({outerContainerSx: sx, children, isOpen, openHC }: Props) {
     return (
         <>
-            <Button onClick={toggleDrawer("right", true)} variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
-                Добавить поле +
-            </Button>
             <Drawer
                 anchor='right'
-                open={state['right']}
-                onClose={toggleDrawer("right", false)}
+                open={isOpen}
+                onClose={() => openHC(false)}
             >
                 <Box
                     sx={{ width: 450 }}
diff --git a/src/pages/ContactFormPage/Massengers/WindowMessengers.tsx b/src/pages/ContactFormPage/Massengers/WindowMessengers.tsx
index 4ca9d935..fe62a79f 100644
--- a/src/pages/ContactFormPage/Massengers/WindowMessengers.tsx
+++ b/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>
         </>
     )
 }
\ No newline at end of file
diff --git a/src/pages/ContactFormPage/NewField/ButtonsNewField.tsx b/src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
index f65c770e..c79354f3 100644
--- a/src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
+++ b/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>
     )
 }
\ No newline at end of file
diff --git a/src/pages/ContactFormPage/NewField/NewFieldParent.tsx b/src/pages/ContactFormPage/NewField/NewFieldParent.tsx
index e7ae520a..04d47602 100644
--- a/src/pages/ContactFormPage/NewField/NewFieldParent.tsx
+++ b/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'
diff --git a/src/pages/ContactFormPage/NewField/SwitchNewField.tsx b/src/pages/ContactFormPage/NewField/SwitchNewField.tsx
index 8f72c3f6..5148990e 100644
--- a/src/pages/ContactFormPage/NewField/SwitchNewField.tsx
+++ b/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;
diff --git a/src/pages/ContactFormPage/NewField/WindowNewField.tsx b/src/pages/ContactFormPage/NewField/WindowNewField.tsx
index 5cb20fe6..467c6f96 100644
--- a/src/pages/ContactFormPage/NewField/WindowNewField.tsx
+++ b/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>
diff --git a/src/pages/ContactFormPage/SelectMask.tsx b/src/pages/ContactFormPage/SelectMask.tsx
index 92ee556d..c7f35add 100644
--- a/src/pages/ContactFormPage/SelectMask.tsx
+++ b/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 StateHC = (data: string) => {
-    //     setState(data)
-    // }
+    const [State, setState] = React.useState(false);
+    const StateHC = (bool:boolean) => {
+        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={() => {
-                        //     StateHC()
-                        // }}
+                        onClick={() => {
+                            StateHC(!State)
+                        }}
                     >
                         Расширенные настройки
                     </Link>
-                    <Box sx={{display: 'flex', flexDirection: 'column', gap: '20px'}}>
-                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
-                            <Typography>Страна по умолчанию</Typography>
-                            <CustomTextField placeholder={'Введите страну на английском языке'}/>
-                            <Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Если ничего не выбрано, страна будет выбрана автоматически</Typography>
+                    {State ?
+                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '20px'}}>
+                            <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 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>
+                        :
+                        <></>
+                    }
+
                 </>
                 :
                 <>