@blaze-cms/react-page-builder 0.140.3 → 0.141.0-alpha.1
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/CHANGELOG.md +38 -0
- package/README.md +23 -0
- package/lib/components/BlazeLink.js +6 -2
- package/lib/components/BlazeLink.js.map +1 -1
- package/lib/components/Card/Card.js.map +1 -1
- package/lib/components/ContentGroup/ContentGroupTabs.js +10 -8
- package/lib/components/ContentGroup/ContentGroupTabs.js.map +1 -1
- package/lib/components/Image/ImageRender.js +4 -2
- package/lib/components/Image/ImageRender.js.map +1 -1
- package/lib/components/List/ListRender.js +10 -1
- package/lib/components/List/ListRender.js.map +1 -1
- package/lib/components/List/components/Header/ListHeader.js +5 -2
- package/lib/components/List/components/Header/ListHeader.js.map +1 -1
- package/lib/components/List/components/Pagination/Classic.js +2 -2
- package/lib/components/List/components/Pagination/Classic.js.map +1 -1
- package/lib/components/List/components/Pagination/LoadMore.js +2 -1
- package/lib/components/List/components/Pagination/LoadMore.js.map +1 -1
- package/lib/components/List/helpers/build-pagination-items.js +2 -1
- package/lib/components/List/helpers/build-pagination-items.js.map +1 -1
- package/lib/components/List/helpers/build-query-booster.js +57 -0
- package/lib/components/List/helpers/build-query-booster.js.map +1 -0
- package/lib/components/List/helpers/index.js +7 -0
- package/lib/components/List/helpers/index.js.map +1 -1
- package/lib/components/Menu/Menu.js +6 -6
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib/components/MenuItem/MenuItem.js +2 -1
- package/lib/components/MenuItem/MenuItem.js.map +1 -1
- package/lib/components/SearchFilter/components/Select.js +1 -0
- package/lib/components/SearchFilter/components/Select.js.map +1 -1
- package/lib/components/SearchFilterSort/SearchFilterSort.js +1 -0
- package/lib/components/SearchFilterSort/SearchFilterSort.js.map +1 -1
- package/lib/components/SocialFollow/SFItem.js +4 -3
- package/lib/components/SocialFollow/SFItem.js.map +1 -1
- package/lib/components/Video/providers/Default.js +13 -7
- package/lib/components/Video/providers/Default.js.map +1 -1
- package/lib/components/Video/providers/get-provider.js +5 -0
- package/lib/components/Video/providers/get-provider.js.map +1 -1
- package/lib/hooks/helpers/getVariant.js.map +1 -1
- package/lib/hooks/index.js +7 -0
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/use-app-sync-event-hook.js +31 -0
- package/lib/hooks/use-app-sync-event-hook.js.map +1 -0
- package/lib/utils/variant-handler.js +2 -1
- package/lib/utils/variant-handler.js.map +1 -1
- package/lib/variants/HeroImage/index.js +29 -0
- package/lib/variants/HeroImage/index.js.map +1 -0
- package/lib/variants/Infographic/Infographic.js +27 -0
- package/lib/variants/Infographic/Infographic.js.map +1 -0
- package/lib/variants/Infographic/index.js +41 -0
- package/lib/variants/Infographic/index.js.map +1 -0
- package/lib/variants/Infographic/useInfographic.js +43 -0
- package/lib/variants/Infographic/useInfographic.js.map +1 -0
- package/lib/variants/LongformGallery/LongformGallery.js +53 -0
- package/lib/variants/LongformGallery/LongformGallery.js.map +1 -0
- package/lib/variants/LongformGallery/LongformGalleryImage.js +71 -0
- package/lib/variants/LongformGallery/LongformGalleryImage.js.map +1 -0
- package/lib/variants/LongformGallery/constants.js +19 -0
- package/lib/variants/LongformGallery/constants.js.map +1 -0
- package/lib/variants/LongformGallery/helpers/index.js +29 -0
- package/lib/variants/LongformGallery/helpers/index.js.map +1 -0
- package/lib/variants/LongformGallery/helpers/parseImageData.js +42 -0
- package/lib/variants/LongformGallery/helpers/parseImageData.js.map +1 -0
- package/lib/variants/LongformGallery/helpers/separateImages.js +36 -0
- package/lib/variants/LongformGallery/helpers/separateImages.js.map +1 -0
- package/lib/variants/LongformGallery/helpers/shouldSkip.js +13 -0
- package/lib/variants/LongformGallery/helpers/shouldSkip.js.map +1 -0
- package/lib/variants/LongformGallery/index.js +43 -0
- package/lib/variants/LongformGallery/index.js.map +1 -0
- package/lib/variants/LongformGallery/useLongformGallery.js +58 -0
- package/lib/variants/LongformGallery/useLongformGallery.js.map +1 -0
- package/lib/variants/LongformRow/index.js +29 -0
- package/lib/variants/LongformRow/index.js.map +1 -0
- package/lib/variants/ParallaxImageTextRight/index.js +30 -0
- package/lib/variants/ParallaxImageTextRight/index.js.map +1 -0
- package/lib/variants/ThumbnailCarousel/ThumbnailCarousel.js +63 -0
- package/lib/variants/ThumbnailCarousel/ThumbnailCarousel.js.map +1 -0
- package/lib/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js +37 -0
- package/lib/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js.map +1 -0
- package/lib/variants/ThumbnailCarousel/ThumbnailImage/index.js +11 -0
- package/lib/variants/ThumbnailCarousel/ThumbnailImage/index.js.map +1 -0
- package/lib/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js +69 -0
- package/lib/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js.map +1 -0
- package/lib/variants/ThumbnailCarousel/index.js +41 -0
- package/lib/variants/ThumbnailCarousel/index.js.map +1 -0
- package/lib/variants/ThumbnailCarousel/useThumbnailCarousel.js +66 -0
- package/lib/variants/ThumbnailCarousel/useThumbnailCarousel.js.map +1 -0
- package/lib/variants/index.js +15 -1
- package/lib/variants/index.js.map +1 -1
- package/lib-es/components/BlazeLink.js +6 -2
- package/lib-es/components/BlazeLink.js.map +1 -1
- package/lib-es/components/Card/Card.js.map +1 -1
- package/lib-es/components/ContentGroup/ContentGroupTabs.js +10 -8
- package/lib-es/components/ContentGroup/ContentGroupTabs.js.map +1 -1
- package/lib-es/components/Image/ImageRender.js +4 -2
- package/lib-es/components/Image/ImageRender.js.map +1 -1
- package/lib-es/components/List/ListRender.js +11 -1
- package/lib-es/components/List/ListRender.js.map +1 -1
- package/lib-es/components/List/components/Header/ListHeader.js +5 -2
- package/lib-es/components/List/components/Header/ListHeader.js.map +1 -1
- package/lib-es/components/List/components/Pagination/Classic.js +2 -2
- package/lib-es/components/List/components/Pagination/Classic.js.map +1 -1
- package/lib-es/components/List/components/Pagination/LoadMore.js +2 -1
- package/lib-es/components/List/components/Pagination/LoadMore.js.map +1 -1
- package/lib-es/components/List/helpers/build-pagination-items.js +2 -1
- package/lib-es/components/List/helpers/build-pagination-items.js.map +1 -1
- package/lib-es/components/List/helpers/build-query-booster.js +41 -0
- package/lib-es/components/List/helpers/build-query-booster.js.map +1 -0
- package/lib-es/components/List/helpers/index.js +1 -0
- package/lib-es/components/List/helpers/index.js.map +1 -1
- package/lib-es/components/Menu/Menu.js +6 -6
- package/lib-es/components/Menu/Menu.js.map +1 -1
- package/lib-es/components/MenuItem/MenuItem.js +2 -1
- package/lib-es/components/MenuItem/MenuItem.js.map +1 -1
- package/lib-es/components/SearchFilter/components/Select.js +1 -0
- package/lib-es/components/SearchFilter/components/Select.js.map +1 -1
- package/lib-es/components/SearchFilterSort/SearchFilterSort.js +1 -0
- package/lib-es/components/SearchFilterSort/SearchFilterSort.js.map +1 -1
- package/lib-es/components/SocialFollow/SFItem.js +4 -3
- package/lib-es/components/SocialFollow/SFItem.js.map +1 -1
- package/lib-es/components/Video/providers/Default.js +14 -7
- package/lib-es/components/Video/providers/Default.js.map +1 -1
- package/lib-es/components/Video/providers/get-provider.js +2 -1
- package/lib-es/components/Video/providers/get-provider.js.map +1 -1
- package/lib-es/hooks/helpers/getVariant.js.map +1 -1
- package/lib-es/hooks/index.js +1 -0
- package/lib-es/hooks/index.js.map +1 -1
- package/lib-es/hooks/use-app-sync-event-hook.js +25 -0
- package/lib-es/hooks/use-app-sync-event-hook.js.map +1 -0
- package/lib-es/utils/variant-handler.js +2 -1
- package/lib-es/utils/variant-handler.js.map +1 -1
- package/lib-es/variants/HeroImage/index.js +10 -0
- package/lib-es/variants/HeroImage/index.js.map +1 -0
- package/lib-es/variants/Infographic/Infographic.js +20 -0
- package/lib-es/variants/Infographic/Infographic.js.map +1 -0
- package/lib-es/variants/Infographic/index.js +10 -0
- package/lib-es/variants/Infographic/index.js.map +1 -0
- package/lib-es/variants/Infographic/useInfographic.js +23 -0
- package/lib-es/variants/Infographic/useInfographic.js.map +1 -0
- package/lib-es/variants/LongformGallery/LongformGallery.js +40 -0
- package/lib-es/variants/LongformGallery/LongformGallery.js.map +1 -0
- package/lib-es/variants/LongformGallery/LongformGalleryImage.js +59 -0
- package/lib-es/variants/LongformGallery/LongformGalleryImage.js.map +1 -0
- package/lib-es/variants/LongformGallery/constants.js +18 -0
- package/lib-es/variants/LongformGallery/constants.js.map +1 -0
- package/lib-es/variants/LongformGallery/helpers/index.js +5 -0
- package/lib-es/variants/LongformGallery/helpers/index.js.map +1 -0
- package/lib-es/variants/LongformGallery/helpers/parseImageData.js +26 -0
- package/lib-es/variants/LongformGallery/helpers/parseImageData.js.map +1 -0
- package/lib-es/variants/LongformGallery/helpers/separateImages.js +25 -0
- package/lib-es/variants/LongformGallery/helpers/separateImages.js.map +1 -0
- package/lib-es/variants/LongformGallery/helpers/shouldSkip.js +3 -0
- package/lib-es/variants/LongformGallery/helpers/shouldSkip.js.map +1 -0
- package/lib-es/variants/LongformGallery/index.js +12 -0
- package/lib-es/variants/LongformGallery/index.js.map +1 -0
- package/lib-es/variants/LongformGallery/useLongformGallery.js +47 -0
- package/lib-es/variants/LongformGallery/useLongformGallery.js.map +1 -0
- package/lib-es/variants/LongformRow/index.js +10 -0
- package/lib-es/variants/LongformRow/index.js.map +1 -0
- package/lib-es/variants/ParallaxImageTextRight/index.js +11 -0
- package/lib-es/variants/ParallaxImageTextRight/index.js.map +1 -0
- package/lib-es/variants/ThumbnailCarousel/ThumbnailCarousel.js +49 -0
- package/lib-es/variants/ThumbnailCarousel/ThumbnailCarousel.js.map +1 -0
- package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js +30 -0
- package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js.map +1 -0
- package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/index.js +3 -0
- package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/index.js.map +1 -0
- package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js +62 -0
- package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js.map +1 -0
- package/lib-es/variants/ThumbnailCarousel/index.js +10 -0
- package/lib-es/variants/ThumbnailCarousel/index.js.map +1 -0
- package/lib-es/variants/ThumbnailCarousel/useThumbnailCarousel.js +47 -0
- package/lib-es/variants/ThumbnailCarousel/useThumbnailCarousel.js.map +1 -0
- package/lib-es/variants/index.js +14 -1
- package/lib-es/variants/index.js.map +1 -1
- package/package.json +7 -7
- package/src/components/BlazeLink.js +23 -4
- package/src/components/Card/Card.js +0 -1
- package/src/components/ContentGroup/ContentGroupTabs.js +11 -8
- package/src/components/Image/ImageRender.js +4 -2
- package/src/components/List/ListRender.js +11 -1
- package/src/components/List/components/Header/ListHeader.js +7 -4
- package/src/components/List/components/Pagination/Classic.js +2 -2
- package/src/components/List/components/Pagination/LoadMore.js +7 -2
- package/src/components/List/helpers/build-pagination-items.js +2 -1
- package/src/components/List/helpers/build-query-booster.js +35 -0
- package/src/components/List/helpers/index.js +1 -0
- package/src/components/Menu/Menu.js +6 -7
- package/src/components/MenuItem/MenuItem.js +5 -2
- package/src/components/SearchFilter/components/Select.js +1 -0
- package/src/components/SearchFilterSort/SearchFilterSort.js +1 -0
- package/src/components/SocialFollow/SFItem.js +8 -2
- package/src/components/Video/providers/Default.js +12 -6
- package/src/components/Video/providers/get-provider.js +2 -1
- package/src/hooks/helpers/getVariant.js +1 -0
- package/src/hooks/index.js +1 -0
- package/src/hooks/use-app-sync-event-hook.js +19 -0
- package/src/utils/variant-handler.js +2 -1
- package/src/variants/HeroImage/index.js +8 -0
- package/src/variants/Infographic/Infographic.js +14 -0
- package/src/variants/Infographic/index.js +12 -0
- package/src/variants/Infographic/useInfographic.js +18 -0
- package/src/variants/LongformGallery/LongformGallery.js +47 -0
- package/src/variants/LongformGallery/LongformGalleryImage.js +65 -0
- package/src/variants/LongformGallery/constants.js +21 -0
- package/src/variants/LongformGallery/helpers/index.js +5 -0
- package/src/variants/LongformGallery/helpers/parseImageData.js +25 -0
- package/src/variants/LongformGallery/helpers/separateImages.js +38 -0
- package/src/variants/LongformGallery/helpers/shouldSkip.js +3 -0
- package/src/variants/LongformGallery/index.js +13 -0
- package/src/variants/LongformGallery/useLongformGallery.js +41 -0
- package/src/variants/LongformRow/index.js +8 -0
- package/src/variants/ParallaxImageTextRight/index.js +9 -0
- package/src/variants/ThumbnailCarousel/ThumbnailCarousel.js +51 -0
- package/src/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js +26 -0
- package/src/variants/ThumbnailCarousel/ThumbnailImage/index.js +3 -0
- package/src/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js +61 -0
- package/src/variants/ThumbnailCarousel/index.js +12 -0
- package/src/variants/ThumbnailCarousel/useThumbnailCarousel.js +42 -0
- package/src/variants/index.js +15 -1
- package/tests/unit/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap +3 -0
- package/tests/unit/src/components/Button.test.js +2 -2
- package/tests/unit/src/components/Card/__snapshots__/Card.test.js.snap +13 -0
- package/tests/unit/src/components/Card/__snapshots__/CardContainer.test.js.snap +8 -0
- package/tests/unit/src/components/ContentGroup/__snapshots__/ContentGroupTabs.test.js.snap +2 -0
- package/tests/unit/src/components/Image/GlobalLightbox/__snapshots__/GlobalLightbox.test.js.snap +1 -0
- package/tests/unit/src/components/Image/__snapshots__/Image.test.js.snap +3 -0
- package/tests/unit/src/components/Image/__snapshots__/ImageFactory.test.js.snap +4 -0
- package/tests/unit/src/components/List/ListRender.test.js +9 -0
- package/tests/unit/src/components/List/components/Header/__snapshots__/ListHeader.test.js.snap +5 -0
- package/tests/unit/src/components/List/components/Pagination/__snapshots__/Classic.test.js.snap +8 -2
- package/tests/unit/src/components/List/components/Pagination/__snapshots__/ListPagination.test.js.snap +5 -1
- package/tests/unit/src/components/List/components/Pagination/__snapshots__/LoadMore.test.js.snap +1 -1
- package/tests/unit/src/components/List/helpers/__snapshots__/build-pagination-items.test.js.snap +21 -0
- package/tests/unit/src/components/List/helpers/build-query-booster.test.js +33 -0
- package/tests/unit/src/components/MenuItem/__snapshots__/MenuItem.test.js.snap +3 -0
- package/tests/unit/src/components/PlaceholderIcon/__snapshots__/index.test.js.snap +3 -1
- package/tests/unit/src/components/SearchFilter/components/__snapshots__/Select.test.js.snap +5 -3
- package/tests/unit/src/components/SearchFilterSort/__snapshots__/SearchFilterSort.test.js.snap +2 -1
- package/tests/unit/src/components/SocialFollow/__snapshots__/SFItem.test.js.snap +2 -2
- package/tests/unit/src/components/SocialFollow/__snapshots__/SocialFollow.test.js.snap +2 -6
- package/tests/unit/src/components/TextBlock/__snapshots__/TextBlock.test.js.snap +4 -0
- package/tests/unit/src/components/Video/providers/__snapshots__/Default.test.js.snap +111 -108
- package/tests/unit/src/components/__snapshots__/BlazeLink.test.js.snap +1 -1
- package/tests/unit/src/components/__snapshots__/Button.test.js.snap +1 -0
- package/tests/unit/src/helpers/__snapshots__/parse-textBlock.test.js.snap +1 -0
- package/tests/unit/src/helpers/parse-textBlock.test.js +3 -1
- package/tests/unit/src/hooks/use-app-sync-evet-hook.test.js +50 -0
- package/tests/unit/src/utils/variant-handler.test.js +9 -4
- package/tests/unit/src/variants/LongFormGallery/LongformGallery.test.js +42 -0
- package/tests/unit/src/variants/LongFormGallery/LongformGalleryImage.test.js +44 -0
- package/tests/unit/src/variants/LongFormGallery/__snapshots__/LongformGallery.test.js.snap +99 -0
- package/tests/unit/src/variants/LongFormGallery/__snapshots__/LongformGalleryImage.test.js.snap +51 -0
- package/tests/unit/src/variants/LongFormGallery/constants.js +37 -0
- package/tests/unit/src/variants/LongFormGallery/helpers/parseImageData.test.js +53 -0
- package/tests/unit/src/variants/LongFormGallery/helpers/separateImages.test.js +52 -0
- package/tests/unit/src/variants/LongFormGallery/helpers/shouldSkip.test.js +23 -0
- package/tests/unit/src/variants/LongFormGallery/useLongformGallery.test.js +36 -0
- package/tests/unit/src/variants/ThumbnailCarousel/ThumbnailCarousel.test.js +29 -0
- package/tests/unit/src/variants/ThumbnailCarousel/ThumbnailImage.test.js +45 -0
- package/tests/unit/src/variants/ThumbnailCarousel/__snapshots__/ThumbnailCarousel.test.js.snap +71 -0
- package/tests/unit/src/variants/ThumbnailCarousel/__snapshots__/ThumbnailImage.test.js.snap +19 -0
- package/tests/unit/src/variants/ThumbnailCarousel/mocks.js +64 -0
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
const _excluded = ["id", "url", "caption", "altText", "priority", "className", "numberOfImages", "handleImageOnClick"];
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
6
|
+
import Head from 'next/head';
|
|
7
|
+
import { useInView } from '@blaze-react/utils/lib/customHooks';
|
|
8
|
+
import { ResponsiveImage } from '@blaze-cms/image-cdn-react';
|
|
9
|
+
import { IN_VIEW_CONFIG } from './constants';
|
|
10
|
+
const LongformGalleryImage = _ref => {
|
|
11
|
+
let {
|
|
12
|
+
id,
|
|
13
|
+
url,
|
|
14
|
+
caption,
|
|
15
|
+
altText,
|
|
16
|
+
priority,
|
|
17
|
+
className,
|
|
18
|
+
numberOfImages,
|
|
19
|
+
handleImageOnClick
|
|
20
|
+
} = _ref,
|
|
21
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
22
|
+
const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
|
|
23
|
+
const shouldRender = priority || isIntersecting;
|
|
24
|
+
const HeadComponent = priority ? Head : null;
|
|
25
|
+
const sizeKey = `carousel:longform:${numberOfImages}`;
|
|
26
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
27
|
+
ref: outerRef,
|
|
28
|
+
className: `${className}`
|
|
29
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
30
|
+
role: "button",
|
|
31
|
+
className: "longform-gallery__images__image__container",
|
|
32
|
+
"data-testid": "longform-gallery__images__image__container",
|
|
33
|
+
onClick: () => handleImageOnClick(id)
|
|
34
|
+
}, shouldRender && /*#__PURE__*/React.createElement(ResponsiveImage, _extends({
|
|
35
|
+
sizeKey: sizeKey,
|
|
36
|
+
role: "button",
|
|
37
|
+
src: url,
|
|
38
|
+
alt: altText,
|
|
39
|
+
priority: priority,
|
|
40
|
+
HeadComponent: HeadComponent
|
|
41
|
+
}, props))), !!caption && /*#__PURE__*/React.createElement("div", {
|
|
42
|
+
className: "longform-gallery__images__image__details",
|
|
43
|
+
"data-testid": "longform-gallery__images__image__details"
|
|
44
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
45
|
+
className: "longform-gallery__images__image__details__caption"
|
|
46
|
+
}, caption)));
|
|
47
|
+
};
|
|
48
|
+
LongformGalleryImage.propTypes = {
|
|
49
|
+
id: PropTypes.string.isRequired,
|
|
50
|
+
url: PropTypes.string.isRequired,
|
|
51
|
+
caption: PropTypes.string.isRequired,
|
|
52
|
+
numberOfImages: PropTypes.number.isRequired,
|
|
53
|
+
altText: PropTypes.string.isRequired,
|
|
54
|
+
priority: PropTypes.bool.isRequired,
|
|
55
|
+
className: PropTypes.string.isRequired,
|
|
56
|
+
handleImageOnClick: PropTypes.func.isRequired
|
|
57
|
+
};
|
|
58
|
+
export default LongformGalleryImage;
|
|
59
|
+
//# sourceMappingURL=LongformGalleryImage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LongformGalleryImage.js","names":["React","PropTypes","Head","useInView","ResponsiveImage","IN_VIEW_CONFIG","LongformGalleryImage","_ref","id","url","caption","altText","priority","className","numberOfImages","handleImageOnClick","props","_objectWithoutProperties","_excluded","isIntersecting","outerRef","shouldRender","HeadComponent","sizeKey","createElement","ref","role","onClick","_extends","src","alt","propTypes","string","isRequired","number","bool","func"],"sources":["../../../src/variants/LongformGallery/LongformGalleryImage.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Head from 'next/head';\nimport { useInView } from '@blaze-react/utils/lib/customHooks';\nimport { ResponsiveImage } from '@blaze-cms/image-cdn-react';\nimport { IN_VIEW_CONFIG } from './constants';\n\nconst LongformGalleryImage = ({\n id,\n url,\n caption,\n altText,\n priority,\n className,\n numberOfImages,\n handleImageOnClick,\n ...props\n}) => {\n const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);\n const shouldRender = priority || isIntersecting;\n const HeadComponent = priority ? Head : null;\n const sizeKey = `carousel:longform:${numberOfImages}`;\n\n return (\n <div ref={outerRef} className={`${className}`}>\n <div\n role=\"button\"\n className=\"longform-gallery__images__image__container\"\n data-testid=\"longform-gallery__images__image__container\"\n onClick={() => handleImageOnClick(id)}>\n {shouldRender && (\n <ResponsiveImage\n sizeKey={sizeKey}\n role=\"button\"\n src={url}\n alt={altText}\n priority={priority}\n HeadComponent={HeadComponent}\n {...props}\n />\n )}\n </div>\n {!!caption && (\n <div\n className=\"longform-gallery__images__image__details\"\n data-testid=\"longform-gallery__images__image__details\">\n <div className=\"longform-gallery__images__image__details__caption\">{caption}</div>\n </div>\n )}\n </div>\n );\n};\n\nLongformGalleryImage.propTypes = {\n id: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n caption: PropTypes.string.isRequired,\n numberOfImages: PropTypes.number.isRequired,\n altText: PropTypes.string.isRequired,\n priority: PropTypes.bool.isRequired,\n className: PropTypes.string.isRequired,\n handleImageOnClick: PropTypes.func.isRequired\n};\n\nexport default LongformGalleryImage;\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,MAAM,WAAW;AAC5B,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,eAAe,QAAQ,4BAA4B;AAC5D,SAASC,cAAc,QAAQ,aAAa;AAE5C,MAAMC,oBAAoB,GAAGC,IAAA,IAUvB;EAAA,IAVwB;MAC5BC,EAAE;MACFC,GAAG;MACHC,OAAO;MACPC,OAAO;MACPC,QAAQ;MACRC,SAAS;MACTC,cAAc;MACdC;IAEF,CAAC,GAAAR,IAAA;IADIS,KAAK,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAER,MAAM,CAACC,cAAc,EAAEC,QAAQ,CAAC,GAAGjB,SAAS,CAACE,cAAc,CAAC;EAC5D,MAAMgB,YAAY,GAAGT,QAAQ,IAAIO,cAAc;EAC/C,MAAMG,aAAa,GAAGV,QAAQ,GAAGV,IAAI,GAAG,IAAI;EAC5C,MAAMqB,OAAO,GAAI,qBAAoBT,cAAe,EAAC;EAErD,oBACEd,KAAA,CAAAwB,aAAA;IAAKC,GAAG,EAAEL,QAAS;IAACP,SAAS,EAAG,GAAEA,SAAU;EAAE,gBAC5Cb,KAAA,CAAAwB,aAAA;IACEE,IAAI,EAAC,QAAQ;IACbb,SAAS,EAAC,4CAA4C;IACtD,eAAY,4CAA4C;IACxDc,OAAO,EAAEA,CAAA,KAAMZ,kBAAkB,CAACP,EAAE;EAAE,GACrCa,YAAY,iBACXrB,KAAA,CAAAwB,aAAA,CAACpB,eAAe,EAAAwB,QAAA;IACdL,OAAO,EAAEA,OAAQ;IACjBG,IAAI,EAAC,QAAQ;IACbG,GAAG,EAAEpB,GAAI;IACTqB,GAAG,EAAEnB,OAAQ;IACbC,QAAQ,EAAEA,QAAS;IACnBU,aAAa,EAAEA;EAAc,GACzBN,KAAK,CACV,CAEA,CAAC,EACL,CAAC,CAACN,OAAO,iBACRV,KAAA,CAAAwB,aAAA;IACEX,SAAS,EAAC,0CAA0C;IACpD,eAAY;EAA0C,gBACtDb,KAAA,CAAAwB,aAAA;IAAKX,SAAS,EAAC;EAAmD,GAAEH,OAAa,CAC9E,CAEJ,CAAC;AAEV,CAAC;AAEDJ,oBAAoB,CAACyB,SAAS,GAAG;EAC/BvB,EAAE,EAAEP,SAAS,CAAC+B,MAAM,CAACC,UAAU;EAC/BxB,GAAG,EAAER,SAAS,CAAC+B,MAAM,CAACC,UAAU;EAChCvB,OAAO,EAAET,SAAS,CAAC+B,MAAM,CAACC,UAAU;EACpCnB,cAAc,EAAEb,SAAS,CAACiC,MAAM,CAACD,UAAU;EAC3CtB,OAAO,EAAEV,SAAS,CAAC+B,MAAM,CAACC,UAAU;EACpCrB,QAAQ,EAAEX,SAAS,CAACkC,IAAI,CAACF,UAAU;EACnCpB,SAAS,EAAEZ,SAAS,CAAC+B,MAAM,CAACC,UAAU;EACtClB,kBAAkB,EAAEd,SAAS,CAACmC,IAAI,CAACH;AACrC,CAAC;AAED,eAAe3B,oBAAoB"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { gql } from '@apollo/client';
|
|
2
|
+
const GET_IMAGES_QUERY = gql`
|
|
3
|
+
query getImages($where: JSON!) {
|
|
4
|
+
getImages: getFiles(where: $where) {
|
|
5
|
+
id
|
|
6
|
+
url
|
|
7
|
+
data
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
`;
|
|
11
|
+
const PROPS_TO_CHECK = ['altText', 'caption', 'hrefUrl', 'credits'];
|
|
12
|
+
const IN_VIEW_CONFIG = {
|
|
13
|
+
once: true,
|
|
14
|
+
offset: '200px',
|
|
15
|
+
bottomOffset: '-200px'
|
|
16
|
+
};
|
|
17
|
+
export { GET_IMAGES_QUERY, IN_VIEW_CONFIG, PROPS_TO_CHECK };
|
|
18
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","names":["gql","GET_IMAGES_QUERY","PROPS_TO_CHECK","IN_VIEW_CONFIG","once","offset","bottomOffset"],"sources":["../../../src/variants/LongformGallery/constants.js"],"sourcesContent":["import { gql } from '@apollo/client';\n\nconst GET_IMAGES_QUERY = gql`\n query getImages($where: JSON!) {\n getImages: getFiles(where: $where) {\n id\n url\n data\n }\n }\n`;\n\nconst PROPS_TO_CHECK = ['altText', 'caption', 'hrefUrl', 'credits'];\n\nconst IN_VIEW_CONFIG = {\n once: true,\n offset: '200px',\n bottomOffset: '-200px'\n};\n\nexport { GET_IMAGES_QUERY, IN_VIEW_CONFIG, PROPS_TO_CHECK };\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,MAAMC,gBAAgB,GAAGD,GAAI;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAME,cAAc,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;AAEnE,MAAMC,cAAc,GAAG;EACrBC,IAAI,EAAE,IAAI;EACVC,MAAM,EAAE,OAAO;EACfC,YAAY,EAAE;AAChB,CAAC;AAED,SAASL,gBAAgB,EAAEE,cAAc,EAAED,cAAc"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["parseImageData","separateImages","shouldSkip"],"sources":["../../../../src/variants/LongformGallery/helpers/index.js"],"sourcesContent":["import parseImageData from './parseImageData';\nimport separateImages from './separateImages';\nimport shouldSkip from './shouldSkip';\n\nexport { parseImageData, separateImages, shouldSkip };\n"],"mappings":"AAAA,OAAOA,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,UAAU,MAAM,cAAc;AAErC,SAASF,cAAc,EAAEC,cAAc,EAAEC,UAAU"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
import parseHTML from 'html-react-parser';
|
|
5
|
+
import { PROPS_TO_CHECK } from '../constants';
|
|
6
|
+
const parseImageData = (image, index, priorityLimit, shouldDisplayCaption) => {
|
|
7
|
+
const {
|
|
8
|
+
data = {}
|
|
9
|
+
} = image;
|
|
10
|
+
const parsedData = {};
|
|
11
|
+
PROPS_TO_CHECK.forEach(dataKey => {
|
|
12
|
+
const value = data && data[dataKey];
|
|
13
|
+
if (dataKey === 'caption') {
|
|
14
|
+
parsedData[dataKey] = shouldDisplayCaption && !!value ? parseHTML(value) : '';
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
parsedData[dataKey] = value || '';
|
|
18
|
+
});
|
|
19
|
+
return _objectSpread(_objectSpread({}, parsedData), {}, {
|
|
20
|
+
id: image.id,
|
|
21
|
+
url: image.url,
|
|
22
|
+
priority: index < priorityLimit
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
export default parseImageData;
|
|
26
|
+
//# sourceMappingURL=parseImageData.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parseImageData.js","names":["parseHTML","PROPS_TO_CHECK","parseImageData","image","index","priorityLimit","shouldDisplayCaption","data","parsedData","forEach","dataKey","value","_objectSpread","id","url","priority"],"sources":["../../../../src/variants/LongformGallery/helpers/parseImageData.js"],"sourcesContent":["import parseHTML from 'html-react-parser';\nimport { PROPS_TO_CHECK } from '../constants';\n\nconst parseImageData = (image, index, priorityLimit, shouldDisplayCaption) => {\n const { data = {} } = image;\n const parsedData = {};\n\n PROPS_TO_CHECK.forEach(dataKey => {\n const value = data && data[dataKey];\n if (dataKey === 'caption') {\n parsedData[dataKey] = shouldDisplayCaption && !!value ? parseHTML(value) : '';\n return;\n }\n parsedData[dataKey] = value || '';\n });\n\n return {\n ...parsedData,\n id: image.id,\n url: image.url,\n priority: index < priorityLimit\n };\n};\n\nexport default parseImageData;\n"],"mappings":";;;AAAA,OAAOA,SAAS,MAAM,mBAAmB;AACzC,SAASC,cAAc,QAAQ,cAAc;AAE7C,MAAMC,cAAc,GAAGA,CAACC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAEC,oBAAoB,KAAK;EAC5E,MAAM;IAAEC,IAAI,GAAG,CAAC;EAAE,CAAC,GAAGJ,KAAK;EAC3B,MAAMK,UAAU,GAAG,CAAC,CAAC;EAErBP,cAAc,CAACQ,OAAO,CAACC,OAAO,IAAI;IAChC,MAAMC,KAAK,GAAGJ,IAAI,IAAIA,IAAI,CAACG,OAAO,CAAC;IACnC,IAAIA,OAAO,KAAK,SAAS,EAAE;MACzBF,UAAU,CAACE,OAAO,CAAC,GAAGJ,oBAAoB,IAAI,CAAC,CAACK,KAAK,GAAGX,SAAS,CAACW,KAAK,CAAC,GAAG,EAAE;MAC7E;IACF;IACAH,UAAU,CAACE,OAAO,CAAC,GAAGC,KAAK,IAAI,EAAE;EACnC,CAAC,CAAC;EAEF,OAAAC,aAAA,CAAAA,aAAA,KACKJ,UAAU;IACbK,EAAE,EAAEV,KAAK,CAACU,EAAE;IACZC,GAAG,EAAEX,KAAK,CAACW,GAAG;IACdC,QAAQ,EAAEX,KAAK,GAAGC;EAAa;AAEnC,CAAC;AAED,eAAeH,cAAc"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import parseImageData from './parseImageData';
|
|
2
|
+
const buildImageGroups = (images, priorityLimit, shouldDisplayCaption) => {
|
|
3
|
+
const imageGroups = [];
|
|
4
|
+
let imageGroupIndex = 0;
|
|
5
|
+
const isDivisible = images.length % 3 === 0;
|
|
6
|
+
images.forEach((image, index) => {
|
|
7
|
+
if (!imageGroups[imageGroupIndex]) imageGroups[imageGroupIndex] = [parseImageData(image, index, priorityLimit, shouldDisplayCaption)];else imageGroups[imageGroupIndex].push(parseImageData(image, index, priorityLimit, shouldDisplayCaption));
|
|
8
|
+
if (isDivisible) {
|
|
9
|
+
if (imageGroups[imageGroupIndex].length >= 3) imageGroupIndex += 1;
|
|
10
|
+
} else {
|
|
11
|
+
if (imageGroupIndex === 0 && imageGroups[imageGroupIndex].length >= 2) {
|
|
12
|
+
imageGroupIndex += 1;
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
if (imageGroups[imageGroupIndex].length >= 3) imageGroupIndex += 1;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
return imageGroups;
|
|
19
|
+
};
|
|
20
|
+
const separateImages = (images, priorityLimit, shouldDisplayCaption) => {
|
|
21
|
+
if (!images || !images.length) return [];
|
|
22
|
+
return buildImageGroups(images, priorityLimit, shouldDisplayCaption);
|
|
23
|
+
};
|
|
24
|
+
export default separateImages;
|
|
25
|
+
//# sourceMappingURL=separateImages.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"separateImages.js","names":["parseImageData","buildImageGroups","images","priorityLimit","shouldDisplayCaption","imageGroups","imageGroupIndex","isDivisible","length","forEach","image","index","push","separateImages"],"sources":["../../../../src/variants/LongformGallery/helpers/separateImages.js"],"sourcesContent":["import parseImageData from './parseImageData';\n\nconst buildImageGroups = (images, priorityLimit, shouldDisplayCaption) => {\n const imageGroups = [];\n let imageGroupIndex = 0;\n const isDivisible = images.length % 3 === 0;\n\n images.forEach((image, index) => {\n if (!imageGroups[imageGroupIndex])\n imageGroups[imageGroupIndex] = [\n parseImageData(image, index, priorityLimit, shouldDisplayCaption)\n ];\n else\n imageGroups[imageGroupIndex].push(\n parseImageData(image, index, priorityLimit, shouldDisplayCaption)\n );\n\n if (isDivisible) {\n if (imageGroups[imageGroupIndex].length >= 3) imageGroupIndex += 1;\n } else {\n if (imageGroupIndex === 0 && imageGroups[imageGroupIndex].length >= 2) {\n imageGroupIndex += 1;\n return;\n }\n if (imageGroups[imageGroupIndex].length >= 3) imageGroupIndex += 1;\n }\n });\n\n return imageGroups;\n};\n\nconst separateImages = (images, priorityLimit, shouldDisplayCaption) => {\n if (!images || !images.length) return [];\n\n return buildImageGroups(images, priorityLimit, shouldDisplayCaption);\n};\n\nexport default separateImages;\n"],"mappings":"AAAA,OAAOA,cAAc,MAAM,kBAAkB;AAE7C,MAAMC,gBAAgB,GAAGA,CAACC,MAAM,EAAEC,aAAa,EAAEC,oBAAoB,KAAK;EACxE,MAAMC,WAAW,GAAG,EAAE;EACtB,IAAIC,eAAe,GAAG,CAAC;EACvB,MAAMC,WAAW,GAAGL,MAAM,CAACM,MAAM,GAAG,CAAC,KAAK,CAAC;EAE3CN,MAAM,CAACO,OAAO,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;IAC/B,IAAI,CAACN,WAAW,CAACC,eAAe,CAAC,EAC/BD,WAAW,CAACC,eAAe,CAAC,GAAG,CAC7BN,cAAc,CAACU,KAAK,EAAEC,KAAK,EAAER,aAAa,EAAEC,oBAAoB,CAAC,CAClE,CAAC,KAEFC,WAAW,CAACC,eAAe,CAAC,CAACM,IAAI,CAC/BZ,cAAc,CAACU,KAAK,EAAEC,KAAK,EAAER,aAAa,EAAEC,oBAAoB,CAClE,CAAC;IAEH,IAAIG,WAAW,EAAE;MACf,IAAIF,WAAW,CAACC,eAAe,CAAC,CAACE,MAAM,IAAI,CAAC,EAAEF,eAAe,IAAI,CAAC;IACpE,CAAC,MAAM;MACL,IAAIA,eAAe,KAAK,CAAC,IAAID,WAAW,CAACC,eAAe,CAAC,CAACE,MAAM,IAAI,CAAC,EAAE;QACrEF,eAAe,IAAI,CAAC;QACpB;MACF;MACA,IAAID,WAAW,CAACC,eAAe,CAAC,CAACE,MAAM,IAAI,CAAC,EAAEF,eAAe,IAAI,CAAC;IACpE;EACF,CAAC,CAAC;EAEF,OAAOD,WAAW;AACpB,CAAC;AAED,MAAMQ,cAAc,GAAGA,CAACX,MAAM,EAAEC,aAAa,EAAEC,oBAAoB,KAAK;EACtE,IAAI,CAACF,MAAM,IAAI,CAACA,MAAM,CAACM,MAAM,EAAE,OAAO,EAAE;EAExC,OAAOP,gBAAgB,CAACC,MAAM,EAAEC,aAAa,EAAEC,oBAAoB,CAAC;AACtE,CAAC;AAED,eAAeS,cAAc"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shouldSkip.js","names":["shouldSkip","ids","Array","isArray","length"],"sources":["../../../../src/variants/LongformGallery/helpers/shouldSkip.js"],"sourcesContent":["const shouldSkip = ids => !ids || (Array.isArray(ids) && !ids.length);\n\nexport default shouldSkip;\n"],"mappings":"AAAA,MAAMA,UAAU,GAAGC,GAAG,IAAI,CAACA,GAAG,IAAKC,KAAK,CAACC,OAAO,CAACF,GAAG,CAAC,IAAI,CAACA,GAAG,CAACG,MAAO;AAErE,eAAeJ,UAAU"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
import dynamic from 'next/dynamic';
|
|
5
|
+
const LongformGallery = {
|
|
6
|
+
VariantComponent: dynamic(() => import( /* webpackChunkName: "blazePbVariantLongformGallery" */'./LongformGallery')),
|
|
7
|
+
getSettings: componentSettings => _objectSpread(_objectSpread({}, componentSettings), {}, {
|
|
8
|
+
modifier: 'longformGallery'
|
|
9
|
+
})
|
|
10
|
+
};
|
|
11
|
+
export default LongformGallery;
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["dynamic","LongformGallery","VariantComponent","getSettings","componentSettings","_objectSpread","modifier"],"sources":["../../../src/variants/LongformGallery/index.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst LongformGallery = {\n VariantComponent: dynamic(() =>\n import(/* webpackChunkName: \"blazePbVariantLongformGallery\" */ './LongformGallery')\n ),\n getSettings: componentSettings => ({\n ...componentSettings,\n modifier: 'longformGallery'\n })\n};\n\nexport default LongformGallery;\n"],"mappings":";;;AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,eAAe,GAAG;EACtBC,gBAAgB,EAAEF,OAAO,CAAC,MACxB,MAAM,EAAC,uDAAwD,mBAAmB,CACpF,CAAC;EACDG,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,CAAAA,aAAA,KACzBD,iBAAiB;IACpBE,QAAQ,EAAE;EAAiB;AAE/B,CAAC;AAED,eAAeL,eAAe"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { useQuery } from '@apollo/client';
|
|
2
|
+
import { GET_IMAGES_QUERY } from './constants';
|
|
3
|
+
import { separateImages, shouldSkip } from './helpers';
|
|
4
|
+
const useLongformGallery = ({
|
|
5
|
+
imageIds = [],
|
|
6
|
+
priorityLimit = 0,
|
|
7
|
+
caption = '',
|
|
8
|
+
shouldDisplayCaption = false,
|
|
9
|
+
enableLightbox = false,
|
|
10
|
+
toggleModal = () => {},
|
|
11
|
+
handleSelectedImage = () => {}
|
|
12
|
+
}) => {
|
|
13
|
+
const skip = shouldSkip(imageIds);
|
|
14
|
+
const {
|
|
15
|
+
data,
|
|
16
|
+
loading,
|
|
17
|
+
error
|
|
18
|
+
} = useQuery(GET_IMAGES_QUERY, {
|
|
19
|
+
variables: {
|
|
20
|
+
where: {
|
|
21
|
+
id: {
|
|
22
|
+
_in: imageIds
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
skip
|
|
27
|
+
});
|
|
28
|
+
const {
|
|
29
|
+
getImages
|
|
30
|
+
} = data || {};
|
|
31
|
+
const groupedImages = separateImages(getImages, priorityLimit, shouldDisplayCaption);
|
|
32
|
+
const handleImageOnClick = clickedImageId => {
|
|
33
|
+
if (!enableLightbox) return;
|
|
34
|
+
toggleModal();
|
|
35
|
+
handleSelectedImage(clickedImageId);
|
|
36
|
+
};
|
|
37
|
+
return {
|
|
38
|
+
loading,
|
|
39
|
+
error,
|
|
40
|
+
shouldDisplayCaption,
|
|
41
|
+
caption,
|
|
42
|
+
groupedImages,
|
|
43
|
+
handleImageOnClick
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
export default useLongformGallery;
|
|
47
|
+
//# sourceMappingURL=useLongformGallery.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useLongformGallery.js","names":["useQuery","GET_IMAGES_QUERY","separateImages","shouldSkip","useLongformGallery","imageIds","priorityLimit","caption","shouldDisplayCaption","enableLightbox","toggleModal","handleSelectedImage","skip","data","loading","error","variables","where","id","_in","getImages","groupedImages","handleImageOnClick","clickedImageId"],"sources":["../../../src/variants/LongformGallery/useLongformGallery.js"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport { GET_IMAGES_QUERY } from './constants';\nimport { separateImages, shouldSkip } from './helpers';\n\nconst useLongformGallery = ({\n imageIds = [],\n priorityLimit = 0,\n caption = '',\n shouldDisplayCaption = false,\n enableLightbox = false,\n toggleModal = () => {},\n handleSelectedImage = () => {}\n}) => {\n const skip = shouldSkip(imageIds);\n\n const { data, loading, error } = useQuery(GET_IMAGES_QUERY, {\n variables: { where: { id: { _in: imageIds } } },\n skip\n });\n\n const { getImages } = data || {};\n\n const groupedImages = separateImages(getImages, priorityLimit, shouldDisplayCaption);\n\n const handleImageOnClick = clickedImageId => {\n if (!enableLightbox) return;\n toggleModal();\n handleSelectedImage(clickedImageId);\n };\n\n return {\n loading,\n error,\n shouldDisplayCaption,\n caption,\n groupedImages,\n handleImageOnClick\n };\n};\n\nexport default useLongformGallery;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,gBAAgB,QAAQ,aAAa;AAC9C,SAASC,cAAc,EAAEC,UAAU,QAAQ,WAAW;AAEtD,MAAMC,kBAAkB,GAAGA,CAAC;EAC1BC,QAAQ,GAAG,EAAE;EACbC,aAAa,GAAG,CAAC;EACjBC,OAAO,GAAG,EAAE;EACZC,oBAAoB,GAAG,KAAK;EAC5BC,cAAc,GAAG,KAAK;EACtBC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,mBAAmB,GAAGA,CAAA,KAAM,CAAC;AAC/B,CAAC,KAAK;EACJ,MAAMC,IAAI,GAAGT,UAAU,CAACE,QAAQ,CAAC;EAEjC,MAAM;IAAEQ,IAAI;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAGf,QAAQ,CAACC,gBAAgB,EAAE;IAC1De,SAAS,EAAE;MAAEC,KAAK,EAAE;QAAEC,EAAE,EAAE;UAAEC,GAAG,EAAEd;QAAS;MAAE;IAAE,CAAC;IAC/CO;EACF,CAAC,CAAC;EAEF,MAAM;IAAEQ;EAAU,CAAC,GAAGP,IAAI,IAAI,CAAC,CAAC;EAEhC,MAAMQ,aAAa,GAAGnB,cAAc,CAACkB,SAAS,EAAEd,aAAa,EAAEE,oBAAoB,CAAC;EAEpF,MAAMc,kBAAkB,GAAGC,cAAc,IAAI;IAC3C,IAAI,CAACd,cAAc,EAAE;IACrBC,WAAW,CAAC,CAAC;IACbC,mBAAmB,CAACY,cAAc,CAAC;EACrC,CAAC;EAED,OAAO;IACLT,OAAO;IACPC,KAAK;IACLP,oBAAoB;IACpBD,OAAO;IACPc,aAAa;IACbC;EACF,CAAC;AACH,CAAC;AAED,eAAelB,kBAAkB"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
const LongformRow = {
|
|
5
|
+
getSettings: componentSettings => _objectSpread(_objectSpread({}, componentSettings), {}, {
|
|
6
|
+
modifier: 'longform-row'
|
|
7
|
+
})
|
|
8
|
+
};
|
|
9
|
+
export default LongformRow;
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["LongformRow","getSettings","componentSettings","_objectSpread","modifier"],"sources":["../../../src/variants/LongformRow/index.js"],"sourcesContent":["const LongformRow = {\n getSettings: componentSettings => ({\n ...componentSettings,\n modifier: 'longform-row'\n })\n};\n\nexport default LongformRow;\n"],"mappings":";;;AAAA,MAAMA,WAAW,GAAG;EAClBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,CAAAA,aAAA,KACzBD,iBAAiB;IACpBE,QAAQ,EAAE;EAAc;AAE5B,CAAC;AAED,eAAeJ,WAAW"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
const ParallaxImageTextRight = {
|
|
5
|
+
getSettings: componentSettings => _objectSpread(_objectSpread({}, componentSettings), {}, {
|
|
6
|
+
parallax: true,
|
|
7
|
+
modifier: 'image-children-right'
|
|
8
|
+
})
|
|
9
|
+
};
|
|
10
|
+
export default ParallaxImageTextRight;
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["ParallaxImageTextRight","getSettings","componentSettings","_objectSpread","parallax","modifier"],"sources":["../../../src/variants/ParallaxImageTextRight/index.js"],"sourcesContent":["const ParallaxImageTextRight = {\n getSettings: componentSettings => ({\n ...componentSettings,\n parallax: true,\n modifier: 'image-children-right'\n })\n};\n\nexport default ParallaxImageTextRight;\n"],"mappings":";;;AAAA,MAAMA,sBAAsB,GAAG;EAC7BC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,CAAAA,aAAA,KACzBD,iBAAiB;IACpBE,QAAQ,EAAE,IAAI;IACdC,QAAQ,EAAE;EAAsB;AAEpC,CAAC;AAED,eAAeL,sBAAsB"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import useThumbnailCarousel from './useThumbnailCarousel';
|
|
4
|
+
import ThumbnailImage from './ThumbnailImage';
|
|
5
|
+
const ThumbnailCarousel = props => {
|
|
6
|
+
const {
|
|
7
|
+
thumbnailsListRef,
|
|
8
|
+
imageIds,
|
|
9
|
+
selectedImageId,
|
|
10
|
+
priorityLimit,
|
|
11
|
+
scrollToImage,
|
|
12
|
+
mainImageButtonClick
|
|
13
|
+
} = useThumbnailCarousel(props);
|
|
14
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
15
|
+
className: "thumbnail-carousel",
|
|
16
|
+
"data-testid": "thumbnail-carousel"
|
|
17
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
18
|
+
className: "thumbnail-carousel__main_image_container"
|
|
19
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
20
|
+
id: "previous-button",
|
|
21
|
+
className: "thumbnail-carousel__main_image_container__button",
|
|
22
|
+
role: "button",
|
|
23
|
+
onClick: () => mainImageButtonClick()
|
|
24
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
25
|
+
className: "arrow arrow--left"
|
|
26
|
+
})), /*#__PURE__*/React.createElement(ThumbnailImage, _extends({}, props, {
|
|
27
|
+
priority: true,
|
|
28
|
+
imageId: selectedImageId
|
|
29
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
30
|
+
id: "next-button",
|
|
31
|
+
className: "thumbnail-carousel__main_image_container__button next",
|
|
32
|
+
role: "button",
|
|
33
|
+
onClick: () => mainImageButtonClick(true)
|
|
34
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
35
|
+
className: "arrow arrow--right"
|
|
36
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
37
|
+
className: "thumbnail-carousel__list",
|
|
38
|
+
ref: thumbnailsListRef
|
|
39
|
+
}, imageIds.map((imageId, index) => /*#__PURE__*/React.createElement(ThumbnailImage, _extends({}, props, {
|
|
40
|
+
key: imageId,
|
|
41
|
+
imageIndex: index,
|
|
42
|
+
priority: index < priorityLimit,
|
|
43
|
+
imageId: imageId,
|
|
44
|
+
selectedImageId: selectedImageId,
|
|
45
|
+
scrollToImage: scrollToImage
|
|
46
|
+
})))));
|
|
47
|
+
};
|
|
48
|
+
export default ThumbnailCarousel;
|
|
49
|
+
//# sourceMappingURL=ThumbnailCarousel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThumbnailCarousel.js","names":["React","useThumbnailCarousel","ThumbnailImage","ThumbnailCarousel","props","thumbnailsListRef","imageIds","selectedImageId","priorityLimit","scrollToImage","mainImageButtonClick","createElement","className","id","role","onClick","_extends","priority","imageId","ref","map","index","key","imageIndex"],"sources":["../../../src/variants/ThumbnailCarousel/ThumbnailCarousel.js"],"sourcesContent":["import React from 'react';\nimport useThumbnailCarousel from './useThumbnailCarousel';\nimport ThumbnailImage from './ThumbnailImage';\n\nconst ThumbnailCarousel = props => {\n const {\n thumbnailsListRef,\n imageIds,\n selectedImageId,\n priorityLimit,\n scrollToImage,\n mainImageButtonClick\n } = useThumbnailCarousel(props);\n\n return (\n <div className=\"thumbnail-carousel\" data-testid=\"thumbnail-carousel\">\n <div className=\"thumbnail-carousel__main_image_container\">\n <div\n id=\"previous-button\"\n className=\"thumbnail-carousel__main_image_container__button\"\n role=\"button\"\n onClick={() => mainImageButtonClick()}>\n <div className=\"arrow arrow--left\" />\n </div>\n <ThumbnailImage {...props} priority imageId={selectedImageId} />\n <div\n id=\"next-button\"\n className=\"thumbnail-carousel__main_image_container__button next\"\n role=\"button\"\n onClick={() => mainImageButtonClick(true)}>\n <div className=\"arrow arrow--right\" />\n </div>\n </div>\n <div className=\"thumbnail-carousel__list\" ref={thumbnailsListRef}>\n {imageIds.map((imageId, index) => (\n <ThumbnailImage\n {...props}\n key={imageId}\n imageIndex={index}\n priority={index < priorityLimit}\n imageId={imageId}\n selectedImageId={selectedImageId}\n scrollToImage={scrollToImage}\n />\n ))}\n </div>\n </div>\n );\n};\n\nexport default ThumbnailCarousel;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,oBAAoB,MAAM,wBAAwB;AACzD,OAAOC,cAAc,MAAM,kBAAkB;AAE7C,MAAMC,iBAAiB,GAAGC,KAAK,IAAI;EACjC,MAAM;IACJC,iBAAiB;IACjBC,QAAQ;IACRC,eAAe;IACfC,aAAa;IACbC,aAAa;IACbC;EACF,CAAC,GAAGT,oBAAoB,CAACG,KAAK,CAAC;EAE/B,oBACEJ,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC,oBAAoB;IAAC,eAAY;EAAoB,gBAClEZ,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC;EAA0C,gBACvDZ,KAAA,CAAAW,aAAA;IACEE,EAAE,EAAC,iBAAiB;IACpBD,SAAS,EAAC,kDAAkD;IAC5DE,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAEA,CAAA,KAAML,oBAAoB,CAAC;EAAE,gBACtCV,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC;EAAmB,CAAE,CACjC,CAAC,eACNZ,KAAA,CAAAW,aAAA,CAACT,cAAc,EAAAc,QAAA,KAAKZ,KAAK;IAAEa,QAAQ;IAACC,OAAO,EAAEX;EAAgB,EAAE,CAAC,eAChEP,KAAA,CAAAW,aAAA;IACEE,EAAE,EAAC,aAAa;IAChBD,SAAS,EAAC,uDAAuD;IACjEE,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAEA,CAAA,KAAML,oBAAoB,CAAC,IAAI;EAAE,gBAC1CV,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC;EAAoB,CAAE,CAClC,CACF,CAAC,eACNZ,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC,0BAA0B;IAACO,GAAG,EAAEd;EAAkB,GAC9DC,QAAQ,CAACc,GAAG,CAAC,CAACF,OAAO,EAAEG,KAAK,kBAC3BrB,KAAA,CAAAW,aAAA,CAACT,cAAc,EAAAc,QAAA,KACTZ,KAAK;IACTkB,GAAG,EAAEJ,OAAQ;IACbK,UAAU,EAAEF,KAAM;IAClBJ,QAAQ,EAAEI,KAAK,GAAGb,aAAc;IAChCU,OAAO,EAAEA,OAAQ;IACjBX,eAAe,EAAEA,eAAgB;IACjCE,aAAa,EAAEA;EAAc,EAC9B,CACF,CACE,CACF,CAAC;AAEV,CAAC;AAED,eAAeN,iBAAiB"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import LazyImage from '../../../components/LazyImage';
|
|
3
|
+
import useThumbnailImage from './useThumbnailImage';
|
|
4
|
+
const ThumbnailImage = props => {
|
|
5
|
+
const {
|
|
6
|
+
loading,
|
|
7
|
+
error,
|
|
8
|
+
className,
|
|
9
|
+
imageUrl,
|
|
10
|
+
altText,
|
|
11
|
+
priority,
|
|
12
|
+
handleClick
|
|
13
|
+
} = useThumbnailImage(props);
|
|
14
|
+
if (error) return error.message;
|
|
15
|
+
if (loading) return null;
|
|
16
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
17
|
+
className: className,
|
|
18
|
+
onClick: handleClick,
|
|
19
|
+
role: "button",
|
|
20
|
+
"data-testid": "thumbnail-image"
|
|
21
|
+
}, /*#__PURE__*/React.createElement(LazyImage, {
|
|
22
|
+
src: imageUrl,
|
|
23
|
+
alt: altText,
|
|
24
|
+
sizeKey: "carousel",
|
|
25
|
+
role: "button",
|
|
26
|
+
priority: priority
|
|
27
|
+
}));
|
|
28
|
+
};
|
|
29
|
+
export default ThumbnailImage;
|
|
30
|
+
//# sourceMappingURL=ThumbnailImage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThumbnailImage.js","names":["React","LazyImage","useThumbnailImage","ThumbnailImage","props","loading","error","className","imageUrl","altText","priority","handleClick","message","createElement","onClick","role","src","alt","sizeKey"],"sources":["../../../../src/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js"],"sourcesContent":["import React from 'react';\nimport LazyImage from '../../../components/LazyImage';\nimport useThumbnailImage from './useThumbnailImage';\n\nconst ThumbnailImage = props => {\n const { loading, error, className, imageUrl, altText, priority, handleClick } = useThumbnailImage(\n props\n );\n\n if (error) return error.message;\n if (loading) return null;\n\n return (\n <div className={className} onClick={handleClick} role=\"button\" data-testid=\"thumbnail-image\">\n <LazyImage\n src={imageUrl}\n alt={altText}\n sizeKey=\"carousel\"\n role=\"button\"\n priority={priority}\n />\n </div>\n );\n};\n\nexport default ThumbnailImage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,+BAA+B;AACrD,OAAOC,iBAAiB,MAAM,qBAAqB;AAEnD,MAAMC,cAAc,GAAGC,KAAK,IAAI;EAC9B,MAAM;IAAEC,OAAO;IAAEC,KAAK;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,QAAQ;IAAEC;EAAY,CAAC,GAAGT,iBAAiB,CAC/FE,KACF,CAAC;EAED,IAAIE,KAAK,EAAE,OAAOA,KAAK,CAACM,OAAO;EAC/B,IAAIP,OAAO,EAAE,OAAO,IAAI;EAExB,oBACEL,KAAA,CAAAa,aAAA;IAAKN,SAAS,EAAEA,SAAU;IAACO,OAAO,EAAEH,WAAY;IAACI,IAAI,EAAC,QAAQ;IAAC,eAAY;EAAiB,gBAC1Ff,KAAA,CAAAa,aAAA,CAACZ,SAAS;IACRe,GAAG,EAAER,QAAS;IACdS,GAAG,EAAER,OAAQ;IACbS,OAAO,EAAC,UAAU;IAClBH,IAAI,EAAC,QAAQ;IACbL,QAAQ,EAAEA;EAAS,CACpB,CACE,CAAC;AAEV,CAAC;AAED,eAAeP,cAAc"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["ThumbnailImage"],"sources":["../../../../src/variants/ThumbnailCarousel/ThumbnailImage/index.js"],"sourcesContent":["import ThumbnailImage from './ThumbnailImage';\n\nexport default ThumbnailImage;\n"],"mappings":"AAAA,OAAOA,cAAc,MAAM,kBAAkB;AAE7C,eAAeA,cAAc"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
|
+
import { useGetImages } from '../../../hooks';
|
|
3
|
+
import { getImageData } from '../../../utils';
|
|
4
|
+
const useThumbnailImage = ({
|
|
5
|
+
imageId,
|
|
6
|
+
imageIndex,
|
|
7
|
+
enableLightbox,
|
|
8
|
+
toggleModal,
|
|
9
|
+
handleSelectedImage,
|
|
10
|
+
priority,
|
|
11
|
+
selectedImageId,
|
|
12
|
+
scrollToImage
|
|
13
|
+
}) => {
|
|
14
|
+
const {
|
|
15
|
+
data = {},
|
|
16
|
+
loading,
|
|
17
|
+
error
|
|
18
|
+
} = useGetImages(imageId);
|
|
19
|
+
const handleClick = () => {
|
|
20
|
+
if (scrollToImage) scrollToImage(imageIndex);else if (enableLightbox) {
|
|
21
|
+
toggleModal();
|
|
22
|
+
handleSelectedImage(imageId);
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
const {
|
|
26
|
+
url: imageUrl = '',
|
|
27
|
+
data: imageData = {}
|
|
28
|
+
} = data.getFile || {
|
|
29
|
+
getFile: {
|
|
30
|
+
url: '',
|
|
31
|
+
data: {}
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
const {
|
|
35
|
+
altText
|
|
36
|
+
} = getImageData({}, imageData);
|
|
37
|
+
const className = selectedImageId === imageId ? 'thumbnail-carousel-image thumbnail-carousel-image--selected' : 'thumbnail-carousel-image';
|
|
38
|
+
return {
|
|
39
|
+
loading,
|
|
40
|
+
error,
|
|
41
|
+
className,
|
|
42
|
+
imageId,
|
|
43
|
+
imageUrl,
|
|
44
|
+
altText,
|
|
45
|
+
priority,
|
|
46
|
+
handleClick
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
useThumbnailImage.propTypes = {
|
|
50
|
+
imageId: PropTypes.string.isRequired,
|
|
51
|
+
selectedImageId: PropTypes.string.isRequired,
|
|
52
|
+
enableLightbox: PropTypes.bool.isRequired,
|
|
53
|
+
toggleModal: PropTypes.func.isRequired,
|
|
54
|
+
handleSelectedImage: PropTypes.func.isRequired,
|
|
55
|
+
priority: PropTypes.bool.isRequired,
|
|
56
|
+
scrollToImage: PropTypes.func
|
|
57
|
+
};
|
|
58
|
+
useThumbnailImage.defaultProps = {
|
|
59
|
+
scrollToImage: null
|
|
60
|
+
};
|
|
61
|
+
export default useThumbnailImage;
|
|
62
|
+
//# sourceMappingURL=useThumbnailImage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useThumbnailImage.js","names":["PropTypes","useGetImages","getImageData","useThumbnailImage","imageId","imageIndex","enableLightbox","toggleModal","handleSelectedImage","priority","selectedImageId","scrollToImage","data","loading","error","handleClick","url","imageUrl","imageData","getFile","altText","className","propTypes","string","isRequired","bool","func","defaultProps"],"sources":["../../../../src/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { useGetImages } from '../../../hooks';\nimport { getImageData } from '../../../utils';\n\nconst useThumbnailImage = ({\n imageId,\n imageIndex,\n enableLightbox,\n toggleModal,\n handleSelectedImage,\n priority,\n selectedImageId,\n scrollToImage\n}) => {\n const { data = {}, loading, error } = useGetImages(imageId);\n\n const handleClick = () => {\n if (scrollToImage) scrollToImage(imageIndex);\n else if (enableLightbox) {\n toggleModal();\n handleSelectedImage(imageId);\n }\n };\n\n const { url: imageUrl = '', data: imageData = {} } = data.getFile || {\n getFile: { url: '', data: {} }\n };\n const { altText } = getImageData({}, imageData);\n\n const className =\n selectedImageId === imageId\n ? 'thumbnail-carousel-image thumbnail-carousel-image--selected'\n : 'thumbnail-carousel-image';\n\n return {\n loading,\n error,\n className,\n imageId,\n imageUrl,\n altText,\n priority,\n handleClick\n };\n};\n\nuseThumbnailImage.propTypes = {\n imageId: PropTypes.string.isRequired,\n selectedImageId: PropTypes.string.isRequired,\n enableLightbox: PropTypes.bool.isRequired,\n toggleModal: PropTypes.func.isRequired,\n handleSelectedImage: PropTypes.func.isRequired,\n priority: PropTypes.bool.isRequired,\n scrollToImage: PropTypes.func\n};\n\nuseThumbnailImage.defaultProps = {\n scrollToImage: null\n};\n\nexport default useThumbnailImage;\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,YAAY,QAAQ,gBAAgB;AAE7C,MAAMC,iBAAiB,GAAGA,CAAC;EACzBC,OAAO;EACPC,UAAU;EACVC,cAAc;EACdC,WAAW;EACXC,mBAAmB;EACnBC,QAAQ;EACRC,eAAe;EACfC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC,IAAI,GAAG,CAAC,CAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAGb,YAAY,CAACG,OAAO,CAAC;EAE3D,MAAMW,WAAW,GAAGA,CAAA,KAAM;IACxB,IAAIJ,aAAa,EAAEA,aAAa,CAACN,UAAU,CAAC,CAAC,KACxC,IAAIC,cAAc,EAAE;MACvBC,WAAW,CAAC,CAAC;MACbC,mBAAmB,CAACJ,OAAO,CAAC;IAC9B;EACF,CAAC;EAED,MAAM;IAAEY,GAAG,EAAEC,QAAQ,GAAG,EAAE;IAAEL,IAAI,EAAEM,SAAS,GAAG,CAAC;EAAE,CAAC,GAAGN,IAAI,CAACO,OAAO,IAAI;IACnEA,OAAO,EAAE;MAAEH,GAAG,EAAE,EAAE;MAAEJ,IAAI,EAAE,CAAC;IAAE;EAC/B,CAAC;EACD,MAAM;IAAEQ;EAAQ,CAAC,GAAGlB,YAAY,CAAC,CAAC,CAAC,EAAEgB,SAAS,CAAC;EAE/C,MAAMG,SAAS,GACbX,eAAe,KAAKN,OAAO,GACvB,6DAA6D,GAC7D,0BAA0B;EAEhC,OAAO;IACLS,OAAO;IACPC,KAAK;IACLO,SAAS;IACTjB,OAAO;IACPa,QAAQ;IACRG,OAAO;IACPX,QAAQ;IACRM;EACF,CAAC;AACH,CAAC;AAEDZ,iBAAiB,CAACmB,SAAS,GAAG;EAC5BlB,OAAO,EAAEJ,SAAS,CAACuB,MAAM,CAACC,UAAU;EACpCd,eAAe,EAAEV,SAAS,CAACuB,MAAM,CAACC,UAAU;EAC5ClB,cAAc,EAAEN,SAAS,CAACyB,IAAI,CAACD,UAAU;EACzCjB,WAAW,EAAEP,SAAS,CAAC0B,IAAI,CAACF,UAAU;EACtChB,mBAAmB,EAAER,SAAS,CAAC0B,IAAI,CAACF,UAAU;EAC9Cf,QAAQ,EAAET,SAAS,CAACyB,IAAI,CAACD,UAAU;EACnCb,aAAa,EAAEX,SAAS,CAAC0B;AAC3B,CAAC;AAEDvB,iBAAiB,CAACwB,YAAY,GAAG;EAC/BhB,aAAa,EAAE;AACjB,CAAC;AAED,eAAeR,iBAAiB"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
import dynamic from 'next/dynamic';
|
|
5
|
+
const ThumbnailCarousel = {
|
|
6
|
+
getSettings: componentSettings => _objectSpread({}, componentSettings),
|
|
7
|
+
VariantComponent: dynamic(() => import( /* webpackChunkName: "blazePbVariantThumbnailCarousel" */'./ThumbnailCarousel'))
|
|
8
|
+
};
|
|
9
|
+
export default ThumbnailCarousel;
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["dynamic","ThumbnailCarousel","getSettings","componentSettings","_objectSpread","VariantComponent"],"sources":["../../../src/variants/ThumbnailCarousel/index.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst ThumbnailCarousel = {\n getSettings: componentSettings => ({\n ...componentSettings\n }),\n VariantComponent: dynamic(() =>\n import(/* webpackChunkName: \"blazePbVariantThumbnailCarousel\" */ './ThumbnailCarousel')\n )\n};\n\nexport default ThumbnailCarousel;\n"],"mappings":";;;AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,iBAAiB,GAAG;EACxBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,KACzBD,iBAAiB,CACpB;EACFE,gBAAgB,EAAEL,OAAO,CAAC,MACxB,MAAM,EAAC,yDAA0D,qBAAqB,CACxF;AACF,CAAC;AAED,eAAeC,iBAAiB"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
const _excluded = ["imageIds", "priorityLimit"];
|
|
4
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
|
+
import { useState, useRef } from 'react';
|
|
7
|
+
const useThumbnailCarousel = _ref => {
|
|
8
|
+
let {
|
|
9
|
+
imageIds,
|
|
10
|
+
priorityLimit
|
|
11
|
+
} = _ref,
|
|
12
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
13
|
+
const [selectedImageIndex, setSelectedImageIndex] = useState(0);
|
|
14
|
+
const thumbnailsListRef = useRef(null);
|
|
15
|
+
const selectedImageId = imageIds[selectedImageIndex];
|
|
16
|
+
const mainImageButtonClick = next => {
|
|
17
|
+
let newIndex;
|
|
18
|
+
if (next) {
|
|
19
|
+
const isLast = imageIds.length - 1 === selectedImageIndex;
|
|
20
|
+
newIndex = isLast ? 0 : selectedImageIndex + 1;
|
|
21
|
+
} else {
|
|
22
|
+
const isFirst = selectedImageIndex === 0;
|
|
23
|
+
newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;
|
|
24
|
+
}
|
|
25
|
+
scrollToImage(newIndex);
|
|
26
|
+
};
|
|
27
|
+
const scrollToImage = newIndex => {
|
|
28
|
+
if (thumbnailsListRef.current && selectedImageIndex !== newIndex) {
|
|
29
|
+
thumbnailsListRef.current.scrollTo({
|
|
30
|
+
left: 150 * newIndex,
|
|
31
|
+
behavior: 'smooth'
|
|
32
|
+
});
|
|
33
|
+
setSelectedImageIndex(newIndex);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
return _objectSpread(_objectSpread({}, props), {}, {
|
|
37
|
+
imageIds,
|
|
38
|
+
selectedImageId,
|
|
39
|
+
selectedImageIndex,
|
|
40
|
+
thumbnailsListRef,
|
|
41
|
+
priorityLimit,
|
|
42
|
+
scrollToImage,
|
|
43
|
+
mainImageButtonClick
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
export default useThumbnailCarousel;
|
|
47
|
+
//# sourceMappingURL=useThumbnailCarousel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useThumbnailCarousel.js","names":["useState","useRef","useThumbnailCarousel","_ref","imageIds","priorityLimit","props","_objectWithoutProperties","_excluded","selectedImageIndex","setSelectedImageIndex","thumbnailsListRef","selectedImageId","mainImageButtonClick","next","newIndex","isLast","length","isFirst","scrollToImage","current","scrollTo","left","behavior","_objectSpread"],"sources":["../../../src/variants/ThumbnailCarousel/useThumbnailCarousel.js"],"sourcesContent":["import { useState, useRef } from 'react';\n\nconst useThumbnailCarousel = ({ imageIds, priorityLimit, ...props }) => {\n const [selectedImageIndex, setSelectedImageIndex] = useState(0);\n const thumbnailsListRef = useRef(null);\n const selectedImageId = imageIds[selectedImageIndex];\n\n const mainImageButtonClick = next => {\n let newIndex;\n if (next) {\n const isLast = imageIds.length - 1 === selectedImageIndex;\n newIndex = isLast ? 0 : selectedImageIndex + 1;\n } else {\n const isFirst = selectedImageIndex === 0;\n newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;\n }\n scrollToImage(newIndex);\n };\n\n const scrollToImage = newIndex => {\n if (thumbnailsListRef.current && selectedImageIndex !== newIndex) {\n thumbnailsListRef.current.scrollTo({\n left: 150 * newIndex,\n behavior: 'smooth'\n });\n setSelectedImageIndex(newIndex);\n }\n };\n\n return {\n ...props,\n imageIds,\n selectedImageId,\n selectedImageIndex,\n thumbnailsListRef,\n priorityLimit,\n scrollToImage,\n mainImageButtonClick\n };\n};\n\nexport default useThumbnailCarousel;\n"],"mappings":";;;;;AAAA,SAASA,QAAQ,EAAEC,MAAM,QAAQ,OAAO;AAExC,MAAMC,oBAAoB,GAAGC,IAAA,IAA2C;EAAA,IAA1C;MAAEC,QAAQ;MAAEC;IAAwB,CAAC,GAAAF,IAAA;IAAPG,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAC/D,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGV,QAAQ,CAAC,CAAC,CAAC;EAC/D,MAAMW,iBAAiB,GAAGV,MAAM,CAAC,IAAI,CAAC;EACtC,MAAMW,eAAe,GAAGR,QAAQ,CAACK,kBAAkB,CAAC;EAEpD,MAAMI,oBAAoB,GAAGC,IAAI,IAAI;IACnC,IAAIC,QAAQ;IACZ,IAAID,IAAI,EAAE;MACR,MAAME,MAAM,GAAGZ,QAAQ,CAACa,MAAM,GAAG,CAAC,KAAKR,kBAAkB;MACzDM,QAAQ,GAAGC,MAAM,GAAG,CAAC,GAAGP,kBAAkB,GAAG,CAAC;IAChD,CAAC,MAAM;MACL,MAAMS,OAAO,GAAGT,kBAAkB,KAAK,CAAC;MACxCM,QAAQ,GAAGG,OAAO,GAAGd,QAAQ,CAACa,MAAM,GAAG,CAAC,GAAGR,kBAAkB,GAAG,CAAC;IACnE;IACAU,aAAa,CAACJ,QAAQ,CAAC;EACzB,CAAC;EAED,MAAMI,aAAa,GAAGJ,QAAQ,IAAI;IAChC,IAAIJ,iBAAiB,CAACS,OAAO,IAAIX,kBAAkB,KAAKM,QAAQ,EAAE;MAChEJ,iBAAiB,CAACS,OAAO,CAACC,QAAQ,CAAC;QACjCC,IAAI,EAAE,GAAG,GAAGP,QAAQ;QACpBQ,QAAQ,EAAE;MACZ,CAAC,CAAC;MACFb,qBAAqB,CAACK,QAAQ,CAAC;IACjC;EACF,CAAC;EAED,OAAAS,aAAA,CAAAA,aAAA,KACKlB,KAAK;IACRF,QAAQ;IACRQ,eAAe;IACfH,kBAAkB;IAClBE,iBAAiB;IACjBN,aAAa;IACbc,aAAa;IACbN;EAAoB;AAExB,CAAC;AAED,eAAeX,oBAAoB"}
|
package/lib-es/variants/index.js
CHANGED
|
@@ -1,2 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
import heroImage from './HeroImage';
|
|
2
|
+
import infographic from './Infographic';
|
|
3
|
+
import longformGallery from './LongformGallery';
|
|
4
|
+
import longformRow from './LongformRow';
|
|
5
|
+
import parallaxImageTextRight from './ParallaxImageTextRight';
|
|
6
|
+
import thumbnailCarousel from './ThumbnailCarousel';
|
|
7
|
+
export default {
|
|
8
|
+
heroImage,
|
|
9
|
+
infographic,
|
|
10
|
+
longformGallery,
|
|
11
|
+
longformRow,
|
|
12
|
+
parallaxImageTextRight,
|
|
13
|
+
thumbnailCarousel
|
|
14
|
+
};
|
|
2
15
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/variants/index.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["heroImage","infographic","longformGallery","longformRow","parallaxImageTextRight","thumbnailCarousel"],"sources":["../../src/variants/index.js"],"sourcesContent":["import heroImage from './HeroImage';\nimport infographic from './Infographic';\nimport longformGallery from './LongformGallery';\nimport longformRow from './LongformRow';\nimport parallaxImageTextRight from './ParallaxImageTextRight';\nimport thumbnailCarousel from './ThumbnailCarousel';\n\nexport default {\n heroImage,\n infographic,\n longformGallery,\n longformRow,\n parallaxImageTextRight,\n thumbnailCarousel\n};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,aAAa;AACnC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,iBAAiB,MAAM,qBAAqB;AAEnD,eAAe;EACbL,SAAS;EACTC,WAAW;EACXC,eAAe;EACfC,WAAW;EACXC,sBAAsB;EACtBC;AACF,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blaze-cms/react-page-builder",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.141.0-alpha.1",
|
|
4
4
|
"description": "Blaze react page builder",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-es/index.js",
|
|
@@ -31,18 +31,18 @@
|
|
|
31
31
|
"@blaze-cms/core-errors": "^0.140.3",
|
|
32
32
|
"@blaze-cms/core-errors-ui": "^0.140.3",
|
|
33
33
|
"@blaze-cms/image-cdn-react": "0.3.0-alpha.6",
|
|
34
|
-
"@blaze-cms/nextjs-components": "
|
|
35
|
-
"@blaze-cms/plugin-search-ui": "
|
|
34
|
+
"@blaze-cms/nextjs-components": "0.141.0-alpha.1",
|
|
35
|
+
"@blaze-cms/plugin-search-ui": "0.141.0-alpha.1",
|
|
36
36
|
"@blaze-cms/setup-ui": "^0.140.3",
|
|
37
37
|
"@blaze-cms/utils": "^0.140.3",
|
|
38
|
-
"@blaze-cms/utils-handlebars": "
|
|
38
|
+
"@blaze-cms/utils-handlebars": "0.141.0-alpha.1",
|
|
39
39
|
"@blaze-react/breadcrumb": "0.8.0-alpha.60",
|
|
40
40
|
"@blaze-react/button": "0.5.19",
|
|
41
41
|
"@blaze-react/checkboxes": "0.5.31",
|
|
42
|
-
"@blaze-react/input": "0.
|
|
42
|
+
"@blaze-react/input": "0.8.0-alpha.78",
|
|
43
43
|
"@blaze-react/modal": "0.5.19",
|
|
44
44
|
"@blaze-react/range-filter": "0.7.2",
|
|
45
|
-
"@blaze-react/select": "0.8.0-alpha.
|
|
45
|
+
"@blaze-react/select": "0.8.0-alpha.78",
|
|
46
46
|
"@blaze-react/utils": "0.5.15",
|
|
47
47
|
"core-js": "^3.2.1",
|
|
48
48
|
"entities": "^2.0.0",
|
|
@@ -89,5 +89,5 @@
|
|
|
89
89
|
"lib/*",
|
|
90
90
|
"lib-es/*"
|
|
91
91
|
],
|
|
92
|
-
"gitHead": "
|
|
92
|
+
"gitHead": "511c3db4259e32fc0e45b4072254189b9d64764c"
|
|
93
93
|
}
|