nestiq-component-library 1.0.20 → 1.0.22

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 (8) hide show
  1. package/dist/components/PropertyImageList/PropertyImageList.d.ts +1 -5
  2. package/dist/index.es.js +4 -165
  3. package/dist/index.es.js.map +1 -1
  4. package/dist/index.js +4 -165
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/PropertyCard/PropertyCard.tsx +1 -1
  8. package/src/components/PropertyImageList/PropertyImageList.tsx +139 -130
package/dist/components/PropertyImageList/PropertyImageList.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import React from "react";
2
1
  import "./PropertyImageList.css";
3
2
  import PopupProps from "../ImageListPopup/ImageListPopup";
4
3
  interface PopupProps {
@@ -8,13 +7,10 @@ interface PopupProps {
8
7
  rooms: string;
9
8
  propertyArea: string;
10
9
  askingPrice: string;
11
- pictures: any[];
12
10
  };
13
- handleArrowClickInMainImage: any;
14
11
  pictureUrls: any[];
15
12
  currentImageIndex: number;
16
- imageListRef: any;
17
13
  isImagePopupOpen: boolean;
18
14
  }
19
- export default function PropertyImageList(prop: PopupProps): React.JSX.Element;
15
+ export default function PropertyImageList(prop: PopupProps): void;
20
16
  export {};
package/dist/index.es.js CHANGED
@@ -89,110 +89,17 @@ function PropertyDetailsHeader(props) {
89
89
  "Grundst\u00FCck")))));
90
90
  }
91
91
 
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
92
  var css_248z$2 = ".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
93
  styleInject(css_248z$2);
108
94
 
109
95
  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";
110
96
  styleInject(css_248z$1);
111
97
 
