30 lines
No EOL
894 B
TypeScript
30 lines
No EOL
894 B
TypeScript
import { memo, useEffect, useRef, useState } from "react";
|
|
import { ModalView } from "./ModalView";
|
|
import styles from "./ModalsView.module.css";
|
|
import { useModals } from "../../hooks/modals/modalsContext";
|
|
import { useModalsManager } from "../../hooks/modals/modalsManagerContext";
|
|
|
|
export const ModalsView = memo(() => {
|
|
const ref = useRef(null);
|
|
const modals = useModals();
|
|
const modalsManager = useModalsManager();
|
|
const [sortedModals, setSortedModals] = useState([]);
|
|
|
|
// Sort modals
|
|
useEffect(() => {
|
|
setSortedModals([...modals].sort((modalA, modalB) =>
|
|
modalA.lastInteraction - modalB.lastInteraction
|
|
));
|
|
}, [modals]);
|
|
|
|
useEffect(() => {
|
|
if (modalsManager)
|
|
modalsManager.containerRef = ref;
|
|
}, [modalsManager, ref]);
|
|
|
|
return <div ref={ref} className={styles.Container}>
|
|
{sortedModals?.map((modal) =>
|
|
<ModalView key={modal.id} modal={modal}/>
|
|
)}
|
|
</div>;
|
|
}); |