@mjhls/mjh-framework 1.0.135 → 1.0.137

package/dist/index.js

@@ -4887,11 +4887,10 @@ var DeckContent = function (_React$Component) {
           var contentCategoryName = row.contentCategory && row.contentCategory.name && _this.mapping[row.contentCategory.name] ? row.contentCategory.name : 'Articles';
           return React__default.createElement(
             React__default.Fragment,
-            null,
+            { key: itemCounter },
             React__default.createElement(
               VisibilitySensor,
               {
-                key: itemCounter,
                 onChange: function onChange(isVisible) {
                   isVisible && _this.changePageNumber(pageNumber);
                 } },
@@ -6380,11 +6379,10 @@ var GridContent = function (_React$Component) {
           var contentCategoryName = row.contentCategory && row.contentCategory.name && _this2.mapping[row.contentCategory.name] ? row.contentCategory.name : 'Articles';
           return React__default.createElement(
             React__default.Fragment,
-            null,
+            { key: itemCounter },
             React__default.createElement(
               VisibilitySensor,
               {
-                key: itemCounter,
                 onChange: function onChange(isVisible) {
                   isVisible && _this2.changePageNumber(pageNumber);
                 } },
@@ -6710,11 +6708,10 @@ var DeckQueue = function (_React$Component) {
 
           return React__default.createElement(
             React__default.Fragment,
-            null,
+            { key: index$$1 },
             React__default.createElement(
               VisibilitySensor,
               {
-                key: index$$1,
                 onChange: function onChange(isVisible) {
                   isVisible && _this2.changePageNumber(pageNumber);
                 } },
@@ -7538,17 +7535,23 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
             null,
             React__default.createElement(
               reactBootstrap.Media,
-              { key: article._id ? article._id : index$$1, style: { marginBottom: '1.25rem', paddingBottom: '1.25rem', borderBottom: '1px solid #ddd' } },
+              {
+                key: article._id ? article._id : index$$1,
+                style: { flexDirection: article._type == 'feature' ? 'column' : 'row', marginBottom: '1.25rem', paddingBottom: '1.25rem', borderBottom: '1px solid #ddd' } },
               (article.thumbnail && article.thumbnail.asset || defaultImage) && React__default.createElement(
                 Link,
                 { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
                 React__default.createElement(
                   'a',
-                  { className: 'img-wrapper' },
+                  { className: article._type == 'feature' ? 'feature-wrapper' : 'img-wrapper' },
                   React__default.createElement(
                     LazyLoad,
                     { height: imageHeight },
-                    article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3 img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
+                    article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', {
+                      className: article._type == 'feature' ? 'img-fluid' : 'mr-3 img-fluid',
+                      src: renderCardImage(article, builder, imageHeight, imageWidth),
+                      alt: article.title
+                    }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
                   )
                 )
               ),
@@ -7604,7 +7607,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n          .img-wrapper img {\n            max-height: 200px;\n            width: 100%;\n            object-fit: cover;\n          }\n          @media only screen and (min-width: 768px) {\n            .img-wrapper {\n              width: 42%;\n            }\n            .img-wrapper > img {\n              padding-right: 1em;\n            }\n          }\n          @media only screen and (max-width: 767px) {\n            .img-wrapper {\n              width: 100%;\n            }\n            .img-wrapper img {\n              padding-bottom: 1em;\n            }\n            .media {\n              flex-direction: column;\n            }\n          }\n        '
+      '\n          .img-wrapper img {\n            max-height: 200px;\n            width: 100%;\n            object-fit: cover;\n          }\n          .feature-wrapper {\n            width: 100%;\n          }\n          .feature-wrapper img {\n            width: 100%;\n            margin-bottom: 1em;\n          }\n          @media only screen and (min-width: 768px) {\n            .img-wrapper {\n              width: 42%;\n            }\n            .img-wrapper > img {\n              padding-right: 1em;\n            }\n          }\n          @media only screen and (max-width: 767px) {\n            .img-wrapper {\n              width: 100%;\n            }\n            .img-wrapper img {\n              padding-bottom: 1em;\n            }\n            .media {\n              flex-direction: column;\n            }\n          }\n        '
     )
   );
 };
@@ -8320,11 +8323,10 @@ var MasterDeck = function (_React$Component) {
 
           return React__default.createElement(
             React__default.Fragment,
-            null,
+            { key: itemCounter },
             React__default.createElement(
               VisibilitySensor,
               {
-                key: itemCounter,
                 onChange: function onChange(isVisible) {
                   isVisible && _this.changePageNumber(pageNumber);
                 } },
@@ -10042,41 +10044,61 @@ var AD = function AD(_ref) {
       _ref$targeting = _ref.targeting,
       targeting = _ref$targeting === undefined ? {} : _ref$targeting;
 
-  var _useState = React.useState(true),
+  var _useState = React.useState(false),
       _useState2 = slicedToArray(_useState, 2),
-      renderAd = _useState2[0],
-      setRenderAd = _useState2[1];
+      adRendered = _useState2[0],
+      setAdRendered = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = slicedToArray(_useState3, 2),
+      showPlaceholder = _useState4[0],
+      setShowPlaceholder = _useState4[1];
+
+  var handleVisibilityChange = debounce_1(function (_ref2) {
+    var event = _ref2.event;
+
+    if (event.inViewPercentage <= 0) {
+      setShowPlaceholder(true);
+    }
+  }, 500);
 
   return React__default.createElement(
-    VisibilitySensor,
-    {
-      partialVisibility: true,
-      onChange: function onChange(isVisible) {
-        if (isVisible) {
-          setRenderAd(true);
-        } else {
-          setRenderAd(false);
-        }
-      } },
-    React__default.createElement(
-      'div',
-      null,
-      renderAd && React__default.createElement(
-        lib_1,
-        {
-          dfpNetworkId: networkID,
-          targetingArguments: targeting,
+    React__default.Fragment,
+    null,
+    !showPlaceholder && React__default.createElement(
+      lib_1,
+      {
+        dfpNetworkId: networkID,
+        targetingArguments: targeting,
+        sizeMapping: sizeMapping,
+        lazyLoad: { fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 } },
+      React__default.createElement(
+        'div',
+        { className: className },
+        React__default.createElement(lib_2, {
+          slotId: slotId,
+          sizes: sizes,
+          adUnit: adUnit,
           sizeMapping: sizeMapping,
-          lazyLoad: { fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 } },
-        React__default.createElement(
-          'div',
-          { className: className },
-          React__default.createElement(lib_2, { slotId: slotId, sizes: sizes, adUnit: adUnit, sizeMapping: sizeMapping })
-        )
-      ),
+          onSlotRender: function onSlotRender(eventData) {
+            setAdRendered(true);
+          },
+          onSlotVisibilityChanged: handleVisibilityChange
+        })
+      )
+    ),
+    adRendered && showPlaceholder && React__default.createElement(
+      VisibilitySensor,
+      {
+        partialVisibility: true,
+        onChange: function onChange(isVisible) {
+          if (isVisible) {
+            setShowPlaceholder(false);
+          }
+        } },
       React__default.createElement(
         'div',
-        { style: { height: renderAd ? 0 : 'auto' } },
+        { style: { height: 'auto' } },
         '\xA0'
       )
     )
@@ -10207,20 +10229,32 @@ var TemplateNormal = function TemplateNormal(props) {
 var AD300x250 = function AD300x250(_ref) {
   var networkID = _ref.networkID,
       adUnit = _ref.adUnit,
-      targeting = _ref.targeting;
+      slotId = _ref.slotId,
+      _ref$targeting = _ref.targeting,
+      targeting = _ref$targeting === undefined ? {} : _ref$targeting;
 
-  return React__default.createElement(AD, { networkID: networkID, adUnit: adUnit, targeting: targeting, className: 'AD300x250', sizes: [[300, 250], [300, 100]] });
+  return React__default.createElement(AD, {
+    networkID: networkID,
+    adUnit: adUnit,
+    slotId: slotId,
+    targeting: targeting,
+    className: 'AD300x250',
+    sizes: [[300, 250], [300, 100]]
+  });
 };
 
 var AD300x250x600 = function AD300x250x600(_ref) {
   var networkID = _ref.networkID,
       adUnit = _ref.adUnit,
-      targeting = _ref.targeting;
+      slotId = _ref.slotId,
+      _ref$targeting = _ref.targeting,
+      targeting = _ref$targeting === undefined ? {} : _ref$targeting;
 
   return React__default.createElement(AD, {
     networkID: networkID,
     adUnit: adUnit,
     className: 'AD300x250',
+    slotId: slotId,
     targeting: targeting,
     sizes: [[300, 250], [300, 600], [300, 100]]
   });