diff --git a/src/views/biz/parking/ModalDetails.jsx b/src/views/biz/parking/ModalDetails.jsx index a2ae068..d40c95a 100644 --- a/src/views/biz/parking/ModalDetails.jsx +++ b/src/views/biz/parking/ModalDetails.jsx @@ -1,76 +1,9 @@ -import PropTypes from 'prop-types'; -import React, { forwardRef, useState } from 'react'; - -// material-ui -import { Button, CardContent, CardActions, Divider, Grid, IconButton, Modal, Typography, Card } from '@mui/material'; - -// project imports -import MainCard from 'ui-component/cards/MainCard'; - -// assets -import CloseIcon from '@mui/icons-material/Close'; -import SimpleModal from 'views/form/Modal/SimpleModal'; +import GridModal from '../../form/Modal/GridModal'; import Board from '../board/Board'; -// import DraggableResizeModal from 'views/form/Modal/DraggableResizeModal'; - -// generate random -function rand() { - return Math.round(Math.random() * 20) - 10; -} - -// modal position -function getModalStyle() { - const top = 50 + rand(); - const left = 50 + rand(); - - return { - top: `${top}%`, - left: `${left}%`, - transform: `translate(-${top}%, -${left}%)` - }; -} - -const ModalDetails = () => { - // getModalStyle is not a pure function, we roll the style only on the first render - const [modalStyle] = useState(getModalStyle); - - const [open, setOpen] = useState(true); - const handleOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - const [resizeOpen, setResizeOpen] = useState(false); - const handleOpenResizeToggle = (evt) => { - setResizeOpen(!resizeOpen); - }; - - return ( - - - - - {/* */} - - {/* dkdkkd */} - - - - - // - // test2 - // - ); -}; - -// ModalDetails.propTypes = { -// modalStyle: PropTypes.object, -// handleClose: PropTypes.func -// }; +const ModalDetails = () => ( + + + +); export default ModalDetails; diff --git a/src/views/form/Modal/GridModal.jsx b/src/views/form/Modal/GridModal.jsx index 29f9f6e..02a0bb8 100644 --- a/src/views/form/Modal/GridModal.jsx +++ b/src/views/form/Modal/GridModal.jsx @@ -11,7 +11,7 @@ const style = { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', - width: 400, + width: 900, bgcolor: 'background.paper', border: '2px solid #000', boxShadow: 24, @@ -19,14 +19,14 @@ const style = { }; export default function GridModal({ children }) { - const [open, setOpen] = React.useState(false); + const [open, setOpen] = React.useState(true); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return (
- - + {/* */} + Text in a modal diff --git a/src/views/form/Popup/Popup.js b/src/views/form/Popup/Popup.js new file mode 100644 index 0000000..3be2d9f --- /dev/null +++ b/src/views/form/Popup/Popup.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { Dialog, DialogTitle, DialogContent, makeStyles, Typography } from '@mui/material'; +import Controls from './controls/Controls'; +// import CloseIcon from '@mui/icons-material'; +import { IconSquareX } from '@tabler/icons'; + +const useStyles = makeStyles((theme) => ({ + dialogWrapper: { + padding: theme.spacing(2), + position: 'absolute', + top: theme.spacing(5) + }, + dialogTitle: { + paddingRight: '0px' + } +})); + +export default function Popup(props) { + const { title, children, openPopup, setOpenPopup } = props; + const classes = useStyles(); + + return ( + + +
+ + {title} + + { + setOpenPopup(false); + }} + > + + +
+ + {children} + + ); +} diff --git a/src/views/form/Popup/controls/ActionButton.js b/src/views/form/Popup/controls/ActionButton.js new file mode 100644 index 0000000..d112356 --- /dev/null +++ b/src/views/form/Popup/controls/ActionButton.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { Button, makeStyles } from '@mui/material'; + +const useStyles = makeStyles((theme) => ({ + root: { + minWidth: 0, + margin: theme.spacing(0.5) + }, + secondary: { + backgroundColor: theme.palette.secondary.light, + '& .MuiButton-label': { + color: theme.palette.secondary.main + } + }, + primary: { + backgroundColor: theme.palette.primary.light, + '& .MuiButton-label': { + color: theme.palette.primary.main + } + } +})); + +export default function ActionButton(props) { + const { color, children, onClick } = props; + const classes = useStyles(); + + return ( + + ); +} diff --git a/src/views/form/Popup/controls/Button.js b/src/views/form/Popup/controls/Button.js new file mode 100644 index 0000000..78af930 --- /dev/null +++ b/src/views/form/Popup/controls/Button.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { Button as MuiButton, makeStyles } from '@mui/material'; + +const useStyles = makeStyles((theme) => ({ + root: { + margin: theme.spacing(0.5) + }, + label: { + textTransform: 'none' + } +})); + +export default function Button(props) { + const { text, size, color, variant, onClick, ...other } = props; + const classes = useStyles(); + + return ( + + {text} + + ); +} diff --git a/src/views/form/Popup/controls/Checkbox.js b/src/views/form/Popup/controls/Checkbox.js new file mode 100644 index 0000000..12605ed --- /dev/null +++ b/src/views/form/Popup/controls/Checkbox.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { FormControl, FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material'; + +export default function Checkbox(props) { + const { name, label, value, onChange } = props; + + const convertToDefEventPara = (name, value) => ({ + target: { + name, + value + } + }); + + return ( + + onChange(convertToDefEventPara(name, e.target.checked))} + /> + } + label={label} + /> + + ); +} diff --git a/src/views/form/Popup/controls/Controls.js b/src/views/form/Popup/controls/Controls.js new file mode 100644 index 0000000..f5f8996 --- /dev/null +++ b/src/views/form/Popup/controls/Controls.js @@ -0,0 +1,17 @@ +import Input from './Input'; +import RadioGroup from './RadioGroup'; +import Select from './Select'; +import Checkbox from './Checkbox'; +import Button from './Button'; +import ActionButton from './ActionButton'; + +const Controls = { + Input, + RadioGroup, + Select, + Checkbox, + Button, + ActionButton +}; + +export default Controls; diff --git a/src/views/form/Popup/controls/Input.js b/src/views/form/Popup/controls/Input.js new file mode 100644 index 0000000..93c79f1 --- /dev/null +++ b/src/views/form/Popup/controls/Input.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { TextField } from '@mui/material'; + +export default function Input(props) { + const { name, label, value, error = null, onChange, ...other } = props; + return ( + + ); +} diff --git a/src/views/form/Popup/controls/RadioGroup.js b/src/views/form/Popup/controls/RadioGroup.js new file mode 100644 index 0000000..b067755 --- /dev/null +++ b/src/views/form/Popup/controls/RadioGroup.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { FormControl, FormLabel, RadioGroup as MuiRadioGroup, FormControlLabel, Radio } from '@mui/material'; + +export default function RadioGroup(props) { + const { name, label, value, onChange, items } = props; + + return ( + + {label} + + {items.map((item) => ( + } label={item.title} /> + ))} + + + ); +} diff --git a/src/views/form/Popup/controls/Select.js b/src/views/form/Popup/controls/Select.js new file mode 100644 index 0000000..2c89f2c --- /dev/null +++ b/src/views/form/Popup/controls/Select.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { FormControl, InputLabel, Select as MuiSelect, MenuItem, FormHelperText } from '@mui/material'; + +export default function Select(props) { + const { name, label, value, error = null, onChange, options } = props; + + return ( + + {label} + + None + {options.map((item) => ( + + {item.title} + + ))} + + {error && {error}} + + ); +}