nestiq-component-library 1.0.14 → 1.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/assets/images/Icon_rightArrow.svg +3 -0
  2. package/dist/assets/images/chevron-left.svg +3 -0
  3. package/dist/assets/images/icon-close-white.webp +0 -0
  4. package/dist/assets/images/icon_gallery.svg +4 -0
  5. package/dist/assets/images/icon_map.svg +10 -0
  6. package/dist/assets/images/layer_icon.svg +5 -0
  7. package/dist/components/ImageListPopup/ImageListPopup.d.ts +15 -11
  8. package/dist/components/PropertyDetailsHeader/PropertyDetailsHeader.d.ts +1 -0
  9. package/dist/components/PropertyImageList/PropertyImageList.d.ts +19 -0
  10. package/dist/index.d.ts +1 -1
  11. package/dist/index.es.js +107 -41
  12. package/dist/index.es.js.map +1 -1
  13. package/dist/index.js +106 -40
  14. package/dist/index.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/assets/images/Icon_rightArrow.svg +3 -0
  17. package/src/assets/images/chevron-left.svg +3 -0
  18. package/src/assets/images/icon-close-white.webp +0 -0
  19. package/src/assets/images/icon_gallery.svg +4 -0
  20. package/src/assets/images/icon_map.svg +10 -0
  21. package/src/assets/images/layer_icon.svg +5 -0
  22. package/src/components/ImageListPopup/ImageListPopup.tsx +196 -84
  23. package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +4 -3
  24. package/src/components/PropertyImageList/PropertyImageList.css +55 -0
  25. package/src/components/PropertyImageList/PropertyImageList.tsx +203 -0
  26. package/src/index.tsx +2 -1
package/dist/assets/images/Icon_rightArrow.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-chevron-right" viewBox="0 0 16 16">
2
+ <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
3
+ </svg>
package/dist/assets/images/chevron-left.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-chevron-left" viewBox="0 0 16 16">
2
+ <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
3
+ </svg>
package/dist/assets/images/icon_gallery.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M18.242 1.29H4.297a1.76 1.76 0 0 0-1.758 1.757v.742h-.781A1.76 1.76 0 0 0 0 5.547v11.406c0 .97.789 1.758 1.758 1.758h13.945a1.76 1.76 0 0 0 1.758-1.758v-.742h.781A1.76 1.76 0 0 0 20 14.453V3.047a1.76 1.76 0 0 0-1.758-1.758zM4.297 2.46h13.945c.323 0 .586.264.586.587v5.508l-3.49-2.47a.586.586 0 0 0-.724.037L10 10.159l-2.114-1.85a.586.586 0 0 0-.748-.02l-3.427 2.693V3.047c0-.323.263-.586.586-.586zm11.992 14.493a.587.587 0 0 1-.586.586H1.758a.587.587 0 0 1-.586-.586V5.547c0-.323.263-.586.586-.586h.781v9.492c0 .97.789 1.758 1.758 1.758h11.992v.742zm1.953-1.914H4.297a.587.587 0 0 1-.586-.586v-1.98L7.48 9.51l2.134 1.868c.221.193.55.193.772 0l4.652-4.071 3.79 2.683v4.462a.587.587 0 0 1-.586.586z" fill="#fff"/>
3
+ <path d="M10 7.46a1.838 1.838 0 0 0 1.836-1.835A1.838 1.838 0 0 0 10 3.789a1.838 1.838 0 0 0-1.836 1.836c0 1.012.824 1.836 1.836 1.836zm0-2.5a.665.665 0 1 1-.001 1.33A.665.665 0 0 1 10 4.96z" fill="#fff"/>
4
+ </svg>
package/dist/assets/images/icon_map.svg ADDED
@@ -0,0 +1,10 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#bq66l33lna)">
3
+ <path d="M19.286 0a.715.715 0 0 0-.32.075l-5.413 2.707-6.12-2.72C7.423.058 7.41.057 7.4.052a.741.741 0 0 0-.17-.044 1.063 1.063 0 0 0-.175 0 .742.742 0 0 0-.171.044c-.01.005-.022.005-.032.01L.424 2.919A.714.714 0 0 0 0 3.572v15.714a.714.714 0 0 0 1.004.653l6.139-2.729 6.138 2.729c.01.004.022 0 .033.006a.63.63 0 0 0 .54-.012c.012-.005.025 0 .036-.008l5.715-2.857a.714.714 0 0 0 .395-.64V.716A.714.714 0 0 0 19.286 0zM6.428 15.964l-5 2.222V4.036l5-2.222v14.15zm6.429 2.222-5-2.222V1.814l5 2.222v14.15zm5.714-2.199-4.286 2.143V4.013l4.286-2.143v14.117z" fill="#fff"/>
4
+ </g>
5
+ <defs>
6
+ <clipPath id="bq66l33lna">
7
+ <path fill="#fff" d="M0 0h20v20H0z"/>
8
+ </clipPath>
9
+ </defs>
10
+ </svg>
package/dist/assets/images/layer_icon.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="m21.354 5.808-10-5.714a.714.714 0 0 0-.709 0l-10 5.714a.714.714 0 0 0 .017 1.25l10 5.357a.714.714 0 0 0 .675 0l10-5.357a.714.714 0 0 0 .017-1.25zM11 10.975 2.475 6.408 11 1.537l8.525 4.871L11 10.975z" fill="#fff"/>
3
+ <path d="m11.34 16.162 9.656-5.31V9.22l-10 5.5-10-5.5v1.63l9.656 5.31a.715.715 0 0 0 .688 0z" fill="#fff"/>
4
+ <path d="m.996 14.762 9.664 5.154a.714.714 0 0 0 .672 0l9.664-5.154v-1.62l-10 5.334-10-5.333v1.619z" fill="#fff"/>
5
+ </svg>
package/dist/components/ImageListPopup/ImageListPopup.d.ts CHANGED
@@ -1,13 +1,17 @@
1
- import React from "react";
2
- import "bootstrap/dist/css/bootstrap.min.css";
3
1
  import "./ImageListPopup.css";
4
- interface Image {
5
- src: string;
6
- title: string;
7
- }
8
- interface ImageListPopupProps {
9
- images: Image[];
10
- onClose: () => void;
2
+ import React from "react";
3
+ interface PopupProps {
4
+ property: {
5
+ city: string;
6
+ constructedArea: string;
7
+ rooms: string;
8
+ propertyArea: string;
9
+ askingPrice: string;
10
+ };
11
+ handleArrowClickInMainImage: any;
12
+ pictureUrls: any[];
13
+ currentImageIndex: number;
14
+ imageListRef: any;
11
15
  }
12
- declare const ImageListPopup: React.FC<ImageListPopupProps>;
13
- export default ImageListPopup;
16
+ export default function ImageListPopup(props: PopupProps): React.JSX.Element;
17
+ export {};
package/dist/components/PropertyDetailsHeader/PropertyDetailsHeader.d.ts CHANGED
@@ -8,6 +8,7 @@ interface PopupProps {
8
8
  propertyArea: string;
9
9
  askingPrice: string;
10
10
  };
11
+ showPopUp: boolean;
11
12
  }
12
13
  export default function PropertyDetailsHeader(props: PopupProps): React.JSX.Element;
13
14
  export {};
package/dist/components/PropertyImageList/PropertyImageList.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import React from "react";
2
+ import "./PropertyImageList.css";
3
+ interface PopupProps {
4
+ property: {
5
+ city: string;
6
+ constructedArea: string;
7
+ rooms: string;
8
+ propertyArea: string;
9
+ askingPrice: string;
10
+ pictures: any[];
11
+ };
12
+ handleArrowClickInMainImage: any;
13
+ pictureUrls: any[];
14
+ currentImageIndex: number;
15
+ imageListRef: any;
16
+ isImagePopupOpen: boolean;
17
+ }
18
+ export default function PropertyImageList(prop: PopupProps): React.JSX.Element;
19
+ export {};
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export { default as Button } from "./components/Button/Button";
2
2
  export { default as Popup } from "./components/Popup/Popup";
