Skip to content
Snippets Groups Projects
Commit b5f52b2b authored by Rafael László's avatar Rafael László :speech_balloon:
Browse files

Add custom modal

parent c6f6df0e
No related branches found
No related tags found
2 merge requests!7update master to dev,!4Feature/profile
import { Modal } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import React, { Dispatch, SetStateAction } from 'react';
type Dispatcher<S> = Dispatch<SetStateAction<S>>;
interface ICustomModalProps {
isOpen: boolean;
setIsOpen: Dispatcher<boolean>;
children: React.ReactNode;
customStyle: { backgroundColor?: string; padding?: string };
}
const useStyles = makeStyles((theme) => ({
modal: {
backgroundColor: '#fefefe',
margin: '7% auto',
padding: 'none',
border: 'none',
width: '85%',
[theme.breakpoints.down('sm')]: {
margin: '3% auto',
width: '95%',
},
},
modalContent: (customStyle: ICustomModalProps['customStyle']) => ({
...{
backgroundColor: customStyle.backgroundColor || 'theme.palette.background.paper',
border: 'none',
padding: customStyle.padding || 'none',
boxShadow: theme.shadows[5],
'&:focus': {
outline: 'none',
},
},
}),
}));
export const CustomModal = ({
isOpen,
setIsOpen,
customStyle = {},
children,
}: ICustomModalProps) => {
const classes = useStyles(customStyle);
const handleClose = () => {
setIsOpen(false);
};
const body = <div className={classes.modalContent}>{children}</div>;
return (
<div>
<Modal
className={classes.modal}
open={isOpen}
onClose={handleClose}
aria-labelledby="custom-modal"
aria-describedby="custom-modal"
>
{body}
</Modal>
</div>
);
};
export default CustomModal;
import { Button } from '@material-ui/core'; import { Button } from '@material-ui/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ProfileModal } from './ProfileModal'; import { CustomModal } from './CustomModal';
export const ProfileButton = () => { export const ProfileButton = () => {
const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(false); const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(false);
...@@ -14,7 +14,13 @@ export const ProfileButton = () => { ...@@ -14,7 +14,13 @@ export const ProfileButton = () => {
<Button variant="contained" color="primary" onClick={handleProfileModalOpen}> <Button variant="contained" color="primary" onClick={handleProfileModalOpen}>
Open Profile Open Profile
</Button> </Button>
<ProfileModal isOpen={isProfileModalOpen} setIsOpen={setIsProfileModalOpen} /> <CustomModal
isOpen={isProfileModalOpen}
setIsOpen={setIsProfileModalOpen}
customStyle={{ backgroundColor: 'white', padding: '10px' }}
>
Modal content
</CustomModal>
</div> </div>
); );
}; };
......
import { Modal } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import React, { Dispatch, SetStateAction, useState } from 'react';
function rand() {
return Math.round(Math.random() * 20) - 10;
}
function getModalStyle() {
const top = 50 + rand();
const left = 50 + rand();
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
const useStyles = makeStyles((theme) => ({
paper: {
position: 'absolute',
width: 400,
backgroundColor: theme.palette.background.paper,
border: '2px solid #000',
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));
type Dispatcher<S> = Dispatch<SetStateAction<S>>;
interface IProfileModalProps {
isOpen: boolean;
setIsOpen: Dispatcher<boolean>;
}
export const ProfileModal = ({ isOpen, setIsOpen }: IProfileModalProps) => {
const classes = useStyles();
const [modalStyle] = useState(getModalStyle);
const handleClose = () => {
setIsOpen(false);
};
const body = (
<div style={modalStyle} className={classes.paper}>
<h2 id="simple-modal-title">Text in a modal</h2>
<p id="simple-modal-description">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</p>
</div>
);
return (
<div>
<Modal
open={isOpen}
onClose={handleClose}
aria-labelledby="profile-modal"
aria-describedby="profile-modal"
>
{body}
</Modal>
</div>
);
};
export default ProfileModal;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment