@tripian/react 9.1.54 → 9.1.55
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/index.js +18 -3
- package/index.js.map +1 -1
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -58373,9 +58373,25 @@ const translateTagForViator = (tag, t) => {
|
|
|
58373
58373
|
};
|
|
58374
58374
|
const TourCard = ({ title, price, currency = '$', rating, reviewCount, images, tags, provider, onBook, t }) => {
|
|
58375
58375
|
const [activeSlideIndex, setActiveSlideIndex] = (0, react_1.useState)(0);
|
|
58376
|
-
const [isImageLoading, setIsImageLoading] = (0, react_1.useState)(
|
|
58376
|
+
const [isImageLoading, setIsImageLoading] = (0, react_1.useState)(false);
|
|
58377
|
+
const imageRef = (0, react_1.useRef)(null);
|
|
58377
58378
|
const isMobile = typeof window !== 'undefined' && window.matchMedia('(max-width: 768px)').matches;
|
|
58378
58379
|
const currentImageUrl = images.length > 0 ? images[activeSlideIndex] : '';
|
|
58380
|
+
(0, react_1.useEffect)(() => {
|
|
58381
|
+
if (imageRef.current) {
|
|
58382
|
+
const img = new Image();
|
|
58383
|
+
img.src = currentImageUrl;
|
|
58384
|
+
if (img.complete) {
|
|
58385
|
+
setIsImageLoading(false);
|
|
58386
|
+
}
|
|
58387
|
+
else {
|
|
58388
|
+
setIsImageLoading(true);
|
|
58389
|
+
img.onload = () => {
|
|
58390
|
+
setIsImageLoading(false);
|
|
58391
|
+
};
|
|
58392
|
+
}
|
|
58393
|
+
}
|
|
58394
|
+
}, [currentImageUrl]);
|
|
58379
58395
|
const priceSymbol = (0, react_1.useMemo)(() => {
|
|
58380
58396
|
if (currency === 'USD')
|
|
58381
58397
|
return '$';
|
|
@@ -58398,7 +58414,6 @@ const TourCard = ({ title, price, currency = '$', rating, reviewCount, images, t
|
|
|
58398
58414
|
setIsImageLoading(true);
|
|
58399
58415
|
setActiveSlideIndex(index);
|
|
58400
58416
|
};
|
|
58401
|
-
const handleImageLoad = () => setIsImageLoading(false);
|
|
58402
58417
|
return (react_1.default.createElement("div", { className: "group mb-4 flex flex-row overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm transition-all duration-300 hover:shadow-md cursor-pointer md:cursor-default", onKeyDown: () => { }, role: "button", tabIndex: 0, onClick: (e) => {
|
|
58403
58418
|
e.stopPropagation();
|
|
58404
58419
|
if (isMobile && onBook)
|
|
@@ -58406,7 +58421,7 @@ const TourCard = ({ title, price, currency = '$', rating, reviewCount, images, t
|
|
|
58406
58421
|
} },
|
|
58407
58422
|
react_1.default.createElement("div", { className: "relative h-[120px] sm:h-[130px] md:h-[140px] lg:h-[180px] w-[120px] sm:w-[140px] md:w-[180px] lg:w-[260px] flex-shrink-0 overflow-hidden" },
|
|
58408
58423
|
react_1.default.createElement("div", { className: "relative w-full h-full" }, currentImageUrl ? (react_1.default.createElement("div", { className: "relative w-full h-full" },
|
|
58409
|
-
react_1.default.createElement("img", { src: currentImageUrl, alt: title, className: `h-full w-full object-cover transition-all duration-300 ease-in-out rounded-r-
|
|
58424
|
+
react_1.default.createElement("img", { ref: imageRef, src: currentImageUrl, alt: title, className: `h-full w-full object-cover transition-all duration-300 ease-in-out rounded-r-2xv ${isImageLoading ? 'opacity-40' : 'opacity-100'}`, loading: "lazy" }),
|
|
58410
58425
|
isImageLoading && (react_1.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-black/10" },
|
|
58411
58426
|
react_1.default.createElement("div", { className: "w-10 h-10 border-[3px] border-white border-t-transparent rounded-full animate-spin shadow-md" }))),
|
|
58412
58427
|
images.length > 1 && (react_1.default.createElement(react_1.default.Fragment, null,
|