@mjhls/mjh-framework 1.0.13 → 1.0.14

package/dist/index.js

@@ -899,6 +899,27 @@ var DeckQueue = function (_React$Component) {
   return DeckQueue;
 }(React__default.Component);
 
+var Column1 = function Column1(props) {
+  return React__default.createElement(
+    'section',
+    null,
+    React__default.createElement(
+      Row,
+      { className: 'justify-content-md-center' },
+      React__default.createElement(
+        Col,
+        { className: 'middleCol' },
+        React__default.createElement(
+          'h1',
+          null,
+          props.title
+        ),
+        props.children
+      )
+    )
+  );
+};
+
 var Column2 = function Column2(props) {
   var rightItems = props.rightItems;
 
@@ -3088,52 +3109,63 @@ var lib_1 = lib.DFPSlotsProvider;
 var lib_2 = lib.AdSlot;
 var lib_3 = lib.DFPManager;
 
-var AD728x90 = function (_Component) {
-  inherits(AD728x90, _Component);
-
-  function AD728x90(props) {
-    classCallCheck(this, AD728x90);
+var AD = function AD(_ref) {
+  var networkID = _ref.networkID,
+      adUnit = _ref.adUnit,
+      sizeMapping = _ref.sizeMapping,
+      className = _ref.className,
+      _ref$slotId = _ref.slotId,
+      slotId = _ref$slotId === undefined ? 'test' : _ref$slotId,
+      sizes = _ref.sizes,
+      minInViewPercent = _ref.minInViewPercent;
 
-    var _this = possibleConstructorReturn(this, (AD728x90.__proto__ || Object.getPrototypeOf(AD728x90)).call(this, props));
+  return React__default.createElement(
+    lib_1,
+    { dfpNetworkId: networkID, sizeMapping: sizeMapping },
+    React__default.createElement(
+      'div',
+      { className: className },
+      React__default.createElement(lib_2, {
+        slotId: slotId,
+        sizes: sizes,
+        adUnit: adUnit,
+        sizeMapping: sizeMapping,
+        onSlotVisibilityChanged: function onSlotVisibilityChanged(dfpEventData) {
+          if (minInViewPercent && dfpEventData.event.inViewPercentage < minInViewPercent) {
+            lib_3.refresh(slotId);
+          }
+        },
+        onSlotIsViewable: function onSlotIsViewable(dfpEventData) {
+          return console.log(slotId + ' viewable!.', dfpEventData);
+        }
+      })
+    )
+  );
+};
 
-    _this.option = {
-      networkID: props.networkID,
-      adUnit: props.adUnit
-    };
-    return _this;
-  }
+AD.propTypes = {
+  networkID: PropTypes.number.isRequired,
+  adUnit: PropTypes.string.isRequired,
+  slotId: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  sizeMapping: PropTypes.array,
+  sizes: PropTypes.array,
+  minInViewPercent: PropTypes.number
+};
 
-  createClass(AD728x90, [{
-    key: 'render',
-    value: function render() {
-      return React__default.createElement(
-        lib_1,
-        {
-          dfpNetworkId: this.option.networkID,
-          sizeMapping: [{ viewport: [768, 1], sizes: [[728, 90]] }, { viewport: [1, 1], sizes: [[320, 50]] }] },
-        React__default.createElement(
-          'div',
-          { className: 'AD728x90' },
-          React__default.createElement(lib_2, {
-            slotId: 'test',
-            sizes: [[728, 90], [320, 50]],
-            adUnit: this.option.adUnit,
-            sizeMapping: [{ viewport: [768, 1], sizes: [[728, 90]] }, { viewport: [1, 1], sizes: [[320, 50]] }],
-            onSlotVisibilityChanged: function onSlotVisibilityChanged(dfpEventData) {
-              if (dfpEventData.event.inViewPercentage < '70') {
-                lib_3.refresh('test');
-              }
-            },
-            onSlotIsViewable: function onSlotIsViewable(dfpEventData) {
-              return console.log('slot 1 viewable!.', dfpEventData);
-            }
-          })
-        )
-      );
-    }
-  }]);
-  return AD728x90;
-}(React.Component);
+var AD728x90 = function AD728x90(_ref) {
+  var networkID = _ref.networkID,
+      adUnit = _ref.adUnit;
+
+  return React__default.createElement(AD, {
+    networkID: networkID,
+    adUnit: adUnit,
+    className: 'AD728x90',
+    sizes: [[300, 250], [300, 600]],
+    sizeMapping: [{ viewport: [768, 1], sizes: [[728, 90]] }, { viewport: [1, 1], sizes: [[320, 50]] }],
+    minInViewPercent: 70
+  });
+};
 
 // Main
 var TemplateNormal = function TemplateNormal(props) {
@@ -3159,6 +3191,12 @@ var TemplateNormal = function TemplateNormal(props) {
 
   function layout() {
     switch (config.columns) {
+      case '1':
+        return React__default.createElement(
+          Column1,
+          null,
+          props.children
+        );
       case '2':
         return React__default.createElement(
           Column2,
@@ -3194,72 +3232,24 @@ var TemplateNormal = function TemplateNormal(props) {
   );
 };
 
-var AD300x250 = function (_Component) {
-  inherits(AD300x250, _Component);
-
-  function AD300x250(props) {
-    classCallCheck(this, AD300x250);
+var AD300x250 = function AD300x250(_ref) {
+  var networkID = _ref.networkID,
+      adUnit = _ref.adUnit;
 
-    var _this = possibleConstructorReturn(this, (AD300x250.__proto__ || Object.getPrototypeOf(AD300x250)).call(this, props));
-
-    _this.option = {
-      networkID: props.networkID,
-      adUnit: props.adUnit
-    };
-    return _this;
-  }
-
-  createClass(AD300x250, [{
-    key: 'render',
-    value: function render() {
-      return React__default.createElement(
-        lib_1,
-        { dfpNetworkId: this.option.networkID },
-        React__default.createElement(
-          'div',
-          { className: 'AD300x250' },
-          React__default.createElement(lib_2, { sizes: [[300, 250]], adUnit: this.option.adUnit })
-        )
-      );
-    }
-  }]);
-  return AD300x250;
-}(React.Component);
-
-var AD300x250x600 = function (_Component) {
-  inherits(AD300x250x600, _Component);
-
-  function AD300x250x600(props) {
-    classCallCheck(this, AD300x250x600);
-
-    var _this = possibleConstructorReturn(this, (AD300x250x600.__proto__ || Object.getPrototypeOf(AD300x250x600)).call(this, props));
+  return React__default.createElement(AD, { networkID: networkID, adUnit: adUnit, className: 'AD300x250', sizes: [[300, 250]] });
+};
 
-    _this.option = {
-      networkID: props.networkID,
-      adUnit: props.adUnit
-    };
-    return _this;
-  }
+var AD300x250x600 = function AD300x250x600(_ref) {
+  var networkID = _ref.networkID,
+      adUnit = _ref.adUnit;
 
-  createClass(AD300x250x600, [{
-    key: 'render',
-    value: function render() {
-      return React__default.createElement(
-        lib_1,
-        { dfpNetworkId: this.option.networkID },
-        React__default.createElement(
-          'div',
-          { className: 'AD300x250' },
-          React__default.createElement(lib_2, {
-            sizes: [[300, 250], [300, 600]],
-            adUnit: this.option.adUnit
-          })
-        )
-      );
-    }
-  }]);
-  return AD300x250x600;
-}(React.Component);
+  return React__default.createElement(AD, {
+    networkID: networkID,
+    adUnit: adUnit,
+    className: 'AD300x250',
+    sizes: [[300, 250], [300, 600]]
+  });
+};
 
 var getYoutubeId = createCommonjsModule(function (module, exports) {
 (function (root, factory) {
@@ -5942,6 +5932,7 @@ var getSerializers = function getSerializers() {
 
 exports.DeckContent = DeckContent;
 exports.DeckQueue = DeckQueue;
+exports.Column1 = Column1;
 exports.Column2 = Column2;
 exports.Column3 = Column3;
 exports.Header = Header;