nestiq-component-library 1.0.13 → 1.0.15

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 (6) hide show
  1. package/dist/index.es.js +1 -1
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/assets/images/icon-close-white.webp +0 -0
  5. package/src/components/ImageListPopup/ImageListPopup.tsx +203 -84
  6. package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +2 -2
package/dist/index.es.js CHANGED
@@ -98,7 +98,7 @@ function PropertyDetailsHeader(props) {
98
98
  React.createElement("div", { className: "header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 " },
99
99
  React.createElement("strong", null, "Einziehen ohne einen Pinselstrich - Kernsaniertes Einfamilienhaus in top Lage")),
100
100
  React.createElement("div", { className: "header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4" },
101
- React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "vector me-2" }),
101
+ React.createElement("img", { src: locationIcon, className: "vector me-2" }),
102
102
  React.createElement("div", { className: "propText text-truncate col-lg-6 col-md-6 d-flex align-items-center" }, props.property.city)),
103
103
  React.createElement("div", { className: "d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4" },
104
104
  React.createElement("img", { src: ShareIcon, className: "v_share me-3", onClick: handlePopUp })),
package/dist/index.js CHANGED
@@ -100,7 +100,7 @@ function PropertyDetailsHeader(props) {
100
100
  React.createElement("div", { className: "header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 " },
101
101
  React.createElement("strong", null, "Einziehen ohne einen Pinselstrich - Kernsaniertes Einfamilienhaus in top Lage")),
102
102
  React.createElement("div", { className: "header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4" },
103
- React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "vector me-2" }),
103
+ React.createElement("img", { src: locationIcon, className: "vector me-2" }),
104
104
  React.createElement("div", { className: "propText text-truncate col-lg-6 col-md-6 d-flex align-items-center" }, props.property.city)),
105
105
  React.createElement("div", { className: "d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4" },
106
106
  React.createElement("img", { src: ShareIcon, className: "v_share me-3", onClick: handlePopUp })),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nestiq-component-library",
3
- "version": "1.0.13",
3
+ "version": "1.0.15",
4
4
  "type": "module",
5
5
  "description": "",
6
6
  "main": "dist/index.js",
package/src/components/ImageListPopup/ImageListPopup.tsx CHANGED
@@ -1,100 +1,219 @@
1
- import React, { useState } from "react";
2
- import "bootstrap/dist/css/bootstrap.min.css";
3
1
  import "./ImageListPopup.css";
4
- import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
5
- import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
2
+ import React, { useEffect, useRef, useState } from "react";
3
+ // import icon_checkmark from "../../../assets/Images/icon_checkmark.svg";
4
+ import blcIconArrowRight from "../../../../../assets/Images/blackarrow-Right.svg";
5
+ import blcIconArrowLeft from "../../../../../assets/Images/blckarrow-Left.svg";
6
+ import iconClose from "../../assets/images/icon_close_2.png";
6
7
 
