43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
|
import * as React from 'react';
|
|||
|
|
import Box from '@mui/material/Box';
|
|||
|
|
import Drawer from '@mui/material/Drawer';
|
|||
|
|
import Button from '@mui/material/Button';
|
|||
|
|
import {SxProps, Theme} from "@mui/material";
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
outerContainerSx?: SxProps<Theme>;
|
|||
|
|
children?: React.ReactNode;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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 });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
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)}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{ width: 450 }}
|
|||
|
|
role="presentation"
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
{children}
|
|||
|
|
</Box>
|
|||
|
|
</Drawer>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|