@blaze-cms/react-page-builder 0.129.0 → 0.130.0-admin-updates.0
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 +18 -0
- package/lib/components/Card/CardsContainer.js +6 -3
- package/lib/components/Card/CardsContainer.js.map +1 -1
- package/lib/components/CarouselWrapper/CarouselWrapper.js +29 -0
- package/lib/components/CarouselWrapper/CarouselWrapper.js.map +1 -0
- package/lib/components/{CarouselWrapper.js → CarouselWrapper/DefaultCarousel.js} +8 -11
- package/lib/components/CarouselWrapper/DefaultCarousel.js.map +1 -0
- package/lib/components/CarouselWrapper/SmoothScrollCarousel.js +50 -0
- package/lib/components/CarouselWrapper/SmoothScrollCarousel.js.map +1 -0
- package/lib/components/CarouselWrapper/index.js +12 -0
- package/lib/components/CarouselWrapper/index.js.map +1 -0
- package/lib/components/List/ListBuilder.js +1 -7
- package/lib/components/List/ListBuilder.js.map +1 -1
- package/lib/components/List/ListFactory.js +4 -2
- package/lib/components/List/ListFactory.js.map +1 -1
- package/lib/components/List/components/Cards/CardsRender.js.map +1 -1
- package/lib/components/List/helpers/get-list-component.js +17 -0
- package/lib/components/List/helpers/get-list-component.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-es/components/Card/CardsContainer.js +6 -3
- package/lib-es/components/Card/CardsContainer.js.map +1 -1
- package/lib-es/components/CarouselWrapper/CarouselWrapper.js +22 -0
- package/lib-es/components/CarouselWrapper/CarouselWrapper.js.map +1 -0
- package/lib-es/components/{CarouselWrapper.js → CarouselWrapper/DefaultCarousel.js} +8 -11
- package/lib-es/components/CarouselWrapper/DefaultCarousel.js.map +1 -0
- package/lib-es/components/CarouselWrapper/SmoothScrollCarousel.js +42 -0
- package/lib-es/components/CarouselWrapper/SmoothScrollCarousel.js.map +1 -0
- package/lib-es/components/CarouselWrapper/index.js +3 -0
- package/lib-es/components/CarouselWrapper/index.js.map +1 -0
- package/lib-es/components/List/ListBuilder.js +2 -8
- package/lib-es/components/List/ListBuilder.js.map +1 -1
- package/lib-es/components/List/ListFactory.js +2 -2
- package/lib-es/components/List/ListFactory.js.map +1 -1
- package/lib-es/components/List/components/Cards/CardsRender.js.map +1 -1
- package/lib-es/components/List/helpers/get-list-component.js +9 -0
- package/lib-es/components/List/helpers/get-list-component.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/package.json +10 -10
- package/src/components/Card/CardsContainer.js +5 -2
- package/src/components/CarouselWrapper/CarouselWrapper.js +19 -0
- package/src/components/{CarouselWrapper.js → CarouselWrapper/DefaultCarousel.js} +9 -10
- package/src/components/CarouselWrapper/SmoothScrollCarousel.js +43 -0
- package/src/components/CarouselWrapper/index.js +3 -0
- package/src/components/List/ListBuilder.js +2 -15
- package/src/components/List/ListFactory.js +2 -2
- package/src/components/List/components/Cards/CardsRender.js +0 -1
- package/src/components/List/helpers/get-list-component.js +15 -0
- package/src/components/List/helpers/index.js +1 -0
- package/tests/unit/src/components/Card/__snapshots__/CardContainer.test.js.snap +1 -0
- package/tests/unit/src/components/CarouselWrapper.test.js +9 -0
- package/tests/unit/src/components/List/helpers/get-list-component.test.js +21 -0
- package/tests/unit/src/components/__snapshots__/CarouselWrapper.test.js.snap +53 -0
- package/lib/components/CarouselWrapper.js.map +0 -1
- package/lib-es/components/CarouselWrapper.js.map +0 -1
- package/tests/unit/src/components/List/components/Cards/CardRenderWithInfiniteScroll.test.js +0 -12
- package/tests/unit/src/components/List/components/Full/FullRenderWithInfiniteScroll.test.js +0 -12
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { CardRenderWithInfiniteScroll, CardsRender, FullRender, FullRenderWithInfiniteScroll } from '../components';
|
|
2
|
+
import { CLASSIC } from '../../../constants';
|
|
3
|
+
function getListComponent(isCard, paginationType) {
|
|
4
|
+
const isNotClassic = paginationType !== CLASSIC;
|
|
5
|
+
if (isCard) return isNotClassic ? CardRenderWithInfiniteScroll : CardsRender;
|
|
6
|
+
return isNotClassic ? FullRenderWithInfiniteScroll : FullRender;
|
|
7
|
+
}
|
|
8
|
+
export default getListComponent;
|
|
9
|
+
//# sourceMappingURL=get-list-component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-list-component.js","names":["CardRenderWithInfiniteScroll","CardsRender","FullRender","FullRenderWithInfiniteScroll","CLASSIC","getListComponent","isCard","paginationType","isNotClassic"],"sources":["../../../../src/components/List/helpers/get-list-component.js"],"sourcesContent":["import {\n CardRenderWithInfiniteScroll,\n CardsRender,\n FullRender,\n FullRenderWithInfiniteScroll\n} from '../components';\nimport { CLASSIC } from '../../../constants';\n\nfunction getListComponent(isCard, paginationType) {\n const isNotClassic = paginationType !== CLASSIC;\n if (isCard) return isNotClassic ? CardRenderWithInfiniteScroll : CardsRender;\n return isNotClassic ? FullRenderWithInfiniteScroll : FullRender;\n}\n\nexport default getListComponent;\n"],"mappings":"AAAA,SACEA,4BAA4B,EAC5BC,WAAW,EACXC,UAAU,EACVC,4BAA4B,QACvB,eAAe;AACtB,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,gBAAgBA,CAACC,MAAM,EAAEC,cAAc,EAAE;EAChD,MAAMC,YAAY,GAAGD,cAAc,KAAKH,OAAO;EAC/C,IAAIE,MAAM,EAAE,OAAOE,YAAY,GAAGR,4BAA4B,GAAGC,WAAW;EAC5E,OAAOO,YAAY,GAAGL,4BAA4B,GAAGD,UAAU;AACjE;AAEA,eAAeG,gBAAgB"}
|
|
@@ -6,4 +6,5 @@ export { default as sortAggs } from './sort-aggs';
|
|
|
6
6
|
export { default as getItemsPerPageToUse } from './get-items-per-page-to-use';
|
|
7
7
|
export { default as getSortProps } from './get-sort-props';
|
|
8
8
|
export { default as hasRequiredItemListDetails } from './has-required-item-list-details';
|
|
9
|
+
export { default as getListComponent } from './get-list-component';
|
|
9
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default","buildPaginationItems","getAzQueryFilter","buildAzAggregations","buildAzUrl","sortAggs","getItemsPerPageToUse","getSortProps","hasRequiredItemListDetails"],"sources":["../../../../src/components/List/helpers/index.js"],"sourcesContent":["export { default as buildPaginationItems } from './build-pagination-items';\nexport { default as getAzQueryFilter } from './get-az-query-filter';\nexport { default as buildAzAggregations } from './build-az-aggregations';\nexport { default as buildAzUrl } from './build-az-url';\nexport { default as sortAggs } from './sort-aggs';\nexport { default as getItemsPerPageToUse } from './get-items-per-page-to-use';\nexport { default as getSortProps } from './get-sort-props';\nexport { default as hasRequiredItemListDetails } from './has-required-item-list-details';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,oBAAoB,QAAQ,0BAA0B;AAC1E,SAASD,OAAO,IAAIE,gBAAgB,QAAQ,uBAAuB;AACnE,SAASF,OAAO,IAAIG,mBAAmB,QAAQ,yBAAyB;AACxE,SAASH,OAAO,IAAII,UAAU,QAAQ,gBAAgB;AACtD,SAASJ,OAAO,IAAIK,QAAQ,QAAQ,aAAa;AACjD,SAASL,OAAO,IAAIM,oBAAoB,QAAQ,6BAA6B;AAC7E,SAASN,OAAO,IAAIO,YAAY,QAAQ,kBAAkB;AAC1D,SAASP,OAAO,IAAIQ,0BAA0B,QAAQ,kCAAkC"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","buildPaginationItems","getAzQueryFilter","buildAzAggregations","buildAzUrl","sortAggs","getItemsPerPageToUse","getSortProps","hasRequiredItemListDetails","getListComponent"],"sources":["../../../../src/components/List/helpers/index.js"],"sourcesContent":["export { default as buildPaginationItems } from './build-pagination-items';\nexport { default as getAzQueryFilter } from './get-az-query-filter';\nexport { default as buildAzAggregations } from './build-az-aggregations';\nexport { default as buildAzUrl } from './build-az-url';\nexport { default as sortAggs } from './sort-aggs';\nexport { default as getItemsPerPageToUse } from './get-items-per-page-to-use';\nexport { default as getSortProps } from './get-sort-props';\nexport { default as hasRequiredItemListDetails } from './has-required-item-list-details';\nexport { default as getListComponent } from './get-list-component';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,oBAAoB,QAAQ,0BAA0B;AAC1E,SAASD,OAAO,IAAIE,gBAAgB,QAAQ,uBAAuB;AACnE,SAASF,OAAO,IAAIG,mBAAmB,QAAQ,yBAAyB;AACxE,SAASH,OAAO,IAAII,UAAU,QAAQ,gBAAgB;AACtD,SAASJ,OAAO,IAAIK,QAAQ,QAAQ,aAAa;AACjD,SAASL,OAAO,IAAIM,oBAAoB,QAAQ,6BAA6B;AAC7E,SAASN,OAAO,IAAIO,YAAY,QAAQ,kBAAkB;AAC1D,SAASP,OAAO,IAAIQ,0BAA0B,QAAQ,kCAAkC;AACxF,SAASR,OAAO,IAAIS,gBAAgB,QAAQ,sBAAsB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blaze-cms/react-page-builder",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.130.0-admin-updates.0",
|
|
4
4
|
"description": "Blaze react page builder",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-es/index.js",
|
|
@@ -27,15 +27,15 @@
|
|
|
27
27
|
},
|
|
28
28
|
"license": "GPL-3.0",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@blaze-cms/core-auth-ui": "
|
|
31
|
-
"@blaze-cms/core-errors": "
|
|
32
|
-
"@blaze-cms/core-errors-ui": "
|
|
30
|
+
"@blaze-cms/core-auth-ui": "0.130.0-admin-updates.0",
|
|
31
|
+
"@blaze-cms/core-errors": "0.130.0-admin-updates.0",
|
|
32
|
+
"@blaze-cms/core-errors-ui": "0.130.0-admin-updates.0",
|
|
33
33
|
"@blaze-cms/image-cdn-react": "0.3.0-alpha.5",
|
|
34
|
-
"@blaze-cms/nextjs-components": "
|
|
35
|
-
"@blaze-cms/plugin-search-ui": "
|
|
36
|
-
"@blaze-cms/setup-ui": "
|
|
37
|
-
"@blaze-cms/utils": "
|
|
38
|
-
"@blaze-cms/utils-handlebars": "
|
|
34
|
+
"@blaze-cms/nextjs-components": "0.130.0-admin-updates.0",
|
|
35
|
+
"@blaze-cms/plugin-search-ui": "0.130.0-admin-updates.0",
|
|
36
|
+
"@blaze-cms/setup-ui": "0.130.0-admin-updates.0",
|
|
37
|
+
"@blaze-cms/utils": "0.130.0-admin-updates.0",
|
|
38
|
+
"@blaze-cms/utils-handlebars": "0.130.0-admin-updates.0",
|
|
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",
|
|
@@ -89,5 +89,5 @@
|
|
|
89
89
|
"lib/*",
|
|
90
90
|
"lib-es/*"
|
|
91
91
|
],
|
|
92
|
-
"gitHead": "
|
|
92
|
+
"gitHead": "8a7ba4ac0daaa44b8273afc4c23c2ac4f0788ca0"
|
|
93
93
|
}
|
|
@@ -31,6 +31,7 @@ const CardContainer = ({
|
|
|
31
31
|
bannerModifier,
|
|
32
32
|
priorityLimit,
|
|
33
33
|
enableAutoScroll,
|
|
34
|
+
enableSmoothScroll,
|
|
34
35
|
enableOverlay,
|
|
35
36
|
autoScrollTimer,
|
|
36
37
|
overlayModifier,
|
|
@@ -59,13 +60,15 @@ const CardContainer = ({
|
|
|
59
60
|
itemsPerRow={itemsPerRow}
|
|
60
61
|
bannerModifier={bannerModifier}
|
|
61
62
|
enableAutoScroll={enableAutoScroll}
|
|
62
|
-
|
|
63
|
+
enableSmoothScroll={enableSmoothScroll}
|
|
64
|
+
autoScrollTimer={autoScrollTimer}
|
|
65
|
+
numberOfCards={parsedCardsData.length}>
|
|
63
66
|
{parsedCardsData.map((currentEntity, index) => {
|
|
64
67
|
const { baseAdunit, id, ...entityProps } = currentEntity;
|
|
65
68
|
const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(index, banner);
|
|
66
69
|
const extraProps = parsePropsToDisplay(entityProps, propsToDisplay);
|
|
67
70
|
const dynamicKey = [itemId, index].join('-');
|
|
68
|
-
const priority = priorityLimit > 0 && index + 1 <= priorityLimit;
|
|
71
|
+
const priority = !!enableSmoothScroll || (priorityLimit > 0 && index + 1 <= priorityLimit);
|
|
69
72
|
if (hasNewBannerSettings && shouldRenderBanner) bannerIndex += 1;
|
|
70
73
|
if (!hasNewBannerSettings && baseAdunit) bannerIndex += 1;
|
|
71
74
|
const parsedCardProps = {
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import DefaultCarousel from './DefaultCarousel';
|
|
4
|
+
import SmoothScroolCarousel from './SmoothScrollCarousel';
|
|
5
|
+
|
|
6
|
+
const CarouselWrapper = ({ enableSmoothScroll, ...props }) => {
|
|
7
|
+
if (enableSmoothScroll) return <SmoothScroolCarousel {...props} />;
|
|
8
|
+
return <DefaultCarousel {...props} />;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
CarouselWrapper.propTypes = {
|
|
12
|
+
enableSmoothScroll: PropTypes.bool
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
CarouselWrapper.defaultProps = {
|
|
16
|
+
enableSmoothScroll: false
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export default CarouselWrapper;
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import React, { useRef, useState, useEffect } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
|
|
4
|
-
const
|
|
4
|
+
const DefaultCarousel = ({
|
|
5
5
|
children,
|
|
6
6
|
bannerModifier,
|
|
7
7
|
itemsPerRow,
|
|
8
8
|
enableAutoScroll,
|
|
9
|
-
autoScrollTimer
|
|
10
|
-
arrowSize
|
|
9
|
+
autoScrollTimer
|
|
11
10
|
}) => {
|
|
12
11
|
const ref = useRef();
|
|
13
12
|
const [buttonDisplay, setButtonDisplays] = useState({ displayLeft: false, displayRight: true });
|
|
@@ -84,6 +83,7 @@ const CarouselWrapper = ({
|
|
|
84
83
|
</button>
|
|
85
84
|
)}
|
|
86
85
|
</div>
|
|
86
|
+
|
|
87
87
|
<div className="cards-carousel--right-button-wrapper">
|
|
88
88
|
{displayRight && (
|
|
89
89
|
<button
|
|
@@ -97,6 +97,7 @@ const CarouselWrapper = ({
|
|
|
97
97
|
</button>
|
|
98
98
|
)}
|
|
99
99
|
</div>
|
|
100
|
+
|
|
100
101
|
<div className={contentClassName} ref={ref} onScroll={handleScroll}>
|
|
101
102
|
{children}
|
|
102
103
|
</div>
|
|
@@ -104,22 +105,20 @@ const CarouselWrapper = ({
|
|
|
104
105
|
);
|
|
105
106
|
};
|
|
106
107
|
|
|
107
|
-
|
|
108
|
+
DefaultCarousel.propTypes = {
|
|
108
109
|
bannerModifier: PropTypes.string,
|
|
109
110
|
itemsPerRow: PropTypes.number,
|
|
110
111
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
|
111
112
|
enableAutoScroll: PropTypes.bool,
|
|
112
|
-
autoScrollTimer: PropTypes.number
|
|
113
|
-
arrowSize: PropTypes.number
|
|
113
|
+
autoScrollTimer: PropTypes.number
|
|
114
114
|
};
|
|
115
115
|
|
|
116
|
-
|
|
116
|
+
DefaultCarousel.defaultProps = {
|
|
117
117
|
itemsPerRow: 0,
|
|
118
118
|
bannerModifier: '',
|
|
119
119
|
children: [],
|
|
120
120
|
enableAutoScroll: false,
|
|
121
|
-
autoScrollTimer: 0
|
|
122
|
-
arrowSize: 14
|
|
121
|
+
autoScrollTimer: 0
|
|
123
122
|
};
|
|
124
123
|
|
|
125
|
-
export default
|
|
124
|
+
export default DefaultCarousel;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
|
|
4
|
+
const SmoothScrollCarousel = ({
|
|
5
|
+
children,
|
|
6
|
+
bannerModifier,
|
|
7
|
+
itemsPerRow,
|
|
8
|
+
autoScrollTimer,
|
|
9
|
+
numberOfCards
|
|
10
|
+
}) => {
|
|
11
|
+
const wrapperClassName = `cards-carousel-smooth${bannerModifier}`;
|
|
12
|
+
const contentClassName = `cards-carousel--content smooth-scroll items-per-row-${itemsPerRow}`;
|
|
13
|
+
const animationDuration = `10s`;
|
|
14
|
+
|
|
15
|
+
return (
|
|
16
|
+
<div className={wrapperClassName}>
|
|
17
|
+
<div className={contentClassName} style={{ animationDuration }}>
|
|
18
|
+
{children}
|
|
19
|
+
</div>
|
|
20
|
+
<div className={contentClassName} style={{ animationDuration }}>
|
|
21
|
+
{children}
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
SmoothScrollCarousel.propTypes = {
|
|
28
|
+
bannerModifier: PropTypes.string,
|
|
29
|
+
itemsPerRow: PropTypes.number,
|
|
30
|
+
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
|
31
|
+
autoScrollTimer: PropTypes.number,
|
|
32
|
+
numberOfCards: PropTypes.number
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
SmoothScrollCarousel.defaultProps = {
|
|
36
|
+
itemsPerRow: 0,
|
|
37
|
+
bannerModifier: '',
|
|
38
|
+
children: [],
|
|
39
|
+
autoScrollTimer: 0,
|
|
40
|
+
numberOfCards: 1
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export default SmoothScrollCarousel;
|
|
@@ -2,12 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { useQuery } from '@apollo/client';
|
|
4
4
|
import { getStringTypeProps } from '@blaze-cms/utils/src/helpers';
|
|
5
|
-
import {
|
|
6
|
-
CardRenderWithInfiniteScroll,
|
|
7
|
-
CardsRender,
|
|
8
|
-
FullRender,
|
|
9
|
-
FullRenderWithInfiniteScroll
|
|
10
|
-
} from './components';
|
|
11
5
|
import ListRender from './ListRender';
|
|
12
6
|
import { getSearchPublishedContent } from '../../application/query';
|
|
13
7
|
import {
|
|
@@ -21,8 +15,8 @@ import {
|
|
|
21
15
|
checkPropsToUse,
|
|
22
16
|
buildPropsQuery
|
|
23
17
|
} from '../../helpers';
|
|
24
|
-
import { sortAggs, getItemsPerPageToUse, buildAzAggregations } from './helpers';
|
|
25
|
-
import { SEARCH_PUBLISHED_CONTENT, INFINITE
|
|
18
|
+
import { sortAggs, getItemsPerPageToUse, buildAzAggregations, getListComponent } from './helpers';
|
|
19
|
+
import { SEARCH_PUBLISHED_CONTENT, INFINITE } from '../../constants';
|
|
26
20
|
import { RAW_RESULTS } from './constants';
|
|
27
21
|
|
|
28
22
|
const ListBuilder = props => {
|
|
@@ -234,10 +228,3 @@ ListBuilder.defaultProps = {
|
|
|
234
228
|
};
|
|
235
229
|
|
|
236
230
|
export default ListBuilder;
|
|
237
|
-
function getListComponent(isCard, paginationType) {
|
|
238
|
-
const isNotClassic = paginationType !== CLASSIC;
|
|
239
|
-
|
|
240
|
-
if (isCard) return isNotClassic ? CardRenderWithInfiniteScroll : CardsRender;
|
|
241
|
-
|
|
242
|
-
return isNotClassic ? FullRenderWithInfiniteScroll : FullRender;
|
|
243
|
-
}
|
|
@@ -117,8 +117,8 @@ const ListFactory = props => {
|
|
|
117
117
|
if (hasErr) return errMsg;
|
|
118
118
|
|
|
119
119
|
const itemListIds = getItemListIds(itemListData);
|
|
120
|
-
const isCard = type
|
|
121
|
-
const isAZ = type
|
|
120
|
+
const isCard = !type.includes(FULL);
|
|
121
|
+
const isAZ = type.includes(AZ_LIST_TYPE);
|
|
122
122
|
const genericProps = getGenericProps(props);
|
|
123
123
|
const [textFilter] = getSearchFilterType(searchFilter, TEXT_SEARCH);
|
|
124
124
|
const shouldApplyTextFilter = textFilter && textFilter.propsToDisplay.length;
|
|
@@ -40,7 +40,6 @@ const CardsRender = ({
|
|
|
40
40
|
const { data: imagesData, loading: imagesLoading } = useGetImages(imageIds, true);
|
|
41
41
|
if (imagesLoading) return '';
|
|
42
42
|
const updatedListWithImages = appendImages(imagesData, orderedListData, itemsToDisplay);
|
|
43
|
-
|
|
44
43
|
const WrapperToUse = omitWrappers ? Fragment : Wrapper;
|
|
45
44
|
|
|
46
45
|
return (
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import {
|
|
2
|
+
CardRenderWithInfiniteScroll,
|
|
3
|
+
CardsRender,
|
|
4
|
+
FullRender,
|
|
5
|
+
FullRenderWithInfiniteScroll
|
|
6
|
+
} from '../components';
|
|
7
|
+
import { CLASSIC } from '../../../constants';
|
|
8
|
+
|
|
9
|
+
function getListComponent(isCard, paginationType) {
|
|
10
|
+
const isNotClassic = paginationType !== CLASSIC;
|
|
11
|
+
if (isCard) return isNotClassic ? CardRenderWithInfiniteScroll : CardsRender;
|
|
12
|
+
return isNotClassic ? FullRenderWithInfiniteScroll : FullRender;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export default getListComponent;
|
|
@@ -6,3 +6,4 @@ export { default as sortAggs } from './sort-aggs';
|
|
|
6
6
|
export { default as getItemsPerPageToUse } from './get-items-per-page-to-use';
|
|
7
7
|
export { default as getSortProps } from './get-sort-props';
|
|
8
8
|
export { default as hasRequiredItemListDetails } from './has-required-item-list-details';
|
|
9
|
+
export { default as getListComponent } from './get-list-component';
|
|
@@ -42,4 +42,13 @@ describe('CarouselWrapper component', () => {
|
|
|
42
42
|
});
|
|
43
43
|
expect(asFragment()).toMatchSnapshot();
|
|
44
44
|
});
|
|
45
|
+
|
|
46
|
+
it('should add smooth-scroll class if prop is true', () => {
|
|
47
|
+
const { asFragment } = render(CarouselWrapper, {
|
|
48
|
+
...mockedProps,
|
|
49
|
+
enableSmoothScroll: true,
|
|
50
|
+
itemsPerRow: 3
|
|
51
|
+
});
|
|
52
|
+
expect(asFragment()).toMatchSnapshot();
|
|
53
|
+
});
|
|
45
54
|
});
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import getListComponent from '../../../../../../src/components/List/helpers/get-list-component';
|
|
2
|
+
import {
|
|
3
|
+
CardRenderWithInfiniteScroll,
|
|
4
|
+
CardsRender,
|
|
5
|
+
FullRender,
|
|
6
|
+
FullRenderWithInfiniteScroll
|
|
7
|
+
} from '../../../../../../src/components/List/components';
|
|
8
|
+
import { CLASSIC } from '../../../../../../src/constants';
|
|
9
|
+
|
|
10
|
+
describe('getListComponent helper function', () => {
|
|
11
|
+
it('should correct listComponent based on props', () => {
|
|
12
|
+
const fullAz = getListComponent(false, 'aZ');
|
|
13
|
+
const cardAz = getListComponent(true, 'aZ');
|
|
14
|
+
const cardClassic = getListComponent(true, CLASSIC);
|
|
15
|
+
const fullClassic = getListComponent(false, CLASSIC);
|
|
16
|
+
expect(fullAz).toEqual(FullRenderWithInfiniteScroll);
|
|
17
|
+
expect(cardAz).toEqual(CardRenderWithInfiniteScroll);
|
|
18
|
+
expect(cardClassic).toEqual(CardsRender);
|
|
19
|
+
expect(fullClassic).toEqual(FullRender);
|
|
20
|
+
});
|
|
21
|
+
});
|
|
@@ -72,6 +72,59 @@ exports[`CarouselWrapper component should add modifier bassed on itemsPerRow 1`]
|
|
|
72
72
|
</DocumentFragment>
|
|
73
73
|
`;
|
|
74
74
|
|
|
75
|
+
exports[`CarouselWrapper component should add smooth-scroll class if prop is true 1`] = `
|
|
76
|
+
<DocumentFragment>
|
|
77
|
+
<div
|
|
78
|
+
class="cards-carousel-smooth"
|
|
79
|
+
>
|
|
80
|
+
<div
|
|
81
|
+
class="cards-carousel--content smooth-scroll items-per-row-3"
|
|
82
|
+
style="animation-duration: 10s;"
|
|
83
|
+
>
|
|
84
|
+
<div>
|
|
85
|
+
<div>
|
|
86
|
+
card 1
|
|
87
|
+
</div>
|
|
88
|
+
<div>
|
|
89
|
+
card 2
|
|
90
|
+
</div>
|
|
91
|
+
<div>
|
|
92
|
+
card 3
|
|
93
|
+
</div>
|
|
94
|
+
<div>
|
|
95
|
+
card 4
|
|
96
|
+
</div>
|
|
97
|
+
<div>
|
|
98
|
+
card 5
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
<div
|
|
103
|
+
class="cards-carousel--content smooth-scroll items-per-row-3"
|
|
104
|
+
style="animation-duration: 10s;"
|
|
105
|
+
>
|
|
106
|
+
<div>
|
|
107
|
+
<div>
|
|
108
|
+
card 1
|
|
109
|
+
</div>
|
|
110
|
+
<div>
|
|
111
|
+
card 2
|
|
112
|
+
</div>
|
|
113
|
+
<div>
|
|
114
|
+
card 3
|
|
115
|
+
</div>
|
|
116
|
+
<div>
|
|
117
|
+
card 4
|
|
118
|
+
</div>
|
|
119
|
+
<div>
|
|
120
|
+
card 5
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</DocumentFragment>
|
|
126
|
+
`;
|
|
127
|
+
|
|
75
128
|
exports[`CarouselWrapper component should render without throwing an error and match snapshot 1`] = `
|
|
76
129
|
<DocumentFragment>
|
|
77
130
|
<div
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselWrapper.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","CarouselWrapper","_ref","children","bannerModifier","itemsPerRow","enableAutoScroll","autoScrollTimer","arrowSize","ref","useRef","_useState","useState","displayLeft","displayRight","_useState2","_slicedToArray2","buttonDisplay","setButtonDisplays","_useState3","_useState4","shouldAutoScroll","setShouldAutoScroll","autoScrollRef","useEffect","current","id","setInterval","scrollCheck","clearInterval","handleButtonNavigation","_ref$current","offsetWidth","scrollWidth","handleScroll","_ref$current2","scrollLeft","updatedDisplayLeft","updatedDisplayRight","direction","_ref$current3","wrapperClassName","concat","contentClassName","createElement","className","type","onClick","onScroll","propTypes","PropTypes","string","number","oneOfType","arrayOf","node","bool","defaultProps","_default","exports"],"sources":["../../src/components/CarouselWrapper.js"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nconst CarouselWrapper = ({\n children,\n bannerModifier,\n itemsPerRow,\n enableAutoScroll,\n autoScrollTimer,\n arrowSize\n}) => {\n const ref = useRef();\n const [buttonDisplay, setButtonDisplays] = useState({ displayLeft: false, displayRight: true });\n const [shouldAutoScroll, setShouldAutoScroll] = useState(false);\n const autoScrollRef = useRef();\n\n useEffect(\n () => {\n autoScrollRef.current = shouldAutoScroll;\n const id = setInterval(scrollCheck, autoScrollTimer);\n function scrollCheck() {\n if (!autoScrollRef.current) {\n clearInterval(id);\n } else {\n handleButtonNavigation(true);\n }\n }\n\n return () => clearInterval(id);\n },\n [autoScrollTimer, shouldAutoScroll]\n );\n\n useEffect(\n () => {\n const {\n current: { offsetWidth, scrollWidth }\n } = ref;\n if (scrollWidth <= offsetWidth)\n setButtonDisplays({ displayLeft: false, displayRight: false });\n setShouldAutoScroll(enableAutoScroll);\n },\n [enableAutoScroll]\n );\n\n const handleScroll = () => {\n const {\n current: { offsetWidth, scrollLeft, scrollWidth }\n } = ref;\n const updatedDisplayLeft = !!scrollLeft;\n const updatedDisplayRight = scrollLeft + offsetWidth + 1 < scrollWidth;\n setButtonDisplays({ displayLeft: updatedDisplayLeft, displayRight: updatedDisplayRight });\n };\n\n const handleButtonNavigation = direction => {\n if (!ref || !ref.current) return;\n const {\n current: { offsetWidth, scrollLeft, scrollWidth }\n } = ref;\n\n if (autoScrollRef.current && scrollLeft + offsetWidth >= scrollWidth) {\n ref.current.scrollLeft = 0;\n } else {\n ref.current.scrollLeft = direction ? scrollLeft + offsetWidth : scrollLeft - offsetWidth;\n }\n };\n\n const { displayLeft, displayRight } = buttonDisplay;\n const wrapperClassName = `cards-carousel${bannerModifier}`;\n const contentClassName = `cards-carousel--content items-per-row-${itemsPerRow}`;\n\n return (\n <div className={wrapperClassName}>\n <div className=\"cards-carousel--left-button-wrapper\">\n {displayLeft && (\n <button\n type=\"button\"\n className=\"cards-carousel--button-back icon-button icon\"\n onClick={() => {\n setShouldAutoScroll(false);\n handleButtonNavigation();\n }}>\n <i className=\"cards-carousel--arrow cards-carousel--arrow__left\" />\n </button>\n )}\n </div>\n <div className=\"cards-carousel--right-button-wrapper\">\n {displayRight && (\n <button\n type=\"button\"\n className=\"cards-carousel--button-forward icon-button icon\"\n onClick={() => {\n setShouldAutoScroll(false);\n handleButtonNavigation(true);\n }}>\n <i className=\"cards-carousel--arrow cards-carousel--arrow__right\" />\n </button>\n )}\n </div>\n <div className={contentClassName} ref={ref} onScroll={handleScroll}>\n {children}\n </div>\n </div>\n );\n};\n\nCarouselWrapper.propTypes = {\n bannerModifier: PropTypes.string,\n itemsPerRow: PropTypes.number,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n enableAutoScroll: PropTypes.bool,\n autoScrollTimer: PropTypes.number,\n arrowSize: PropTypes.number\n};\n\nCarouselWrapper.defaultProps = {\n itemsPerRow: 0,\n bannerModifier: '',\n children: [],\n enableAutoScroll: false,\n autoScrollTimer: 0,\n arrowSize: 14\n};\n\nexport default CarouselWrapper;\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselWrapper.js","names":["React","useRef","useState","useEffect","PropTypes","CarouselWrapper","children","bannerModifier","itemsPerRow","enableAutoScroll","autoScrollTimer","arrowSize","ref","buttonDisplay","setButtonDisplays","displayLeft","displayRight","shouldAutoScroll","setShouldAutoScroll","autoScrollRef","current","id","setInterval","scrollCheck","clearInterval","handleButtonNavigation","offsetWidth","scrollWidth","handleScroll","scrollLeft","updatedDisplayLeft","updatedDisplayRight","direction","wrapperClassName","contentClassName","createElement","className","type","onClick","onScroll","propTypes","string","number","oneOfType","arrayOf","node","bool","defaultProps"],"sources":["../../src/components/CarouselWrapper.js"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nconst CarouselWrapper = ({\n children,\n bannerModifier,\n itemsPerRow,\n enableAutoScroll,\n autoScrollTimer,\n arrowSize\n}) => {\n const ref = useRef();\n const [buttonDisplay, setButtonDisplays] = useState({ displayLeft: false, displayRight: true });\n const [shouldAutoScroll, setShouldAutoScroll] = useState(false);\n const autoScrollRef = useRef();\n\n useEffect(\n () => {\n autoScrollRef.current = shouldAutoScroll;\n const id = setInterval(scrollCheck, autoScrollTimer);\n function scrollCheck() {\n if (!autoScrollRef.current) {\n clearInterval(id);\n } else {\n handleButtonNavigation(true);\n }\n }\n\n return () => clearInterval(id);\n },\n [autoScrollTimer, shouldAutoScroll]\n );\n\n useEffect(\n () => {\n const {\n current: { offsetWidth, scrollWidth }\n } = ref;\n if (scrollWidth <= offsetWidth)\n setButtonDisplays({ displayLeft: false, displayRight: false });\n setShouldAutoScroll(enableAutoScroll);\n },\n [enableAutoScroll]\n );\n\n const handleScroll = () => {\n const {\n current: { offsetWidth, scrollLeft, scrollWidth }\n } = ref;\n const updatedDisplayLeft = !!scrollLeft;\n const updatedDisplayRight = scrollLeft + offsetWidth + 1 < scrollWidth;\n setButtonDisplays({ displayLeft: updatedDisplayLeft, displayRight: updatedDisplayRight });\n };\n\n const handleButtonNavigation = direction => {\n if (!ref || !ref.current) return;\n const {\n current: { offsetWidth, scrollLeft, scrollWidth }\n } = ref;\n\n if (autoScrollRef.current && scrollLeft + offsetWidth >= scrollWidth) {\n ref.current.scrollLeft = 0;\n } else {\n ref.current.scrollLeft = direction ? scrollLeft + offsetWidth : scrollLeft - offsetWidth;\n }\n };\n\n const { displayLeft, displayRight } = buttonDisplay;\n const wrapperClassName = `cards-carousel${bannerModifier}`;\n const contentClassName = `cards-carousel--content items-per-row-${itemsPerRow}`;\n\n return (\n <div className={wrapperClassName}>\n <div className=\"cards-carousel--left-button-wrapper\">\n {displayLeft && (\n <button\n type=\"button\"\n className=\"cards-carousel--button-back icon-button icon\"\n onClick={() => {\n setShouldAutoScroll(false);\n handleButtonNavigation();\n }}>\n <i className=\"cards-carousel--arrow cards-carousel--arrow__left\" />\n </button>\n )}\n </div>\n <div className=\"cards-carousel--right-button-wrapper\">\n {displayRight && (\n <button\n type=\"button\"\n className=\"cards-carousel--button-forward icon-button icon\"\n onClick={() => {\n setShouldAutoScroll(false);\n handleButtonNavigation(true);\n }}>\n <i className=\"cards-carousel--arrow cards-carousel--arrow__right\" />\n </button>\n )}\n </div>\n <div className={contentClassName} ref={ref} onScroll={handleScroll}>\n {children}\n </div>\n </div>\n );\n};\n\nCarouselWrapper.propTypes = {\n bannerModifier: PropTypes.string,\n itemsPerRow: PropTypes.number,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n enableAutoScroll: PropTypes.bool,\n autoScrollTimer: PropTypes.number,\n arrowSize: PropTypes.number\n};\n\nCarouselWrapper.defaultProps = {\n itemsPerRow: 0,\n bannerModifier: '',\n children: [],\n enableAutoScroll: false,\n autoScrollTimer: 0,\n arrowSize: 14\n};\n\nexport default CarouselWrapper;\n"],"mappings":"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"}
|
package/tests/unit/src/components/List/components/Cards/CardRenderWithInfiniteScroll.test.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import CardsRender from '../../../../../../../src/components/List/components/Cards';
|
|
2
|
-
import withInfiniteScroll from '../../../../../../../src/HOC/withInfiniteScroll';
|
|
3
|
-
|
|
4
|
-
jest.mock('../../../../../../../src/HOC/withInfiniteScroll', () => jest.fn(component => component));
|
|
5
|
-
|
|
6
|
-
describe('CardRenderWithInfiniteScroll component', () => {
|
|
7
|
-
it('should wrap FullRender with infinitieScroll HOC', async () => {
|
|
8
|
-
const CardRenderWithInfiniteScroll = await import('../../../../../../../src/components/List/components/Cards/CardRenderWithInfiniteScroll');
|
|
9
|
-
expect(CardRenderWithInfiniteScroll.default).toBe(CardsRender);
|
|
10
|
-
expect(withInfiniteScroll).toHaveBeenCalledWith(CardsRender);
|
|
11
|
-
});
|
|
12
|
-
});
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import FullRender from '../../../../../../../src/components/List/components/Full';
|
|
2
|
-
import withInfiniteScroll from '../../../../../../../src/HOC/withInfiniteScroll';
|
|
3
|
-
|
|
4
|
-
jest.mock('../../../../../../../src/HOC/withInfiniteScroll', () => jest.fn(component => component));
|
|
5
|
-
|
|
6
|
-
describe('FullRenderWithInfiniteScroll component', () => {
|
|
7
|
-
it('should wrap FullRender with infinitieScroll HOC', async () => {
|
|
8
|
-
const FullRenderWithInfiniteScroll = await import('../../../../../../../src/components/List/components/Full/FullRenderWithInfiniteScroll');
|
|
9
|
-
expect(FullRenderWithInfiniteScroll.default).toBe(FullRender);
|
|
10
|
-
expect(withInfiniteScroll).toHaveBeenCalledWith(FullRender);
|
|
11
|
-
});
|
|
12
|
-
});
|