112
- function ImageListPopup(props) {
113
- var _a = useState(true), showPopUp = _a[0], setShowPopUp = _a[1];
114
- // const { id } = useParams();
115
- var _b = useState(null); _b[0]; var setMainImage = _b[1];
116
- var _c = useState(0), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
117
- // const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
118
- useRef(null);
119
- // const baseUrl = "https://api-dev.nestiq.de";
120
- // const pictureUrls = props.property.pictures.map(
121
- // (picture) => `${baseUrl}${picture.contentUrl}`
122
- // );
123
- props.pictureUrls.map(function (pic) {
124
- return {
125
- src: pic,
126
- title: "Not Specified",
127
- };
128
- });
129
- useEffect(function () {
130
- if (props.pictureUrls.length > 0) {
131
- setMainImage(props.pictureUrls[0]);
132
- }
133
- }, [props.pictureUrls]);
134
- var handleArrowClickInMainImage = function (direction) {
135
- if (!props.property || props.pictureUrls.length === 0)
136
- return;
137
- var newIndex = currentImageIndex;
138
- if (direction === "left") {
139
- newIndex =
140
- (currentImageIndex - 1 + props.pictureUrls.length) %
141
- props.pictureUrls.length;
142
- }
143
- else if (direction === "right") {
144
- newIndex = (currentImageIndex + 1) % props.pictureUrls.length;
145
- }
146
- setCurrentImageIndex(newIndex);
147
- setMainImage(props.pictureUrls[newIndex]);
148
- props.imageListRef.current.scrollTo({
149
- left: newIndex * 150,
150
- behavior: "smooth",
151
- });
152
- };
153
- var handleClose = function () {
154
- setShowPopUp(false);
155
- };
156
- return (React.createElement("div", null, showPopUp && (React.createElement("div", { className: "popup-overlay" },
157
- React.createElement("div", { className: " d-flex flex-column col-6 " },
158
- React.createElement("div", { className: "d-flex align-self-end me-0 ms-5" },
159
- React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon ", onClick: handleClose })),
160
- React.createElement("div", { className: "d-flex justify-content-center" },
161
- React.createElement("div", { className: "p-2 bd-highlight align-self-center align-items-center me-5" },
162
- React.createElement("div", { className: "rounded-circle border onImageArrow start-0 d-flex ", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
163
- React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow align-self-center", alt: "Left Arrow" }))),
164
- React.createElement("div", { className: "p-2 bd-highlight" },
165
- React.createElement("div", { className: " rounded-5 mainImage ", style: {
166
- backgroundImage: "url(".concat(props.pictureUrls[currentImageIndex], ")"),
167
- height: "350px",
168
- width: "600px",
169
- backgroundSize: "cover",
170
- backgroundPosition: "center",
171
- } })),
172
- React.createElement("div", { className: "p-2 bd-highlight align-self-center ms-5" },
173
- " ",
174
- React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
175
- React.createElement("img", { src: blcIconArrowRight, className: "blackArrow align-self-center", alt: "Right Arrow" })))),
176
- React.createElement("div", { className: "d-flex flex-row" }),
177
- React.createElement("div", { className: "d-flex flex-row gap-4 w-100 secondList " },
178
- React.createElement("div", { className: "col-lg-12 d-flex flex-row p-1 align-self-center mt-5" },
179
- React.createElement("div", { className: "col-12 position-relative d-flex justify-content-center" },
180
- React.createElement("div", { className: "col-lg-10 rounded-3 h-100 w-100 d-flex flex-row gap-2 overflow-auto ", ref: props.imageListRef }, props.property && (React.createElement("div", { className: "col-lg-5 h-100 w-25 d-flex gap-4 flex-row rounded-3" }, props.pictureUrls.map(function (imageUrl, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex", onClick: function () {
181
- setMainImage(imageUrl);
182
- setCurrentImageIndex(index);
183
- props.imageListRef.current.scrollTo({
184
- left: index * 150,
185
- behavior: "smooth",
186
- });
187
- }, role: "button" },
188
- React.createElement("img", { src: imageUrl, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); }))))))))))));
189
- }
190
-
191
98
  function PropertyImageList(prop) {
192
99
  var _a = useState(null); _a[0]; var setMainImage = _a[1];
193
- var _b = useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
194
- var _c = useState(false), isImagePopupOpen = _c[0], setIsImagePopupOpen = _c[1];
195
- var imageListRef = useRef(null);
100
+ var _b = useState(0); _b[0]; _b[1];
101
+ var _c = useState(false); _c[0]; _c[1];
102
+ useRef(null);
196
103
  var _d = useState(false); _d[0]; _d[1];
197
104
  // const [pictureUrls, setPictureUrls] = useState([]);
198
105
  // const baseUrl = "https://api-dev.nestiq.de";
@@ -204,74 +111,6 @@ function PropertyImageList(prop) {
204
111
  setMainImage(prop.pictureUrls[0]);
205
112
  }
206
113
  }, [prop.pictureUrls]);
207
- var handleArrowClickInMainImage = function (direction) {
208
- if (!prop.property || prop.pictureUrls.length === 0)
209
- return;
210
- var newIndex = currentImageIndex;
211
- if (direction === "left") {
212
- newIndex =
213
- (currentImageIndex - 1 + prop.pictureUrls.length) %
214
- prop.pictureUrls.length;
215
- }
216
- else if (direction === "right") {
217
- newIndex = (currentImageIndex + 1) % prop.pictureUrls.length;
218
- }
219
- setCurrentImageIndex(newIndex);
220
- setMainImage(prop.pictureUrls[newIndex]);
221
- prop.imageListRef.current.scrollTo({
222
- left: newIndex * 150,
223
- behavior: "smooth",
224
- });
225
- };
226
- var toggleAllPhotos = function () {
227
- setIsImagePopupOpen(!isImagePopupOpen);
228
- };
229
- return (React.createElement("div", { className: "col-8 me-2 Pimagelist" },
230
- React.createElement("div", { className: "col-12 rounded-5 mainImage d-flex position-relative align-items-center", style: {
231
- backgroundImage: "url(".concat(prop.pictureUrls[currentImageIndex], ")"),
232
- backgroundSize: "cover",
233
- backgroundPosition: "center",
234
- } },
235
- 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"); } },
236
- React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
237
- 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"); } },
238
- React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
239
- React.createElement("div", { className: "d-flex flex-row gap-1 col-12 secondList" },
240
- React.createElement("div", { className: "col-lg-6 d-flex flex-row p-1" },
241
- React.createElement("div", { className: "col-12 position-relative d-flex justify-content-center" },
242
- React.createElement("div", { className: "col-1 h-100 d-flex position-absolute start-0", onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
243
- React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
244
- React.createElement("img", { src: iconArrowLeft, className: "arroIconColour", alt: "Left Arrow" }))),
245
- 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 () {
246
- setMainImage(imageUrl);
247
- setCurrentImageIndex(index);
248
- prop.imageListRef.current.scrollTo({
249
- left: index * 150,
250
- behavior: "smooth",
251
- });
252
- }, role: "button" },
253
- React.createElement("img", { src: imageUrl, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); })))),
254
- React.createElement("div", { className: "col-1 h-100 d-flex position-absolute end-0 top-0", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
255
- React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1" },
256
- React.createElement("img", { src: iconArrowRight, className: "arroIconColour", alt: "Right Arrow" }))))),
257
- React.createElement("div", { className: "col-6 d-flex flex-row" },
258
- React.createElement("div", { className: "col-lg-4 p-1", role: "button", onClick: toggleAllPhotos },
259
- React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
260
- React.createElement("img", { src: iconGallery, alt: "Gallery Icon" }),
261
- React.createElement("span", { className: "listImgText" }, "Alle Fotos"))),
262
- React.createElement("div", { className: "col-lg-4 p-1", role: "button" },
263
- React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
264
- React.createElement("img", { src: iconLayers, alt: "Layers Icon" }),
265
- React.createElement("span", { className: "listImgText" }, "Grundriss"))),
266
- React.createElement("div", { className: "col-lg-4 p-1", role: "button", onClick: function () {
267
- return window.scrollTo({
268
- top: document.documentElement.scrollHeight,
269
- });
270
- } },
271
- React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
272
- React.createElement("img", { src: iconMap, alt: "Map Icon" }),
273
- React.createElement("span", { className: "listImgText" }, "Karte"))))),
274
- isImagePopupOpen && (React.createElement(ImageListPopup, { currentImageIndex: currentImageIndex, handleArrowClickInMainImage: handleArrowClickInMainImage, imageListRef: imageListRef, pictureUrls: prop.pictureUrls, property: prop.property }))));
275
114
  }
