108 lines
2.6 KiB
TypeScript
108 lines
2.6 KiB
TypeScript
import { useEffect, useState, useRef } from "react";
|
|
import gsap from "gsap";
|
|
import useStore from "../../../store/store";
|
|
import UnitList from "../../UnitList";
|
|
import LayoutSlider from "../../mobile/Appartment/LayoutSlider";
|
|
import { LayoutToggle } from "../../LayoutToggle";
|
|
import CrossButton from "../../CrossButton";
|
|
|
|
const LayoutModal = () => {
|
|
const [currentView, setCurrentView] = useState(1);
|
|
const { currentVilla, setModal } = useStore();
|
|
const [currentUnits, setCurrentUnits] = useState(
|
|
currentVilla?.groundFloorUnits
|
|
);
|
|
|
|
const modalRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (!modalRef) return;
|
|
gsap.fromTo(
|
|
modalRef.current,
|
|
{
|
|
left: "100vw",
|
|
bottom: "100vh",
|
|
},
|
|
{
|
|
left: 0,
|
|
bottom: 0,
|
|
duration: 0.3,
|
|
}
|
|
);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (currentVilla) {
|
|
switch (currentView) {
|
|
case 3:
|
|
setCurrentUnits(currentVilla.parkingUnits);
|
|
break;
|
|
case 2:
|
|
setCurrentUnits(currentVilla.firstFloorUnits);
|
|
break;
|
|
default:
|
|
setCurrentUnits(currentVilla.groundFloorUnits);
|
|
break;
|
|
}
|
|
}
|
|
}, [currentView, currentVilla]);
|
|
|
|
const handleOnCloseClick = () => {
|
|
const onAnimationComplete = () => {
|
|
const timeout = setTimeout(() => {
|
|
setModal(null);
|
|
clearTimeout(timeout);
|
|
}, 200);
|
|
};
|
|
|
|
gsap.fromTo(
|
|
modalRef.current,
|
|
{
|
|
left: 0,
|
|
bottom: 0,
|
|
},
|
|
{
|
|
left: "100vw",
|
|
bottom: "100vh",
|
|
duration: 0.5,
|
|
onComplete: onAnimationComplete,
|
|
}
|
|
);
|
|
};
|
|
|
|
return (
|
|
// <div className="min-w-screen w-screen z-20 flex flex-col absolute">
|
|
<>
|
|
<div
|
|
className="relative left-[100vw] bottom-[100vh] bg-white h-screen "
|
|
ref={modalRef}
|
|
>
|
|
<div className="flex">
|
|
<div className="min-w-[440px] overflow-y-clip flex flex-col justify-center">
|
|
{currentUnits && <UnitList units={currentUnits} />}
|
|
</div>
|
|
<div className="w-full flex flex-col p-8">
|
|
<LayoutSlider
|
|
currentView={currentView}
|
|
setCurrentView={setCurrentView}
|
|
/>
|
|
<LayoutToggle
|
|
className="max-w-[340px] mx-auto"
|
|
currentView={currentView}
|
|
setCurrentView={setCurrentView}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between pt-8 pr-8 absolute z-20 left-0 top-0 w-full">
|
|
<div />
|
|
<CrossButton onClick={handleOnCloseClick} />
|
|
</div>
|
|
{/* </div>
|
|
<></> */}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LayoutModal;
|