upd

2024-07-26 17:38:47 +05:00
parent b3e6ff5e9c
commit 08b86c8b51
14 changed files with 520 additions and 298 deletions
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState } from "react";
 import { IDesctiptionFloor } from "../../../types/descriptionFloor";
 import useModal from "../../../store/useModal";
 import EastWingFloorLayout from "./EastWingFloorLayout";
@@ -18,9 +18,9 @@ interface Props {

 function FloorSidebar({ currentFloor }: Props) {
  const { setModal } = useModal();
-  const descRef = useRef(null);
  const { setIsSidebar } = useWingSidebar();
-  const [hoveredUnit, setHoveredUnit] = useState<IUnit | null>(null);
+  const [hoveredUnit, setHoveredUnit] = useState<IUnit | undefined>();
+  const [isShowPopup, setIsShowPopup] = useState(false);
  const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
  const [type, setType] = useState<string | null>(null);

@@ -42,19 +42,27 @@ function FloorSidebar({ currentFloor }: Props) {
    }
  }

-  function handleOnMouseOver(e: React.MouseEvent<SVGPathElement>) {
+  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
+    const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
+    const y = e.clientY - e.currentTarget.getBoundingClientRect().top;
+    setMousePos([x, y]);
+  }
+
+  async function handleMouseEnter(e: React.MouseEvent<SVGPathElement>) {
    const unitNumber = e.currentTarget.dataset.number;
    const type = e.currentTarget.dataset.type;

    if (!unitNumber || !type) return;

-    setType(type);
-    console.log("type", type);
    getUnit(unitNumber);
+    setType(type);
+    setIsShowPopup(true);
+    setHoveredUnit(hoveredUnit);
  }

-  function handleOnMouseOut() {
-    setHoveredUnit(null);
+  function handleMouseLeave() {
+    setIsShowPopup(false);
+    setHoveredUnit(undefined);
  }

  function handleClick() {
@@ -63,94 +71,81 @@ function FloorSidebar({ currentFloor }: Props) {
    setModal(<UnitModal unit={hoveredUnit} type={type} />);
  }

-  function handleMouseMove(e: MouseEvent) {
-    const x = e.clientX - window.innerWidth / 2 - 360;
-    const y = e.clientY - 78;
-    setMousePos([x, y]);
-  }
-
-  useEffect(() => {
-    window.addEventListener("mousemove", handleMouseMove);
-
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
-
  return (
-    <>
-      <div
-        ref={descRef}
-        className="absolute w-full h-[calc(100vh-56px)] right-0 z-30 bg-[#F3F3F2] p-6 top-[56px] flex flex-col"
-      >
-        <div className="flex justify-between pb-4">
-          <div className="flex flex-col">
-            <h1 className="text-subheadline-m font-semibold text-[#0D1922]">
-              {currentFloor?.floor} Floor
-            </h1>
-            <p className="text-s text-[#73787C]">{currentFloor?.wing}</p>
-          </div>
-          <Button
-            buttonType="cta"
-            icon={<CloseIcon />}
-            onClick={() => setIsSidebar(false)}
-          />
+    <div
+      className="absolute w-full h-[calc(100vh-56px)] right-0 z-30 bg-[#F3F3F2] p-6 top-[56px] flex flex-col"
+      onMouseMove={handleMouseMove}
+    >
+      <div className="flex justify-between pb-4">
+        <div className="flex flex-col">
+          <h1 className="text-subheadline-m font-semibold text-[#0D1922]">
+            {currentFloor?.floor} Floor
+          </h1>
+          <p className="text-s text-[#73787C]">{currentFloor?.wing}</p>
        </div>
-
-        <div className="px-4 py-[18px] bg-white flex justify-between text-[#73787C] font-semibold text-caption-m rounded-2xl mb-2">
-          <div className="flex gap-6">
-            <div className="gap-2 flex items-center">
-              <div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
-              <p>Studio Flex</p>
-            </div>
-            <div className="gap-2 flex items-center">
-              <div className="rounded-full bg-[#8299AD] w-3 h-3"></div>
-              <p>Studio</p>
-            </div>
-            <div className="gap-2 flex items-center">
-              <div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
-              <p>1 Bedroom</p>
-            </div>
-            <div className="gap-2 flex items-center">
-              <div className="rounded-full bg-[#BFC9D1] w-3 h-3"></div>
-              <p>1 Bedroom</p>
-            </div>
-            <div className="gap-2 flex items-center">
-              <div className="rounded-full bg-[#B2B8C4] w-3 h-3"></div>
-              <p>2 Bedroom</p>
-            </div>
+        <Button
+          buttonType="cta"
+          icon={<CloseIcon />}
+          onClick={() => setIsSidebar(false)}
+        />
+      </div>
+      <div className="px-4 py-[18px] bg-white flex justify-between text-[#73787C] font-semibold text-caption-m rounded-2xl mb-2">
+        <div className="flex gap-6">
+          <div className="gap-2 flex items-center">
+            <div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
+            <p>Studio Flex</p>
          </div>
-          {/* <div className="bg-[#00BED7] text-white text-s px-2 py-[3px] rounded-3xl flex h-fit">
+          <div className="gap-2 flex items-center">
+            <div className="rounded-full bg-[#8299AD] w-3 h-3"></div>
+            <p>Studio</p>
+          </div>
+          <div className="gap-2 flex items-center">
+            <div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
+            <p>1 Bedroom</p>
+          </div>
+          <div className="gap-2 flex items-center">
+            <div className="rounded-full bg-[#BFC9D1] w-3 h-3"></div>
+            <p>1 Bedroom</p>
+          </div>
+          <div className="gap-2 flex items-center">
+            <div className="rounded-full bg-[#B2B8C4] w-3 h-3"></div>
+            <p>2 Bedroom</p>
+          </div>
+        </div>
+        {/* <div className="bg-[#00BED7] text-white text-s px-2 py-[3px] rounded-3xl flex h-fit">
            {floorApartments.length} units
          </div> */}
-        </div>
-
-        <svg className="flex-1 px-10 bg-white font-semibold text-caption-m rounded-2xl py-4">
-          {currentFloor?.wing === "West Wing" ? (
-            currentFloor && currentFloor.floor <= 21 ? (
-              <WestWingBottomFloorLayout
-                handleMouseOver={handleOnMouseOver}
-                handleMouseOut={handleOnMouseOut}
-                handleClick={handleClick}
-              />
-            ) : (
-              <WestWingFloorLayout
-                handleMouseOver={handleOnMouseOver}
-                handleMouseOut={handleOnMouseOut}
-                handleClick={handleClick}
-              />
-            )
-          ) : (
-            <EastWingFloorLayout
-              handleMouseOver={handleOnMouseOver}
-              handleMouseOut={handleOnMouseOut}
-              handleClick={handleClick}
-            />
-          )}
-        </svg>
      </div>
-      <UnitPopup unit={hoveredUnit} type={type} mousePos={mousePos} />
-    </>
+      <svg className="flex-1 px-10 bg-white font-semibold text-caption-m rounded-2xl py-4">
+        {currentFloor?.wing === "West Wing" ? (
+          currentFloor && currentFloor.floor <= 21 ? (
+            <WestWingBottomFloorLayout
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+              onClick={handleClick}
+            />
+          ) : (
+            <WestWingFloorLayout
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+              onClick={handleClick}
+            />
+          )
+        ) : (
+          <EastWingFloorLayout
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            onClick={handleClick}
+          />
+        )}
+      </svg>
+      <UnitPopup
+        unit={hoveredUnit}
+        type={type}
+        isShowPopup={isShowPopup}
+        mousePos={mousePos}
+      />
+    </div>
  );
 }