nestiq-component-library 1.0.24 → 1.0.26

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx

@@ -1,82 +1,83 @@
-import React, { useState } from "react";
-// import { FormattedMessage } from "react-intl";
-import ShareIcon from "../../assets/images/icon_share_1.svg";
-import locationIcon from "../../assets/images/locationIconBlack.svg";
-import PopUp from "../ImageListPopup/ImageListPopup";
-import "./PropertyDetailsHeader.css";
-
-export interface PopupProps {
-  property: {
-    city: string;
-    constructedArea: string;
-    rooms: string;
-    propertyArea: string;
-    askingPrice: string;
-  };
-  showPopUp: boolean;
-}
-
-export default function PropertyDetailsHeader(props: PopupProps) {
-  const [showPopUp, setShowPopUp] = useState(false);
-
-  const handlePopUp = () => {
-    setShowPopUp(!showPopUp);
-  };
-
-  return (
-    <div className="Pheader compact d-flex col-12 col-lg-12 position-relative mt-5 ">
-      <div className="header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 ">
-        <strong>
-          Einziehen ohne einen Pinselstrich - Kernsaniertes Einfamilienhaus in
-          top Lage
-        </strong>
-      </div>
-      <div className="header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4">
-        <img src={locationIcon} className="vector me-2" />
-
-        <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
-          {props.property.city}
-        </div>
-      </div>
-      <div className="d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4">
-        {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
-        <img src={ShareIcon} className="v_share me-3" onClick={handlePopUp} />
-      </div>
-      <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 />
-            Kaufpreis
-          </div>
-        )}
-        {props && (
-          <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
-            {props.property.constructedArea} m² <br />
-            constructedArea
-            {/* <FormattedMessage id="LIVING_SPACE" /> */}
-          </div>
-        )}
-        {props && (
-          <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
-            {props.property.rooms} <br />
-            rooms
-            {/* <FormattedMessage id="ROOMS" /> */}
-          </div>
-        )}
-        {props && (
-          <div className="propText  col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
-            {props.property.propertyArea} m²
-            <br />
-            Grundstück
-            {/* <FormattedMessage id="Grundstück" /> */}
-          </div>
-        )}
-      </div>
-      {/* {showPopUp && (
-        <PopUp
-      
-        />
-      )} */}
-    </div>
-  );
-}
+import React, { useState } from "react";
+// import { FormattedMessage } from "react-intl";
+import ShareIcon from "../../assets/images/icon_share_1.svg";
+import locationIcon from "../../assets/images/locationIconBlack.svg";
+import "./PropertyDetailsHeader.css";
+
+export interface PopupProps {
+  property: {
+    city: string;
+    constructedArea: string;
+    rooms: string;
+    propertyArea: string;
+    askingPrice: string;
+  };
+  title: string;
+}
+
+export default function PropertyDetailsHeader(props: PopupProps) {
+  const [showPopUp, setShowPopUp] = useState(false);
+
+  const handlePopUp = () => {
+    setShowPopUp(!showPopUp);
+  };
+
+  return (
+    <div className="Pheader compact d-flex col-12 col-lg-12 position-relative mt-5 ">
+      <div className="header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 ">
+        <strong>{props.title ?? "-"}</strong>
+      </div>
+      <div className="header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4">
+        <img src={locationIcon} className="vector me-2" alt="location Icon" />
+
+        <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
+          {props.property.city}
+        </div>
+      </div>
+      <div className="d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4">
+        {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
+        <img
+          src={ShareIcon}
+          alt="share icon"
+          className="v_share me-3"
+          onClick={handlePopUp}
+        />
+      </div>
+      <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 />
+            Kaufpreis
+          </div>
+        )}
+        {props && (
+          <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
+            {props.property.constructedArea} m² <br />
+            Wohnfläche
+            {/* <FormattedMessage id="LIVING_SPACE" /> */}
+          </div>
+        )}
+        {props && (
+          <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
+            {props.property.rooms} <br />
+            Zimmer
+            {/* <FormattedMessage id="ROOMS" /> */}
+          </div>
+        )}
+        {props && (
+          <div className="propText  col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
+            {props.property.propertyArea} m²
+            <br />
+            Grundstück
+            {/* <FormattedMessage id="Grundstück" /> */}
+          </div>
+        )}
+      </div>
+      {/* {showPopUp && (
+        <PopUp
+      
+        />
+      )} */}
+    </div>
+  );
+}

