modal animation container

package.json

@@ -13,7 +13,6 @@
     "@arcgis/core": "^4.28.10",
     "@react-spring/web": "^9.7.3",
     "@use-gesture/react": "^10.3.0",
-    "gsap": "^3.12.5",
     "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",

src/components/Layout.tsx

@@ -1,11 +1,10 @@
-import { Outlet } from "react-router-dom";
-import useStore from "../store/store";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import { useEffect } from "react";
-import ModalContainer from "./ModalContainer";
+import { Outlet } from "react-router-dom";
+import useStore from "../store/store";
 
 const Layout = () => {
-  const { loader, setOnFullscreen } = useStore();
+  const { loader, setOnFullscreen, modal } = useStore();
   const onFullscreenHandle = useFullScreenHandle();
 
   useEffect(() => {
@@ -14,10 +13,9 @@ const Layout = () => {
 
   return (
     <FullScreen handle={onFullscreenHandle}>
-      {/* {modal} */}
+      {modal}
       {loader}
       <Outlet />
-      <ModalContainer />
     </FullScreen>
   );
 };

src/components/LoaderModal.tsx

@@ -26,7 +26,7 @@ const LoaderModal = ({ isSimleLoader = false }: LoaderModalProps) => {
   }, []);
 
   return (
-    <div className="bg-[#F3F2F0] h-full w-full flex justify-center items-center flex-col fixed z-30">
+    <div className="bg-[#F3F2F0] h-full w-full flex justify-center items-center flex-col fixed z-50">
       <LoadingIcon className="animate-spin w-16" />
       {!isSimleLoader ? (
         <div className="relative h-7 overflow-hidden">

src/components/Map/MapMediaLayer.tsx

@@ -34,7 +34,7 @@ export const MapMediaLayer = ({
 
   useEffect(() => {
     const allVillasImage = new ImageElement({
-      image: "/images/map/Villas1.png",
+      image: "/images/map/Villas2.png",
       georeference: new ExtentAndRotationGeoreference({
         extent: extent,
       }),

src/components/Map/MapView.tsx

@@ -94,18 +94,12 @@ type MapViewComponentProps = {
 
 export const MapViewComponent = (props: MapViewComponentProps) => {
   const { children, className } = props;
-  const { selectedOnMapVilla, setLoader, setModal, loader } = useStore();
+  const { selectedOnMapVilla, setLoader, setModal } = useStore();
   const [isLoading, setIsLoading] = useState(true);
   const [view, setView] = useState<__esri.MapView | undefined>();
 
   const mapRef = useRef(null);
 
-  useEffect(() => {
-    // setLoader(<LoaderModal isSimleLoader />);
-    console.log("isLoading", isLoading);
-    console.log("loader", loader);
-  });
-
   useEffect(() => {
     if (isLoading) {
       setLoader(<LoaderModal isSimleLoader />);

src/components/ModalContainer.tsx

@@ -1,32 +0,0 @@
-import { useEffect } from "react";
-import useStore from "../store/store";
-
-function ModalContainer() {
-  const { modal, modalAnimation, setModal } = useStore();
-
-  useEffect(() => {
-    if (modalAnimation !== 1) return;
-    const timeout = setTimeout(() => {
-      setModal(null);
-    }, 300);
-
-    return clearTimeout(timeout);
-  }, [modalAnimation]);
-
-  if (modal) {
-    return (
-      <div
-        className="fixed top-0 left-0 w-full h-full transition-all duration-500 ease-in-out"
-        style={{
-          transform: `translate(${modalAnimation * 100}vw, ${
-            -modalAnimation * 100
-          }vh)`,
-        }}
-      >
-        {modal}
-      </div>
-    );
-  }
-}
-
-export default ModalContainer;

src/components/desktop/Appartment/ButtonPanel.tsx

@@ -11,6 +11,7 @@ import ControlHelpModal from "./ControlHelpModal/ControlHelpModal";
 import LayoutModal from "./LayoutModal";
 import ImagesModal from "./ImagesModal";
 import PedestrianIcon from "../../../icons/Pedestrianicon";
+import ModalAnimationContainer from "./ModalAnimationContainer";
 
 type ButtonPanelProps = {
   handleFullscreen: FullScreenHandle | null;
@@ -38,12 +39,20 @@ const ButtonPanel = ({ handleFullscreen }: ButtonPanelProps) => {
 
   const handleOnLayoutClick = () => {
     setModalAnimation(0);
-    setModal(<LayoutModal />);
+    setModal(
+      <ModalAnimationContainer>
+        <LayoutModal />
+      </ModalAnimationContainer>
+    );
   };
 
   const handleOnImagesClick = () => {
     setModalAnimation(0);
-    setModal(<ImagesModal />);
+    setModal(
+      <ModalAnimationContainer>
+        <ImagesModal />
+      </ModalAnimationContainer>
+    );
   };
 
   return (

src/components/desktop/Appartment/ModalAnimationContainer.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import useStore from "../../../store/store";
+
+type ModalContainerProps = {
+  children: React.ReactNode;
+};
+
+function ModalAnimationContainer({ children }: ModalContainerProps) {
+  const { modalAnimation, setModal } = useStore();
+
+  useEffect(() => {
+    if (modalAnimation !== 1) return;
+    const timeout = setTimeout(() => {
+      setModal(null);
+    }, 300);
+
+    return clearTimeout(timeout);
+  }, [modalAnimation]);
+
+  return (
+    <div
+      className="fixed top-0 left-0 w-full h-full transition-all duration-500 ease-in-out z-20"
+      style={{
+        transform: `translate(${modalAnimation * 100}vw, ${
+          -modalAnimation * 100
+        }vh)`,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default ModalAnimationContainer;

src/components/desktop/Main/HouseList.tsx

@@ -1,22 +1,25 @@
 import HouseItem from "./HouseItem";
 import { VILLAS } from "../../../consts/villas";
+
 const enableVillas = ["a1t", "a1m", "b2t", "b2m"];
 
 const HouseList = () => {
   return (
-    <div className="max-h-screen overflow-y-scroll">
-      <div className="flex flex-col gap-2 p-4">
-        {VILLAS.map((villa) => {
-          return (
-            <HouseItem
-              villa={villa}
-              key={villa.type}
-              isDisable={!enableVillas.includes(villa.type)}
-            />
-          );
-        })}
+    <>
+      <div className="max-h-screen overflow-y-scroll">
+        <div className="flex flex-col gap-2 p-4">
+          {VILLAS.map((villa) => {
+            return (
+              <HouseItem
+                villa={villa}
+                key={villa.type}
+                isDisable={!enableVillas.includes(villa.type)}
+              />
+            );
+          })}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/pages/Desktop/DesktopMainPage.tsx

@@ -1,16 +1,7 @@
-import { useEffect } from "react";
-import LoaderModal from "../../components/LoaderModal";
 import MapComponent from "../../components/Map/Map";
 import HouseList from "../../components/desktop/Main/HouseList";
-import useStore from "../../store/store";
 
 const DesktopMainPage = () => {
-  const { setLoader } = useStore();
-
-  useEffect(() => {
-    setLoader(<LoaderModal isSimleLoader />);
-  }, []);
-
   return (
     <>
       <MapComponent />

yarn.lock

@@ -1223,11 +1223,6 @@ graphemer@^1.4.0:
   resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
-gsap@^3.12.5:
-  version "3.12.5"
-  resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.12.5.tgz#136c02dad4c673b441bdb1ca00104bfcb4eae7f4"
-  integrity sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==
-
 has-flag@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"