276
115
 
277
116
  var layerIcon = "LayersIcon.svg";
@@ -287,7 +126,7 @@ function PropertyCard(props) {
287
126
  var _a, _b;
288
127
  var _c = useState(false); _c[0]; _c[1];
289
128
  return (React.createElement("div", { key: props.property.id, className: "card-body me-4 mb-4 position-relative cardStyle", style: {
290
- backgroundImage: "url(".concat(props.pictureUrl, ") || ").concat(noImageIcon),
129
+ backgroundImage: "url(".concat(props.pictureUrl, ") ?? ").concat(noImageIcon),
291
130
  backgroundSize: "cover",
292
131
  backgroundPosition: "center",
293
132
  }, onClick: props.onClick, role: "button" },
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/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","../src/assets/Images/LayersIcon.svg","../src/assets/images/locationIcon.svg","../src/assets/Images/default-property.jpg"],"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\"","export default \"LayersIcon.svg\"","export default \"locationIcon.svg\"","export default \"default-property.jpg\""],"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,qBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;ACAf,kBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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/LayersIcon.svg","../src/assets/images/locationIcon.svg","../src/assets/Images/default-property.jpg"],"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 \"LayersIcon.svg\"","export default \"locationIcon.svg\"","export default \"default-property.jpg\""],"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,qBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;ACAf,kBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
package/dist/index.js CHANGED
@@ -91,110 +91,17 @@ function PropertyDetailsHeader(props) {
91
91
  "Grundst\u00FCck")))));
92
92
  }
93
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
94
  var css_248z$2 = ".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
95
  styleInject(css_248z$2);
110
96
 
111
97
  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";
112
98
  styleInject(css_248z$1);
113
99
 
