@mjhls/mjh-framework 1.0.884-content-card-pagination-v1 → 1.0.884-gridcontent-paginated-v2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/GridContent.js +44 -157
  2. package/dist/cjs/GridContentPaginated.js +703 -0
  3. package/dist/cjs/PublicationFeature-5ccf9b13.js +130 -0
  4. package/dist/cjs/index.js +1 -0
  5. package/dist/esm/GridContent.js +2 -114
  6. package/dist/esm/GridContentPaginated.js +692 -0
  7. package/dist/esm/PublicationFeature-d88e76b9.js +121 -0
  8. package/dist/esm/index.js +1 -0
  9. package/package.json +1 -1
package/dist/cjs/GridContent.js CHANGED
@@ -4,7 +4,7 @@ var toConsumableArray = require('./toConsumableArray-d7797c2b.js');
4
4
  var _extends = require('./extends-7c86182f.js');
5
5
  var inherits = require('./inherits-de66ea16.js');
6
6
  var React = require('react');
7
- var index$1 = require('./index-fc2f1ca2.js');
7
+ var index = require('./index-fc2f1ca2.js');
8
8
  var Container = require('react-bootstrap/Container');
9
9
  var Row = require('react-bootstrap/Row');
10
10
  var Col = require('react-bootstrap/Col');
@@ -12,7 +12,7 @@ var Card = require('react-bootstrap/Card');
12
12
  var visibilitySensor = require('./visibility-sensor-eb2c5b69.js');
13
13
  var moment = require('./moment-aca40de1.js');
14
14
  var Router = require('next/router');
15
- var index = require('./index-eadd5035.js');
15
+ var index$1 = require('./index-eadd5035.js');
16
16
  var entities = require('./entities-df1aed86.js');
17
17
  var ADInfeed = require('./ADInfeed-bce0ba07.js');
18
18
  var lodash = require('./lodash-f0783643.js');
@@ -25,7 +25,7 @@ var urlFor = require('./urlFor.js');
25
25
  var main = require('./main-f1c77adb.js');
26
26
  require('./AD.js');
27
27
  var AuthorComponent = require('./AuthorComponent-39b37d84.js');
28
- var Button = require('react-bootstrap/Button');
28
+ var PublicationFeature = require('./PublicationFeature-5ccf9b13.js');
29
29
  require('./_commonjsHelpers-06173234.js');
30
30
  require('./core.get-iterator-method-5643aa10.js');
31
31
  require('./_iter-detect-b1df62f0.js');
@@ -49,6 +49,7 @@ require('./isSymbol-03abbdf0.js');
49
49
  require('./eq-5fc26c07.js');
50
50
  require('./toNumber-5e1fac58.js');
51
51
  require('./index-d48b231c.js');
52
+ require('react-bootstrap/Button');
52
53
 
53
54
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
54
55
 
@@ -57,120 +58,6 @@ var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
57
58
  var Row__default = /*#__PURE__*/_interopDefaultLegacy(Row);
58
59
  var Col__default = /*#__PURE__*/_interopDefaultLegacy(Col);
59
60
  var Card__default = /*#__PURE__*/_interopDefaultLegacy(Card);