3
- export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
4
3
  export { default as PropertyDetailsHeader } from "./components/PropertyDetailsHeader/PropertyDetailsHeader";
4
+ export { default as PropertyImageList } from "./components/PropertyImageList/PropertyImageList";
package/dist/index.es.js CHANGED
@@ -1,5 +1,4 @@
1
- import React, { useState } from 'react';
2
- import 'bootstrap/dist/css/bootstrap.min.css';
1
+ import React, { useState, useRef, useEffect } from 'react';
3
2
 
4
3
  var Button = function (_a) {
5
4
  var label = _a.label;
@@ -47,47 +46,12 @@ var Popup = function (_a) {
47
46
  children)));
48
47
  };
49
48
 
50
- var css_248z$1 = ".popup-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.7);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n background-color: transparent;\r\n border-radius: 8px;\r\n max-width: 90%;\r\n max-height: 90%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n position: relative;\r\n}\r\n\r\n.popup-header {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n padding: 1rem;\r\n position: absolute;\r\n top: 0;\r\n}\r\n\r\n.popup-title {\r\n color: white;\r\n font-size: 24px;\r\n font-weight: bold;\r\n}\r\n\r\n.btn-close {\r\n position: absolute;\r\n right: 1rem;\r\n top: 1rem;\r\n background: none;\r\n border: none;\r\n color: white;\r\n font-size: 24px;\r\n cursor: pointer;\r\n}\r\n\r\n.popup-body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 1rem;\r\n position: relative;\r\n flex: 1;\r\n}\r\n\r\n.main-image {\r\n max-width: 100%;\r\n max-height: 80vh;\r\n border-radius: 8px;\r\n}\r\n\r\n.btn-prev,\r\n.btn-next {\r\n background: none;\r\n border: none;\r\n color: white;\r\n font-size: 48px;\r\n cursor: pointer;\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.btn-prev {\r\n left: 10px;\r\n}\r\n\r\n.btn-next {\r\n right: 10px;\r\n}\r\n\r\n.popup-thumbnails {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 1rem;\r\n}\r\n\r\n.thumbnail {\r\n width: 60px;\r\n height: 60px;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n opacity: 0.6;\r\n}\r\n\r\n.thumbnail.active {\r\n border: 2px solid white;\r\n opacity: 1;\r\n}\r\n";
51
- styleInject(css_248z$1);
52
-
53
- var blcIconArrowRight = "blackarrow-Right.svg";
54
-
55
- var blcIconArrowLeft = "blckarrow-Left.svg";
56
-
57
- var ImageListPopup = function (_a) {
58
- var images = _a.images, onClose = _a.onClose;
59
- var _b = useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
60
- var handlePrevious = function () {
61
- setCurrentIndex(function (prevIndex) { return (prevIndex > 0 ? prevIndex - 1 : prevIndex); });
62
- };
63
- var handleNext = function () {
64
- setCurrentIndex(function (prevIndex) {
65
- return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
66
- });
67
- };
68
- var handleThumbnailClick = function (index) {
69
- setCurrentIndex(index);
70
- };
71
- return (React.createElement("div", { className: "popup-overlay" },
72
- React.createElement("div", { className: "popup-container" },
73
- React.createElement("div", { className: "popup-header" },
74
- React.createElement("span", { className: "popup-title" }, images[currentIndex].title),
75
- React.createElement("button", { className: "btn-close", onClick: onClose })),
76
- React.createElement("div", { className: "popup-body" },
77
- React.createElement("div", { className: "rounded-circle border btn-prev", role: "button", onClick: handlePrevious },
78
- React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
79
- React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "main-image" }),
80
- React.createElement("div", { className: "rounded-circle border btn-next", role: "button", onClick: handleNext },
81
- React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
82
- React.createElement("div", { className: "popup-thumbnails" }, images.map(function (image, index) { return (React.createElement("img", { key: index, src: image.src, alt: image.title, className: "thumbnail ".concat(index === currentIndex ? "active" : ""), onClick: function () { return handleThumbnailClick(index); } })); })))));
83
- };
84
-
85
49
  var ShareIcon = "icon_share_1.svg";
86
50
 
87
51
  var locationIcon = "locationIconBlack.svg";
88
52
 
89
- var css_248z = ".compact {\r\n height: 194px;\r\n border-radius: 32px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.header_Text {\r\n margin-top: 140px;\r\n font-size: 32px;\r\n line-height: normal;\r\n color: #1b1b1b;\r\n}\r\n\r\n.vector svg {\r\n width: 16px;\r\n height: 21.5px;\r\n flex-grow: 0;\r\n margin: 4.2px 10px 4.2px 0;\r\n fill: #344041;\r\n cursor: pointer;\r\n}\r\n\r\n.propText {\r\n height: 30px;\r\n font-size: 16px;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n\r\n.v_share {\r\n cursor: pointer;\r\n}\r\n\r\n.fetch_section {\r\n margin-top: 90px;\r\n height: 60px;\r\n}\r\n@media (min-width: 800px) {\r\n .Pheader {\r\n max-width: 1750px;\r\n margin: 0 auto;\r\n \r\n }\r\n}\r\n";
90
- styleInject(css_248z);
53
+ var css_248z$1 = ".compact {\r\n height: 194px;\r\n border-radius: 32px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.header_Text {\r\n margin-top: 140px;\r\n font-size: 32px;\r\n line-height: normal;\r\n color: #1b1b1b;\r\n}\r\n\r\n.vector svg {\r\n width: 16px;\r\n height: 21.5px;\r\n flex-grow: 0;\r\n margin: 4.2px 10px 4.2px 0;\r\n fill: #344041;\r\n cursor: pointer;\r\n}\r\n\r\n.propText {\r\n height: 30px;\r\n font-size: 16px;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n\r\n.v_share {\r\n cursor: pointer;\r\n}\r\n\r\n.fetch_section {\r\n margin-top: 90px;\r\n height: 60px;\r\n}\r\n@media (min-width: 800px) {\r\n .Pheader {\r\n max-width: 1750px;\r\n margin: 0 auto;\r\n \r\n }\r\n}\r\n";
54
+ styleInject(css_248z$1);
91
55
 
92
56
  function PropertyDetailsHeader(props) {
93
57
  var _a = useState(false), showPopUp = _a[0], setShowPopUp = _a[1];
@@ -105,7 +69,7 @@ function PropertyDetailsHeader(props) {
105
69
  React.createElement("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" },
106
70
  props && (React.createElement("div", { className: " propText col-lg-3 col-md-3 h-100 d-flex align-items-center justify-content-center " },
107
71
  props.property.askingPrice,
108
- " \u20AC ",
72
+ " ",
109
73
  React.createElement("br", null),
110
74
  "Kaufpreis")),
111
75
  props && (React.createElement("div", { className: "propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center" },
@@ -125,5 +89,107 @@ function PropertyDetailsHeader(props) {
125
89
  "Grundst\u00FCck")))));
126
90
  }
127
91
 
