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.
Files changed (8) hide show
  1. package/dist/index.es.js +27 -20
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +27 -20
  4. package/dist/index.js.map +1 -1
  5. package/nestiq-component-library-1.1.143.tgz +0 -0
  6. package/package.json +1 -1
  7. package/src/components/PropertyImageList/PropertyImageList.css +24 -6
  8. package/src/components/PropertyImageList/PropertyImageList.tsx +213 -206
package/src/components/PropertyImageList/PropertyImageList.css CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
 
42
42
  .imagesArray {
43
- background-size: "cover" !important;
43
+ background-size: cover !important;
44
44
  }
45
45
  @media (max-width: 450px) {
46
46
  .Pimagelist {
@@ -67,7 +67,7 @@
67
67
  width: 58vw;
68
68
  }
69
69
  }
70
- @media (min-width: 820px) and (max-width: 850) {
70
+ @media (min-width: 820px) and (max-width: 850px) {
71
71
  .Pimagelist {
72
72
  }
73
73
  .mainImage {
@@ -75,9 +75,27 @@
75
75
  width: 58vw;
76
76
  }
77
77
  }
78
- *{
79
- -ms-overflow-style: none;
78
+
79
+ .image-thumbnail {
80
+ position: relative;
81
+ transition: opacity 0.3s ease-in-out;
82
+ height: 100%;
83
+ display: flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ }
87
+
88
+ .image-thumbnail img {
89
+ height: 100%;
90
+ object-fit: cover;
91
+ border-radius: 8px;
80
92
  }
81
- ::-webkit-scrollbar {
82
- display: none;
93
+
94
+ .image-thumbnail.greyed-out img {
95
+ filter: grayscale(100%) brightness(50%);
96
+ }
97
+
98
+ .image-thumbnail.selected img {
99
+ filter: none;
100
+ border: 2px solid #007bff; /* Highlight border for selected image */
83
101
  }
package/src/components/PropertyImageList/PropertyImageList.tsx CHANGED
@@ -1,206 +1,213 @@
1
- import React, { useRef, useState } from "react";
2
- import iconArrowRight from "../../assets/images/Icon_rightArrow.svg";
3
- import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
4
- import blcIconArrowLeft from "../../assets/images/blckarrow-Left.svg";
5
- import iconArrowLeft from "../../assets/images/chevron-left.svg";
6
- import iconGallery from "../../assets/images/icon_gallery.svg";
7
- import iconMap from "../../assets/images/icon_map.svg";
8
- import iconLayers from "../../assets/images/layer_icon.svg";
9
- import "./PropertyImageList.css";
10
- import ImageListPopup from "../ImageListPopup/ImageListPopup";
11
- import PopupProps from "../ImageListPopup/ImageListPopup";
12
- import FloorPlanPopup from "../FloorPlanPopup/FloorPlanPopup";
13
-
14
- interface PopupProps {
15
- pictureUrls: { title: string; url: string }[];
16
- floorPlanUrl: string;
17
- }
18
- export default function PropertyImageList(prop: PopupProps) {
19
- const [currentImageIndex, setCurrentImageIndex] = useState(0);
20
- const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
21
- const [isFloorPlanPopupOpen, setIsFloorPlanPopupOpen] = useState(false);
22
- const imageListRef = useRef<HTMLDivElement | null>(null);
23
-
24
- const handleArrowClickInMainImage = (direction: any) => {
25
- if (prop.pictureUrls.length === 0) return;
26
-
27
- let newIndex = currentImageIndex;
28
- if (direction === "left") {
29
- newIndex =
30
- (currentImageIndex - 1 + prop.pictureUrls.length) %
31
- prop.pictureUrls.length;
32
- } else if (direction === "right") {
33
- newIndex = (currentImageIndex + 1) % prop.pictureUrls.length;
34
- }
35
-
36
- setCurrentImageIndex(newIndex);
37
-
38
- imageListRef.current!.scrollTo({
39
- left: newIndex * 150,
40
- behavior: "smooth",
41
- });
42
- };
43
-
44
- const toggleAllPhotos = () => {
45
- setIsImagePopupOpen(!isImagePopupOpen);
46
- };
47
-
48
- const floorPlanClickHandler = () => {
49
- if (prop.floorPlanUrl) {
50
- setIsFloorPlanPopupOpen(true);
51
- }
52
- };
53
-
54
- const floorPlanPopupCloseHandler = () => {
55
- setIsFloorPlanPopupOpen(false);
56
- };
57
-
58
- return (
59
- <div className="col-8 Pimagelist ">
60
- <div
61
- className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
62
- style={{
63
- backgroundImage: `url(${prop.pictureUrls[currentImageIndex]?.url})`,
64
- backgroundSize: "cover",
65
- backgroundPosition: "center",
66
- }}
67
- >
68
- {/* Arrows on the main image */}
69
- <div
70
- className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
71
- role="button"
72
- onClick={() => handleArrowClickInMainImage("left")}
73
- >
74
- <img src={blcIconArrowLeft} className="blackArrow" alt="Left Arrow" />
75
- </div>
76
- <div
77
- role="button"
78
- className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
79
- onClick={() => handleArrowClickInMainImage("right")}
80
- >
81
- <img
82
- src={blcIconArrowRight}
83
- className="blackArrow"
84
- alt="Right Arrow"
85
- />
86
- </div>
87
- </div>
88
-
89
- {/* Image Thumbnails */}
90
- <div className="d-none d-md-block">
91
- <div className="mt-1 d-flex flex-row gap-1 col-12 secondList">
92
- <div className=" col-lg-6 col-6 d-flex flex-row p-1">
93
- <div className=" col-12 position-relative d-flex justify-content-center">
94
- <div
95
- className="col-1 h-100 d-flex position-absolute start-0"
96
- onClick={() => handleArrowClickInMainImage("left")}
97
- role="button"
98
- >
99
- <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
100
- <img
101
- src={iconArrowLeft}
102
- className="arroIconColour"
103
- alt="Left Arrow"
104
- />
105
- </div>
106
- </div>
107
- <div
108
- className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
109
- ref={imageListRef}
110
- >
111
- {prop.pictureUrls.length > 0 && (
112
- <div
113
- className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3"
114
- style={{ overflow: "hidden" }}
115
- >
116
- {prop.pictureUrls.map((picture, index) => (
117
- <div
118
- key={index}
119
- className="col-lg-12 h-100 d-flex"
120
- onClick={() => {
121
- setCurrentImageIndex(index);
122
- imageListRef.current!.scrollTo({
123
- left: index * 150,
124
- behavior: "smooth",
125
- });
126
- }}
127
- role="button"
128
- >
129
- <img
130
- src={picture.url}
131
- alt={`Image ${index + 1}`}
132
- className="col-12 h-100 rounded-3 object-fit-cover"
133
- />
134
- </div>
135
- ))}
136
- </div>
137
- )}
138
- </div>
139
- <div
140
- className="col-1 h-100 d-flex position-absolute end-0 top-0"
141
- onClick={() => handleArrowClickInMainImage("right")}
142
- role="button"
143
- >
144
- <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
145
- <img
146
- src={iconArrowRight}
147
- className="arroIconColour "
148
- alt="Right Arrow"
149
- />
150
- </div>
151
- </div>
152
- </div>
153
- </div>
154
-
155
- {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
156
- <div className="col-7 col-lg-6 d-flex flex-row">
157
- <div
158
- className="col-lg-4 col-4 p-1"
159
- role="button"
160
- onClick={toggleAllPhotos}
161
- >
162
- <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
163
- <img src={iconGallery} alt="Gallery Icon" />
164
- <span className="listImgText">Alle Fotos</span>
165
- </div>
166
- </div>
167
- <div
168
- className="col-lg-4 col-3 p-1"
169
- role="button"
170
- onClick={floorPlanClickHandler}
171
- >
172
- <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
173
- <img src={iconLayers} alt="Layers Icon" />
174
- <span className="listImgText">Grundriss</span>
175
- </div>
176
- </div>
177
- <div
178
- className="col-lg-4 col-3 p-1"
179
- role="button"
180
- onClick={() =>
181
- window.scrollTo({
182
- top: document.documentElement.scrollHeight,
183
- })
184
- }
185
- >
186
- <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
187
- <img src={iconMap} alt="Map Icon" />
188
- <span className="listImgText">Karte</span>
189
- </div>
190
- </div>
191
- </div>
192
- </div>
193
- </div>
194
- {/* Popup for all photos */}
195
- {isImagePopupOpen && <ImageListPopup pictureUrls={prop.pictureUrls} />}
196
-
197
- {/* Popup for floor plan */}
198
- {isFloorPlanPopupOpen && (
199
- <FloorPlanPopup
200
- contentUrl={prop.floorPlanUrl}
201
- onCloseClick={floorPlanPopupCloseHandler}
202
- />
203
- )}
204
- </div>
205
- );
206
- }
1
+ import React, { useRef, useState } from "react";
2
+ import iconArrowRight from "../../assets/images/Icon_rightArrow.svg";
3
+ import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
4
+ import blcIconArrowLeft from "../../assets/images/blckarrow-Left.svg";
5
+ import iconArrowLeft from "../../assets/images/chevron-left.svg";
6
+ import iconGallery from "../../assets/images/icon_gallery.svg";
7
+ import iconMap from "../../assets/images/icon_map.svg";
8
+ import iconLayers from "../../assets/images/layer_icon.svg";
9
+ import "./PropertyImageList.css";
10
+ import ImageListPopup from "../ImageListPopup/ImageListPopup";
11
+ import PopupProps from "../ImageListPopup/ImageListPopup";
12
+ import FloorPlanPopup from "../FloorPlanPopup/FloorPlanPopup";
13
+
14
+ interface PopupProps {
15
+ pictureUrls: { title: string; url: string }[];
16
+ floorPlanUrl: string;
17
+ }
18
+ export default function PropertyImageList(prop: PopupProps) {
19
+ const [currentImageIndex, setCurrentImageIndex] = useState(0);
20
+ const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
21
+ const [isFloorPlanPopupOpen, setIsFloorPlanPopupOpen] = useState(false);
22
+ const imageListRef = useRef<HTMLDivElement | null>(null);
23
+
24
+ const handleArrowClickInMainImage = (direction: "left" | "right") => {
25
+ if (!prop.pictureUrls.length) return;
26
+
27
+ setCurrentImageIndex((prevIndex) => {
28
+ let newIndex;
29
+ if (direction === "left") {
30
+ newIndex =
31
+ (prevIndex - 1 + prop.pictureUrls.length) % prop.pictureUrls.length;
32
+ } else if (direction === "right") {
33
+ newIndex = (prevIndex + 1) % prop.pictureUrls.length;
34
+ }
35
+ return newIndex || 0;
36
+ });
37
+
38
+ imageListRef.current!.scrollTo({
39
+ left: currentImageIndex * (direction === "left" ? -150 : 150),
40
+ behavior: "smooth",
41
+ });
42
+ };
43
+
44
+ const toggleAllPhotos = () => {
45
+ setIsImagePopupOpen(!isImagePopupOpen);
46
+ };
47
+
48
+ const floorPlanClickHandler = () => {
49
+ if (prop.floorPlanUrl) {
50
+ setIsFloorPlanPopupOpen(true);
51
+ }
52
+ };
53
+
54
+ const floorPlanPopupCloseHandler = () => {
55
+ setIsFloorPlanPopupOpen(false);
56
+ };
57
+
58
+ return (
59
+ <div className="col-8 Pimagelist ">
60
+ <div
61
+ className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
62
+ style={{
63
+ backgroundImage: `url(${prop.pictureUrls[currentImageIndex]?.url})`,
64
+ backgroundSize: "cover",
65
+ backgroundPosition: "center",
66
+ }}
67
+ >
68
+ {/* Arrows on the main image */}
69
+ <div
70
+ className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
71
+ role="button"
72
+ onClick={() => handleArrowClickInMainImage("left")}
73
+ >
74
+ <img src={blcIconArrowLeft} className="blackArrow" alt="Left Arrow" />
75
+ </div>
76
+ <div
77
+ role="button"
78
+ className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
79
+ onClick={() => handleArrowClickInMainImage("right")}
80
+ >
81
+ <img
82
+ src={blcIconArrowRight}
83
+ className="blackArrow"
84
+ alt="Right Arrow"
85
+ />
86
+ </div>
87
+ </div>
88
+
89
+ {/* Image Thumbnails */}
90
+ <div className="d-none d-md-block">
91
+ <div className="mt-1 d-flex flex-row gap-1 col-12 secondList">
92
+ <div className=" col-lg-6 col-6 d-flex flex-row py-0 px-1">
93
+ <div className=" col-12 position-relative d-flex justify-content-center">
94
+ <div
95
+ className="col-1 h-100 d-flex position-absolute start-0"
96
+ onClick={() => handleArrowClickInMainImage("left")}
97
+ role="button"
98
+ >
99
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
100
+ <img
101
+ src={iconArrowLeft}
102
+ className="arroIconColour"
103
+ alt="Left Arrow"
104
+ />
105
+ </div>
106
+ </div>
107
+ <div
108
+ className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-hidden"
109
+ ref={imageListRef}
110
+ >
111
+ {prop.pictureUrls.length > 0 && (
112
+ <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
113
+ {prop.pictureUrls.map((picture, index) => (
114
+ <div
115
+ key={index}
116
+ className={`col-lg-12 h-100 d-flex image-thumbnail ${
117
+ index === currentImageIndex
118
+ ? "selected"
119
+ : "greyed-out"
120
+ } ${
121
+ index === 0
122
+ ? "ms-1"
123
+ : index === prop.pictureUrls.length - 1
124
+ ? "me-1"
125
+ : ""
126
+ }`}
127
+ onClick={() => {
128
+ setCurrentImageIndex(index);
129
+ imageListRef.current!.scrollTo({
130
+ left: index * 150,
131
+ behavior: "smooth",
132
+ });
133
+ }}
134
+ role="button"
135
+ >
136
+ <img
137
+ src={picture.url}
138
+ alt={`Image ${index + 1}`}
139
+ className="col-12 h-100 rounded-3 object-fit-cover"
140
+ />
141
+ </div>
142
+ ))}
143
+ </div>
144
+ )}
145
+ </div>
146
+ <div
147
+ className="col-1 h-100 d-flex position-absolute end-0 top-0"
148
+ onClick={() => handleArrowClickInMainImage("right")}
149
+ role="button"
150
+ >
151
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
152
+ <img
153
+ src={iconArrowRight}
154
+ className="arroIconColour "
155
+ alt="Right Arrow"
156
+ />
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
163
+ <div className="col-7 col-lg-6 d-flex flex-row">
164
+ <div
165
+ className="col-lg-4 col-4 py-0 px-1"
166
+ role="button"
167
+ onClick={toggleAllPhotos}
168
+ >
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
175
+ className="col-lg-4 col-3 py-0 px-1"
176
+ role="button"
177
+ onClick={floorPlanClickHandler}
178
+ >
179
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
180
+ <img src={iconLayers} alt="Layers Icon" />
181
+ <span className="listImgText">Grundriss</span>
182
+ </div>
183
+ </div>
184
+ <div
185
+ className="col-lg-4 col-3 py-0 px-1"
186
+ role="button"
187
+ onClick={() =>
188
+ window.scrollTo({
189
+ top: document.documentElement.scrollHeight,
190
+ })
191
+ }
192
+ >
193
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
194
+ <img src={iconMap} alt="Map Icon" />
195
+ <span className="listImgText">Karte</span>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ {/* Popup for all photos */}
202
+ {isImagePopupOpen && <ImageListPopup pictureUrls={prop.pictureUrls} />}
203
+
204
+ {/* Popup for floor plan */}
205
+ {isFloorPlanPopupOpen && (
206
+ <FloorPlanPopup
207
+ contentUrl={prop.floorPlanUrl}
208
+ onCloseClick={floorPlanPopupCloseHandler}
209
+ />
210
+ )}
211
+ </div>
212
+ );
213
+ }