From b5f52b2bffff04f0a57b5c2ed5d9632dcc660b02 Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Sat, 29 Aug 2020 13:57:08 +0200
Subject: [PATCH] Add custom modal
---
src/core/components/CustomModal.tsx | 68 ++++++++++++++++++++++++++
src/core/components/ProfileButton.tsx | 10 +++-
src/core/components/ProfileModal.tsx | 69 ---------------------------
3 files changed, 76 insertions(+), 71 deletions(-)
create mode 100644 src/core/components/CustomModal.tsx
delete mode 100644 src/core/components/ProfileModal.tsx
diff --git a/src/core/components/CustomModal.tsx b/src/core/components/CustomModal.tsx
new file mode 100644
index 0000000..ebe9280
--- /dev/null
+++ b/src/core/components/CustomModal.tsx
@@ -0,0 +1,68 @@
+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;
diff --git a/src/core/components/ProfileButton.tsx b/src/core/components/ProfileButton.tsx
index 65ac9a3..7de7a16 100644
--- a/src/core/components/ProfileButton.tsx
+++ b/src/core/components/ProfileButton.tsx
@@ -1,6 +1,6 @@
import { Button } from '@material-ui/core';
import React, { useState } from 'react';
-import { ProfileModal } from './ProfileModal';
+import { CustomModal } from './CustomModal';
export const ProfileButton = () => {
const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(false);
@@ -14,7 +14,13 @@ export const ProfileButton = () => {
<Button variant="contained" color="primary" onClick={handleProfileModalOpen}>
Open Profile
</Button>
- <ProfileModal isOpen={isProfileModalOpen} setIsOpen={setIsProfileModalOpen} />
+ <CustomModal
+ isOpen={isProfileModalOpen}
+ setIsOpen={setIsProfileModalOpen}
+ customStyle={{ backgroundColor: 'white', padding: '10px' }}
+ >
+ Modal content
+ </CustomModal>
</div>
);
};
diff --git a/src/core/components/ProfileModal.tsx b/src/core/components/ProfileModal.tsx
deleted file mode 100644
index 3353bd1..0000000
--- a/src/core/components/ProfileModal.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-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;
--
GitLab