128
- export { Button, ImageListPopup, Popup, PropertyDetailsHeader };
92
+ var iconArrowRight = "Icon_rightArrow.svg";
93
+
94
+ var blcIconArrowRight = "blackarrow-Right.svg";
95
+
96
+ var blcIconArrowLeft = "blckarrow-Left.svg";
97
+
98
+ var iconArrowLeft = "chevron-left.svg";
99
+
100
+ var iconGallery = "icon_gallery.svg";
101
+
102
+ var iconMap = "icon_map.svg";
103
+
104
+ var iconLayers = "layer_icon.svg";
105
+
106
+ var css_248z = ".mainImage {\r\n\theight: 80%;\r\n\t\r\n}\r\n\r\n.secondList {\r\n\theight: 20%;\r\n\t\t\r\n\r\n}\r\n\r\n.listImageButton {\r\n\tbackground-color: black;\r\n\talign-items: center !important;\r\n\tjustify-content: center !important;\r\n}\r\n\r\n.listImgText {\r\n\theight: 30px;\r\n\tfont-size: 14px;\r\n\tline-height: 2.14;\r\n\tcolor: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n\theight: 30px;\r\n\tfill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tpadding: 23px 8px;\r\n\tbackground-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n}\r\n\r\n.imagesArray {\r\n\tbackground-size: 'cover' !important;\r\n}\r\n@media (min-width: 800px) {\r\n .Pimagelist {\r\n max-width: 1800px;\r\n \r\n \r\n }\r\n}\r\n\r\n\r\n\r\n\r\n";
107
+ styleInject(css_248z);
108
+
109
+ function PropertyImageList(prop) {
110
+ var _a = useState(null); _a[0]; var setMainImage = _a[1];
111
+ var _b = useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
112
+ var _c = useState(false), isImagePopupOpen = _c[0], setIsImagePopupOpen = _c[1];
113
+ var imageListRef = useRef(null);
114
+ var _d = useState(false); _d[0]; _d[1];
115
+ // const [pictureUrls, setPictureUrls] = useState([]);
116
+ // const baseUrl = "https://api-dev.nestiq.de";
117
+ // const pictureUrls = prop.property.pictures.map(
118
+ // (picture) => `${baseUrl}${picture.contentUrl}`
119
+ // );
120
+ useEffect(function () {
121
+ if (prop.pictureUrls.length > 0) {
122
+ setMainImage(prop.pictureUrls[0]);
123
+ }
124
+ }, [prop.pictureUrls]);
125
+ var handleArrowClickInMainImage = function (direction) {
126
+ if (!prop.property || prop.pictureUrls.length === 0)
127
+ return;
128
+ var newIndex = currentImageIndex;
129
+ if (direction === "left") {
130
+ newIndex =
131
+ (currentImageIndex - 1 + prop.pictureUrls.length) %
132
+ prop.pictureUrls.length;
133
+ }
134
+ else if (direction === "right") {
135
+ newIndex = (currentImageIndex + 1) % prop.pictureUrls.length;
136
+ }
137
+ setCurrentImageIndex(newIndex);
138
+ setMainImage(prop.pictureUrls[newIndex]);
139
+ prop.imageListRef.current.scrollTo({
140
+ left: newIndex * 150,
141
+ behavior: "smooth",
142
+ });
143
+ };
144
+ var toggleAllPhotos = function () {
145
+ setIsImagePopupOpen(!isImagePopupOpen);
146
+ };
147
+ return (React.createElement("div", { className: "col-8 me-2 Pimagelist" },
148
+ React.createElement("div", { className: "col-12 rounded-5 mainImage d-flex position-relative align-items-center", style: {
149
+ backgroundImage: "url(".concat(prop.pictureUrls[currentImageIndex], ")"),
150
+ backgroundSize: "cover",
151
+ backgroundPosition: "center",
152
+ } },
153
+ React.createElement("div", { className: "rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
154
+ React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
155
+ React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
156
+ React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
157
+ React.createElement("div", { className: "d-flex flex-row gap-1 col-12 secondList" },
158
+ React.createElement("div", { className: "col-lg-6 d-flex flex-row p-1" },
159
+ React.createElement("div", { className: "col-12 position-relative d-flex justify-content-center" },
160
+ React.createElement("div", { className: "col-1 h-100 d-flex position-absolute start-0", onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
161
+ React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
162
+ React.createElement("img", { src: iconArrowLeft, className: "arroIconColour", alt: "Left Arrow" }))),
163
+ React.createElement("div", { className: "col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1", ref: imageListRef }, prop.property && (React.createElement("div", { className: "col-lg-5 h-100 d-flex gap-2 flex-row rounded-3" }, prop.pictureUrls.map(function (imageUrl, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex", onClick: function () {
164
+ setMainImage(imageUrl);
165
+ setCurrentImageIndex(index);
166
+ prop.imageListRef.current.scrollTo({
167
+ left: index * 150,
168
+ behavior: "smooth",
169
+ });
170
+ }, role: "button" },
171
+ React.createElement("img", { src: imageUrl, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); })))),
172
+ React.createElement("div", { className: "col-1 h-100 d-flex position-absolute end-0 top-0", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
173
+ React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1" },
174
+ React.createElement("img", { src: iconArrowRight, className: "arroIconColour", alt: "Right Arrow" }))))),
175
+ React.createElement("div", { className: "col-6 d-flex flex-row" },
176
+ React.createElement("div", { className: "col-lg-4 p-1", role: "button", onClick: toggleAllPhotos },
177
+ React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
178
+ React.createElement("img", { src: iconGallery, alt: "Gallery Icon" }),
179
+ React.createElement("span", { className: "listImgText" }, "Alle Fotos"))),
180
+ React.createElement("div", { className: "col-lg-4 p-1", role: "button" },
181
+ React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
182
+ React.createElement("img", { src: iconLayers, alt: "Layers Icon" }),
183
+ React.createElement("span", { className: "listImgText" }, "Grundriss"))),
184
+ React.createElement("div", { className: "col-lg-4 p-1", role: "button", onClick: function () {
185
+ return window.scrollTo({
186
+ top: document.documentElement.scrollHeight,
187
+ });
188
+ } },
189
+ React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
190
+ React.createElement("img", { src: iconMap, alt: "Map Icon" }),
191
+ React.createElement("span", { className: "listImgText" }, "Karte")))))));
192
+ }
193
+
194
+ export { Button, Popup, PropertyDetailsHeader, PropertyImageList };
129
195
  //# sourceMappingURL=index.es.js.map
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\""],"names":[],"mappings":";;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;ACzBA,wBAAe;;ACAf,uBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
1
+ {"version":3,"file":"index.es.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/Icon_rightArrow.svg","../src/assets/Images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/Images/chevron-left.svg","../src/assets/Images/icon_gallery.svg","../src/assets/Images/icon_map.svg","../src/assets/Images/layer_icon.svg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"Icon_rightArrow.svg\"","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"chevron-left.svg\"","export default \"icon_gallery.svg\"","export default \"icon_map.svg\"","export default \"layer_icon.svg\""],"names":[],"mappings":";;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;ACzBA,gBAAe;;ACAf,mBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
package/dist/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  'use strict';
2
2
 
3
3
  var React = require('react');
4
- require('bootstrap/dist/css/bootstrap.min.css');
5
4
 
6
5
  var Button = function (_a) {
7
6
  var label = _a.label;
@@ -49,47 +48,12 @@ var Popup = function (_a) {
49
48
  children)));
50
49
  };
51
50
 
