Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

10-modal-development #49

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

10-modal-development #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da26b91
implement modal usage logic
kasiarog Feb 21, 2024
0f094c7
small fixes
kasiarog Feb 22, 2024
419938d
eventListener upgrade
kasiarog Feb 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 47 additions & 16 deletions src/components/widgets/ModalWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,55 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';

import styles from '../../styles/components/widgets/ModalWidget.module.scss';


const ModalWidget = ({header, paragraph}) => {
return (
<div className={styles.modalBackground}>
<div className={styles.modalContainer}>
const ModalWidget = ({header, paragraph, cancelText, confirmText, onConfirm,}) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is unnecessary comma after last prop

const [openModal, setOpenModal] = useState(true);
const switchModal = () => {
setOpenModal(!openModal);
}
Comment on lines +7 to +10
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

openModal should be passed as a prop "open" and then we will be able to control the state outside the component


const pressEscape = (e) => {
if (e.key == "Escape") {
setOpenModal(false);
}
}

<div className={styles.header}>
<h2 className={styles.headerText}>{header}</h2>
</div>
<div className={styles.paragraph}>
<p>{paragraph}</p>
</div>
<div className={styles.footer}>
<button className={`${styles.modalButton} ${styles.cancel}`}>Cancel</button>
<button className={`${styles.modalButton} ${styles.confirm}`}>Confirm</button>
</div>
</div>
document.body.addEventListener('keydown', pressEscape);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, move it to useEffect function, but not the returned one, above return.

useEffect(() => {
return () => {document.body.removeEventListener('keydown', pressEscape)}
}, [])

const pressConfirm = () => {
switchModal();
onConfirm(true);
}

return (
<div>
<button onClick={switchModal}> Show modal </button>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we will have open prop state, then we don't have to have a button here :)

{openModal && <>
<div className={styles.modalBackground}>
<div className={styles.overlay} onClick={switchModal}></div>
<div className={styles.modalContainer}>
<div className={styles.header}>
<h2 className={styles.headerText}>{header}</h2>
</div>
<div className={styles.paragraph}>
<p>{paragraph}</p>
</div>
<div className={styles.footer}>
<button className={`${styles.modalButton} ${styles.cancel}`} onClick={switchModal}>
{cancelText}
</button>
<button className={`${styles.modalButton} ${styles.confirm}`} onClick={pressConfirm}>
Comment on lines +42 to +45
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onClick can just include function which will be passed and we don't have to wrap it with another one

{confirmText}
</button>
</div>
</div>
</div>
</>
}
</div>
);
};
Expand Down
20 changes: 17 additions & 3 deletions src/styles/components/widgets/ModalWidget.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,34 @@
$modalRed : #E64242;
$modalGreen: #6DC12C;

.modalBackground {
.modalBackground{
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;

position: fixed;
display: flex;
justify-content: center;
align-items: center;

background: rgba(0, 0, 0, 0.79);
font-size: 2vw;

z-index: 1000; // to be sure that it will be displayd at the top of everything else
// when there is no z-index there is a navbar menu higher!
}

.overlay{
top: 0;
left: 0;
height: 100vh;
width: 100vw;

background: rgba(0, 0, 0, 0.79);
}

.modalContainer {
position: absolute;
min-height: 12rem;
min-width: min(40rem, 70%);
padding: 20px;
Expand All @@ -29,6 +41,8 @@ $modalGreen: #6DC12C;
background-color: var(--lightgray-color);
border-radius: 15px;
box-shadow: var(--third-color) 0px 0px 5px;

transition: all 200ms ease-in-out;
}

.header {
Expand Down