From df467b55e320bef553e7a21e550e36d12d0a7002 Mon Sep 17 00:00:00 2001 From: zojgame Date: Fri, 1 Mar 2024 12:02:24 +0500 Subject: [PATCH] modal wrapper component --- src/components/Layout.tsx | 2 +- src/components/Map/MapGraphic.tsx | 21 ------ src/components/Map/MapGraphicsLayer.tsx | 36 --------- src/components/Map/MapImage.tsx | 22 ------ src/components/Map/MapView.tsx | 28 ++++--- src/components/ModalContainer.tsx | 17 ++--- src/components/UnitList.tsx | 4 +- .../desktop/Appartment/ButtonPanel.tsx | 8 +- .../desktop/Appartment/ImagesModal.tsx | 74 ++----------------- .../desktop/Appartment/LayoutModal.tsx | 54 ++------------ src/pages/Desktop/DesktopMainPage.tsx | 9 +++ 11 files changed, 49 insertions(+), 226 deletions(-) delete mode 100644 src/components/Map/MapGraphic.tsx delete mode 100644 src/components/Map/MapGraphicsLayer.tsx delete mode 100644 src/components/Map/MapImage.tsx diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 635d86f..7acfd2e 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -2,7 +2,7 @@ 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 ModalContainer from "./ModalContainer"; const Layout = () => { const { loader, setOnFullscreen } = useStore(); diff --git a/src/components/Map/MapGraphic.tsx b/src/components/Map/MapGraphic.tsx deleted file mode 100644 index 98577c1..0000000 --- a/src/components/Map/MapGraphic.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { useContext, useEffect, useState } from "react"; -import Graphic from "@arcgis/core/Graphic"; -import { MapLayerContext } from "./MapViewContext"; - -export const MapGraphic = (graphicProperties: __esri.GraphicProperties) => { - const { graphicsLayer } = useContext(MapLayerContext); - const [graphic, setGraphic] = useState<__esri.Graphic | undefined>(); - - useEffect(() => { - const graphicPoint = new Graphic(graphicProperties); - - setGraphic(graphicPoint); - }, [graphicProperties, graphicsLayer]); - - useEffect(() => { - if (!graphic || !graphicsLayer) return; - graphicsLayer.add(graphic); - }, [graphic, graphicsLayer]); - - return <>; -}; diff --git a/src/components/Map/MapGraphicsLayer.tsx b/src/components/Map/MapGraphicsLayer.tsx deleted file mode 100644 index 5e70440..0000000 --- a/src/components/Map/MapGraphicsLayer.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { useContext, useEffect, useState } from "react"; -import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js"; -import { MapLayerContext, MapViewContext } from "./MapViewContext"; - -type MapGraphicsLayerProps = { - children?: React.ReactNode; -}; - -export const MapGraphicsLayer = ({ children }: MapGraphicsLayerProps) => { - const { view } = useContext(MapViewContext); - - const [graphicsLayer, setGraphicsLayer] = useState< - __esri.GraphicsLayer | undefined - >(); - - useEffect(() => { - const _graphicsLayer = new GraphicsLayer(); - // _graphicsLayer.effect = "brightness(0.75) contrast(250%)"; - setGraphicsLayer(_graphicsLayer); - }, []); - - useEffect(() => { - if (!view || !graphicsLayer) return; - view.map.add(graphicsLayer); - }, [view, graphicsLayer]); - - return ( - <> - {graphicsLayer && ( - - {children} - - )} - - ); -}; diff --git a/src/components/Map/MapImage.tsx b/src/components/Map/MapImage.tsx deleted file mode 100644 index be86535..0000000 --- a/src/components/Map/MapImage.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { useContext, useEffect, useState } from "react"; -import ImageElement from "@arcgis/core/layers/support/ImageElement.js"; -import Graphic from "@arcgis/core/Graphic"; -import { MapLayerContext, MapMediaLayerContext } from "./MapViewContext"; - -export const MapImage = (graphicProperties: __esri.ImageElementProperties) => { - const { imagesLayer } = useContext(MapMediaLayerContext); - const [image, setImage] = useState<__esri.ImageElement | undefined>(); - - useEffect(() => { - const imagePoint = new ImageElement(graphicProperties); - - setImage(imagePoint); - }, [graphicProperties, imagesLayer]); - - useEffect(() => { - if (!image || !imagesLayer) return; - imagesLayer.source.elements.add(image); - }, [image, imagesLayer]); - - return <>; -}; diff --git a/src/components/Map/MapView.tsx b/src/components/Map/MapView.tsx index 739e47a..df21265 100644 --- a/src/components/Map/MapView.tsx +++ b/src/components/Map/MapView.tsx @@ -94,23 +94,17 @@ type MapViewComponentProps = { export const MapViewComponent = (props: MapViewComponentProps) => { const { children, className } = props; - const { selectedOnMapVilla, setLoader, setModal } = useStore(); + const { selectedOnMapVilla, setLoader, setModal, loader } = useStore(); const [isLoading, setIsLoading] = useState(true); const [view, setView] = useState<__esri.MapView | undefined>(); const mapRef = useRef(null); useEffect(() => { - if (!mapRef?.current) return; - - const _view = createMapView(mapRef.current); - - setView(_view); - - return () => { - _view && _view.destroy(); - }; - }, [selectedOnMapVilla]); + // setLoader(); + console.log("isLoading", isLoading); + console.log("loader", loader); + }); useEffect(() => { if (isLoading) { @@ -140,6 +134,18 @@ export const MapViewComponent = (props: MapViewComponentProps) => { }); }, [view, selectedOnMapVilla]); + useEffect(() => { + if (!mapRef?.current) return; + + const _view = createMapView(mapRef.current); + + setView(_view); + + return () => { + _view && _view.destroy(); + }; + }, [selectedOnMapVilla]); + return (
{ - if (!modal) return; - setModalAnimation(1); - }, [modal]); - - useEffect(() => { - if (modalAnimation !== 0) return; - + if (modalAnimation !== 1) return; const timeout = setTimeout(() => { setModal(null); }, 300); @@ -22,10 +16,11 @@ function ModalContainer() { if (modal) { return (
{modal} diff --git a/src/components/UnitList.tsx b/src/components/UnitList.tsx index b056723..307dafe 100644 --- a/src/components/UnitList.tsx +++ b/src/components/UnitList.tsx @@ -6,8 +6,8 @@ type UnitListProps = { const UnitList = ({ units }: UnitListProps) => { return ( -
-
+
+
№
Unit
diff --git a/src/components/desktop/Appartment/ButtonPanel.tsx b/src/components/desktop/Appartment/ButtonPanel.tsx index 7b557ae..f4ec2ed 100644 --- a/src/components/desktop/Appartment/ButtonPanel.tsx +++ b/src/components/desktop/Appartment/ButtonPanel.tsx @@ -17,11 +17,7 @@ type ButtonPanelProps = { }; const ButtonPanel = ({ handleFullscreen }: ButtonPanelProps) => { - const [setModal, is3DTour, currentView] = useStore((state) => [ - state.setModal, - state.is3DTour, - state.currentView, - ]); + const { setModal, is3DTour, currentView, setModalAnimation } = useStore(); const [isFullMode, setIsFullMode] = useState(false); @@ -41,10 +37,12 @@ const ButtonPanel = ({ handleFullscreen }: ButtonPanelProps) => { }; const handleOnLayoutClick = () => { + setModalAnimation(0); setModal(); }; const handleOnImagesClick = () => { + setModalAnimation(0); setModal(); }; diff --git a/src/components/desktop/Appartment/ImagesModal.tsx b/src/components/desktop/Appartment/ImagesModal.tsx index 39b4243..c379cd5 100644 --- a/src/components/desktop/Appartment/ImagesModal.tsx +++ b/src/components/desktop/Appartment/ImagesModal.tsx @@ -1,77 +1,15 @@ -import { useState, useRef, useEffect } from "react"; -import gsap from "gsap"; +import { useState, useRef } from "react"; import useStore from "../../../store/store"; import CrossButton from "../../CrossButton"; import BackButton from "../../BackButton"; const ImagesModal = () => { - const { currentVilla, setModal, setModalAnimation } = useStore(); + const { currentVilla, setModalAnimation } = useStore(); const [offset, setOffset] = useState(0); - const modalRef = useRef(null); const buttonContainerRef = useRef(null); - useEffect(() => { - if (!modalRef) return; - gsap.fromTo( - modalRef.current, - { - translateX: "100vw", - translateY: "-100vh", - }, - { - translateX: 0, - translateY: 0, - duration: 0.3, - } - ); - - if (!buttonContainerRef) return; - gsap.fromTo( - buttonContainerRef.current, - { - opacity: 0, - }, - { - opacity: 1, - duration: 0.3, - } - ); - }, []); - function handleOnClose(): void { - setModalAnimation(0); - const onAnimationComplete = () => { - setModal(null); - const timeout = setTimeout(() => { - clearTimeout(timeout); - }, 200); - }; - - // if (!modalRef) return; - // gsap.fromTo( - // modalRef.current, - // { - // translateX: 0, - // translateY: 0, - // }, - // { - // translateX: "100vw", - // translateY: "-100vh", - // duration: 0.3, - // onComplete: onAnimationComplete, - // } - // ); - - // gsap.fromTo( - // buttonContainerRef.current, - // { - // opacity: 1, - // }, - // { - // opacity: 0, - // duration: 0.3, - // } - // ); + setModalAnimation(1); } function handleOnRightClick(): void { @@ -111,15 +49,15 @@ const ImagesModal = () => {
-
+
diff --git a/src/components/desktop/Appartment/LayoutModal.tsx b/src/components/desktop/Appartment/LayoutModal.tsx index e6637a7..6ad2637 100644 --- a/src/components/desktop/Appartment/LayoutModal.tsx +++ b/src/components/desktop/Appartment/LayoutModal.tsx @@ -1,5 +1,4 @@ -import { useEffect, useState, useRef } from "react"; -import gsap from "gsap"; +import { useEffect, useState } from "react"; import useStore from "../../../store/store"; import UnitList from "../../UnitList"; import LayoutSlider from "../../mobile/Appartment/LayoutSlider"; @@ -8,29 +7,11 @@ import CrossButton from "../../CrossButton"; const LayoutModal = () => { const [currentView, setCurrentView] = useState(1); - const { currentVilla, setModal } = useStore(); + const { currentVilla, setModalAnimation } = 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) { @@ -48,37 +29,14 @@ const LayoutModal = () => { }, [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, - } - ); + setModalAnimation(1); }; return ( - //
<> -
+
-
+
{currentUnits && }
@@ -98,8 +56,6 @@ const LayoutModal = () => {
- {/*
- <> */} ); }; diff --git a/src/pages/Desktop/DesktopMainPage.tsx b/src/pages/Desktop/DesktopMainPage.tsx index 02f6bbe..d866860 100644 --- a/src/pages/Desktop/DesktopMainPage.tsx +++ b/src/pages/Desktop/DesktopMainPage.tsx @@ -1,7 +1,16 @@ +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(); + }, []); + return ( <>