SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tamara 2023-04-18 01:02:46 +03:00 committed by krokodilka
parent e6bebe9b5d
commit 0dc20955bb
8 changed files with 80 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/ContactFormPage/ContactFormPage.tsx
View File

@ -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>

21
src/pages/ContactFormPage/DrawerParent.tsx
View File

@ -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 }}

3
src/pages/ContactFormPage/Massengers/WindowMessengers.tsx
View File

@ -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>
</>
)
}

6
src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
View File

@ -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>
)
}

2
src/pages/ContactFormPage/NewField/NewFieldParent.tsx
View File

@ -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'

12
src/pages/ContactFormPage/NewField/SwitchNewField.tsx
View File

@ -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)
}}
/>
{SwitchMask ?
<SelectMask/>
:
<></>
}
</NewFieldParent>
);
break;

4
src/pages/ContactFormPage/NewField/WindowNewField.tsx
View File

@ -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>

19
src/pages/ContactFormPage/SelectMask.tsx
View File

@ -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,12 +37,13 @@ export default function SelectMask () {
component="button"
variant="body2"
sx={{color: theme.palette.brightPurple.main, textAlign: 'left'}}
// onClick={() => {
// StateHC()
// }}
onClick={() => {
StateHC(!State)
}}
>
Расширенные настройки
</Link>
{State ?
<Box sx={{display: 'flex', flexDirection: 'column', gap: '20px'}}>
<Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
<Typography>Страна по умолчанию</Typography>
@ -65,6 +66,10 @@ export default function SelectMask () {
<Typography sx={{fontSize: "12px", lineHeight: "14px"}}>Выбранные страны будут не будут показываться в списке</Typography>
</Box>
</Box>
:
<></>
}
</>
:
<>