@mjhls/mjh-framework 1.0.13 → 1.0.14

package/README.md

@@ -1,34 +1,70 @@
-# mjh-framework
-
-> Foundation Framework
-
-[![NPM](https://img.shields.io/npm/v/mjh-framework.svg)](https://www.npmjs.com/package/mjh-framework) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-
-## Install
-
-```bash
-npm install --save @mjhls/mjh-framework
-```
-
-## Usage
-
-```jsx
-import React, { Component } from 'react'
-
-import { NavMagazine, DeckQueue } from 'mjh-framework'
-
-export default class App extends Component {
-  render() {
-    return (
-      <div>
-        <NavMagazine />
-        <DeckQueue />
-      </div>
-    )
-  }
-}
-```
-
-## License
-
-MIT © [mjh-framework](https://github.com/mjh-framework)
+# mjh-framework
+
+> Foundation Framework
+
+[![NPM](https://img.shields.io/npm/v/mjh-framework.svg)](https://www.npmjs.com/package/mjh-framework) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save @mjhls/mjh-framework
+```
+
+## Usage
+
+```jsx
+import React, { Component } from 'react'
+
+import { NavMagazine, DeckQueue } from 'mjh-framework'
+
+export default class App extends Component {
+  render() {
+    return (
+      <div>
+        <NavMagazine />
+        <DeckQueue />
+      </div>
+    )
+  }
+}
+```
+
+## Publish new updates to the npm registry
+
+```bash
+npm publish
+```
+
+## For getting updates in the template without publishing each time a change is made in the framework
+
+Link react and react-dom of the template repo, so that it can be used by the framework.
+This is to avoid the error arising due to multiple instances of React.
+
+```bash
+cd mjh-template/node_modules/react
+
+yarn link
+
+cd ../react-dom
+
+yarn link
+
+cd ../../../mjh-framework
+
+yarn link react && yarn link react-dom
+```
+
+Link the framework repo so that it can be used in the template
+
+```bash
+npm link
+
+cd ../mjh-template
+
+npm link @mjhls/mjh-framework
+```
+
+
+## License
+
+MIT © [mjh-framework](https://github.com/mjh-framework)

package/dist/index.es.js

@@ -892,6 +892,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;
 
@@ -3081,52 +3102,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;
-}(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) {
@@ -3152,6 +3184,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,
@@ -3187,72 +3225,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;
-}(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;
-}(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) {
@@ -5933,5 +5923,5 @@ var getSerializers = function getSerializers() {
   };
 };
 
-export { DeckContent, DeckQueue, Column2, Column3, Header, LeftNav, NavMagazine, NavNative, NavNormal, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers };
+export { DeckContent, DeckQueue, Column1, Column2, Column3, Header, LeftNav, NavMagazine, NavNative, NavNormal, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers };
 //# sourceMappingURL=index.es.js.map