114
- function ImageListPopup(props) {
115
- var _a = React.useState(true), showPopUp = _a[0], setShowPopUp = _a[1];
116
- // const { id } = useParams();
117
- var _b = React.useState(null); _b[0]; var setMainImage = _b[1];
118
- var _c = React.useState(0), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
119
- // const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
120
- React.useRef(null);
121
- // const baseUrl = "https://api-dev.nestiq.de";
122
- // const pictureUrls = props.property.pictures.map(
123
- // (picture) => `${baseUrl}${picture.contentUrl}`
124
- // );
125
- props.pictureUrls.map(function (pic) {
126
- return {
127
- src: pic,
128
- title: "Not Specified",
129
- };
130
- });
131
- React.useEffect(function () {
132
- if (props.pictureUrls.length > 0) {
133
- setMainImage(props.pictureUrls[0]);
134
- }
135
- }, [props.pictureUrls]);
136
- var handleArrowClickInMainImage = function (direction) {
137
- if (!props.property || props.pictureUrls.length === 0)
138
- return;
139
- var newIndex = currentImageIndex;
140
- if (direction === "left") {
141
- newIndex =
142
- (currentImageIndex - 1 + props.pictureUrls.length) %
143
- props.pictureUrls.length;
144
- }
145
- else if (direction === "right") {
146
- newIndex = (currentImageIndex + 1) % props.pictureUrls.length;
147
- }
148
- setCurrentImageIndex(newIndex);
149
- setMainImage(props.pictureUrls[newIndex]);
150
- props.imageListRef.current.scrollTo({
151
- left: newIndex * 150,
152
- behavior: "smooth",
153
- });
154
- };
155
- var handleClose = function () {
156
- setShowPopUp(false);
157
- };
158
- return (React.createElement("div", null, showPopUp && (React.createElement("div", { className: "popup-overlay" },
159
- React.createElement("div", { className: " d-flex flex-column col-6 " },
160
- React.createElement("div", { className: "d-flex align-self-end me-0 ms-5" },
161
- React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon ", onClick: handleClose })),
162
- React.createElement("div", { className: "d-flex justify-content-center" },
163
- React.createElement("div", { className: "p-2 bd-highlight align-self-center align-items-center me-5" },
164
- React.createElement("div", { className: "rounded-circle border onImageArrow start-0 d-flex ", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
165
- React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow align-self-center", alt: "Left Arrow" }))),
166
- React.createElement("div", { className: "p-2 bd-highlight" },
167
- React.createElement("div", { className: " rounded-5 mainImage ", style: {
168
- backgroundImage: "url(".concat(props.pictureUrls[currentImageIndex], ")"),
169
- height: "350px",
170
- width: "600px",
171
- backgroundSize: "cover",
172
- backgroundPosition: "center",
173
- } })),
174
- React.createElement("div", { className: "p-2 bd-highlight align-self-center ms-5" },
175
- " ",
176
- React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
177
- React.createElement("img", { src: blcIconArrowRight, className: "blackArrow align-self-center", alt: "Right Arrow" })))),
178
- React.createElement("div", { className: "d-flex flex-row" }),
179
- React.createElement("div", { className: "d-flex flex-row gap-4 w-100 secondList " },
180
- React.createElement("div", { className: "col-lg-12 d-flex flex-row p-1 align-self-center mt-5" },
181
- React.createElement("div", { className: "col-12 position-relative d-flex justify-content-center" },
182
- React.createElement("div", { className: "col-lg-10 rounded-3 h-100 w-100 d-flex flex-row gap-2 overflow-auto ", ref: props.imageListRef }, props.property && (React.createElement("div", { className: "col-lg-5 h-100 w-25 d-flex gap-4 flex-row rounded-3" }, props.pictureUrls.map(function (imageUrl, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex", onClick: function () {
183
- setMainImage(imageUrl);
184
- setCurrentImageIndex(index);
185
- props.imageListRef.current.scrollTo({
186
- left: index * 150,
187
- behavior: "smooth",
188
- });
189
- }, role: "button" },
190
- React.createElement("img", { src: imageUrl, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); }))))))))))));
191
- }
192
-
193
100
  function PropertyImageList(prop) {
194
101
  var _a = React.useState(null); _a[0]; var setMainImage = _a[1];
195
- var _b = React.useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
196
- var _c = React.useState(false), isImagePopupOpen = _c[0], setIsImagePopupOpen = _c[1];
197
- var imageListRef = React.useRef(null);
102
+ var _b = React.useState(0); _b[0]; _b[1];
103
+ var _c = React.useState(false); _c[0]; _c[1];
104
+ React.useRef(null);
198
105
  var _d = React.useState(false); _d[0]; _d[1];
199
106
  // const [pictureUrls, setPictureUrls] = useState([]);
200
107
  // const baseUrl = "https://api-dev.nestiq.de";
@@ -206,74 +113,6 @@ function PropertyImageList(prop) {
206
113
  setMainImage(prop.pictureUrls[0]);
207
114
  }
208
115
  }, [prop.pictureUrls]);
209
- var handleArrowClickInMainImage = function (direction) {
210
- if (!prop.property || prop.pictureUrls.length === 0)
211
- return;
212
- var newIndex = currentImageIndex;
213
- if (direction === "left") {
214
- newIndex =
215
- (currentImageIndex - 1 + prop.pictureUrls.length) %
216
- prop.pictureUrls.length;
217
- }
218
- else if (direction === "right") {
219
- newIndex = (currentImageIndex + 1) % prop.pictureUrls.length;
220
- }
221
- setCurrentImageIndex(newIndex);
222
- setMainImage(prop.pictureUrls[newIndex]);
223
- prop.imageListRef.current.scrollTo({
224
- left: newIndex * 150,
225
- behavior: "smooth",
226
- });
227
- };
228
- var toggleAllPhotos = function () {
229
- setIsImagePopupOpen(!isImagePopupOpen);
230
- };
231
- return (React.createElement("div", { className: "col-8 me-2 Pimagelist" },
232
- React.createElement("div", { className: "col-12 rounded-5 mainImage d-flex position-relative align-items-center", style: {
233
- backgroundImage: "url(".concat(prop.pictureUrls[currentImageIndex], ")"),
234
- backgroundSize: "cover",
235
- backgroundPosition: "center",
236
- } },
237
- 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"); } },
238
- React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
239
- 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"); } },
240
- React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
241
- React.createElement("div", { className: "d-flex flex-row gap-1 col-12 secondList" },
242
- React.createElement("div", { className: "col-lg-6 d-flex flex-row p-1" },
243
- React.createElement("div", { className: "col-12 position-relative d-flex justify-content-center" },
244
- React.createElement("div", { className: "col-1 h-100 d-flex position-absolute start-0", onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
245
- React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
246
- React.createElement("img", { src: iconArrowLeft, className: "arroIconColour", alt: "Left Arrow" }))),
247
- 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 () {
248
- setMainImage(imageUrl);
249
- setCurrentImageIndex(index);
250
- prop.imageListRef.current.scrollTo({
251
- left: index * 150,
252
- behavior: "smooth",
253
- });
254
- }, role: "button" },
255
- React.createElement("img", { src: imageUrl, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); })))),
256
- React.createElement("div", { className: "col-1 h-100 d-flex position-absolute end-0 top-0", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
257
- React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1" },
258
- React.createElement("img", { src: iconArrowRight, className: "arroIconColour", alt: "Right Arrow" }))))),
259
- React.createElement("div", { className: "col-6 d-flex flex-row" },
260
- React.createElement("div", { className: "col-lg-4 p-1", role: "button", onClick: toggleAllPhotos },
261
- React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
262
- React.createElement("img", { src: iconGallery, alt: "Gallery Icon" }),
263
- React.createElement("span", { className: "listImgText" }, "Alle Fotos"))),
264
- React.createElement("div", { className: "col-lg-4 p-1", role: "button" },
265
- React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
266
- React.createElement("img", { src: iconLayers, alt: "Layers Icon" }),
267
- React.createElement("span", { className: "listImgText" }, "Grundriss"))),
268
- React.createElement("div", { className: "col-lg-4 p-1", role: "button", onClick: function () {
269
- return window.scrollTo({
270
- top: document.documentElement.scrollHeight,
271
- });
272
- } },
273
- React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
274
- React.createElement("img", { src: iconMap, alt: "Map Icon" }),
275
- React.createElement("span", { className: "listImgText" }, "Karte"))))),
276
- isImagePopupOpen && (React.createElement(ImageListPopup, { currentImageIndex: currentImageIndex, handleArrowClickInMainImage: handleArrowClickInMainImage, imageListRef: imageListRef, pictureUrls: prop.pictureUrls, property: prop.property }))));
277
116
  }