60
- var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
61
-
62
- var PublicationFeature = function PublicationFeature(_ref) {
63
- var data = _ref.data,
64
- _ref$issueMapping = _ref.issueMapping,
65
- issueMapping = _ref$issueMapping === undefined ? '/publications' : _ref$issueMapping,
66
- defaultImage = _ref.defaultImage,
67
- client = _ref.client;
68
-
69
- var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
70
- var _data$parent = data.parent;
71
- _data$parent = _data$parent === undefined ? {} : _data$parent;
72
- var _data$parent$identifi = _data$parent.identifier;
73
- _data$parent$identifi = _data$parent$identifi === undefined ? {} : _data$parent$identifi;
74
- var parentSlug = _data$parent$identifi.current,
75
- _data$identifier = data.identifier;
76
- _data$identifier = _data$identifier === undefined ? {} : _data$identifier;
77
- var childSlug = _data$identifier.current,
78
- name = data.name,
79
- articles = data.articles,
80
- month = data.month,
81
- year = data.year,
82
- thumbnail = data.thumbnail;
83
-
84
- if (name && articles && articles.length > 0) {
85
- return React__default['default'].createElement(
86
- 'div',
87
- { className: 'publication-feature-container border rounded p-2' },
88
- React__default['default'].createElement(
89
- Row__default['default'],
90
- null,
91
- React__default['default'].createElement(
92
- Col__default['default'],
93
- { xs: 12 },
94
- React__default['default'].createElement(
95
- 'h4',
96
- null,
97
- name,
98
- month && year && React__default['default'].createElement(
99
- 'span',
100
- null,
101
- ' ',
102
- '| ',
103
- months[parseInt(month, 10)],
104
- ' ',
105
- year
106
- )
107
- )
108
- ),
109
- React__default['default'].createElement(
110
- Col__default['default'],
111
- { xs: 12, sm: 4 },
112
- React__default['default'].createElement(
113
- index.LazyLoad,
114
- { once: true },
115
- React__default['default'].createElement('img', { className: 'w-100 mb-2', src: thumbnail && thumbnail.asset && client ? urlFor({ client: client, source: thumbnail.asset }) : defaultImage, alt: name || '' })
116
- )
117
- ),
118
- React__default['default'].createElement(
119
- Col__default['default'],
120
- { xs: 12, sm: 8 },
121
- React__default['default'].createElement(
122
- Row__default['default'],
123
- null,
124
- articles.map(function (article) {
125
- return React__default['default'].createElement(
126
- Col__default['default'],
127
- { key: article._id, xs: 12, sm: 6 },
128
- article.issueSection && article.issueSection.name && React__default['default'].createElement(
129
- 'h6',
130
- { className: 'text-primary m-0 p-0 text-uppercase font-weight-bold' },
131
- article.issueSection.name
132
- ),
133
- article.title && React__default['default'].createElement(
134
- React__default['default'].Fragment,
135
- null,
136
- article.url && article.url.current ? React__default['default'].createElement(
137
- 'a',
138
- { href: '/view/' + article.url.current },
139
- React__default['default'].createElement(
140
- 'h6',
141
- { className: 'text-break' },
142
- article.title
143
- )
144
- ) : React__default['default'].createElement(
145
- 'h6',
146
- { className: 'text-break' },
147
- article.title
148
- )
149
- )
150
- );
151
- })
152
- )
153
- ),
154
- issueMapping && parentSlug && childSlug && React__default['default'].createElement(
155
- Col__default['default'],
156
- { xs: 12 },
157
- React__default['default'].createElement(
158
- Button__default['default'],
159
- { href: issueMapping + '/' + parentSlug + '/' + childSlug, className: 'float-right', variant: 'outline-primary' },
160
- 'More Articles ',
161
- '>>'
162
- )
163
- )
164
- ),
165
- React__default['default'].createElement(
166
- 'style',
167
- { jsx: 'true' },
168
- '\n .row {\n margin-top: -15px;\n margin-left: -15px;\n margin-right: 0;\n }\n .row > * {\n padding-top: 15px;\n padding-left: 15px;\n padding-right: 0;\n }\n '
169
- )
170
- );
171
- }
172
- return null;
173
- };
174
61
 
