nestiq-component-library 1.0.14 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nestiq-component-library",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "type": "module",
   "description": "",
   "main": "dist/index.js",

package/src/components/ImageListPopup/ImageListPopup.tsx

@@ -1,100 +1,219 @@
-import React, { useState } from "react";
-import "bootstrap/dist/css/bootstrap.min.css";
 import "./ImageListPopup.css";
-import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
-import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
+import React, { useEffect, useRef, useState } from "react";
+// import icon_checkmark from "../../../assets/Images/icon_checkmark.svg";
+import blcIconArrowRight from "../../../../../assets/Images/blackarrow-Right.svg";
+import blcIconArrowLeft from "../../../../../assets/Images/blckarrow-Left.svg";
+import iconClose from "../../assets/images/icon_close_2.png";
 
-interface Image {
-  src: string;
-  title: string;
+interface PopupProps {
+  property: {
+    city: string;
+    constructedArea: string;
+    rooms: string;
+    propertyArea: string;
+    askingPrice: string;
+  };
+  handleArrowClickInMainImage: any;
+  pictureUrls: any[];
+  currentImageIndex: number;
+  imageListRef: any;
 }
 
-interface ImageListPopupProps {
-  images: Image[];
-  onClose: () => void;
-}
+export default function ImageListPopup(props: PopupProps) {
+  const [showPopUp, setShowPopUp] = useState(true);
+  // const { id } = useParams();
+  const [mainImage, setMainImage] = useState(null);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  // const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
+  const imageListRef = useRef(null);
 
-const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
+  // const baseUrl = "https://api-dev.nestiq.de";
+  // const pictureUrls = props.property.pictures.map(
+  //   (picture) => `${baseUrl}${picture.contentUrl}`
+  // );
+  const imagePopupData = props.pictureUrls.map((pic) => {
+    return {
+      src: pic,
+      title: "Not Specified",
+    };
+  });
 
-  const handlePrevious = () => {
-    setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
-  };
+  useEffect(() => {
+    if (props.pictureUrls.length > 0) {
+      setMainImage(props.pictureUrls[0]);
+    }
+  }, [props.pictureUrls]);
+
+  const handleArrowClickInMainImage = (direction: any) => {
+    if (!props.property || props.pictureUrls.length === 0) return;
+
+    let newIndex = currentImageIndex;
+    if (direction === "left") {
+      newIndex =
+        (currentImageIndex - 1 + props.pictureUrls.length) %
+        props.pictureUrls.length;
+    } else if (direction === "right") {
+      newIndex = (currentImageIndex + 1) % props.pictureUrls.length;
+    }
+
+    setCurrentImageIndex(newIndex);
+    setMainImage(props.pictureUrls[newIndex]);
 
-  const handleNext = () => {
-    setCurrentIndex((prevIndex) =>
-      prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
-    );
+    props.imageListRef.current.scrollTo({
+      left: newIndex * 150,
+      behavior: "smooth",
+    });
   };
+  useEffect(() => {
+    if (props.pictureUrls.length > 0) {
+      setMainImage(props.pictureUrls[0]);
+    }
+  }, [props.pictureUrls]);
 
-  const handleThumbnailClick = (index: number) => {
-    setCurrentIndex(index);
+  const handleClose = () => {
+    setShowPopUp(false);
   };
 
   return (
-    <div className="popup-overlay">
-      <div className="popup-container">
-        <div className="popup-header">
-          <span className="popup-title">{images[currentIndex].title}</span>
-          <button className="btn-close" onClick={onClose}></button>
-        </div>
-        <div className="popup-body">
-          <div
-            className="rounded-circle border btn-prev"
-            role="button"
-            onClick={handlePrevious}
-          >
-            <img
-              src={blcIconArrowLeft}
-              className="blackArrow"
-              alt="Left Arrow"
-            ></img>
-          </div>
-          {/*<button*/}
-          {/*  className="btn-prev"*/}
-          {/*  onClick={handlePrevious}*/}
-          {/*  disabled={currentIndex === 0}*/}
-          {/*>*/}
-          {/*  &lt;*/}
-          {/*</button>*/}
-          <img
-            src={images[currentIndex].src}
-            alt={images[currentIndex].title}
-            className="main-image"
-          />
-          <div
-            className="rounded-circle border btn-next"
-            role="button"
-            onClick={handleNext}
-          >
-            <img
-              src={blcIconArrowRight}
-              className="blackArrow"
-              alt="Right Arrow"
-            ></img>
+    <div>
+      {showPopUp && (
+        <div className="popup-overlay">
+          <div className=" d-flex  flex-column  col-6 ">
+            <div className="d-flex  align-self-end me-0 ms-5">
+              <img
+                src={iconClose}
+                alt="close"
+                className="closeIcon  "
+                onClick={handleClose}
+              />
+            </div>
+
+            <div className="d-flex justify-content-center">
+              <div className="p-2 bd-highlight align-self-center align-items-center me-5">
+                <div
+                  className="rounded-circle border onImageArrow start-0 d-flex  "
+                  role="button"
+                  onClick={() => props.handleArrowClickInMainImage("left")}
+                >
+                  <img
+                    src={blcIconArrowLeft}
+                    className="blackArrow align-self-center"
+                    alt="Left Arrow"
+                  />
+                </div>
+              </div>
+              <div className="p-2 bd-highlight">
+                <div
+                  className=" rounded-5 mainImage "
+                  style={{
+                    backgroundImage: `url(${
+                      props.pictureUrls[props.currentImageIndex]
+                    })`,
+                    height: "350px",
+                    width: "600px",
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                  }}
+                ></div>
+              </div>
+              <div className="p-2 bd-highlight align-self-center ms-5">
+                {" "}
+                <div
+                  role="button"
+                  className="rounded-circle border onImageArrow d-flex     justify-content-center"
+                  onClick={() => props.handleArrowClickInMainImage("right")}
+                >
+                  <img
+                    src={blcIconArrowRight}
+                    className="blackArrow align-self-center"
+                    alt="Right Arrow"
+                  />
+                </div>
+              </div>
+            </div>
+            {/* <div className="d-flex flex-column">
+              <div className=" d-flex flex-row align-self-center ">
+                <img
+                  src={LeftArrow}
+                  alt="close"
+                  className="w-100 h-100 align-self-center me-5   "
+                />
+                <img src={house} alt="close" className="w-100 h-100    " />
+                <img
+                  src={RightArrow}
+                  alt="close"
+                  className="w-100 h-100  align-self-center ms-5  "
+                />
+              </div>
+            </div> */}
+            <div className="d-flex flex-row">
+              {/* Arrows on the main image */}
+            </div>
+            <div className="d-flex flex-row gap-4  w-100 secondList ">
+              <div className="col-lg-12 d-flex flex-row p-1  align-self-center mt-5">
+                <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 w-100 d-flex flex-row gap-2 overflow-auto "
+                    ref={props.imageListRef}
+                  >
+                    {props.property && (
+                      <div className="col-lg-5 h-100 w-25 d-flex gap-4 flex-row rounded-3">
+                        {props.pictureUrls.map((imageUrl, index) => (
+                          <div
+                            key={index}
+                            className="col-lg-12 h-100 d-flex"
+                            onClick={() => {
+                              setMainImage(imageUrl);
+                              setCurrentImageIndex(index);
+                              props.imageListRef.current.scrollTo({
+                                left: index * 150,
+                                behavior: "smooth",
+                              });
+                            }}
+                            role="button"
+                          >
+                            <img
+                              src={imageUrl}
+                              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>
+            </div>
           </div>
-          {/*<button*/}
-          {/*  className="btn-next"*/}
-          {/*  onClick={handleNext}*/}
-          {/*  disabled={currentIndex === images.length - 1}*/}
-          {/*>*/}
-          {/*  &gt;*/}
-          {/*</button>*/}
         </div>
-        <div className="popup-thumbnails">
-          {images.map((image, index) => (
-            <img
-              key={index}
-              src={image.src}
-              alt={image.title}
-              className={`thumbnail ${index === currentIndex ? "active" : ""}`}
-              onClick={() => handleThumbnailClick(index)}
-            />
-          ))}
-        </div>
-      </div>
+      )}
     </div>
   );
-};
-
-export default ImageListPopup;
+}

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx

@@ -44,7 +44,7 @@ export default function PropertyDetailsHeader(props: PopupProps) {
       <div className="fetch_section d-flex align-items-center flex-row col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0">
         {props && (
           <div className=" propText col-lg-3 col-md-3 h-100 d-flex align-items-center justify-content-center  ">
-            {props.property.askingPrice} € <br />
+            {props.property.askingPrice}  <br />
             Kaufpreis
           </div>
         )}