nestiq-component-library 1.0.15 → 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 (25) 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_gallery.svg +4 -0
  19. package/src/assets/images/icon_map.svg +10 -0
  20. package/src/assets/images/layer_icon.svg +5 -0
  21. package/src/components/ImageListPopup/ImageListPopup.tsx +3 -10
  22. package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +4 -3
  23. package/src/components/PropertyImageList/PropertyImageList.css +55 -0
  24. package/src/components/PropertyImageList/PropertyImageList.tsx +203 -0
  25. 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.15",
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
@@ -64,11 +64,6 @@ export default function ImageListPopup(props: PopupProps) {
64
64
  behavior: "smooth",
65
65
  });
66
66
  };
67
- useEffect(() => {
68
- if (props.pictureUrls.length > 0) {
69
- setMainImage(props.pictureUrls[0]);
70
- }
71
- }, [props.pictureUrls]);
72
67
 
73
68
  const handleClose = () => {
74
69
  setShowPopUp(false);
@@ -93,7 +88,7 @@ export default function ImageListPopup(props: PopupProps) {
93
88
  <div
94
89
  className="rounded-circle border onImageArrow start-0 d-flex "
95
90
  role="button"
96
- onClick={() => props.handleArrowClickInMainImage("left")}
91
+ onClick={() => handleArrowClickInMainImage("left")}
97
92
  >
98
93
  <img
99
94
  src={blcIconArrowLeft}
@@ -106,9 +101,7 @@ export default function ImageListPopup(props: PopupProps) {
106
101
  <div
107
102
  className=" rounded-5 mainImage "
108
103
  style={{
109
- backgroundImage: `url(${
110
- props.pictureUrls[props.currentImageIndex]
111
- })`,
104
+ backgroundImage: `url(${props.pictureUrls[currentImageIndex]})`,
112
105
  height: "350px",
113
106
  width: "600px",
114
107
  backgroundSize: "cover",
@@ -121,7 +114,7 @@ export default function ImageListPopup(props: PopupProps) {
121
114
  <div
122
115
  role="button"
123
116
  className="rounded-circle border onImageArrow d-flex justify-content-center"
124
- onClick={() => props.handleArrowClickInMainImage("right")}
117
+ onClick={() => handleArrowClickInMainImage("right")}
125
118
  >
126
119
  <img
127
120
  src={blcIconArrowRight}
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";