zojgame/ADHA_mobile_project
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modal wrapper component

Browse Source
This commit is contained in:
zojgame
2024-03-01 12:02:24 +05:00
parent 6177bbbf8d
commit df467b55e3
11 changed files with 49 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layout.tsx
+1 -1
View File
@@ -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();
src/components/Map/MapGraphic.tsx
-21
View File
@@ -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 <></>;
};
src/components/Map/MapGraphicsLayer.tsx
-36
View File
@@ -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 && (
<MapLayerContext.Provider value={{ graphicsLayer }}>
{children}
</MapLayerContext.Provider>
)}
</>
);
};
src/components/Map/MapImage.tsx
-22
View File
@@ -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 <></>;
};
src/components/Map/MapView.tsx
+17 -11
View File
@@ -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(<LoaderModal isSimleLoader />);
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 (
<div
className={`w-screen h-screen ${className ? className : ""}`}
src/components/ModalContainer.tsx
+6 -11
View File
@@ -2,16 +2,10 @@ import { useEffect } from "react";
import useStore from "../store/store";
function ModalContainer() {
const { modal, modalAnimation, setModal, setModalAnimation } = useStore();
const { modal, modalAnimation, setModal } = useStore();
useEffect(() => {
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 (
<div
className="fixed top-0 left-0 w-full h-full transition-all duration-300"
className="fixed top-0 left-0 w-full h-full transition-all duration-500 ease-in-out"
style={{
transform: `translateX(${1}*100)vw, translateY(${0}*100)vh`,
// transform: `translateX(${modalAnimation}*100)vw, translateY(${-modalAnimation}*100)vh`,
transform: `translate(${modalAnimation * 100}vw, ${
-modalAnimation * 100
}vh)`,
}}
>
{modal}
src/components/UnitList.tsx
+2 -2
View File
@@ -6,8 +6,8 @@ type UnitListProps = {
const UnitList = ({ units }: UnitListProps) => {
return (
<div className="px-8 py-6">
<div className="font-medium text-lg flex w-full gap-[18px] py-2 pr-6 pl-4 ">
<div className="px-8 py-6 h-full">
<div className="font-medium text-lg flex w-full gap-[18px] py-2 pr-6 pl-4">
<div>№</div>
<div className="flex justify-between w-full">
<div>Unit</div>
src/components/desktop/Appartment/ButtonPanel.tsx
+3 -5
View File
@@ -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(<LayoutModal />);
};
const handleOnImagesClick = () => {
setModalAnimation(0);
setModal(<ImagesModal />);
};
src/components/desktop/Appartment/ImagesModal.tsx
+6 -68
View File
@@ -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 = () => {
</div>
</div>
<div ref={buttonContainerRef}>
<div className="absolute right-8 top-8">
<div className="fixed right-8 top-8">
<CrossButton onClick={handleOnClose} />
</div>
<BackButton
className="pl-[6px] pr-[6px] w-[40px] h-10 absolute left-8 top-[50vh]"
className="pl-[6px] pr-[6px] w-[40px] h-10 fixed left-8 top-[50vh]"
onClick={handleOnLeftClick}
/>
<BackButton
className="pl-[6px] pr-[6px] w-[40px] h-10 rotate absolute right-8 top-[50vh] rotate-180"
className="pl-[6px] pr-[6px] w-[40px] h-10 fixed right-8 top-[50vh] rotate-180"
onClick={handleOnRightClick}
/>
</div>
src/components/desktop/Appartment/LayoutModal.tsx
+5 -49
View File
@@ -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 (
// <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 overflow-x-hidden w-screen bg-white h-screen justify-center">
<div className="flex">
<div className="min-w-[440px] overflow-y-clip flex flex-col justify-center">
<div className="min-w-[440px] overflow-y-scroll flex flex-col justify-center self-center">
{currentUnits && <UnitList units={currentUnits} />}
</div>
<div className="w-full flex flex-col p-8">
@@ -98,8 +56,6 @@ const LayoutModal = () => {
<div />
<CrossButton onClick={handleOnCloseClick} />
</div>
{/* </div>
<></> */}
</>
);
};
src/pages/Desktop/DesktopMainPage.tsx
+9
View File
@@ -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(<LoaderModal isSimleLoader />);
}, []);
return (
<>
<MapComponent />