52
- var css_248z$1 = ".popup-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.7);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n background-color: transparent;\r\n border-radius: 8px;\r\n max-width: 90%;\r\n max-height: 90%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n position: relative;\r\n}\r\n\r\n.popup-header {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n padding: 1rem;\r\n position: absolute;\r\n top: 0;\r\n}\r\n\r\n.popup-title {\r\n color: white;\r\n font-size: 24px;\r\n font-weight: bold;\r\n}\r\n\r\n.btn-close {\r\n position: absolute;\r\n right: 1rem;\r\n top: 1rem;\r\n background: none;\r\n border: none;\r\n color: white;\r\n font-size: 24px;\r\n cursor: pointer;\r\n}\r\n\r\n.popup-body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 1rem;\r\n position: relative;\r\n flex: 1;\r\n}\r\n\r\n.main-image {\r\n max-width: 100%;\r\n max-height: 80vh;\r\n border-radius: 8px;\r\n}\r\n\r\n.btn-prev,\r\n.btn-next {\r\n background: none;\r\n border: none;\r\n color: white;\r\n font-size: 48px;\r\n cursor: pointer;\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.btn-prev {\r\n left: 10px;\r\n}\r\n\r\n.btn-next {\r\n right: 10px;\r\n}\r\n\r\n.popup-thumbnails {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 1rem;\r\n}\r\n\r\n.thumbnail {\r\n width: 60px;\r\n height: 60px;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n opacity: 0.6;\r\n}\r\n\r\n.thumbnail.active {\r\n border: 2px solid white;\r\n opacity: 1;\r\n}\r\n";
53
- styleInject(css_248z$1);
54
-
55
- var blcIconArrowRight = "blackarrow-Right.svg";
56
-
57
- var blcIconArrowLeft = "blckarrow-Left.svg";
58
-
59
- var ImageListPopup = function (_a) {
60
- var images = _a.images, onClose = _a.onClose;
61
- var _b = React.useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
62
- var handlePrevious = function () {
63
- setCurrentIndex(function (prevIndex) { return (prevIndex > 0 ? prevIndex - 1 : prevIndex); });
64
- };
65
- var handleNext = function () {
66
- setCurrentIndex(function (prevIndex) {
67
- return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
68
- });
69
- };
70
- var handleThumbnailClick = function (index) {
71
- setCurrentIndex(index);
72
- };
73
- return (React.createElement("div", { className: "popup-overlay" },
74
- React.createElement("div", { className: "popup-container" },
75
- React.createElement("div", { className: "popup-header" },
76
- React.createElement("span", { className: "popup-title" }, images[currentIndex].title),
77
- React.createElement("button", { className: "btn-close", onClick: onClose })),
78
- React.createElement("div", { className: "popup-body" },
79
- React.createElement("div", { className: "rounded-circle border btn-prev", role: "button", onClick: handlePrevious },
80
- React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
81
- React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "main-image" }),
82
- React.createElement("div", { className: "rounded-circle border btn-next", role: "button", onClick: handleNext },
83
- React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
84
- React.createElement("div", { className: "popup-thumbnails" }, images.map(function (image, index) { return (React.createElement("img", { key: index, src: image.src, alt: image.title, className: "thumbnail ".concat(index === currentIndex ? "active" : ""), onClick: function () { return handleThumbnailClick(index); } })); })))));
85
- };
86
-
87
51
  var ShareIcon = "icon_share_1.svg";
88
52
 
89
53
  var locationIcon = "locationIconBlack.svg";
90
54
 
91
- var css_248z = ".compact {\r\n height: 194px;\r\n border-radius: 32px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.header_Text {\r\n margin-top: 140px;\r\n font-size: 32px;\r\n line-height: normal;\r\n color: #1b1b1b;\r\n}\r\n\r\n.vector svg {\r\n width: 16px;\r\n height: 21.5px;\r\n flex-grow: 0;\r\n margin: 4.2px 10px 4.2px 0;\r\n fill: #344041;\r\n cursor: pointer;\r\n}\r\n\r\n.propText {\r\n height: 30px;\r\n font-size: 16px;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n\r\n.v_share {\r\n cursor: pointer;\r\n}\r\n\r\n.fetch_section {\r\n margin-top: 90px;\r\n height: 60px;\r\n}\r\n@media (min-width: 800px) {\r\n .Pheader {\r\n max-width: 1750px;\r\n margin: 0 auto;\r\n \r\n }\r\n}\r\n";
92
- styleInject(css_248z);
55
+ var css_248z$1 = ".compact {\r\n height: 194px;\r\n border-radius: 32px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.header_Text {\r\n margin-top: 140px;\r\n font-size: 32px;\r\n line-height: normal;\r\n color: #1b1b1b;\r\n}\r\n\r\n.vector svg {\r\n width: 16px;\r\n height: 21.5px;\r\n flex-grow: 0;\r\n margin: 4.2px 10px 4.2px 0;\r\n fill: #344041;\r\n cursor: pointer;\r\n}\r\n\r\n.propText {\r\n height: 30px;\r\n font-size: 16px;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n\r\n.v_share {\r\n cursor: pointer;\r\n}\r\n\r\n.fetch_section {\r\n margin-top: 90px;\r\n height: 60px;\r\n}\r\n@media (min-width: 800px) {\r\n .Pheader {\r\n max-width: 1750px;\r\n margin: 0 auto;\r\n \r\n }\r\n}\r\n";
56
+ styleInject(css_248z$1);
93
57
 
94
58
  function PropertyDetailsHeader(props) {
95
59
  var _a = React.useState(false), showPopUp = _a[0], setShowPopUp = _a[1];
@@ -107,7 +71,7 @@ function PropertyDetailsHeader(props) {
107
71
  React.createElement("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" },
108
72
  props && (React.createElement("div", { className: " propText col-lg-3 col-md-3 h-100 d-flex align-items-center justify-content-center " },
109
73
  props.property.askingPrice,
110
- " \u20AC ",
74
+ " ",
111
75
  React.createElement("br", null),
112
76
  "Kaufpreis")),
113
77
  props && (React.createElement("div", { className: "propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center" },
@@ -127,8 +91,110 @@ function PropertyDetailsHeader(props) {
127
91
  "Grundst\u00FCck")))));
128
92
  }
129
93
 
