nestiq-component-library 1.1.0 → 1.1.1

package/src/components/PropertyImageList/PropertyImageList.tsx

@@ -1,198 +1,198 @@
-import React, { useRef, useState } from "react";
-import iconArrowRight from "../../assets/images/Icon_rightArrow.svg";
-import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
-import blcIconArrowLeft from "../../assets/images/blckarrow-Left.svg";
-import iconArrowLeft from "../../assets/images/chevron-left.svg";
-import iconGallery from "../../assets/images/icon_gallery.svg";
-import iconMap from "../../assets/images/icon_map.svg";
-import iconLayers from "../../assets/images/layer_icon.svg";
-import "./PropertyImageList.css";
-import ImageListPopup from "../ImageListPopup/ImageListPopup";
-import PopupProps from "../ImageListPopup/ImageListPopup";
-import FloorPlanPopup from "../FloorPlanPopup/FloorPlanPopup";
-
-interface PopupProps {
-  pictureUrls: { title: string; url: string }[];
-  floorPlanUrl: string;
-}
-export default function PropertyImageList(prop: PopupProps) {
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
-  const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
-  const [isFloorPlanPopupOpen, setIsFloorPlanPopupOpen] = useState(false);
-  const imageListRef = useRef<HTMLDivElement | null>(null);
-
-  const handleArrowClickInMainImage = (direction: any) => {
-    if (prop.pictureUrls.length === 0) return;
-
-    let newIndex = currentImageIndex;
-    if (direction === "left") {
-      newIndex =
-        (currentImageIndex - 1 + prop.pictureUrls.length) %
-        prop.pictureUrls.length;
-    } else if (direction === "right") {
-      newIndex = (currentImageIndex + 1) % prop.pictureUrls.length;
-    }
-
-    setCurrentImageIndex(newIndex);
-
-    imageListRef.current!.scrollTo({
-      left: newIndex * 150,
-      behavior: "smooth",
-    });
-  };
-
-  const toggleAllPhotos = () => {
-    setIsImagePopupOpen(!isImagePopupOpen);
-  };
-
-  const floorPlanClickHandler = () => {
-    if (prop.floorPlanUrl) {
-      setIsFloorPlanPopupOpen(true);
-    }
-  };
-
-  const floorPlanPopupCloseHandler = () => {
-    setIsFloorPlanPopupOpen(false);
-  };
-
-  return (
-    <div className="col-8 me-2 Pimagelist">
-      <div
-        className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
-        style={{
-          backgroundImage: `url(${prop.pictureUrls[currentImageIndex]?.url})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        }}
-      >
-        {/* Arrows on the main image */}
-        <div
-          className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
-          role="button"
-          onClick={() => handleArrowClickInMainImage("left")}
-        >
-          <img src={blcIconArrowLeft} className="blackArrow" alt="Left Arrow" />
-        </div>
-        <div
-          role="button"
-          className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
-          onClick={() => handleArrowClickInMainImage("right")}
-        >
-          <img
-            src={blcIconArrowRight}
-            className="blackArrow"
-            alt="Right Arrow"
-          />
-        </div>
-      </div>
-
-      {/* Image Thumbnails */}
-      <div className="d-flex flex-row gap-1 col-12 secondList">
-        <div className="col-lg-6 d-flex flex-row p-1">
-          <div className="col-12 position-relative d-flex justify-content-center">
-            <div
-              className="col-1 h-100 d-flex position-absolute start-0"
-              onClick={() => handleArrowClickInMainImage("left")}
-              role="button"
-            >
-              <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                <img
-                  src={iconArrowLeft}
-                  className="arroIconColour"
-                  alt="Left Arrow"
-                />
-              </div>
-            </div>
-            <div
-              className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
-              ref={imageListRef}
-            >
-              {prop.pictureUrls.length > 0 && (
-                <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
-                  {prop.pictureUrls.map((picture, index) => (
-                    <div
-                      key={index}
-                      className="col-lg-12 h-100 d-flex"
-                      onClick={() => {
-                        setCurrentImageIndex(index);
-                        imageListRef.current!.scrollTo({
-                          left: index * 150,
-                          behavior: "smooth",
-                        });
-                      }}
-                      role="button"
-                    >
-                      <img
-                        src={picture.url}
-                        alt={`Image ${index + 1}`}
-                        className="col-12 h-100 rounded-3 object-fit-cover"
-                      />
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-            <div
-              className="col-1 h-100 d-flex position-absolute end-0 top-0"
-              onClick={() => handleArrowClickInMainImage("right")}
-              role="button"
-            >
-              <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
-                <img
-                  src={iconArrowRight}
-                  className="arroIconColour"
-                  alt="Right Arrow"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
-        <div className="col-6 d-flex flex-row">
-          <div className="col-lg-4 p-1" role="button" onClick={toggleAllPhotos}>
-            <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-              <img src={iconGallery} alt="Gallery Icon" />
-              <span className="listImgText">Alle Fotos</span>
-            </div>
-          </div>
-          <div
-            className="col-lg-4 p-1"
-            role="button"
-            onClick={floorPlanClickHandler}
-          >
-            <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-              <img src={iconLayers} alt="Layers Icon" />
-              <span className="listImgText">Grundriss</span>
-            </div>
-          </div>
-          <div
-            className="col-lg-4 p-1"
-            role="button"
-            onClick={() =>
-              window.scrollTo({
-                top: document.documentElement.scrollHeight,
-              })
-            }
-          >
-            <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-              <img src={iconMap} alt="Map Icon" />
-              <span className="listImgText">Karte</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Popup for all photos */}
-      {isImagePopupOpen && <ImageListPopup pictureUrls={prop.pictureUrls} />}
-
-      {/* Popup for floor plan */}
-      {isFloorPlanPopupOpen && (
-        <FloorPlanPopup
-          contentUrl={prop.floorPlanUrl}
-          onCloseClick={floorPlanPopupCloseHandler}
-        />
-      )}
-    </div>
-  );
-}
+import React, { useRef, useState } from "react";
+import iconArrowRight from "../../assets/images/Icon_rightArrow.svg";
+import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
+import blcIconArrowLeft from "../../assets/images/blckarrow-Left.svg";
+import iconArrowLeft from "../../assets/images/chevron-left.svg";
+import iconGallery from "../../assets/images/icon_gallery.svg";
+import iconMap from "../../assets/images/icon_map.svg";
+import iconLayers from "../../assets/images/layer_icon.svg";
+import "./PropertyImageList.css";
+import ImageListPopup from "../ImageListPopup/ImageListPopup";
+import PopupProps from "../ImageListPopup/ImageListPopup";
+import FloorPlanPopup from "../FloorPlanPopup/FloorPlanPopup";
+
+interface PopupProps {
+  pictureUrls: { title: string; url: string }[];
+  floorPlanUrl: string;
+}
+export default function PropertyImageList(prop: PopupProps) {
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
+  const [isFloorPlanPopupOpen, setIsFloorPlanPopupOpen] = useState(false);
+  const imageListRef = useRef<HTMLDivElement | null>(null);
+
+  const handleArrowClickInMainImage = (direction: any) => {
+    if (prop.pictureUrls.length === 0) return;
+
+    let newIndex = currentImageIndex;
+    if (direction === "left") {
+      newIndex =
+        (currentImageIndex - 1 + prop.pictureUrls.length) %
+        prop.pictureUrls.length;
+    } else if (direction === "right") {
+      newIndex = (currentImageIndex + 1) % prop.pictureUrls.length;
+    }
+
+    setCurrentImageIndex(newIndex);
+
+    imageListRef.current!.scrollTo({
+      left: newIndex * 150,
+      behavior: "smooth",
+    });
+  };
+
+  const toggleAllPhotos = () => {
+    setIsImagePopupOpen(!isImagePopupOpen);
+  };
+
+  const floorPlanClickHandler = () => {
+    if (prop.floorPlanUrl) {
+      setIsFloorPlanPopupOpen(true);
+    }
+  };
+
+  const floorPlanPopupCloseHandler = () => {
+    setIsFloorPlanPopupOpen(false);
+  };
+
+  return (
+    <div className="col-8 me-2 Pimagelist">
+      <div
+        className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
+        style={{
+          backgroundImage: `url(${prop.pictureUrls[currentImageIndex]?.url})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      >
+        {/* Arrows on the main image */}
+        <div
+          className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
+          role="button"
+          onClick={() => handleArrowClickInMainImage("left")}
+        >
+          <img src={blcIconArrowLeft} className="blackArrow" alt="Left Arrow" />
+        </div>
+        <div
+          role="button"
+          className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
+          onClick={() => handleArrowClickInMainImage("right")}
+        >
+          <img
+            src={blcIconArrowRight}
+            className="blackArrow"
+            alt="Right Arrow"
+          />
+        </div>
+      </div>
+
+      {/* Image Thumbnails */}
+      <div className="d-flex flex-row gap-1 col-12 secondList">
+        <div className="col-lg-6 d-flex flex-row p-1">
+          <div className="col-12 position-relative d-flex justify-content-center">
+            <div
+              className="col-1 h-100 d-flex position-absolute start-0"
+              onClick={() => handleArrowClickInMainImage("left")}
+              role="button"
+            >
+              <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
+                <img
+                  src={iconArrowLeft}
+                  className="arroIconColour"
+                  alt="Left Arrow"
+                />
+              </div>
+            </div>
+            <div
+              className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
+              ref={imageListRef}
+            >
+              {prop.pictureUrls.length > 0 && (
+                <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
+                  {prop.pictureUrls.map((picture, index) => (
+                    <div
+                      key={index}
+                      className="col-lg-12 h-100 d-flex"
+                      onClick={() => {
+                        setCurrentImageIndex(index);
+                        imageListRef.current!.scrollTo({
+                          left: index * 150,
+                          behavior: "smooth",
+                        });
+                      }}
+                      role="button"
+                    >
+                      <img
+                        src={picture.url}
+                        alt={`Image ${index + 1}`}
+                        className="col-12 h-100 rounded-3 object-fit-cover"
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+            <div
+              className="col-1 h-100 d-flex position-absolute end-0 top-0"
+              onClick={() => handleArrowClickInMainImage("right")}
+              role="button"
+            >
+              <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
+                <img
+                  src={iconArrowRight}
+                  className="arroIconColour"
+                  alt="Right Arrow"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
+        <div className="col-6 d-flex flex-row">
+          <div className="col-lg-4 p-1" role="button" onClick={toggleAllPhotos}>
+            <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
+              <img src={iconGallery} alt="Gallery Icon" />
+              <span className="listImgText">Alle Fotos</span>
+            </div>
+          </div>
+          <div
+            className="col-lg-4 p-1"
+            role="button"
+            onClick={floorPlanClickHandler}
+          >
+            <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
+              <img src={iconLayers} alt="Layers Icon" />
+              <span className="listImgText">Grundriss</span>
+            </div>
+          </div>
+          <div
+            className="col-lg-4 p-1"
+            role="button"
+            onClick={() =>
+              window.scrollTo({
+                top: document.documentElement.scrollHeight,
+              })
+            }
+          >
+            <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
+              <img src={iconMap} alt="Map Icon" />
+              <span className="listImgText">Karte</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Popup for all photos */}
+      {isImagePopupOpen && <ImageListPopup pictureUrls={prop.pictureUrls} />}
+
+      {/* Popup for floor plan */}
+      {isFloorPlanPopupOpen && (
+        <FloorPlanPopup
+          contentUrl={prop.floorPlanUrl}
+          onCloseClick={floorPlanPopupCloseHandler}
+        />
+      )}
+    </div>
+  );
+}