278
117
 
279
118
  var layerIcon = "LayersIcon.svg";
@@ -289,7 +128,7 @@ function PropertyCard(props) {
289
128
  var _a, _b;
290
129
  var _c = React.useState(false); _c[0]; _c[1];
291
130
  return (React.createElement("div", { key: props.property.id, className: "card-body me-4 mb-4 position-relative cardStyle", style: {
292
- backgroundImage: "url(".concat(props.pictureUrl, ") || ").concat(noImageIcon),
131
+ backgroundImage: "url(".concat(props.pictureUrl, ") ?? ").concat(noImageIcon),
293
132
  backgroundSize: "cover",
294
133
  backgroundPosition: "center",
295
134
  }, onClick: props.onClick, role: "button" },
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/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","../src/assets/Images/LayersIcon.svg","../src/assets/images/locationIcon.svg","../src/assets/Images/default-property.jpg"],"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\"","export default \"LayersIcon.svg\"","export default \"locationIcon.svg\"","export default \"default-property.jpg\""],"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,qBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,qBAAe;;ACAf,wBAAe;;ACAf,uBAAe;;ACAf,oBAAe;;ACAf,kBAAe;;ACAf,cAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;ACAf,kBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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/LayersIcon.svg","../src/assets/images/locationIcon.svg","../src/assets/Images/default-property.jpg"],"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 \"LayersIcon.svg\"","export default \"locationIcon.svg\"","export default \"default-property.jpg\""],"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,qBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,gBAAe;;ACAf,mBAAe;;;;;ACAf,kBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nestiq-component-library",
3
- "version": "1.0.20",
3
+ "version": "1.0.22",
4
4
  "type": "module",