94
+ var iconArrowRight = "Icon_rightArrow.svg";
95
+
96
+ var blcIconArrowRight = "blackarrow-Right.svg";
97
+
98
+ var blcIconArrowLeft = "blckarrow-Left.svg";
99
+
100
+ var iconArrowLeft = "chevron-left.svg";
101
+
102
+ var iconGallery = "icon_gallery.svg";
103
+
104
+ var iconMap = "icon_map.svg";
105
+
106
+ var iconLayers = "layer_icon.svg";
107
+
108
+ var css_248z = ".mainImage {\r\n\theight: 80%;\r\n\t\r\n}\r\n\r\n.secondList {\r\n\theight: 20%;\r\n\t\t\r\n\r\n}\r\n\r\n.listImageButton {\r\n\tbackground-color: black;\r\n\talign-items: center !important;\r\n\tjustify-content: center !important;\r\n}\r\n\r\n.listImgText {\r\n\theight: 30px;\r\n\tfont-size: 14px;\r\n\tline-height: 2.14;\r\n\tcolor: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n\theight: 30px;\r\n\tfill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\tpadding: 23px 8px;\r\n\tbackground-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n\twidth: 20px;\r\n\theight: 20px;\r\n}\r\n\r\n.imagesArray {\r\n\tbackground-size: 'cover' !important;\r\n}\r\n@media (min-width: 800px) {\r\n .Pimagelist {\r\n max-width: 1800px;\r\n \r\n \r\n }\r\n}\r\n\r\n\r\n\r\n\r\n";
109
+ styleInject(css_248z);
110
+
111
+ function PropertyImageList(prop) {
112
+ var _a = React.useState(null); _a[0]; var setMainImage = _a[1];
113
+ var _b = React.useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
114
+ var _c = React.useState(false), isImagePopupOpen = _c[0], setIsImagePopupOpen = _c[1];
115
+ var imageListRef = React.useRef(null);
116
+ var _d = React.useState(false); _d[0]; _d[1];
117
+ // const [pictureUrls, setPictureUrls] = useState([]);
118
+ // const baseUrl = "https://api-dev.nestiq.de";
119
+ // const pictureUrls = prop.property.pictures.map(
120
+ // (picture) => `${baseUrl}${picture.contentUrl}`
121
+ // );
122
+ React.useEffect(function () {
123
+ if (prop.pictureUrls.length > 0) {
124
+ setMainImage(prop.pictureUrls[0]);
125
+ }
126
+ }, [prop.pictureUrls]);
127
+ var handleArrowClickInMainImage = function (direction) {
128
+ if (!prop.property || prop.pictureUrls.length === 0)
129
+ return;
130
+ var newIndex = currentImageIndex;
131
+ if (direction === "left") {
132
+ newIndex =
133
+ (currentImageIndex - 1 + prop.pictureUrls.length) %
134
+ prop.pictureUrls.length;
135
+ }
136
+ else if (direction === "right") {
137
+ newIndex = (currentImageIndex + 1) % prop.pictureUrls.length;
138
+ }
139
+ setCurrentImageIndex(newIndex);
140
+ setMainImage(prop.pictureUrls[newIndex]);
141
+ prop.imageListRef.current.scrollTo({
142
+ left: newIndex * 150,
143
+ behavior: "smooth",
144
+ });
145
+ };
146
+ var toggleAllPhotos = function () {
147
+ setIsImagePopupOpen(!isImagePopupOpen);
148
+ };
149
+ return (React.createElement("div", { className: "col-8 me-2 Pimagelist" },
150
+ React.createElement("div", { className: "col-12 rounded-5 mainImage d-flex position-relative align-items-center", style: {
151
+ backgroundImage: "url(".concat(prop.pictureUrls[currentImageIndex], ")"),
152
+ backgroundSize: "cover",
153
+ backgroundPosition: "center",
154
+ } },
155
+ React.createElement("div", { className: "rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
156
+ React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
157
+ React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
158
+ React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
159
+ React.createElement("div", { className: "d-flex flex-row gap-1 col-12 secondList" },
160
+ React.createElement("div", { className: "col-lg-6 d-flex flex-row p-1" },
161
+ React.createElement("div", { className: "col-12 position-relative d-flex justify-content-center" },
162
+ React.createElement("div", { className: "col-1 h-100 d-flex position-absolute start-0", onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
163
+ React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
164
+ React.createElement("img", { src: iconArrowLeft, className: "arroIconColour", alt: "Left Arrow" }))),
165
+ React.createElement("div", { className: "col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1", ref: imageListRef }, prop.property && (React.createElement("div", { className: "col-lg-5 h-100 d-flex gap-2 flex-row rounded-3" }, prop.pictureUrls.map(function (imageUrl, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex", onClick: function () {
166
+ setMainImage(imageUrl);
167
+ setCurrentImageIndex(index);
168
+ prop.imageListRef.current.scrollTo({
169
+ left: index * 150,
170
+ behavior: "smooth",
171
+ });
172
+ }, role: "button" },
173
+ React.createElement("img", { src: imageUrl, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); })))),
174
+ React.createElement("div", { className: "col-1 h-100 d-flex position-absolute end-0 top-0", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
175
+ React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1" },
176
+ React.createElement("img", { src: iconArrowRight, className: "arroIconColour", alt: "Right Arrow" }))))),
177
+ React.createElement("div", { className: "col-6 d-flex flex-row" },
178
+ React.createElement("div", { className: "col-lg-4 p-1", role: "button", onClick: toggleAllPhotos },
179
+ React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
180
+ React.createElement("img", { src: iconGallery, alt: "Gallery Icon" }),
181
+ React.createElement("span", { className: "listImgText" }, "Alle Fotos"))),
182
+ React.createElement("div", { className: "col-lg-4 p-1", role: "button" },
183
+ React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
184
+ React.createElement("img", { src: iconLayers, alt: "Layers Icon" }),
185
+ React.createElement("span", { className: "listImgText" }, "Grundriss"))),
186
+ React.createElement("div", { className: "col-lg-4 p-1", role: "button", onClick: function () {
187
+ return window.scrollTo({
188
+ top: document.documentElement.scrollHeight,
189
+ });
190
+ } },
191
+ React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
192
+ React.createElement("img", { src: iconMap, alt: "Map Icon" }),
193
+ React.createElement("span", { className: "listImgText" }, "Karte")))))));
194
+ }
195
+
130
196
  exports.Button = Button;
131
- exports.ImageListPopup = ImageListPopup;
132
197
  exports.Popup = Popup;
133
198
  exports.PropertyDetailsHeader = PropertyDetailsHeader;