7
- interface Image {
8
- src: string;
9
- title: string;
8
+ interface PopupProps {
9
+ property: {
10
+ city: string;
11
+ constructedArea: string;
12
+ rooms: string;
13
+ propertyArea: string;
14
+ askingPrice: string;
15
+ };
16
+ handleArrowClickInMainImage: any;
17
+ pictureUrls: any[];
18
+ currentImageIndex: number;
19
+ imageListRef: any;
10
20
  }
11
21
 
12
- interface ImageListPopupProps {
13
- images: Image[];
14
- onClose: () => void;
15
- }
22
+ export default function ImageListPopup(props: PopupProps) {
23
+ const [showPopUp, setShowPopUp] = useState(true);
24
+ // const { id } = useParams();
25
+ const [mainImage, setMainImage] = useState(null);
26
+ const [currentImageIndex, setCurrentImageIndex] = useState(0);
27
+ // const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
28
+ const imageListRef = useRef(null);
16
29
 
17
- const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
18
- const [currentIndex, setCurrentIndex] = useState(0);
30
+ // const baseUrl = "https://api-dev.nestiq.de";
31
+ // const pictureUrls = props.property.pictures.map(
32
+ // (picture) => `${baseUrl}${picture.contentUrl}`
33
+ // );
34
+ const imagePopupData = props.pictureUrls.map((pic) => {
35
+ return {
36
+ src: pic,
37
+ title: "Not Specified",
38
+ };
39
+ });
19
40
 
20
- const handlePrevious = () => {
21
- setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
22
- };
41
+ useEffect(() => {
42
+ if (props.pictureUrls.length > 0) {
43
+ setMainImage(props.pictureUrls[0]);
44
+ }
45
+ }, [props.pictureUrls]);
46
+
47
+ const handleArrowClickInMainImage = (direction: any) => {
48
+ if (!props.property || props.pictureUrls.length === 0) return;
49
+
50
+ let newIndex = currentImageIndex;
51
+ if (direction === "left") {
52
+ newIndex =
53
+ (currentImageIndex - 1 + props.pictureUrls.length) %
54
+ props.pictureUrls.length;
55
+ } else if (direction === "right") {
56
+ newIndex = (currentImageIndex + 1) % props.pictureUrls.length;
57
+ }
58
+
59
+ setCurrentImageIndex(newIndex);
60
+ setMainImage(props.pictureUrls[newIndex]);
23
61
 
24
- const handleNext = () => {
25
- setCurrentIndex((prevIndex) =>
26
- prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
27
- );
62
+ props.imageListRef.current.scrollTo({
63
+ left: newIndex * 150,
64
+ behavior: "smooth",
65
+ });
28
66
  };
67
+ useEffect(() => {
68
+ if (props.pictureUrls.length > 0) {
69
+ setMainImage(props.pictureUrls[0]);
70
+ }
71
+ }, [props.pictureUrls]);
29
72
 
30
- const handleThumbnailClick = (index: number) => {
31
- setCurrentIndex(index);
73
+ const handleClose = () => {
74
+ setShowPopUp(false);
32
75
  };
33
76
 
34
77
  return (
35
- <div className="popup-overlay">
36
- <div className="popup-container">
37
- <div className="popup-header">
38
- <span className="popup-title">{images[currentIndex].title}</span>
39
- <button className="btn-close" onClick={onClose}></button>
40
- </div>
41
- <div className="popup-body">
42
- <div
43
- className="rounded-circle border btn-prev"
44
- role="button"
45
- onClick={handlePrevious}
46
- >
47
- <img
48
- src={blcIconArrowLeft}
49
- className="blackArrow"
50
- alt="Left Arrow"
51
- ></img>
52
- </div>
53
- {/*<button*/}
54
- {/* className="btn-prev"*/}
55
- {/* onClick={handlePrevious}*/}
56
- {/* disabled={currentIndex === 0}*/}
57
- {/*>*/}
58
- {/* &lt;*/}
59
- {/*</button>*/}
60
- <img
61
- src={images[currentIndex].src}
62
- alt={images[currentIndex].title}
63
- className="main-image"
64
- />
65
- <div
66
- className="rounded-circle border btn-next"
67
- role="button"
68
- onClick={handleNext}
69
- >
70
- <img
71
- src={blcIconArrowRight}
72
- className="blackArrow"
73
- alt="Right Arrow"
74
- ></img>
78
+ <div>
79
+ {showPopUp && (
80
+ <div className="popup-overlay">
81
+ <div className=" d-flex flex-column col-6 ">
82
+ <div className="d-flex align-self-end me-0 ms-5">
83
+ <img
84
+ src={iconClose}
85
+ alt="close"
86
+ className="closeIcon "
87
+ onClick={handleClose}
88
+ />
89
+ </div>
90
+
91
+ <div className="d-flex justify-content-center">
92
+ <div className="p-2 bd-highlight align-self-center align-items-center me-5">
93
+ <div
94
+ className="rounded-circle border onImageArrow start-0 d-flex "
95
+ role="button"
96
+ onClick={() => props.handleArrowClickInMainImage("left")}
97
+ >
98
+ <img
99
+ src={blcIconArrowLeft}
100
+ className="blackArrow align-self-center"
101
+ alt="Left Arrow"
102
+ />
103
+ </div>
104
+ </div>
105
+ <div className="p-2 bd-highlight">
106
+ <div
107
+ className=" rounded-5 mainImage "
108
+ style={{
109
+ backgroundImage: `url(${
110
+ props.pictureUrls[props.currentImageIndex]
111
+ })`,
112
+ height: "350px",
113
+ width: "600px",
114
+ backgroundSize: "cover",
115
+ backgroundPosition: "center",
116
+ }}
117
+ ></div>
118
+ </div>
119
+ <div className="p-2 bd-highlight align-self-center ms-5">
120
+ {" "}
121
+ <div
122
+ role="button"
123
+ className="rounded-circle border onImageArrow d-flex justify-content-center"
124
+ onClick={() => props.handleArrowClickInMainImage("right")}
125
+ >
126
+ <img
127
+ src={blcIconArrowRight}
128
+ className="blackArrow align-self-center"
129
+ alt="Right Arrow"
130
+ />
131
+ </div>
132
+ </div>
133
+ </div>
134
+ {/* <div className="d-flex flex-column">
135
+ <div className=" d-flex flex-row align-self-center ">
136
+ <img
137
+ src={LeftArrow}
138
+ alt="close"
139
+ className="w-100 h-100 align-self-center me-5 "
140
+ />
141
+ <img src={house} alt="close" className="w-100 h-100 " />
142
+ <img
143
+ src={RightArrow}
144
+ alt="close"
145
+ className="w-100 h-100 align-self-center ms-5 "
146
+ />
147
+ </div>
148
+ </div> */}
149
+ <div className="d-flex flex-row">
150
+ {/* Arrows on the main image */}
151
+ </div>
152
+ <div className="d-flex flex-row gap-4 w-100 secondList ">
153
+ <div className="col-lg-12 d-flex flex-row p-1 align-self-center mt-5">
154
+ <div className="col-12 position-relative d-flex justify-content-center">
155
+ {/* <div
156
+ className="col-1 h-100 d-flex position-absolute start-0"
157
+ onClick={() => handleArrowClickInMainImage("left")}
158
+ role="button"
159
+ >
160
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
161
+ <img
162
+ src={iconArrowLeft}
163
+ className="arroIconColour"
164
+ alt="Left Arrow"
165
+ />
166
+ </div>
167
+ </div> */}
168
+ <div
169
+ className="col-lg-10 rounded-3 h-100 w-100 d-flex flex-row gap-2 overflow-auto "
170
+ ref={props.imageListRef}
171
+ >
172
+ {props.property && (
173
+ <div className="col-lg-5 h-100 w-25 d-flex gap-4 flex-row rounded-3">
174
+ {props.pictureUrls.map((imageUrl, index) => (
175
+ <div
176
+ key={index}
177
+ className="col-lg-12 h-100 d-flex"
178
+ onClick={() => {
179
+ setMainImage(imageUrl);
180
+ setCurrentImageIndex(index);
181
+ props.imageListRef.current.scrollTo({
182
+ left: index * 150,
183
+ behavior: "smooth",
184
+ });
185
+ }}
186
+ role="button"
187
+ >
188
+ <img
189
+ src={imageUrl}
190
+ alt={`Image ${index + 1}`}
191
+ className="col-12 h-100 rounded-3 object-fit-cover"
192
+ />
193
+ </div>
194
+ ))}
195
+ </div>
196
+ )}
197
+ </div>
198
+ {/* <div
199
+ className="col-1 h-100 d-flex position-absolute end-0 top-0"
200
+ onClick={() => handleArrowClickInMainImage("right")}
201
+ role="button"
202
+ >
203
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
204
+ <img
205
+ src={iconArrowRight}
206
+ className="arroIconColour"
207
+ alt="Right Arrow"
208
+ />
209
+ </div>
210
+ </div> */}
211
+ </div>
212
+ </div>
213
+ </div>
75
214
  </div>
76
- {/*<button*/}
77
- {/* className="btn-next"*/}
78
- {/* onClick={handleNext}*/}
79
- {/* disabled={currentIndex === images.length - 1}*/}
80
- {/*>*/}
81
- {/* &gt;*/}
82
- {/*</button>*/}
83
215
  </div>
84
- <div className="popup-thumbnails">
85
- {images.map((image, index) => (
86
- <img
87
- key={index}
88
- src={image.src}
89
- alt={image.title}
90
- className={`thumbnail ${index === currentIndex ? "active" : ""}`}
91
- onClick={() => handleThumbnailClick(index)}
92
- />
93
- ))}
94
- </div>
95
- </div>
216
+ )}
96
217
  </div>
97
218
  );
98
- };
99
-
100
- export default ImageListPopup;
219
+ }
package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx CHANGED
@@ -31,7 +31,7 @@ export default function PropertyDetailsHeader(props: PopupProps) {
31
31
  </strong>
32
32
  </div>
33
33
  <div className="header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4">
34
- <img src={locationIcon} alt="Location Icon" className="vector me-2" />
34
+ <img src={locationIcon} className="vector me-2" />
35
35
 
36
36
  <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
37
37
  {props.property.city}
@@ -44,7 +44,7 @@ export default function PropertyDetailsHeader(props: PopupProps) {
44
44
  <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
45
  {props && (
46
46
  <div className=" propText col-lg-3 col-md-3 h-100 d-flex align-items-center justify-content-center ">
47
- {props.property.askingPrice} € <br />
47
+ {props.property.askingPrice} <br />
48
48
  Kaufpreis
49
49
  </div>
50
50
  )}