175
62
  var GridContent = function (_React$Component) {
176
63
  inherits._inherits(GridContent, _React$Component);
@@ -318,7 +205,7 @@ var GridContent = function (_React$Component) {
318
205
  // pageNumber = Math.ceil((index + 1) / perPage)
319
206
 
320
207
  if (currentPage !== pageNumber) {
321
- index$1.lib_3.refresh();
208
+ index.lib_3.refresh();
322
209
 
323
210
  _this.setState({
324
211
  currentPage: pageNumber
@@ -398,11 +285,11 @@ var GridContent = function (_React$Component) {
398
285
  return React__default['default'].createElement(
399
286
  Row__default['default'],
400
287
  null,
401
- this.state.data && this.state.data.length > 0 ? this.state.data.map(function (row, index$1) {
288
+ this.state.data && this.state.data.length > 0 ? this.state.data.map(function (row, index) {
402
289
  // const thumbnailURL = get(row, 'thumbnail.asset.url', this.props.defaultImage)
403
290
  return React__default['default'].createElement(
404
291
  Col__default['default'],
405
- { key: index$1, md: 12, lg: lgVar, style: { display: 'flex', flex: '1 0 auto' } },
292
+ { key: index, md: 12, lg: lgVar, style: { display: 'flex', flex: '1 0 auto' } },
406
293
  React__default['default'].createElement(
407
294
  Card__default['default'],
408
295
  { className: 'queue-card', style: { borderTop: '1px solid #EEE' } },
@@ -416,7 +303,7 @@ var GridContent = function (_React$Component) {
416
303
  'a',
417
304
  { href: _this2.page + '/' + get.get_1(row, 'url.current') },
418
305
  React__default['default'].createElement(
419
- index.LazyLoad,
306
+ index$1.LazyLoad,
420
307
  { height: _this2.props.imageHeight },
421
308
  React__default['default'].createElement(Card__default['default'].Img, { variant: 'top', src: _this2.renderCardImage(row, page), alt: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.originalFilename : '' })
422
309
  )
@@ -443,12 +330,12 @@ var GridContent = function (_React$Component) {
443
330
  moment.moment(row.published).format('MMMM DD, YYYY')
444
331
  ),
445
332
  _this2.props.showAuthor && row.authorMapping && row.authorMapping.length > 0 && React__default['default'].createElement(
446
- index.LazyLoad,
333
+ index$1.LazyLoad,
447
334
  { height: 50 },
448
- React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: row.authorMapping })
335
+ React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index.toString(), index: index, authors: row.authorMapping })
449
336
  ),
450
337
  _this2.props.showCategory && row.contentCategory && React__default['default'].createElement(
451
- index.LazyLoad,
338
+ index$1.LazyLoad,
452
339
  { height: 50 },
453
340
  React__default['default'].createElement(
454
341
  'p',
@@ -599,7 +486,7 @@ var GridContent = function (_React$Component) {
599
486
  return React__default['default'].createElement(
600
487
  'div',
601
488
  { className: 'grid-container' },
602
- posts && posts.length > 0 ? posts.map(function (row, index$1) {
489
+ posts && posts.length > 0 ? posts.map(function (row, index) {
603
490
  var pageNumber = row.pageNumber || _this2.state.page;
604
491
  var contentCategoryName = row.contentCategory && row.contentCategory.name && _this2.mapping[row.contentCategory.name] ? row.contentCategory.name : 'Articles';
605
492
  var linkHref = row.url && row.url.current ? _this2.mapping[contentCategoryName] + '/' + row.url.current : '';
@@ -614,19 +501,19 @@ var GridContent = function (_React$Component) {
614
501
  {
615
502
  partialVisibility: true,
616
503
  onChange: function onChange(isVisible) {
617
- isVisible && _this2.changePageNumber(pageNumber, itemsPerPage, index$1);
504
+ isVisible && _this2.changePageNumber(pageNumber, itemsPerPage, index);
618
505
  } },
619
506
  React__default['default'].createElement(
620
507
  'div',
621
508
  { counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
622
509
  React__default['default'].createElement(
623
510
  Card__default['default'],
624
- { className: 'content-card', style: { flexDirection: index$1 === 0 || index$1 % 4 === 0 ? 'top' : 'row' } },
511
+ { className: 'content-card', style: { flexDirection: index === 0 || index % 4 === 0 ? 'top' : 'row' } },
625
512
  (row.thumbnail && row.thumbnail.asset || _this2.props.defaultImage) && React__default['default'].createElement(
626
513
  'a',
627
- { rel: 'noopener', href: row.url.current, target: '_blank', className: index$1 === 0 || index$1 % 4 === 0 ? '' : 'card-image' },
514
+ { rel: 'noopener', href: row.url.current, target: '_blank', className: index === 0 || index % 4 === 0 ? '' : 'card-image' },
628
515
  React__default['default'].createElement(
629
- index.LazyLoad,
516
+ index$1.LazyLoad,
630
517
  { height: _this2.props.imageHeight },
631
518
  React__default['default'].createElement(Card__default['default'].Img, {
632
519
  variant: 'top',
@@ -653,21 +540,21 @@ var GridContent = function (_React$Component) {
653
540
  moment.moment(row.published).format('MMMM DD, YYYY')
654
541
  ),
655
542
  _this2.props.showAuthor && row.authorMapping && row.authorMapping.length > 0 && React__default['default'].createElement(
656
- index.LazyLoad,
543
+ index$1.LazyLoad,
657
544
  { height: 50 },
658
- React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: row.authorMapping })
545
+ React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index.toString(), index: index, authors: row.authorMapping })
659
546
  ),
660
547
  React__default['default'].createElement(
661
548
  Card__default['default'].Text,
662
- { className: index$1 === 0 || index$1 % 4 === 0 ? '' : 'card-subtext' },
549
+ { className: index === 0 || index % 4 === 0 ? '' : 'card-subtext' },
663
550
  entities.clean_html_1(row.summary)
664
551
  )
665
552
  )
666
553
  )
667
554
  )
668
555
  ),
669
- showVideo && (posts.length < numberOfItemsBeforeVideo || index$1 + 1 === numberOfItemsBeforeVideo) && React__default['default'].createElement(VideoPlayer, null),
670
- main.main_43 && _this2.props.rightItems && (index$1 + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index$1, numberOfItemsBeforeAd)
556
+ showVideo && (posts.length < numberOfItemsBeforeVideo || index + 1 === numberOfItemsBeforeVideo) && React__default['default'].createElement(VideoPlayer, null),
557
+ main.main_43 && _this2.props.rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index, numberOfItemsBeforeAd)
671
558
  );
672
559
  } else {
673
560
  return React__default['default'].createElement(
@@ -678,19 +565,19 @@ var GridContent = function (_React$Component) {
678
565
  {
679
566
  partialVisibility: true,
680
567
  onChange: function onChange(isVisible) {
681
- isVisible && _this2.changePageNumber(pageNumber, itemsPerPage, index$1);
568
+ isVisible && _this2.changePageNumber(pageNumber, itemsPerPage, index);
682
569
  } },
683
570
  React__default['default'].createElement(
684
571
  'div',
685
572
  { counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
686
573
  React__default['default'].createElement(
687
574
  Card__default['default'],
688
- { className: 'content-card', style: { flexDirection: index$1 === 0 || index$1 % 4 === 0 ? 'top' : 'row' } },
575
+ { className: 'content-card', style: { flexDirection: index === 0 || index % 4 === 0 ? 'top' : 'row' } },
689
576
  (row.thumbnail && row.thumbnail.asset || _this2.props.defaultImage) && React__default['default'].createElement(
690
577
  'a',
691
- { href: row.url.current, className: index$1 === 0 || index$1 % 4 === 0 ? '' : 'card-image' },
578
+ { href: row.url.current, className: index === 0 || index % 4 === 0 ? '' : 'card-image' },
692
579
  React__default['default'].createElement(
693
- index.LazyLoad,
580
+ index$1.LazyLoad,
694
581
  { height: _this2.props.imageHeight },
695
582
  React__default['default'].createElement(Card__default['default'].Img, {
696
583
  variant: 'top',
@@ -717,29 +604,29 @@ var GridContent = function (_React$Component) {
717
604
  moment.moment(row.published).format('MMMM DD, YYYY')
718
605
  ),
719
606
  _this2.props.showAuthor && row.authorMapping && row.authorMapping.length > 0 && React__default['default'].createElement(
720
- index.LazyLoad,
607
+ index$1.LazyLoad,
721
608
  { height: 50 },
722
- React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: row.authorMapping })
609
+ React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index.toString(), index: index, authors: row.authorMapping })
723
610
  ),
724
611
  React__default['default'].createElement(
725
612
  Card__default['default'].Text,
726
- { className: index$1 === 0 || index$1 % 4 === 0 ? '' : 'card-subtext' },
613
+ { className: index === 0 || index % 4 === 0 ? '' : 'card-subtext' },
727
614
  entities.clean_html_1(row.summary)
728
615
  )
729
616
  )
730
617
  )
731
618
  )
732
619
  ),
733
- showVideo && (posts.length < numberOfItemsBeforeVideo || index$1 + 1 === numberOfItemsBeforeVideo) && React__default['default'].createElement(VideoPlayer, null),
734
- main.main_43 && _this2.props.rightItems && (index$1 + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index$1, numberOfItemsBeforeAd)
620
+ showVideo && (posts.length < numberOfItemsBeforeVideo || index + 1 === numberOfItemsBeforeVideo) && React__default['default'].createElement(VideoPlayer, null),
621
+ main.main_43 && _this2.props.rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index, numberOfItemsBeforeAd)
735
622
  );
736
623
  }
737
624
  } else if (row._type === 'lg-infeed' && row.adUnit) {
738
- return React__default['default'].createElement(ADlgInfeed.ADlgInfeed, _extends._extends({ index: index$1 }, row));
625
+ return React__default['default'].createElement(ADlgInfeed.ADlgInfeed, _extends._extends({ index: index }, row));
739
626
  } else if (row._type === 'brandInsightAd' && row.adUnit) {
740
- return React__default['default'].createElement(ADInfeed.ADInfeed, { index: index$1, infeedAd: row });
741
- } else if (row._type === 'publication') return React__default['default'].createElement(PublicationFeature, { data: row, defaultImage: _this2.defaultImage, issueMapping: _this2.props.issueMapping, client: _this2.client });
742
- if (index$1 + 1 > heroContent + featureCount && (!row._type || !['lg-infeed', 'brandInsightAd'].includes(row._type))) {
627
+ return React__default['default'].createElement(ADInfeed.ADInfeed, { index: index, infeedAd: row });
628
+ } else if (row._type === 'publication') return React__default['default'].createElement(PublicationFeature.PublicationFeature, { data: row, defaultImage: _this2.defaultImage, issueMapping: _this2.props.issueMapping, client: _this2.client });
629
+ if (index + 1 > heroContent + featureCount && (!row._type || !['lg-infeed', 'brandInsightAd'].includes(row._type))) {
743
630
  return React__default['default'].createElement(
744
631
  React__default['default'].Fragment,
745
632
  { key: itemCounter },
@@ -748,19 +635,19 @@ var GridContent = function (_React$Component) {
748
635
  {
749
636
  onChange: function onChange(isVisible) {
750
637
  // Passing 'articleCount' instead of index because index will be including the indexes of ads whereas articleCount will be having index of article only.
751
- isVisible && _this2.changePageNumber(pageNumber, itemsPerPage, row.articleCount ? row.articleCount : index$1);
638
+ isVisible && _this2.changePageNumber(pageNumber, itemsPerPage, row.articleCount ? row.articleCount : index);
752
639
  } },
753
640
  React__default['default'].createElement(
754
641
  'div',
755
642
  { counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
756
643
  React__default['default'].createElement(
757
644
  Card__default['default'],
758
- { className: 'content-card', style: { flexDirection: index$1 === 0 || index$1 % 4 === 0 ? 'top' : 'row' } },
645
+ { className: 'content-card', style: { flexDirection: index === 0 || index % 4 === 0 ? 'top' : 'row' } },
759
646
  (row.thumbnail && row.thumbnail.asset || _this2.props.defaultImage) && React__default['default'].createElement(
760
647
  'a',
761
- { href: linkHref, className: index$1 === 0 || index$1 % 4 === 0 ? '' : 'card-image' },
648
+ { href: linkHref, className: index === 0 || index % 4 === 0 ? '' : 'card-image' },
762
649
  React__default['default'].createElement(
763
- index.LazyLoad,
650
+ index$1.LazyLoad,
764
651
  { height: _this2.props.imageHeight },
765
652
  React__default['default'].createElement(Card__default['default'].Img, {
766
653
  variant: 'top',
@@ -787,12 +674,12 @@ var GridContent = function (_React$Component) {
787
674
  moment.moment(row.published).format('MMMM DD, YYYY')
788
675
  ),
789
676
  _this2.props.showAuthor && row.authorMapping && row.authorMapping.length > 0 && React__default['default'].createElement(
790
- index.LazyLoad,
677
+ index$1.LazyLoad,
791
678
  { height: 50 },
792
- React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: row.authorMapping })
679
+ React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index.toString(), index: index, authors: row.authorMapping })
793
680
  ),
794
681
  _this2.props.showCategory && row.contentCategory && React__default['default'].createElement(
795
- index.LazyLoad,
682
+ index$1.LazyLoad,
796
683
  { height: 50 },
797
684
  React__default['default'].createElement(
798
685
  'p',
@@ -811,15 +698,15 @@ var GridContent = function (_React$Component) {
811
698
  ),
812
699
  React__default['default'].createElement(
813
700
  Card__default['default'].Text,
814
- { className: index$1 === 0 || index$1 % 4 === 0 ? '' : 'card-subtext' },
701
+ { className: index === 0 || index % 4 === 0 ? '' : 'card-subtext' },
815
702
  entities.clean_html_1(row.summary)
816
703
  )
817
704
  )
818
705
  )
819
706
  )
820
707
  ),
821
- showVideo && (posts.length < numberOfItemsBeforeVideo || index$1 + 1 === numberOfItemsBeforeVideo) && React__default['default'].createElement(VideoPlayer, null),
822
- main.main_43 && _this2.props.rightItems && (index$1 + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index$1, numberOfItemsBeforeAd)
708
+ showVideo && (posts.length < numberOfItemsBeforeVideo || index + 1 === numberOfItemsBeforeVideo) && React__default['default'].createElement(VideoPlayer, null),
709
+ main.main_43 && _this2.props.rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index, numberOfItemsBeforeAd)
823
710
  );
824
711
  } else return null;
825
712
  }) : React__default['default'].createElement(