199
+ exports.PropertyImageList = PropertyImageList;
134
200
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\""],"names":[],"mappings":";;;;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;ACzBA,wBAAe;;ACAf,uBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
1
+ {"version":3,"file":"index.js","sources":["../src/assets/images/icon_close_2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/icon_share_1.svg","../src/assets/images/locationIconBlack.svg","../src/assets/Images/Icon_rightArrow.svg","../src/assets/Images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg","../src/assets/Images/chevron-left.svg","../src/assets/Images/icon_gallery.svg","../src/assets/Images/icon_map.svg","../src/assets/Images/layer_icon.svg"],"sourcesContent":["export default \"icon_close_2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","export default \"icon_share_1.svg\"","export default \"locationIconBlack.svg\"","export default \"Icon_rightArrow.svg\"","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\"","export default \"chevron-left.svg\"","export default \"icon_gallery.svg\"","export default \"icon_map.svg\"","export default \"layer_icon.svg\""],"names":[],"mappings":";;;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;ACzBA,gBAAe;;ACAf,mBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nestiq-component-library",
3
- "version": "1.0.14",
3
+ "version": "1.0.16",
4
4
  "type": "module",
5
5
  "description": "",
6
6
  "main": "dist/index.js",
package/src/assets/images/Icon_rightArrow.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-chevron-right" viewBox="0 0 16 16">
2
+ <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
3
+ </svg>
package/src/assets/images/chevron-left.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-chevron-left" viewBox="0 0 16 16">
2
+ <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
3
+ </svg>
package/src/assets/images/icon_gallery.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M18.242 1.29H4.297a1.76 1.76 0 0 0-1.758 1.757v.742h-.781A1.76 1.76 0 0 0 0 5.547v11.406c0 .97.789 1.758 1.758 1.758h13.945a1.76 1.76 0 0 0 1.758-1.758v-.742h.781A1.76 1.76 0 0 0 20 14.453V3.047a1.76 1.76 0 0 0-1.758-1.758zM4.297 2.46h13.945c.323 0 .586.264.586.587v5.508l-3.49-2.47a.586.586 0 0 0-.724.037L10 10.159l-2.114-1.85a.586.586 0 0 0-.748-.02l-3.427 2.693V3.047c0-.323.263-.586.586-.586zm11.992 14.493a.587.587 0 0 1-.586.586H1.758a.587.587 0 0 1-.586-.586V5.547c0-.323.263-.586.586-.586h.781v9.492c0 .97.789 1.758 1.758 1.758h11.992v.742zm1.953-1.914H4.297a.587.587 0 0 1-.586-.586v-1.98L7.48 9.51l2.134 1.868c.221.193.55.193.772 0l4.652-4.071 3.79 2.683v4.462a.587.587 0 0 1-.586.586z" fill="#fff"/>
3
+ <path d="M10 7.46a1.838 1.838 0 0 0 1.836-1.835A1.838 1.838 0 0 0 10 3.789a1.838 1.838 0 0 0-1.836 1.836c0 1.012.824 1.836 1.836 1.836zm0-2.5a.665.665 0 1 1-.001 1.33A.665.665 0 0 1 10 4.96z" fill="#fff"/>
4
+ </svg>
package/src/assets/images/icon_map.svg ADDED
@@ -0,0 +1,10 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#bq66l33lna)">
3
+ <path d="M19.286 0a.715.715 0 0 0-.32.075l-5.413 2.707-6.12-2.72C7.423.058 7.41.057 7.4.052a.741.741 0 0 0-.17-.044 1.063 1.063 0 0 0-.175 0 .742.742 0 0 0-.171.044c-.01.005-.022.005-.032.01L.424 2.919A.714.714 0 0 0 0 3.572v15.714a.714.714 0 0 0 1.004.653l6.139-2.729 6.138 2.729c.01.004.022 0 .033.006a.63.63 0 0 0 .54-.012c.012-.005.025 0 .036-.008l5.715-2.857a.714.714 0 0 0 .395-.64V.716A.714.714 0 0 0 19.286 0zM6.428 15.964l-5 2.222V4.036l5-2.222v14.15zm6.429 2.222-5-2.222V1.814l5 2.222v14.15zm5.714-2.199-4.286 2.143V4.013l4.286-2.143v14.117z" fill="#fff"/>
4
+ </g>
5
+ <defs>
6
+ <clipPath id="bq66l33lna">
7
+ <path fill="#fff" d="M0 0h20v20H0z"/>
8
+ </clipPath>
9
+ </defs>
10
+ </svg>
package/src/assets/images/layer_icon.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="m21.354 5.808-10-5.714a.714.714 0 0 0-.709 0l-10 5.714a.714.714 0 0 0 .017 1.25l10 5.357a.714.714 0 0 0 .675 0l10-5.357a.714.714 0 0 0 .017-1.25zM11 10.975 2.475 6.408 11 1.537l8.525 4.871L11 10.975z" fill="#fff"/>
3
+ <path d="m11.34 16.162 9.656-5.31V9.22l-10 5.5-10-5.5v1.63l9.656 5.31a.715.715 0 0 0 .688 0z" fill="#fff"/>
4
+ <path d="m.996 14.762 9.664 5.154a.714.714 0 0 0 .672 0l9.664-5.154v-1.62l-10 5.334-10-5.333v1.619z" fill="#fff"/>
5
+ </svg>
package/src/components/ImageListPopup/ImageListPopup.tsx CHANGED
@@ -1,100 +1,212 @@
1
- import React, { useState } from "react";
2
- import "bootstrap/dist/css/bootstrap.min.css";
3
1
  import "./ImageListPopup.css";
4
- import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
5
- import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
2
+ import React, { useEffect, useRef, useState } from "react";
3
+ // import icon_checkmark from "../../../assets/Images/icon_checkmark.svg";
4
+ import blcIconArrowRight from "../../../../../assets/Images/blackarrow-Right.svg";
5
+ import blcIconArrowLeft from "../../../../../assets/Images/blckarrow-Left.svg";
6
+ import iconClose from "../../assets/images/icon_close_2.png";
6
7
 
7
- interface Image {
8
- src: string;
9
- title: string;
8
+ interface PopupProps {
9
+ property: {
10
+ city: string;
11
+ constructedArea: string;
12
+ rooms: string;
13
+ propertyArea: string;
14
+ askingPrice: string;
15
+ };
16
+ handleArrowClickInMainImage: any;
17
+ pictureUrls: any[];
18
+ currentImageIndex: number;
19
+ imageListRef: any;
10
20
  }
11
21
 
12
- interface ImageListPopupProps {
13
- images: Image[];
14
- onClose: () => void;
15
- }
22
+ export default function ImageListPopup(props: PopupProps) {
23
+ const [showPopUp, setShowPopUp] = useState(true);
24
+ // const { id } = useParams();
25
+ const [mainImage, setMainImage] = useState(null);
26
+ const [currentImageIndex, setCurrentImageIndex] = useState(0);
27
+ // const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
28
+ const imageListRef = useRef(null);
16
29
 
17
- const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
18
- const [currentIndex, setCurrentIndex] = useState(0);
30
+ // const baseUrl = "https://api-dev.nestiq.de";
31
+ // const pictureUrls = props.property.pictures.map(
32
+ // (picture) => `${baseUrl}${picture.contentUrl}`
33
+ // );
34
+ const imagePopupData = props.pictureUrls.map((pic) => {
35
+ return {
36
+ src: pic,
37
+ title: "Not Specified",
38
+ };
39
+ });
19
40
 
20
- const handlePrevious = () => {
21
- setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
22
- };
41
+ useEffect(() => {
42
+ if (props.pictureUrls.length > 0) {
43
+ setMainImage(props.pictureUrls[0]);
44
+ }
45
+ }, [props.pictureUrls]);
46
+
47
+ const handleArrowClickInMainImage = (direction: any) => {
48
+ if (!props.property || props.pictureUrls.length === 0) return;
49
+
50
+ let newIndex = currentImageIndex;
51
+ if (direction === "left") {
52
+ newIndex =
53
+ (currentImageIndex - 1 + props.pictureUrls.length) %
54
+ props.pictureUrls.length;
55
+ } else if (direction === "right") {
56
+ newIndex = (currentImageIndex + 1) % props.pictureUrls.length;
57
+ }
58
+
59
+ setCurrentImageIndex(newIndex);
60
+ setMainImage(props.pictureUrls[newIndex]);
23
61
 
24
- const handleNext = () => {
25
- setCurrentIndex((prevIndex) =>
26
- prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
27
- );
62
+ props.imageListRef.current.scrollTo({
63
+ left: newIndex * 150,
64
+ behavior: "smooth",
65
+ });
28
66
  };
29
67
 
30
- const handleThumbnailClick = (index: number) => {
31
- setCurrentIndex(index);
68
+ const handleClose = () => {
69
+ setShowPopUp(false);
32
70
  };
33
71
 
34
72
  return (
35
- <div className="popup-overlay">
36
- <div className="popup-container">
37
- <div className="popup-header">
38
- <span className="popup-title">{images[currentIndex].title}</span>
39
- <button className="btn-close" onClick={onClose}></button>
40
- </div>
41
- <div className="popup-body">
42
- <div
43
- className="rounded-circle border btn-prev"
44
- role="button"
45
- onClick={handlePrevious}
46
- >
47
- <img
48
- src={blcIconArrowLeft}
49
- className="blackArrow"
50
- alt="Left Arrow"
51
- ></img>
52
- </div>
53
- {/*<button*/}
54
- {/* className="btn-prev"*/}
55
- {/* onClick={handlePrevious}*/}
56
- {/* disabled={currentIndex === 0}*/}
57
- {/*>*/}
58
- {/* &lt;*/}
59
- {/*</button>*/}
60
- <img
61
- src={images[currentIndex].src}
62
- alt={images[currentIndex].title}
63
- className="main-image"
64
- />
65
- <div
66
- className="rounded-circle border btn-next"
67
- role="button"
68
- onClick={handleNext}
69
- >
70
- <img
71
- src={blcIconArrowRight}
72
- className="blackArrow"
73
- alt="Right Arrow"
74
- ></img>
73
+ <div>
74
+ {showPopUp && (
75
+ <div className="popup-overlay">
76
+ <div className=" d-flex flex-column col-6 ">
77
+ <div className="d-flex align-self-end me-0 ms-5">
78
+ <img
79
+ src={iconClose}
80
+ alt="close"
81
+ className="closeIcon "
82
+ onClick={handleClose}
83
+ />
84
+ </div>
85
+
86
+ <div className="d-flex justify-content-center">
87
+ <div className="p-2 bd-highlight align-self-center align-items-center me-5">
88
+ <div
89
+ className="rounded-circle border onImageArrow start-0 d-flex "
90
+ role="button"
91
+ onClick={() => handleArrowClickInMainImage("left")}
92
+ >
93
+ <img
94
+ src={blcIconArrowLeft}
95
+ className="blackArrow align-self-center"
96
+ alt="Left Arrow"
97
+ />
98
+ </div>
99
+ </div>
100
+ <div className="p-2 bd-highlight">
101
+ <div
102
+ className=" rounded-5 mainImage "
103
+ style={{
104
+ backgroundImage: `url(${props.pictureUrls[currentImageIndex]})`,
105
+ height: "350px",
106
+ width: "600px",
107
+ backgroundSize: "cover",
108
+ backgroundPosition: "center",
109
+ }}
110
+ ></div>
111
+ </div>
112
+ <div className="p-2 bd-highlight align-self-center ms-5">
113
+ {" "}
114
+ <div
115
+ role="button"
116
+ className="rounded-circle border onImageArrow d-flex justify-content-center"
117
+ onClick={() => handleArrowClickInMainImage("right")}
118
+ >
119
+ <img
120
+ src={blcIconArrowRight}
121
+ className="blackArrow align-self-center"
122
+ alt="Right Arrow"
123
+ />
124
+ </div>
125
+ </div>
126
+ </div>
127
+ {/* <div className="d-flex flex-column">
128
+ <div className=" d-flex flex-row align-self-center ">
129
+ <img
130
+ src={LeftArrow}
131
+ alt="close"
132
+ className="w-100 h-100 align-self-center me-5 "
133
+ />
134
+ <img src={house} alt="close" className="w-100 h-100 " />
135
+ <img
136
+ src={RightArrow}
137
+ alt="close"
138
+ className="w-100 h-100 align-self-center ms-5 "
139
+ />
140
+ </div>
141
+ </div> */}
142
+ <div className="d-flex flex-row">
143
+ {/* Arrows on the main image */}
144
+ </div>
145
+ <div className="d-flex flex-row gap-4 w-100 secondList ">
146
+ <div className="col-lg-12 d-flex flex-row p-1 align-self-center mt-5">
147
+ <div className="col-12 position-relative d-flex justify-content-center">
148
+ {/* <div
149
+ className="col-1 h-100 d-flex position-absolute start-0"
150
+ onClick={() => handleArrowClickInMainImage("left")}
151
+ role="button"
152
+ >
153
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
154
+ <img
155
+ src={iconArrowLeft}
156
+ className="arroIconColour"
157
+ alt="Left Arrow"
158
+ />
159
+ </div>
160
+ </div> */}
161
+ <div
162
+ className="col-lg-10 rounded-3 h-100 w-100 d-flex flex-row gap-2 overflow-auto "
163
+ ref={props.imageListRef}
164
+ >
165
+ {props.property && (
166
+ <div className="col-lg-5 h-100 w-25 d-flex gap-4 flex-row rounded-3">
167
+ {props.pictureUrls.map((imageUrl, index) => (
168
+ <div
169
+ key={index}
170
+ className="col-lg-12 h-100 d-flex"
171
+ onClick={() => {
172
+ setMainImage(imageUrl);
173
+ setCurrentImageIndex(index);
174
+ props.imageListRef.current.scrollTo({
175
+ left: index * 150,
176
+ behavior: "smooth",
177
+ });
178
+ }}
179
+ role="button"
180
+ >
181
+ <img
182
+ src={imageUrl}
183
+ alt={`Image ${index + 1}`}
184
+ className="col-12 h-100 rounded-3 object-fit-cover"
185
+ />
186
+ </div>
187
+ ))}
188
+ </div>
189
+ )}
190
+ </div>
191
+ {/* <div
192
+ className="col-1 h-100 d-flex position-absolute end-0 top-0"
193
+ onClick={() => handleArrowClickInMainImage("right")}
194
+ role="button"
195
+ >
196
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
197
+ <img
198
+ src={iconArrowRight}
199
+ className="arroIconColour"
200
+ alt="Right Arrow"
201
+ />
202
+ </div>
203
+ </div> */}
204
+ </div>
205
+ </div>
206
+ </div>
75
207
  </div>
76
- {/*<button*/}
77
- {/* className="btn-next"*/}
78
- {/* onClick={handleNext}*/}
79
- {/* disabled={currentIndex === images.length - 1}*/}
80
- {/*>*/}
81
- {/* &gt;*/}
82
- {/*</button>*/}
83
208
  </div>
84
- <div className="popup-thumbnails">
85
- {images.map((image, index) => (
86
- <img
87
- key={index}
88
- src={image.src}
89
- alt={image.title}
90
- className={`thumbnail ${index === currentIndex ? "active" : ""}`}
91
- onClick={() => handleThumbnailClick(index)}
92
- />
93
- ))}
94
- </div>
95
- </div>
209
+ )}
96
210
  </div>
97
211
  );
98
- };
99
-
100
- export default ImageListPopup;
212
+ }
package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx CHANGED
@@ -2,7 +2,7 @@ import React, { useState } from "react";
2
2
  // import { FormattedMessage } from "react-intl";
3
3
  import ShareIcon from "../../assets/images/icon_share_1.svg";
4
4
  import locationIcon from "../../assets/images/locationIconBlack.svg";
5
- // import PopUp from "../SharePopup/PopUp";
5
+ import PopUp from "../ImageListPopup/ImageListPopup";
6
6
  import "./PropertyDetailsHeader.css";
7
7
 
8
8
  interface PopupProps {
@@ -13,6 +13,7 @@ interface PopupProps {
13
13
  propertyArea: string;
14
14
  askingPrice: string;
15
15
  };
16
+ showPopUp: boolean;
16
17
  }
17
18
 
18
19
  export default function PropertyDetailsHeader(props: PopupProps) {
@@ -44,7 +45,7 @@ export default function PropertyDetailsHeader(props: PopupProps) {
44
45
  <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">
45
46
  {props && (
46
47
  <div className=" propText col-lg-3 col-md-3 h-100 d-flex align-items-center justify-content-center ">
47
- {props.property.askingPrice} € <br />
48
+ {props.property.askingPrice} <br />
48
49
  Kaufpreis
49
50
  </div>
50
51
  )}
@@ -71,7 +72,7 @@ export default function PropertyDetailsHeader(props: PopupProps) {
71
72
  </div>
72
73
  )}
73
74
  </div>
74
- {/*{showPopUp && <PopUp onClick={handlePopUp} />}*/}
75
+ {/* {showPopUp && <PopUp />} */}
75
76
  </div>
76
77
  );
77
78
  }
package/src/components/PropertyImageList/PropertyImageList.css ADDED
@@ -0,0 +1,55 @@
1
+ .mainImage {
2
+ height: 80%;
3
+
4
+ }
5
+
6
+ .secondList {
7
+ height: 20%;
8
+
9
+
10
+ }
11
+
12
+ .listImageButton {
13
+ background-color: black;
14
+ align-items: center !important;
15
+ justify-content: center !important;
16
+ }
17
+
18
+ .listImgText {
19
+ height: 30px;
20
+ font-size: 14px;
21
+ line-height: 2.14;
22
+ color: #fff;
23
+ }
24
+
25
+ .arroIconColour {
26
+ height: 30px;
27
+ fill: #fff !important;
28
+ }
29
+
30
+ .onImageArrow {
31
+ width: 50px;
32
+ height: 50px;
33
+ padding: 23px 8px;
34
+ background-color: rgba(255, 255, 255, 0.8);
35
+ }
36
+
37
+ .blackArrow {
38
+ width: 20px;
39
+ height: 20px;
40
+ }
41
+
42
+ .imagesArray {
43
+ background-size: 'cover' !important;
44
+ }
45
+ @media (min-width: 800px) {
46
+ .Pimagelist {
47
+ max-width: 1800px;
48
+
49
+
50
+ }
51
+ }
52
+
53
+
54
+
55
+
package/src/components/PropertyImageList/PropertyImageList.tsx ADDED
@@ -0,0 +1,203 @@
1
+ import React, { useEffect, useRef, useState } from "react";
2
+ // import { useParams } from "react-router-dom";
3
+ import iconArrowRight from "../../assets/Images/Icon_rightArrow.svg";
4
+ import blcIconArrowRight from "../../assets/Images/blackarrow-Right.svg";
5
+ import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
6
+ import iconArrowLeft from "../../assets/Images/chevron-left.svg";
7
+ import iconGallery from "../../assets/Images/icon_gallery.svg";
8
+ import iconMap from "../../assets/Images/icon_map.svg";
9
+ import iconLayers from "../../assets/Images/layer_icon.svg";
10
+ import "./PropertyImageList.css";
11
+ import ImageListPopup from "../ImageListPopup/ImageListPopup";
12
+
13
+ interface PopupProps {
14
+ property: {
15
+ city: string;
16
+ constructedArea: string;
17
+ rooms: string;
18
+ propertyArea: string;
19
+ askingPrice: string;
20
+ pictures: any[];
21
+ };
22
+ handleArrowClickInMainImage: any;
23
+ pictureUrls: any[];
24
+ currentImageIndex: number;
25
+ imageListRef: any;
26
+ isImagePopupOpen: boolean;
27
+ }
28
+ export default function PropertyImageList(prop: PopupProps) {
29
+ const [mainImage, setMainImage] = useState(null);
30
+ const [currentImageIndex, setCurrentImageIndex] = useState(0);
31
+ const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
32
+ const imageListRef = useRef(null);
33
+ const [open, setopen] = useState<boolean>(false);
34
+ // const [pictureUrls, setPictureUrls] = useState([]);
35
+
36
+ // const baseUrl = "https://api-dev.nestiq.de";
37
+ // const pictureUrls = prop.property.pictures.map(
38
+ // (picture) => `${baseUrl}${picture.contentUrl}`
39
+ // );
40
+ useEffect(() => {
41
+ if (prop.pictureUrls.length > 0) {
42
+ setMainImage(prop.pictureUrls[0]);
43
+ }
44
+ }, [prop.pictureUrls]);
45
+
46
+ const handleArrowClickInMainImage = (direction: any) => {
47
+ if (!prop.property || prop.pictureUrls.length === 0) return;
48
+
49
+ let newIndex = currentImageIndex;
50
+ if (direction === "left") {
51
+ newIndex =
52
+ (currentImageIndex - 1 + prop.pictureUrls.length) %
53
+ prop.pictureUrls.length;
54
+ } else if (direction === "right") {
55
+ newIndex = (currentImageIndex + 1) % prop.pictureUrls.length;
56
+ }
57
+
58
+ setCurrentImageIndex(newIndex);
59
+ setMainImage(prop.pictureUrls[newIndex]);
60
+
61
+ prop.imageListRef.current.scrollTo({
62
+ left: newIndex * 150,
63
+ behavior: "smooth",
64
+ });
65
+ };
66
+
67
+ const toggleAllPhotos = () => {
68
+ setIsImagePopupOpen(!isImagePopupOpen);
69
+ };
70
+
71
+ return (
72
+ <div className="col-8 me-2 Pimagelist">
73
+ <div
74
+ className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
75
+ style={{
76
+ backgroundImage: `url(${prop.pictureUrls[currentImageIndex]})`,
77
+ backgroundSize: "cover",
78
+ backgroundPosition: "center",
79
+ }}
80
+ >
81
+ {/* Arrows on the main image */}
82
+ <div
83
+ className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
84
+ role="button"
85
+ onClick={() => handleArrowClickInMainImage("left")}
86
+ >
87
+ <img src={blcIconArrowLeft} className="blackArrow" alt="Left Arrow" />
88
+ </div>
89
+ <div
90
+ role="button"
91
+ className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
92
+ onClick={() => handleArrowClickInMainImage("right")}
93
+ >
94
+ <img
95
+ src={blcIconArrowRight}
96
+ className="blackArrow"
97
+ alt="Right Arrow"
98
+ />
99
+ </div>
100
+ </div>
101
+
102
+ {/* Image Thumbnails */}
103
+ <div className="d-flex flex-row gap-1 col-12 secondList">
104
+ <div className="col-lg-6 d-flex flex-row p-1">
105
+ <div className="col-12 position-relative d-flex justify-content-center">
106
+ <div
107
+ className="col-1 h-100 d-flex position-absolute start-0"
108
+ onClick={() => handleArrowClickInMainImage("left")}
109
+ role="button"
110
+ >
111
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
112
+ <img
113
+ src={iconArrowLeft}
114
+ className="arroIconColour"
115
+ alt="Left Arrow"
116
+ />
117
+ </div>
118
+ </div>
119
+ <div
120
+ className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
121
+ ref={imageListRef}
122
+ >
123
+ {prop.property && (
124
+ <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
125
+ {prop.pictureUrls.map((imageUrl, index) => (
126
+ <div
127
+ key={index}
128
+ className="col-lg-12 h-100 d-flex"
129
+ onClick={() => {
130
+ setMainImage(imageUrl);
131
+ setCurrentImageIndex(index);
132
+ prop.imageListRef.current.scrollTo({
133
+ left: index * 150,
134
+ behavior: "smooth",
135
+ });
136
+ }}
137
+ role="button"
138
+ >
139
+ <img
140
+ src={imageUrl}
141
+ alt={`Image ${index + 1}`}
142
+ className="col-12 h-100 rounded-3 object-fit-cover"
143
+ />
144
+ </div>
145
+ ))}
146
+ </div>
147
+ )}
148
+ </div>
149
+ <div
150
+ className="col-1 h-100 d-flex position-absolute end-0 top-0"
151
+ onClick={() => handleArrowClickInMainImage("right")}
152
+ role="button"
153
+ >
154
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
155
+ <img
156
+ src={iconArrowRight}
157
+ className="arroIconColour"
158
+ alt="Right Arrow"
159
+ />
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
166
+ <div className="col-6 d-flex flex-row">
167
+ <div className="col-lg-4 p-1" role="button" onClick={toggleAllPhotos}>
168
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
169
+ <img src={iconGallery} alt="Gallery Icon" />
170
+ <span className="listImgText">Alle Fotos</span>
171
+ </div>
172
+ </div>
173
+ <div className="col-lg-4 p-1" role="button">
174
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
175
+ <img src={iconLayers} alt="Layers Icon" />
176
+ <span className="listImgText">Grundriss</span>
177
+ </div>
178
+ </div>
179
+ <div
180
+ className="col-lg-4 p-1"
181
+ role="button"
182
+ onClick={() =>
183
+ window.scrollTo({
184
+ top: document.documentElement.scrollHeight,
185
+ })
186
+ }
187
+ >
188
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
189
+ <img src={iconMap} alt="Map Icon" />
190
+ <span className="listImgText">Karte</span>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ {/* Popup for all photos */}
197
+ {/* {isImagePopupOpen && (
198
+ <ImageListPopup
199
+ />
200
+ )} */}
201
+ </div>
202
+ );
203
+ }
package/src/index.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  export { default as Button } from "./components/Button/Button";
2
2
  export { default as Popup } from "./components/Popup/Popup";
3
- export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
3
+ // export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
4
4
  export { default as PropertyDetailsHeader } from "./components/PropertyDetailsHeader/PropertyDetailsHeader";
5
+ export { default as PropertyImageList } from "./components/PropertyImageList//PropertyImageList";