From def69de6e4e11e373280c90f93af0b0369b85ac8 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Wed, 28 Feb 2024 23:03:35 +0330
Subject: [PATCH] style: add scroll lock in modals

---
 src/components/modal/modal.tsx                 | 18 +++++++++++++++++-
 .../toolbox/pomodoro/setting/setting.tsx       |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index e75e809..a4538e6 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { IoClose } from 'react-icons/io5/index';
 
@@ -8,17 +9,32 @@ import styles from './modal.module.css';
 
 interface ModalProps {
   children: React.ReactNode;
+  lockBody?: boolean;
   onClose: () => void;
   show: boolean;
   wide?: boolean;
 }
 
-export function Modal({ children, onClose, show, wide }: ModalProps) {
+export function Modal({
+  children,
+  lockBody = true,
+  onClose,
+  show,
+  wide,
+}: ModalProps) {
   const variants = {
     modal: mix(fade(), slideY(20)),
     overlay: fade(),
   };
 
+  useEffect(() => {
+    if (show && lockBody) {
+      document.body.style.overflow = 'hidden';
+    } else if (lockBody) {
+      document.body.style.overflow = 'auto';
+    }
+  }, [show, lockBody]);
+
   return (
     <AnimatePresence>
       {show && (
diff --git a/src/components/toolbox/pomodoro/setting/setting.tsx b/src/components/toolbox/pomodoro/setting/setting.tsx
index 1322481..e3b9eb1 100644
--- a/src/components/toolbox/pomodoro/setting/setting.tsx
+++ b/src/components/toolbox/pomodoro/setting/setting.tsx
@@ -27,7 +27,7 @@ export function Setting({ onChange, onClose, show, times }: SettingProps) {
   };
 
   return (
-    <Modal show={show} onClose={onClose}>
+    <Modal lockBody={false} show={show} onClose={onClose}>
       <h2 className={styles.title}>Change Times</h2>
 
       <form className={styles.form} onSubmit={handleSubmit}>