@mjhls/mjh-framework 1.0.195 → 1.0.196

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.195
+# mjh-framework v. 1.0.196
 
 
 

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React__default, { Component, useState, useEffect, useRef, createElement, createContext } from 'react';
+import React__default, { Component, useState, useEffect, useRef, createContext, createElement } from 'react';
 import PropTypes from 'prop-types';
 import require$$1 from 'react-dom';
 import Container from 'react-bootstrap/Container';
@@ -11764,6 +11764,88 @@ function get$1(object, path, defaultValue) {
 
 var get_1 = get$1;
 
+var AD = function AD(_ref) {
+  var networkID = _ref.networkID,
+      adUnit = _ref.adUnit,
+      sizeMapping = _ref.sizeMapping,
+      className = _ref.className,
+      slotId = _ref.slotId,
+      sizes = _ref.sizes,
+      minInViewPercent = _ref.minInViewPercent,
+      _ref$targeting = _ref.targeting,
+      targeting = _ref$targeting === undefined ? {} : _ref$targeting;
+
+  var _useState = useState(false),
+      _useState2 = slicedToArray(_useState, 2),
+      adRendered = _useState2[0],
+      setAdRendered = _useState2[1];
+
+  var _useState3 = 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(
+    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,
+          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: 'auto' } },
+        '\xA0'
+      )
+    )
+  );
+};
+
+AD.propTypes = {
+  networkID: PropTypes.string.isRequired,
+  adUnit: PropTypes.string.isRequired,
+  slotId: PropTypes.string,
+  className: PropTypes.string,
+  sizeMapping: PropTypes.array,
+  sizes: PropTypes.array,
+  minInViewPercent: PropTypes.number
+};
+
 var GridContent = function (_React$Component) {
   inherits(GridContent, _React$Component);
 
@@ -11982,7 +12064,7 @@ var GridContent = function (_React$Component) {
 
   createClass(GridContent, [{
     key: 'cardLoader',
-    value: function cardLoader(page, columns, variant, showVideo, VideoPlayer) {
+    value: function cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight) {
       var _this2 = this;
 
       var lgVar = Math.floor(12 / columns);
@@ -12057,13 +12139,33 @@ var GridContent = function (_React$Component) {
           })
         );
       }
+
+      var insert = function insert(arr, index$$1, newElement) {
+        return [].concat(toConsumableArray(arr.slice(0, index$$1)), [newElement], toConsumableArray(arr.slice(index$$1)));
+      };
+      var posts = [];
+      if (showBI) {
+        var interval = brandInsight.interval;
+        var data = this.state.data;
+        posts = data;
+        var i = 1;
+        for (var pos = interval; pos <= posts.length;) {
+          brandInsight.targeting.pos = 'article' + i;
+          posts = insert(posts, pos, brandInsight);
+          pos += interval + 1;
+          i++;
+        }
+      } else {
+        posts = this.state.data;
+      }
+
       return React__default.createElement(
         'div',
         { className: 'grid-container' },
-        this.state.data && this.state.data.map(function (row, index$$1) {
+        posts && posts.map(function (row, index$$1) {
           var pageNumber = row.pageNumber || _this2.state.page;
           var contentCategoryName = row.contentCategory && row.contentCategory.name && _this2.mapping[row.contentCategory.name] ? row.contentCategory.name : 'Articles';
-          var linkHref = _this2.mapping[contentCategoryName] + '/' + row.url.current;
+          var linkHref = row.url && row.url.current ? _this2.mapping[contentCategoryName] + '/' + row.url.current : '';
           if (row._type === 'feature') {
             if (row.blank || _this2.checkExternalUrl(row.url.current)) {
               return React__default.createElement(
@@ -12123,7 +12225,7 @@ var GridContent = function (_React$Component) {
                     )
                   )
                 ),
-                showVideo && (_this2.state.data.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
+                showVideo && (posts.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
                 main_36 && _this2.props.rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index$$1, numberOfItemsBeforeAd)
               );
             } else {
@@ -12184,10 +12286,24 @@ var GridContent = function (_React$Component) {
                     )
                   )
                 ),
-                showVideo && (_this2.state.data.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
+                showVideo && (posts.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
                 main_36 && _this2.props.rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index$$1, numberOfItemsBeforeAd)
               );
             }
+          } else if (row._type === 'BrandInsight' && row.adUnit) {
+            return React__default.createElement(
+              React__default.Fragment,
+              { key: itemCounter, className: 'brand-insight-wrapper' },
+              React__default.createElement(
+                'div',
+                { counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
+                React__default.createElement(
+                  Card,
+                  { className: 'content-card ad-wrapper', style: { flexDirection: index$$1 === 0 || index$$1 % 4 === 0 ? 'top' : 'row' } },
+                  React__default.createElement(AD, { networkID: row.networkID, adUnit: row.adUnit, targeting: row.targeting, className: row.className, sizes: row.sizes, slotId: row.slotId })
+                )
+              )
+            );
           }
           return React__default.createElement(
             React__default.Fragment,
@@ -12246,7 +12362,7 @@ var GridContent = function (_React$Component) {
                 )
               )
             ),
-            showVideo && (_this2.state.data.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
+            showVideo && (posts.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
             main_36 && _this2.props.rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index$$1, numberOfItemsBeforeAd)
           );
         })
@@ -12263,7 +12379,9 @@ var GridContent = function (_React$Component) {
           autoScroll = _props.autoScroll,
           page = _props.page,
           showVideo = _props.showVideo,
-          VideoPlayer = _props.VideoPlayer;
+          VideoPlayer = _props.VideoPlayer,
+          showBI = _props.showBI,
+          brandInsight = _props.brandInsight;
 
 
       return React__default.createElement(
@@ -12275,7 +12393,7 @@ var GridContent = function (_React$Component) {
           React__default.createElement(
             Container,
             null,
-            this.cardLoader(page, columns, variant, showVideo, VideoPlayer)
+            this.cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight)
           )
         ) : React__default.createElement(
           React__default.Fragment,
@@ -12283,7 +12401,7 @@ var GridContent = function (_React$Component) {
           React__default.createElement(
             Container,
             null,
-            this.cardLoader(page, columns, variant, showVideo, VideoPlayer)
+            this.cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight)
           ),
           React__default.createElement(
             'div',
@@ -16888,88 +17006,6 @@ var HamMagazine = function HamMagazine(props) {
   );
 };
 
-var AD = function AD(_ref) {
-  var networkID = _ref.networkID,
-      adUnit = _ref.adUnit,
-      sizeMapping = _ref.sizeMapping,
-      className = _ref.className,
-      slotId = _ref.slotId,
-      sizes = _ref.sizes,
-      minInViewPercent = _ref.minInViewPercent,
-      _ref$targeting = _ref.targeting,
-      targeting = _ref$targeting === undefined ? {} : _ref$targeting;
-
-  var _useState = useState(false),
-      _useState2 = slicedToArray(_useState, 2),
-      adRendered = _useState2[0],
-      setAdRendered = _useState2[1];
-
-  var _useState3 = 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(
-    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,
-          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: 'auto' } },
-        '\xA0'
-      )
-    )
-  );
-};
-
-AD.propTypes = {
-  networkID: PropTypes.string.isRequired,
-  adUnit: PropTypes.string.isRequired,
-  slotId: PropTypes.string,
-  className: PropTypes.string,
-  sizeMapping: PropTypes.array,
-  sizes: PropTypes.array,
-  minInViewPercent: PropTypes.number
-};
-
 var AD728x90 = function AD728x90(_ref) {
   var networkID = _ref.networkID,
       adUnit = _ref.adUnit,