aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-20 23:04:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: change Modal Component to a new accessible one, fix usePressHolder bug, fix ProjectDetailsCard body breaklines

Browse Source
This commit is contained in:
MTG2000
2022-05-05 10:57:36 +03:00
parent 0188825b5b
commit fff2dda9a4
12 changed files with 201 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/Components/Modals/ModalsContainer/ModalsContainer.tsx
View File

@@ -1,9 +1,7 @@
import { AnimatePresence, motion } from "framer-motion";
import { useEffect } from "react";
import { ALL_MODALS, closeModal, Direction, removeScheduledModal } from "src/redux/features/modals.slice";
import { useAppDispatch, useAppSelector } from "src/utils/hooks";
import Modal from "../Modal/Modal";
import { Portal } from "../../Portal/Portal";
export interface ModalCard {
onClose?: () => void;
@@ -52,36 +50,29 @@ export default function ModalsContainer() {
}
useEffect(() => {
if (isOpen) document.body.style.overflowY = "hidden";
else document.body.style.overflowY = "initial";
if (isOpen)
document.body.style.overflowY = "hidden";
else
document.body.style.overflowY = "initial";
}, [isOpen]);
return (
<Portal className="modals">
<div className="z-[2020]">
{openModals.map((modal, idx) => {
const Child = ALL_MODALS[modal.Modal];
<AnimatePresence exitBeforeEnter>
{isOpen &&
<motion.div
className="w-screen fixed inset-0 overflow-x-hidden z-[2020]"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{
opacity: 0,
transition: { ease: "easeInOut" },
}}
return (
<Modal
key={idx}
isOpen={modal.isOpen}
onClose={onClose}
direction={direction}
id={modal.id}
isPageModal={modal.props?.isPageModal}
>
<AnimatePresence>
{openModals.map((modal, idx) => {
const Child = ALL_MODALS[modal.Modal];
return (
<Modal key={idx} onClose={onClose} direction={direction} isPageModal={modal.props?.isPageModal}>
<Child onClose={onClose} direction={direction} isPageModal={modal.props?.isPageModal} {...modal.props} />
</Modal>)
})}
</AnimatePresence>
</motion.div>}
</AnimatePresence>
</Portal>
<Child onClose={onClose} direction={direction} isPageModal={modal.props?.isPageModal} {...modal.props} />
</Modal>)
})}
</div>
)
}