nestiq-component-library 1.1.142 → 1.1.143
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.
- package/dist/index.es.js +27 -20
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +27 -20
- package/dist/index.js.map +1 -1
- package/nestiq-component-library-1.1.143.tgz +0 -0
- package/package.json +1 -1
- package/src/components/PropertyImageList/PropertyImageList.css +24 -6
- package/src/components/PropertyImageList/PropertyImageList.tsx +213 -206
package/dist/index.js
CHANGED
|
@@ -180,7 +180,7 @@ var iconMap = "/static/media/icon_map.2318ec664c3e615e.svg";
|
|
|
180
180
|
|
|
181
181
|
var iconLayers$1 = "/static/media/layer_icon.9b56c187199c44b5.svg";
|
|
182
182
|
|
|
183
|
-
var css_248z$6 = ".mainImage {\r\n height: 80%;\r\n}\r\n\r\n.secondList {\r\n height: 20%;\r\n max-height: 121.6px;\r\n}\r\n\r\n.listImageButton {\r\n background-image: linear-gradient(to top, #000, #666);\r\n align-items: center !important;\r\n justify-content: center !important;\r\n min-height: 121px;\r\n}\r\n\r\n.listImgText {\r\n height: 30px;\r\n font-size: 14px;\r\n line-height: 2.14;\r\n color: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n height: 30px;\r\n fill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n width: 50px;\r\n height: 50px;\r\n padding: 23px 8px;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n\r\n.imagesArray {\r\n background-size:
|
|
183
|
+
var css_248z$6 = ".mainImage {\r\n height: 80%;\r\n}\r\n\r\n.secondList {\r\n height: 20%;\r\n max-height: 121.6px;\r\n}\r\n\r\n.listImageButton {\r\n background-image: linear-gradient(to top, #000, #666);\r\n align-items: center !important;\r\n justify-content: center !important;\r\n min-height: 121px;\r\n}\r\n\r\n.listImgText {\r\n height: 30px;\r\n font-size: 14px;\r\n line-height: 2.14;\r\n color: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n height: 30px;\r\n fill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n width: 50px;\r\n height: 50px;\r\n padding: 23px 8px;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n\r\n.imagesArray {\r\n background-size: cover !important;\r\n}\r\n@media (max-width: 450px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 500px;\r\n width: 88vw;\r\n }\r\n}\r\n\r\n/* @media (min-width: 390px) and (max-width: 850px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 500px;\r\n width: 58vw;\r\n }\r\n} */\r\n@media (min-width: 768px) and (max-width: 819px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 80%;\r\n width: 58vw;\r\n }\r\n}\r\n@media (min-width: 820px) and (max-width: 850px) {\r\n .Pimagelist {\r\n }\r\n .mainImage {\r\n height: 80%;\r\n width: 58vw;\r\n }\r\n}\r\n\r\n.image-thumbnail {\r\n position: relative;\r\n transition: opacity 0.3s ease-in-out;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.image-thumbnail img {\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n}\r\n\r\n.image-thumbnail.greyed-out img {\r\n filter: grayscale(100%) brightness(50%);\r\n}\r\n\r\n.image-thumbnail.selected img {\r\n filter: none;\r\n border: 2px solid #007bff; /* Highlight border for selected image */\r\n}";
|
|
184
184
|
styleInject(css_248z$6);
|
|
185
185
|
|
|
186
186
|
var css_248z$5 = ".popup-header {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n padding: 1rem;\n position: absolute;\n top: 0;\n}\n\n.popup-title {\n color: white;\n font-size: 24px;\n font-weight: bold;\n}\n\n.btn-close {\n position: absolute;\n right: 1rem;\n top: 1rem;\n background: none;\n border: none;\n color: white;\n font-size: 24px;\n cursor: pointer;\n}\n\n.popup-body {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 1rem;\n position: relative;\n flex: 1;\n}\n\n.main-image {\n max-width: 100%;\n max-height: 80vh;\n border-radius: 8px;\n}\n\n.btn-prev,\n.btn-next {\n background: none;\n border: none;\n color: white;\n font-size: 48px;\n cursor: pointer;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.btn-prev {\n left: 10px;\n}\n\n.btn-next {\n right: 10px;\n}\n\n.popup-thumbnails {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n padding: 1rem;\n}\n\n.thumbnail {\n width: 60px;\n height: 60px;\n object-fit: cover;\n border-radius: 8px;\n cursor: pointer;\n opacity: 0.6;\n}\n\n.thumbnail.active {\n border: 2px solid white;\n opacity: 1;\n}\n";
|
|
@@ -301,20 +301,21 @@ function PropertyImageList(prop) {
|
|
|
301
301
|
var _d = React.useState(false), isFloorPlanPopupOpen = _d[0], setIsFloorPlanPopupOpen = _d[1];
|
|
302
302
|
var imageListRef = React.useRef(null);
|
|
303
303
|
var handleArrowClickInMainImage = function (direction) {
|
|
304
|
-
if (prop.pictureUrls.length
|
|
304
|
+
if (!prop.pictureUrls.length)
|
|
305
305
|
return;
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
prop.pictureUrls.length;
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
306
|
+
setCurrentImageIndex(function (prevIndex) {
|
|
307
|
+
var newIndex;
|
|
308
|
+
if (direction === "left") {
|
|
309
|
+
newIndex =
|
|
310
|
+
(prevIndex - 1 + prop.pictureUrls.length) % prop.pictureUrls.length;
|
|
311
|
+
}
|
|
312
|
+
else if (direction === "right") {
|
|
313
|
+
newIndex = (prevIndex + 1) % prop.pictureUrls.length;
|
|
314
|
+
}
|
|
315
|
+
return newIndex || 0;
|
|
316
|
+
});
|
|
316
317
|
imageListRef.current.scrollTo({
|
|
317
|
-
left:
|
|
318
|
+
left: currentImageIndex * (direction === "left" ? -150 : 150),
|
|
318
319
|
behavior: "smooth",
|
|
319
320
|
});
|
|
320
321
|
};
|
|
@@ -340,13 +341,19 @@ function PropertyImageList(prop) {
|
|
|
340
341
|
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"); } },
|
|
341
342
|
React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
|
|
342
343
|
React.createElement("div", { className: "d-none d-md-block" },
|
|
343
|
-
React.createElement("div", { className: "mt-1 d-flex flex-row gap-1 col-12
|
|
344
|
-
React.createElement("div", { className: "\tcol-lg-6 col-6 d-flex flex-row
|
|
344
|
+
React.createElement("div", { className: "mt-1 d-flex flex-row gap-1 col-12 secondList" },
|
|
345
|
+
React.createElement("div", { className: "\tcol-lg-6 col-6 d-flex flex-row py-0 px-1" },
|
|
345
346
|
React.createElement("div", { className: "\t col-12 position-relative d-flex justify-content-center" },
|
|
346
347
|
React.createElement("div", { className: "col-1 h-100 d-flex position-absolute start-0", onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
|
|
347
348
|
React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
348
349
|
React.createElement("img", { src: iconArrowLeft, className: "arroIconColour", alt: "Left Arrow" }))),
|
|
349
|
-
React.createElement("div", { className: "col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-
|
|
350
|
+
React.createElement("div", { className: "col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-hidden", ref: imageListRef }, prop.pictureUrls.length > 0 && (React.createElement("div", { className: "col-lg-5 h-100 d-flex gap-2 flex-row rounded-3" }, prop.pictureUrls.map(function (picture, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex image-thumbnail ".concat(index === currentImageIndex
|
|
351
|
+
? "selected"
|
|
352
|
+
: "greyed-out", " ").concat(index === 0
|
|
353
|
+
? "ms-1"
|
|
354
|
+
: index === prop.pictureUrls.length - 1
|
|
355
|
+
? "me-1"
|
|
356
|
+
: ""), onClick: function () {
|
|
350
357
|
setCurrentImageIndex(index);
|
|
351
358
|
imageListRef.current.scrollTo({
|
|
352
359
|
left: index * 150,
|
|
@@ -355,18 +362,18 @@ function PropertyImageList(prop) {
|
|
|
355
362
|
}, role: "button" },
|
|
356
363
|
React.createElement("img", { src: picture.url, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); })))),
|
|
357
364
|
React.createElement("div", { className: "col-1 h-100 d-flex position-absolute end-0 top-0", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
|
|
358
|
-
React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3
|
|
365
|
+
React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
359
366
|
React.createElement("img", { src: iconArrowRight, className: "arroIconColour ", alt: "Right Arrow" }))))),
|
|
360
367
|
React.createElement("div", { className: "col-7 col-lg-6 d-flex flex-row" },
|
|
361
|
-
React.createElement("div", { className: "col-lg-4 col-4
|
|
368
|
+
React.createElement("div", { className: "col-lg-4 col-4 py-0 px-1", role: "button", onClick: toggleAllPhotos },
|
|
362
369
|
React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
363
370
|
React.createElement("img", { src: iconGallery, alt: "Gallery Icon" }),
|
|
364
371
|
React.createElement("span", { className: "listImgText" }, "Alle Fotos"))),
|
|
365
|
-
React.createElement("div", { className: "col-lg-4 col-3
|
|
372
|
+
React.createElement("div", { className: "col-lg-4 col-3 py-0 px-1", role: "button", onClick: floorPlanClickHandler },
|
|
366
373
|
React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
|
|
367
374
|
React.createElement("img", { src: iconLayers$1, alt: "Layers Icon" }),
|
|
368
375
|
React.createElement("span", { className: "listImgText" }, "Grundriss"))),
|
|
369
|
-
React.createElement("div", { className: "col-lg-4 col-3
|
|
376
|
+
React.createElement("div", { className: "col-lg-4 col-3 py-0 px-1", role: "button", onClick: function () {
|
|
370
377
|
return window.scrollTo({
|
|
371
378
|
top: document.documentElement.scrollHeight,
|
|
372
379
|
});
|