5
5
  "description": "",
6
6
  "main": "dist/index.js",
package/src/components/PropertyCard/PropertyCard.tsx CHANGED
@@ -37,7 +37,7 @@ export default function PropertyCard(props: PopupProps) {
37
37
  key={props.property.id}
38
38
  className="card-body me-4 mb-4 position-relative cardStyle"
39
39
  style={{
40
- backgroundImage: `url(${props.pictureUrl}) || ${noImageIcon}`,
40
+ backgroundImage: `url(${props.pictureUrl}) ?? ${noImageIcon}`,
41
41
  backgroundSize: "cover",
42
42
  backgroundPosition: "center",
43
43
  }}
package/src/components/PropertyImageList/PropertyImageList.tsx CHANGED
@@ -18,19 +18,16 @@ interface PopupProps {
18
18
  rooms: string;
19
19
  propertyArea: string;
20
20
  askingPrice: string;
21
- pictures: any[];
22
21
  };
23
- handleArrowClickInMainImage: any;
24
22
  pictureUrls: any[];
25
23
  currentImageIndex: number;
26
- imageListRef: any;
27
24
  isImagePopupOpen: boolean;
28
25
  }
29
26
  export default function PropertyImageList(prop: PopupProps) {
30
27
  const [mainImage, setMainImage] = useState(null);
31
28
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
32
29
  const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
33
- const imageListRef = useRef(null);
30
+ const imageListRef = useRef<HTMLDivElement | null>(null);
34
31
  const [open, setopen] = useState<boolean>(false);
35
32
  // const [pictureUrls, setPictureUrls] = useState([]);
36
33
 
@@ -59,151 +56,163 @@ export default function PropertyImageList(prop: PopupProps) {
59
56
  setCurrentImageIndex(newIndex);
60
57
  setMainImage(prop.pictureUrls[newIndex]);
61
58
 
62
- prop.imageListRef.current.scrollTo({
63
- left: newIndex * 150,
64
- behavior: "smooth",
65
- });
66
- };
59
+ if (imageListRef.current) {
60
+ imageListRef.current.scrollTo({
61
+ left: newIndex * 150,
62
+ behavior: "smooth",
63
+ });
64
+ }
67
65
 
68
- const toggleAllPhotos = () => {
69
- setIsImagePopupOpen(!isImagePopupOpen);
70
- };
66
+ const toggleAllPhotos = () => {
67
+ setIsImagePopupOpen(!isImagePopupOpen);
68
+ };
71
69
 
72
- return (
73
- <div className="col-8 me-2 Pimagelist">
74
- <div
75
- className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
76
- style={{
77
- backgroundImage: `url(${prop.pictureUrls[currentImageIndex]})`,
78
- backgroundSize: "cover",
79
- backgroundPosition: "center",
80
- }}
81
- >
82
- {/* Arrows on the main image */}
83
- <div
84
- className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
85
- role="button"
86
- onClick={() => handleArrowClickInMainImage("left")}
87
- >
88
- <img src={blcIconArrowLeft} className="blackArrow" alt="Left Arrow" />
89
- </div>
70
+ return (
71
+ <div className="col-8 me-2 Pimagelist">
90
72
  <div
91
- role="button"
92
- className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
93
- onClick={() => handleArrowClickInMainImage("right")}
73
+ className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
74
+ style={{
75
+ backgroundImage: `url(${prop.pictureUrls[currentImageIndex]})`,
76
+ backgroundSize: "cover",
77
+ backgroundPosition: "center",
78
+ }}
94
79
  >
95
- <img
96
- src={blcIconArrowRight}
97
- className="blackArrow"
98
- alt="Right Arrow"
99
- />
80
+ {/* Arrows on the main image */}
81
+ <div
82
+ className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
83
+ role="button"
84
+ onClick={() => handleArrowClickInMainImage("left")}
85
+ >
86
+ <img
87
+ src={blcIconArrowLeft}
88
+ className="blackArrow"
89
+ alt="Left Arrow"
90
+ />
91
+ </div>
92
+ <div
93
+ role="button"
94
+ className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
95
+ onClick={() => handleArrowClickInMainImage("right")}
96
+ >
97
+ <img
98
+ src={blcIconArrowRight}
99
+ className="blackArrow"
100
+ alt="Right Arrow"
101
+ />
102
+ </div>
100
103
  </div>
101
- </div>
102
104
 
103
- {/* Image Thumbnails */}
104
- <div className="d-flex flex-row gap-1 col-12 secondList">
105
- <div className="col-lg-6 d-flex flex-row p-1">
106
- <div className="col-12 position-relative d-flex justify-content-center">
105
+ {/* Image Thumbnails */}
106
+ <div className="d-flex flex-row gap-1 col-12 secondList">
107
+ <div className="col-lg-6 d-flex flex-row p-1">
108
+ <div className="col-12 position-relative d-flex justify-content-center">
109
+ <div
110
+ className="col-1 h-100 d-flex position-absolute start-0"
111
+ onClick={() => handleArrowClickInMainImage("left")}
112
+ role="button"
113
+ >
114
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
115
+ <img
116
+ src={iconArrowLeft}
117
+ className="arroIconColour"
118
+ alt="Left Arrow"
119
+ />
120
+ </div>
121
+ </div>
122
+ <div
123
+ className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
124
+ ref={imageListRef}
125
+ >
126
+ {prop.property && (
127
+ <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
128
+ {prop.pictureUrls.map((imageUrl, index) => (
129
+ <div
130
+ key={index}
131
+ className="col-lg-12 h-100 d-flex"
132
+ onClick={() => {
133
+ setMainImage(imageUrl);
134
+ setCurrentImageIndex(index);
135
+ if (imageListRef.current) {
136
+ imageListRef.current.scrollTo({
137
+ left: index * 150,
138
+ behavior: "smooth",
139
+ });
140
+ }
141
+ }}
142
+ role="button"
143
+ >
144
+ <img
145
+ src={imageUrl}
146
+ alt={`Image ${index + 1}`}
147
+ className="col-12 h-100 rounded-3 object-fit-cover"
148
+ />
149
+ </div>
150
+ ))}
151
+ </div>
152
+ )}
153
+ </div>
154
+ <div
155
+ className="col-1 h-100 d-flex position-absolute end-0 top-0"
156
+ onClick={() => handleArrowClickInMainImage("right")}
157
+ role="button"
158
+ >
159
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
160
+ <img
161
+ src={iconArrowRight}
162
+ className="arroIconColour"
163
+ alt="Right Arrow"
164
+ />
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
171
+ <div className="col-6 d-flex flex-row">
107
172
  <div
108
- className="col-1 h-100 d-flex position-absolute start-0"
109
- onClick={() => handleArrowClickInMainImage("left")}
173
+ className="col-lg-4 p-1"
110
174
  role="button"
175
+ onClick={toggleAllPhotos}
111
176
  >
112
- <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
113
- <img
114
- src={iconArrowLeft}
115
- className="arroIconColour"
116
- alt="Left Arrow"
117
- />
177
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
178
+ <img src={iconGallery} alt="Gallery Icon" />
179
+ <span className="listImgText">Alle Fotos</span>
118
180
  </div>
119
181
  </div>
120
- <div
121
- className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
122
- ref={imageListRef}
123
- >
124
- {prop.property && (
125
- <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
126
- {prop.pictureUrls.map((imageUrl, index) => (
127
- <div
128
- key={index}
129
- className="col-lg-12 h-100 d-flex"
130
- onClick={() => {
131
- setMainImage(imageUrl);
132
- setCurrentImageIndex(index);
133
- prop.imageListRef.current.scrollTo({
134
- left: index * 150,
135
- behavior: "smooth",
136
- });
137
- }}
138
- role="button"
139
- >
140
- <img
141
- src={imageUrl}
142
- alt={`Image ${index + 1}`}
143
- className="col-12 h-100 rounded-3 object-fit-cover"
144
- />
145
- </div>
146
- ))}
147
- </div>
148
- )}
182
+ <div className="col-lg-4 p-1" role="button">
183
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
184
+ <img src={iconLayers} alt="Layers Icon" />
185
+ <span className="listImgText">Grundriss</span>
186
+ </div>
149
187
  </div>
150
188
  <div
151
- className="col-1 h-100 d-flex position-absolute end-0 top-0"
152
- onClick={() => handleArrowClickInMainImage("right")}
189
+ className="col-lg-4 p-1"
153
190
  role="button"
191
+ onClick={() =>
192
+ window.scrollTo({
193
+ top: document.documentElement.scrollHeight,
194
+ })
195
+ }
154
196
  >
155
- <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
156
- <img
157
- src={iconArrowRight}
158
- className="arroIconColour"
159
- alt="Right Arrow"
160
- />
197
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
198
+ <img src={iconMap} alt="Map Icon" />
199
+ <span className="listImgText">Karte</span>
161
200
  </div>
162
201
  </div>
163
202
  </div>
164
203
  </div>
165
204
 
166
- {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
167
- <div className="col-6 d-flex flex-row">
168
- <div className="col-lg-4 p-1" role="button" onClick={toggleAllPhotos}>
169
- <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
170
- <img src={iconGallery} alt="Gallery Icon" />
171
- <span className="listImgText">Alle Fotos</span>
172
- </div>
173
- </div>
174
- <div className="col-lg-4 p-1" role="button">
175
- <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
176
- <img src={iconLayers} alt="Layers Icon" />
177
- <span className="listImgText">Grundriss</span>
178
- </div>
179
- </div>
180
- <div
181
- className="col-lg-4 p-1"
182
- role="button"
183
- onClick={() =>
184
- window.scrollTo({
185
- top: document.documentElement.scrollHeight,
186
- })
187
- }
188
- >
189
- <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
190
- <img src={iconMap} alt="Map Icon" />
191
- <span className="listImgText">Karte</span>
192
- </div>
193
- </div>
194
- </div>
205
+ {/* Popup for all photos */}
206
+ {isImagePopupOpen && (
207
+ <ImageListPopup
208
+ currentImageIndex={currentImageIndex}
209
+ handleArrowClickInMainImage={handleArrowClickInMainImage}
210
+ imageListRef={imageListRef}
211
+ pictureUrls={prop.pictureUrls}
212
+ property={prop.property}
213
+ />
214
+ )}
195
215
  </div>
196
-
197
- {/* Popup for all photos */}
198
- {isImagePopupOpen && (
199
- <ImageListPopup
200
- currentImageIndex={currentImageIndex}
201
- handleArrowClickInMainImage={handleArrowClickInMainImage}
202
- imageListRef={imageListRef}
203
- pictureUrls={prop.pictureUrls}
204
- property={prop.property}
205
- />
206
- )}
207
- </div>
208
- );
216
+ );
217
+ };
209
218
  }