package/src/components/PropertyImageList/PropertyImageList.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
-// import { useParams } from "react-router-dom";
+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";
@@ -12,39 +11,15 @@ import ImageListPopup from "../ImageListPopup/ImageListPopup";
 import PopupProps from "../ImageListPopup/ImageListPopup";
 
 interface PopupProps {
-  property: {
-    city: string;
-    constructedArea: string;
-    rooms: string;
-    propertyArea: string;
-    askingPrice: string;
-    
-  };
-  pictureUrls: any[];
-  currentImageIndex: number;
-  imageListRef: any;
-  isImagePopupOpen: boolean;
+  pictureUrls: { title: string; url: string }[];
 }
 export default function PropertyImageList(prop: PopupProps) {
-  const [mainImage, setMainImage] = useState(null);
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
   const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
-  const imageListRef = useRef(null);
-  const [open, setopen] = useState<boolean>(false);
-  // const [pictureUrls, setPictureUrls] = useState([]);
-
-  // const baseUrl = "https://api-dev.nestiq.de";
-  // const pictureUrls = prop.property.pictures.map(
-  //   (picture) => `${baseUrl}${picture.contentUrl}`
-  // );
-  useEffect(() => {
-    if (prop.pictureUrls.length > 0) {
-      setMainImage(prop.pictureUrls[0]);
-    }
-  }, [prop.pictureUrls]);
+  const imageListRef = useRef<HTMLDivElement | null>(null);
 
   const handleArrowClickInMainImage = (direction: any) => {
-    if (!prop.property || prop.pictureUrls.length === 0) return;
+    if (prop.pictureUrls.length === 0) return;
 
     let newIndex = currentImageIndex;
     if (direction === "left") {
@@ -56,9 +31,8 @@ export default function PropertyImageList(prop: PopupProps) {
     }
 
     setCurrentImageIndex(newIndex);
-    setMainImage(prop.pictureUrls[newIndex]);
 
-    prop.imageListRef.current.scrollTo({
+    imageListRef.current!.scrollTo({
       left: newIndex * 150,
       behavior: "smooth",
     });
@@ -73,7 +47,7 @@ export default function PropertyImageList(prop: PopupProps) {
       <div
         className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
         style={{
-          backgroundImage: `url(${prop.pictureUrls[currentImageIndex]})`,
+          backgroundImage: `url(${prop.pictureUrls[currentImageIndex]?.url})`,
           backgroundSize: "cover",
           backgroundPosition: "center",
         }}
@@ -120,16 +94,15 @@ export default function PropertyImageList(prop: PopupProps) {
               className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
               ref={imageListRef}
             >
-              {prop.property && (
+              {prop.pictureUrls.length > 0 && (
                 <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
-                  {prop.pictureUrls.map((imageUrl, index) => (
+                  {prop.pictureUrls.map((picture, index) => (
                     <div
                       key={index}
                       className="col-lg-12 h-100 d-flex"
                       onClick={() => {
-                        setMainImage(imageUrl);
                         setCurrentImageIndex(index);
-                        prop.imageListRef.current.scrollTo({
+                        imageListRef.current!.scrollTo({
                           left: index * 150,
                           behavior: "smooth",
                         });
@@ -137,7 +110,7 @@ export default function PropertyImageList(prop: PopupProps) {
                       role="button"
                     >
                       <img
-                        src={imageUrl}
+                        src={picture.url}
                         alt={`Image ${index + 1}`}
                         className="col-12 h-100 rounded-3 object-fit-cover"
                       />
@@ -194,15 +167,7 @@ export default function PropertyImageList(prop: PopupProps) {
       </div>
 
       {/* Popup for all photos */}
-      {isImagePopupOpen && (
-        <ImageListPopup
-          currentImageIndex={currentImageIndex}
-          handleArrowClickInMainImage={handleArrowClickInMainImage}
-          imageListRef={imageListRef}
-          pictureUrls={prop.pictureUrls}
-          property={prop.property}
-        />
-      )}
+      {isImagePopupOpen && <ImageListPopup pictureUrls={prop.pictureUrls} />}
     </div>
   );
 }

package/tsconfig.json

@@ -11,6 +11,8 @@
     "forceConsistentCasingInFileNames": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
     "baseUrl": ".",
     "paths": {
       "*": ["node_modules/*", "src/types/*"]

package/dist/assets/images/heartIcon.svg

@@ -1,3 +0,0 @@
-<svg width="30" height="27" viewBox="0 0 30 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M27.24 2.467a7.97 7.97 0 0 0-11.275.004l-.966.978-.958-.976-.006-.006a7.97 7.97 0 0 0-11.27 0l-.43.43a7.97 7.97 0 0 0 0 11.27l11.354 11.356 1.282 1.343.03-.03.034.033 1.201-1.268L27.67 14.168a7.979 7.979 0 0 0 0-11.27l-.43-.431zm-.98 10.292L15.003 24.018l-11.26-11.26a5.977 5.977 0 0 1 0-8.452l.431-.43a5.977 5.977 0 0 1 8.45-.003l2.372 2.415 2.383-2.412a5.977 5.977 0 0 1 8.453 0l.43.43a5.984 5.984 0 0 1 0 8.453z" fill="#fff"/>
-</svg>

package/dist/components/Button/Button.js

@@ -1,6 +0,0 @@
-import React from 'react';
-var Button = function (_a) {
-    var label = _a.label;
-    return React.createElement("button", null, label);
-};
-export default Button;

package/dist/components/ImageListPopup/ImageListPopup.js

@@ -1,26 +0,0 @@
-import React, { useState } from "react";
-import "bootstrap/dist/css/bootstrap.min.css";
-import "./ImageListPopup.css";
-var ImageListPopup = function (_a) {
-    var images = _a.images, onClose = _a.onClose;
-    var _b = useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
-    var handlePrevious = function () {
-        setCurrentIndex(function (prevIndex) { return (prevIndex > 0 ? prevIndex - 1 : prevIndex); });
-    };
-    var handleNext = function () {
-        setCurrentIndex(function (prevIndex) {
-            return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
-        });
-    };
-    return (React.createElement("div", { className: "popup-overlay" },
-        React.createElement("div", { className: "popup-container" },
-            React.createElement("div", { className: "popup-header" },
-                React.createElement("span", null, images[currentIndex].title),
-                React.createElement("button", { className: "btn-close", onClick: onClose })),
-            React.createElement("div", { className: "popup-body" },
-                React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "img-fluid" })),
-            React.createElement("div", { className: "popup-footer" }, images.length > 1 && (React.createElement(React.Fragment, null,
-                React.createElement("button", { className: "btn btn-secondary me-2", onClick: handlePrevious }, "Previous"),
-                React.createElement("button", { className: "btn btn-secondary", onClick: handleNext }, "Next")))))));
-};
-export default ImageListPopup;

package/dist/components/Popup/Popup.js

@@ -1,12 +0,0 @@
-import React from "react";
-import closeIcon from "src/assets/images/icon_close 2.png";
-import "./Popup.css";
-var Popup = function (_a) {
-    var onCloseClick = _a.onCloseClick, children = _a.children;
-    return (React.createElement("div", { className: "popup-overlay" },
-        React.createElement("div", { className: "shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4" },
-            React.createElement("div", { className: "end-0 top-0 position-absolute " },
-                React.createElement("img", { src: closeIcon, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
-            children)));
-};
-export default Popup;