93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
import * as React from "react";
|
||
import { Box, Modal, Fade, Backdrop, Button, TextField } from "@mui/material";
|
||
import theme from "../../../../theme";
|
||
|
||
|
||
export interface MWProps {
|
||
open: boolean
|
||
newPackage: (name: string) => void
|
||
close: () => void
|
||
}
|
||
|
||
const ModalPackage = ({open, newPackage, close}: MWProps ) => {
|
||
const fieldName = React.useRef<HTMLInputElement | null>(null);
|
||
|
||
const checkName = () => {
|
||
if( fieldName.current != null ) {
|
||
newPackage( fieldName.current.value );
|
||
}
|
||
}
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<Modal
|
||
aria-labelledby="transition-modal-title"
|
||
aria-describedby="transition-modal-description"
|
||
open={ open }
|
||
onClose={ () => close() }
|
||
closeAfterTransition
|
||
BackdropComponent={Backdrop}
|
||
BackdropProps={{
|
||
timeout: 500,
|
||
}}
|
||
>
|
||
<Fade in={open}>
|
||
<Box sx={{
|
||
position: "absolute" as "absolute",
|
||
top: "50%",
|
||
left: "50%",
|
||
transform: "translate(-50%, -50%)",
|
||
width: "350px",
|
||
height: "170px",
|
||
bgcolor: theme.palette.menu.main,
|
||
boxShadow: 24,
|
||
color: theme.palette.secondary.main,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
}}>
|
||
<TextField
|
||
id = "standard-basic"
|
||
label = { "Название пакета" }
|
||
variant = "filled"
|
||
color = "secondary"
|
||
sx = {{ width: "80%", marginTop: theme.spacing(1) }}
|
||
InputProps={{
|
||
style: {
|
||
backgroundColor: theme.palette.content.main,
|
||
color: theme.palette.secondary.main,
|
||
} }}
|
||
InputLabelProps={{
|
||
style: {
|
||
color: theme.palette.secondary.main
|
||
} }}
|
||
inputRef={ fieldName }
|
||
/>
|
||
|
||
<Button
|
||
variant = "contained"
|
||
onClick={ () => checkName() }
|
||
sx={{
|
||
backgroundColor: theme.palette.grayDark.main,
|
||
marginTop: "30px",
|
||
height: "42px",
|
||
fontWeight: "normal",
|
||
fontSize: "17px",
|
||
"&:hover": {
|
||
backgroundColor: theme.palette.grayMedium.main
|
||
}
|
||
}}>
|
||
Применить
|
||
</Button>
|
||
|
||
</Box>
|
||
</Fade>
|
||
</Modal>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
|
||
|
||
export default ModalPackage;
|