@mjhls/mjh-framework 1.0.939-iamge-width-v2 → 1.0.939-nojs-pagination-v1
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/dist/cjs/DeckContent.js
CHANGED
|
@@ -74,7 +74,9 @@ var DeckContent = function (_React$Component) {
|
|
|
74
74
|
total_pages: null,
|
|
75
75
|
scrolling: true,
|
|
76
76
|
query: _this.query,
|
|
77
|
-
currentPage: _this.props.currentPage || 1
|
|
77
|
+
currentPage: _this.props.currentPage || 1,
|
|
78
|
+
lastDataSize: _this.data ? _this.data.length : 0,
|
|
79
|
+
itemsPerPage: _this.params.itemsPerPage || 3
|
|
78
80
|
}, _this.loadMore = debounce.debounce_1(function () {
|
|
79
81
|
_this.setState(function (state) {
|
|
80
82
|
var page = state.page,
|
|
@@ -116,33 +118,24 @@ var DeckContent = function (_React$Component) {
|
|
|
116
118
|
if (dataArr.length > 0) {
|
|
117
119
|
return {
|
|
118
120
|
data: [].concat(toConsumableArray._toConsumableArray(data), toConsumableArray._toConsumableArray(dataArr)),
|
|
119
|
-
scrolling: true
|
|
121
|
+
scrolling: true,
|
|
122
|
+
lastDataSize: dataArr.length
|
|
120
123
|
};
|
|
121
124
|
} else {
|
|
122
125
|
return {
|
|
123
|
-
scrolling: false
|
|
126
|
+
scrolling: false,
|
|
127
|
+
lastDataSize: 0
|
|
124
128
|
};
|
|
125
129
|
}
|
|
126
130
|
});
|
|
127
131
|
});
|
|
128
|
-
}, _this.renderCardImage = function (row, page
|
|
129
|
-
var getImageWidth = function getImageWidth(lgVar) {
|
|
130
|
-
if (main.main_43 === true) {
|
|
131
|
-
return Number(_this.props.imageWidth) / 2;
|
|
132
|
-
} else if (lgVar === 12) {
|
|
133
|
-
return Number(_this.props.imageWidth);
|
|
134
|
-
} else if (lgVar === 6) {
|
|
135
|
-
return Number(_this.props.imageWidth) / 2;
|
|
136
|
-
} else {
|
|
137
|
-
return Number(_this.props.imageWidth) / (12 / lgVar);
|
|
138
|
-
}
|
|
139
|
-
};
|
|
132
|
+
}, _this.renderCardImage = function (row, page) {
|
|
140
133
|
if (row.thumbnail && row.thumbnail.asset) {
|
|
141
134
|
var url = urlFor({
|
|
142
135
|
client: _this.client,
|
|
143
136
|
source: row.thumbnail,
|
|
144
137
|
imageHeight: _this.props.imageHeight || null,
|
|
145
|
-
imageWidth:
|
|
138
|
+
imageWidth: _this.props.imageWidth || null,
|
|
146
139
|
imageFit: _this.props.imageFit || null
|
|
147
140
|
});
|
|
148
141
|
return url;
|
|
@@ -299,19 +292,7 @@ var DeckContent = function (_React$Component) {
|
|
|
299
292
|
} else {
|
|
300
293
|
articles = _this.state.data;
|
|
301
294
|
}
|
|
302
|
-
|
|
303
|
-
if (mobileView) {
|
|
304
|
-
return actualWidth > actualHeight ? Number(_this.props.imageWidth) / (2 * aspectRatio) + 'px' : Number(_this.props.imageWidth) * (2 * aspectRatio) + 'px';
|
|
305
|
-
} else {
|
|
306
|
-
if (lgVar === 12) {
|
|
307
|
-
return actualWidth > actualHeight ? Number(_this.props.imageWidth) / aspectRatio + 'px' : Number(_this.props.imageWidth) * aspectRatio + 'px';
|
|
308
|
-
} else if (lgVar === 6) {
|
|
309
|
-
return actualWidth > actualHeight ? Number(_this.props.imageWidth) / (2 * aspectRatio) + 'px' : Number(_this.props.imageWidth) * (2 * aspectRatio) + 'px';
|
|
310
|
-
} else {
|
|
311
|
-
return actualWidth > actualHeight ? Number(_this.props.imageWidth) / (12 / lgVar * aspectRatio) + 'px' : Number(_this.props.imageWidth) * (12 / lgVar * aspectRatio) + 'px';
|
|
312
|
-
}
|
|
313
|
-
}
|
|
314
|
-
};
|
|
295
|
+
|
|
315
296
|
return React__default['default'].createElement(
|
|
316
297
|
Row__default['default'],
|
|
317
298
|
null,
|
|
@@ -345,17 +326,13 @@ var DeckContent = function (_React$Component) {
|
|
|
345
326
|
{ className: 'content-card', style: { flexDirection: mode } },
|
|
346
327
|
(row.thumbnail && row.thumbnail.asset || _this.props.defaultImage) && React__default['default'].createElement(
|
|
347
328
|
'a',
|
|
348
|
-
{
|
|
349
|
-
href: _this.mapping[contentCategoryName] + '/' + row.url.current,
|
|
350
|
-
style: {
|
|
351
|
-
minHeight: getImageHeight(lgVar, row.thumbnail.asset.metadata.dimensions.aspectRatio, row.thumbnail.asset.metadata.dimensions.width, row.thumbnail.asset.metadata.dimensions.height, main.main_43)
|
|
352
|
-
} },
|
|
329
|
+
{ href: _this.mapping[contentCategoryName] + '/' + row.url.current },
|
|
353
330
|
React__default['default'].createElement(
|
|
354
331
|
index$1.LazyLoad,
|
|
355
332
|
{ height: _this.props.imageHeight },
|
|
356
333
|
React__default['default'].createElement(Card__default['default'].Img, {
|
|
357
334
|
variant: 'top',
|
|
358
|
-
src: _this.renderCardImage(row, page
|
|
335
|
+
src: _this.renderCardImage(row, page),
|
|
359
336
|
alt: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.originalFilename : ''
|
|
360
337
|
})
|
|
361
338
|
)
|
|
@@ -406,6 +383,9 @@ var DeckContent = function (_React$Component) {
|
|
|
406
383
|
}, _this.renderManualPagination = function () {
|
|
407
384
|
var currentPage = _this.state.currentPage;
|
|
408
385
|
|
|
386
|
+
if (_this.state.lastDataSize < _this.state.itemsPerPage) {
|
|
387
|
+
return null;
|
|
388
|
+
}
|
|
409
389
|
return React__default['default'].createElement(
|
|
410
390
|
'div',
|
|
411
391
|
{ className: 'd-flex justify-content-between' },
|
package/dist/cjs/GridContent.js
CHANGED
|
@@ -85,7 +85,8 @@ var GridContent = function (_React$Component) {
|
|
|
85
85
|
currentPage: _this.props.currentPage || 1,
|
|
86
86
|
lgInfeedAd: _this.props.lgInfeedAd ? _this.props.lgInfeedAd : false,
|
|
87
87
|
showCategory: _this.props.showCategory ? _this.props.showCategory : false,
|
|
88
|
-
contentCategoryMapping: _this.props.contentCategoryMapping ? contentCategoryMapping : []
|
|
88
|
+
contentCategoryMapping: _this.props.contentCategoryMapping ? contentCategoryMapping : [],
|
|
89
|
+
lastDataSize: _this.data ? _this.data.length : 0
|
|
89
90
|
}, _this.loadMore = debounce.debounce_1(function () {
|
|
90
91
|
_this.setState(function (state) {
|
|
91
92
|
var page = state.page,
|
|
@@ -140,11 +141,13 @@ var GridContent = function (_React$Component) {
|
|
|
140
141
|
if (dataArr.length > 0) {
|
|
141
142
|
return {
|
|
142
143
|
data: [].concat(toConsumableArray._toConsumableArray(data), toConsumableArray._toConsumableArray(dataArr)),
|
|
143
|
-
scrolling: true
|
|
144
|
+
scrolling: true,
|
|
145
|
+
lastDataSize: dataArr.length
|
|
144
146
|
};
|
|
145
147
|
} else {
|
|
146
148
|
return {
|
|
147
|
-
scrolling: false
|
|
149
|
+
scrolling: false,
|
|
150
|
+
lastDataSize: 0
|
|
148
151
|
};
|
|
149
152
|
}
|
|
150
153
|
});
|
|
@@ -239,6 +242,9 @@ var GridContent = function (_React$Component) {
|
|
|
239
242
|
}, _this.renderManualPagination = function () {
|
|
240
243
|
var currentPage = _this.state.currentPage;
|
|
241
244
|
|
|
245
|
+
if (_this.state.lastDataSize < _this.state.per) {
|
|
246
|
+
return null;
|
|
247
|
+
}
|
|
242
248
|
return React__default['default'].createElement(
|
|
243
249
|
'div',
|
|
244
250
|
{ className: 'd-flex justify-content-between' },
|
|
@@ -746,12 +752,21 @@ var GridContent = function (_React$Component) {
|
|
|
746
752
|
'div',
|
|
747
753
|
{ className: 'contentDeck' },
|
|
748
754
|
autoScroll ? React__default['default'].createElement(
|
|
749
|
-
|
|
750
|
-
|
|
755
|
+
React__default['default'].Fragment,
|
|
756
|
+
null,
|
|
751
757
|
React__default['default'].createElement(
|
|
752
|
-
|
|
758
|
+
index_es.InfiniteScroll,
|
|
759
|
+
{ dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling, scrollThreshold: 0.9 },
|
|
760
|
+
React__default['default'].createElement(
|
|
761
|
+
Container__default['default'],
|
|
762
|
+
null,
|
|
763
|
+
this.cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight, this.state.lgInfeedAd, this.state.contentCategoryMapping)
|
|
764
|
+
)
|
|
765
|
+
),
|
|
766
|
+
React__default['default'].createElement(
|
|
767
|
+
'noscript',
|
|
753
768
|
null,
|
|
754
|
-
this.
|
|
769
|
+
this.renderManualPagination()
|
|
755
770
|
)
|
|
756
771
|
) : React__default['default'].createElement(
|
|
757
772
|
React__default['default'].Fragment,
|
|
@@ -86,7 +86,8 @@ var VideoSeriesListing = function (_React$Component) {
|
|
|
86
86
|
total_pages: null,
|
|
87
87
|
scrolling: true,
|
|
88
88
|
query: _this.query,
|
|
89
|
-
currentPage: _this.props.currentPage || 1
|
|
89
|
+
currentPage: _this.props.currentPage || 1,
|
|
90
|
+
lastDataSize: _this.data ? _this.data.length : 0
|
|
90
91
|
}, _this.loadMore = debounce.debounce_1(function () {
|
|
91
92
|
_this.setState(function (state) {
|
|
92
93
|
var page = state.page,
|
|
@@ -130,11 +131,13 @@ var VideoSeriesListing = function (_React$Component) {
|
|
|
130
131
|
newDataArr.push(dataArr);
|
|
131
132
|
return {
|
|
132
133
|
data: newDataArr,
|
|
133
|
-
scrolling: true
|
|
134
|
+
scrolling: true,
|
|
135
|
+
lastDataSize: dataArr.length
|
|
134
136
|
};
|
|
135
137
|
} else {
|
|
136
138
|
return {
|
|
137
|
-
scrolling: false
|
|
139
|
+
scrolling: false,
|
|
140
|
+
lastDataSize: 0
|
|
138
141
|
};
|
|
139
142
|
}
|
|
140
143
|
});
|
|
@@ -201,6 +204,9 @@ var VideoSeriesListing = function (_React$Component) {
|
|
|
201
204
|
}, _this.renderManualPagination = function () {
|
|
202
205
|
var currentPage = _this.state.currentPage;
|
|
203
206
|
|
|
207
|
+
if (_this.state.lastDataSize < _this.state.per) {
|
|
208
|
+
return null;
|
|
209
|
+
}
|
|
204
210
|
return React__default['default'].createElement(
|
|
205
211
|
'div',
|
|
206
212
|
{ className: 'd-flex justify-content-between' },
|
package/dist/esm/DeckContent.js
CHANGED
|
@@ -64,7 +64,9 @@ var DeckContent = function (_React$Component) {
|
|
|
64
64
|
total_pages: null,
|
|
65
65
|
scrolling: true,
|
|
66
66
|
query: _this.query,
|
|
67
|
-
currentPage: _this.props.currentPage || 1
|
|
67
|
+
currentPage: _this.props.currentPage || 1,
|
|
68
|
+
lastDataSize: _this.data ? _this.data.length : 0,
|
|
69
|
+
itemsPerPage: _this.params.itemsPerPage || 3
|
|
68
70
|
}, _this.loadMore = debounce_1(function () {
|
|
69
71
|
_this.setState(function (state) {
|
|
70
72
|
var page = state.page,
|
|
@@ -106,33 +108,24 @@ var DeckContent = function (_React$Component) {
|
|
|
106
108
|
if (dataArr.length > 0) {
|
|
107
109
|
return {
|
|
108
110
|
data: [].concat(_toConsumableArray(data), _toConsumableArray(dataArr)),
|
|
109
|
-
scrolling: true
|
|
111
|
+
scrolling: true,
|
|
112
|
+
lastDataSize: dataArr.length
|
|
110
113
|
};
|
|
111
114
|
} else {
|
|
112
115
|
return {
|
|
113
|
-
scrolling: false
|
|
116
|
+
scrolling: false,
|
|
117
|
+
lastDataSize: 0
|
|
114
118
|
};
|
|
115
119
|
}
|
|
116
120
|
});
|
|
117
121
|
});
|
|
118
|
-
}, _this.renderCardImage = function (row, page
|
|
119
|
-
var getImageWidth = function getImageWidth(lgVar) {
|
|
120
|
-
if (main_43 === true) {
|
|
121
|
-
return Number(_this.props.imageWidth) / 2;
|
|
122
|
-
} else if (lgVar === 12) {
|
|
123
|
-
return Number(_this.props.imageWidth);
|
|
124
|
-
} else if (lgVar === 6) {
|
|
125
|
-
return Number(_this.props.imageWidth) / 2;
|
|
126
|
-
} else {
|
|
127
|
-
return Number(_this.props.imageWidth) / (12 / lgVar);
|
|
128
|
-
}
|
|
129
|
-
};
|
|
122
|
+
}, _this.renderCardImage = function (row, page) {
|
|
130
123
|
if (row.thumbnail && row.thumbnail.asset) {
|
|
131
124
|
var url = urlFor({
|
|
132
125
|
client: _this.client,
|
|
133
126
|
source: row.thumbnail,
|
|
134
127
|
imageHeight: _this.props.imageHeight || null,
|
|
135
|
-
imageWidth:
|
|
128
|
+
imageWidth: _this.props.imageWidth || null,
|
|
136
129
|
imageFit: _this.props.imageFit || null
|
|
137
130
|
});
|
|
138
131
|
return url;
|
|
@@ -289,19 +282,7 @@ var DeckContent = function (_React$Component) {
|
|
|
289
282
|
} else {
|
|
290
283
|
articles = _this.state.data;
|
|
291
284
|
}
|
|
292
|
-
|
|
293
|
-
if (mobileView) {
|
|
294
|
-
return actualWidth > actualHeight ? Number(_this.props.imageWidth) / (2 * aspectRatio) + 'px' : Number(_this.props.imageWidth) * (2 * aspectRatio) + 'px';
|
|
295
|
-
} else {
|
|
296
|
-
if (lgVar === 12) {
|
|
297
|
-
return actualWidth > actualHeight ? Number(_this.props.imageWidth) / aspectRatio + 'px' : Number(_this.props.imageWidth) * aspectRatio + 'px';
|
|
298
|
-
} else if (lgVar === 6) {
|
|
299
|
-
return actualWidth > actualHeight ? Number(_this.props.imageWidth) / (2 * aspectRatio) + 'px' : Number(_this.props.imageWidth) * (2 * aspectRatio) + 'px';
|
|
300
|
-
} else {
|
|
301
|
-
return actualWidth > actualHeight ? Number(_this.props.imageWidth) / (12 / lgVar * aspectRatio) + 'px' : Number(_this.props.imageWidth) * (12 / lgVar * aspectRatio) + 'px';
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
};
|
|
285
|
+
|
|
305
286
|
return React__default.createElement(
|
|
306
287
|
Row,
|
|
307
288
|
null,
|
|
@@ -335,17 +316,13 @@ var DeckContent = function (_React$Component) {
|
|
|
335
316
|
{ className: 'content-card', style: { flexDirection: mode } },
|
|
336
317
|
(row.thumbnail && row.thumbnail.asset || _this.props.defaultImage) && React__default.createElement(
|
|
337
318
|
'a',
|
|
338
|
-
{
|
|
339
|
-
href: _this.mapping[contentCategoryName] + '/' + row.url.current,
|
|
340
|
-
style: {
|
|
341
|
-
minHeight: getImageHeight(lgVar, row.thumbnail.asset.metadata.dimensions.aspectRatio, row.thumbnail.asset.metadata.dimensions.width, row.thumbnail.asset.metadata.dimensions.height, main_43)
|
|
342
|
-
} },
|
|
319
|
+
{ href: _this.mapping[contentCategoryName] + '/' + row.url.current },
|
|
343
320
|
React__default.createElement(
|
|
344
321
|
LazyLoad,
|
|
345
322
|
{ height: _this.props.imageHeight },
|
|
346
323
|
React__default.createElement(Card.Img, {
|
|
347
324
|
variant: 'top',
|
|
348
|
-
src: _this.renderCardImage(row, page
|
|
325
|
+
src: _this.renderCardImage(row, page),
|
|
349
326
|
alt: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.originalFilename : ''
|
|
350
327
|
})
|
|
351
328
|
)
|
|
@@ -396,6 +373,9 @@ var DeckContent = function (_React$Component) {
|
|
|
396
373
|
}, _this.renderManualPagination = function () {
|
|
397
374
|
var currentPage = _this.state.currentPage;
|
|
398
375
|
|
|
376
|
+
if (_this.state.lastDataSize < _this.state.itemsPerPage) {
|
|
377
|
+
return null;
|
|
378
|
+
}
|
|
399
379
|
return React__default.createElement(
|
|
400
380
|
'div',
|
|
401
381
|
{ className: 'd-flex justify-content-between' },
|
package/dist/esm/GridContent.js
CHANGED
|
@@ -75,7 +75,8 @@ var GridContent = function (_React$Component) {
|
|
|
75
75
|
currentPage: _this.props.currentPage || 1,
|
|
76
76
|
lgInfeedAd: _this.props.lgInfeedAd ? _this.props.lgInfeedAd : false,
|
|
77
77
|
showCategory: _this.props.showCategory ? _this.props.showCategory : false,
|
|
78
|
-
contentCategoryMapping: _this.props.contentCategoryMapping ? contentCategoryMapping : []
|
|
78
|
+
contentCategoryMapping: _this.props.contentCategoryMapping ? contentCategoryMapping : [],
|
|
79
|
+
lastDataSize: _this.data ? _this.data.length : 0
|
|
79
80
|
}, _this.loadMore = debounce_1(function () {
|
|
80
81
|
_this.setState(function (state) {
|
|
81
82
|
var page = state.page,
|
|
@@ -130,11 +131,13 @@ var GridContent = function (_React$Component) {
|
|
|
130
131
|
if (dataArr.length > 0) {
|
|
131
132
|
return {
|
|
132
133
|
data: [].concat(_toConsumableArray(data), _toConsumableArray(dataArr)),
|
|
133
|
-
scrolling: true
|
|
134
|
+
scrolling: true,
|
|
135
|
+
lastDataSize: dataArr.length
|
|
134
136
|
};
|
|
135
137
|
} else {
|
|
136
138
|
return {
|
|
137
|
-
scrolling: false
|
|
139
|
+
scrolling: false,
|
|
140
|
+
lastDataSize: 0
|
|
138
141
|
};
|
|
139
142
|
}
|
|
140
143
|
});
|
|
@@ -229,6 +232,9 @@ var GridContent = function (_React$Component) {
|
|
|
229
232
|
}, _this.renderManualPagination = function () {
|
|
230
233
|
var currentPage = _this.state.currentPage;
|
|
231
234
|
|
|
235
|
+
if (_this.state.lastDataSize < _this.state.per) {
|
|
236
|
+
return null;
|
|
237
|
+
}
|
|
232
238
|
return React__default.createElement(
|
|
233
239
|
'div',
|
|
234
240
|
{ className: 'd-flex justify-content-between' },
|
|
@@ -736,12 +742,21 @@ var GridContent = function (_React$Component) {
|
|
|
736
742
|
'div',
|
|
737
743
|
{ className: 'contentDeck' },
|
|
738
744
|
autoScroll ? React__default.createElement(
|
|
739
|
-
|
|
740
|
-
|
|
745
|
+
React__default.Fragment,
|
|
746
|
+
null,
|
|
741
747
|
React__default.createElement(
|
|
742
|
-
|
|
748
|
+
InfiniteScroll,
|
|
749
|
+
{ dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling, scrollThreshold: 0.9 },
|
|
750
|
+
React__default.createElement(
|
|
751
|
+
Container,
|
|
752
|
+
null,
|
|
753
|
+
this.cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight, this.state.lgInfeedAd, this.state.contentCategoryMapping)
|
|
754
|
+
)
|
|
755
|
+
),
|
|
756
|
+
React__default.createElement(
|
|
757
|
+
'noscript',
|
|
743
758
|
null,
|
|
744
|
-
this.
|
|
759
|
+
this.renderManualPagination()
|
|
745
760
|
)
|
|
746
761
|
) : React__default.createElement(
|
|
747
762
|
React__default.Fragment,
|
|
@@ -79,7 +79,8 @@ var VideoSeriesListing = function (_React$Component) {
|
|
|
79
79
|
total_pages: null,
|
|
80
80
|
scrolling: true,
|
|
81
81
|
query: _this.query,
|
|
82
|
-
currentPage: _this.props.currentPage || 1
|
|
82
|
+
currentPage: _this.props.currentPage || 1,
|
|
83
|
+
lastDataSize: _this.data ? _this.data.length : 0
|
|
83
84
|
}, _this.loadMore = debounce_1(function () {
|
|
84
85
|
_this.setState(function (state) {
|
|
85
86
|
var page = state.page,
|
|
@@ -123,11 +124,13 @@ var VideoSeriesListing = function (_React$Component) {
|
|
|
123
124
|
newDataArr.push(dataArr);
|
|
124
125
|
return {
|
|
125
126
|
data: newDataArr,
|
|
126
|
-
scrolling: true
|
|
127
|
+
scrolling: true,
|
|
128
|
+
lastDataSize: dataArr.length
|
|
127
129
|
};
|
|
128
130
|
} else {
|
|
129
131
|
return {
|
|
130
|
-
scrolling: false
|
|
132
|
+
scrolling: false,
|
|
133
|
+
lastDataSize: 0
|
|
131
134
|
};
|
|
132
135
|
}
|
|
133
136
|
});
|
|
@@ -194,6 +197,9 @@ var VideoSeriesListing = function (_React$Component) {
|
|
|
194
197
|
}, _this.renderManualPagination = function () {
|
|
195
198
|
var currentPage = _this.state.currentPage;
|
|
196
199
|
|
|
200
|
+
if (_this.state.lastDataSize < _this.state.per) {
|
|
201
|
+
return null;
|
|
202
|
+
}
|
|
197
203
|
return React__default.createElement(
|
|
198
204
|
'div',
|
|
199
205
|
{ className: 'd-flex justify-content-between' },
|