Merge pull request #760 from ita-social-projects/#758-FEPreventModalF…

…romClosingWhenClickingOutsideOfIt #758 [FE] Prevent modal from closing when clicking outside of it
ita-social-projects · Sep 4, 2024 · 73cad18 · 73cad18
2 parents e0aec70 + 4847301
commit 73cad18
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 6 deletions.
diff --git a/...nd/src/components/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.jsx b/...nd/src/components/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.jsx
@@ -19,7 +19,7 @@ const DeleteProfilePage = (props) => {
       <button className={css['button__delete']} onClick={() => setModal(true)}>
         Видалити
       </button>
-      <MyModal visible={modal} setVisisble={setModal}>
+      <MyModal visible={modal}>
         <DeleteProfileModal onCancel={cancelHandler} />
       </MyModal>
     </div>

diff --git a/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.jsx b/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.jsx
@@ -212,7 +212,7 @@ const ProfileContent = (props) => {
 
             {blocker.state === 'blocked' &&
                 (
-                <MyModal visible={modal} setVisisble={setModal}>
+                <MyModal visible={modal}>
                     <WarnUnsavedDataModal onCancel={cancelNavigation} onConfirm={confirmNavigation} />
                 </MyModal>)
             }

diff --git a/FrontEnd/src/components/ProfilePage/UI/MyModal/MyModal.jsx b/FrontEnd/src/components/ProfilePage/UI/MyModal/MyModal.jsx
@@ -1,13 +1,13 @@
 import css from './MyModal.module.css';
 
-const MyModal = ({children, visible, setVisisble}) => {
+const MyModal = ({children, visible}) => {
     const rootClasses = [css['myModal']];
     if (visible) {
         rootClasses.push(css['active']);
     }
 
     return (
-        <div className={rootClasses.join(' ')}  onClick={() => setVisisble(false)}>
+        <div className={rootClasses.join(' ')}>
             <div className={css['myModal__content']} onClick={(event) => event.stopPropagation()}>{children}</div>
         </div>
     );

diff --git a/FrontEnd/src/components/cookieacception/CookieMod.jsx b/FrontEnd/src/components/cookieacception/CookieMod.jsx
@@ -32,7 +32,6 @@ const CookieMod = ({ active, setActive }) => {
   return cookies.first ? null : (
     <div
       className={`${styles['modal-window']} ${active && styles['active']}`}
-      onClick={() => setActive(false)}
     >
       <div className={styles['modal-content']} data-testid="cookiemodal" onClick={(e) => e.stopPropagation()}>
         <p className={styles['cookie-text']}>

diff --git a/FrontEnd/src/components/moderation/ModerationModal.jsx b/FrontEnd/src/components/moderation/ModerationModal.jsx
@@ -64,7 +64,7 @@ export function ModerationModal() {
   return (
     <div>
       <MainPage />
-        <MyModal visible={modalVisible} setVisisble={setModalVisible}>
+        <MyModal visible={modalVisible}>
             <div className={classes['modal__content']}>{moderationStatus}</div>
             <div className={classes['modal__footer']}>
               <div className={classes['button-container']}>