@mjhls/mjh-framework 1.0.152 → 1.0.154

package/dist/index.js

@@ -20,6 +20,7 @@ var Media = _interopDefault(require('react-bootstrap/Media'));
 var reactBootstrap = require('react-bootstrap');
 var Button = _interopDefault(require('react-bootstrap/Button'));
 var Badge = _interopDefault(require('react-bootstrap/Badge'));
+var reactSocialIcons = require('react-social-icons');
 var ListGroup = _interopDefault(require('react-bootstrap/ListGroup'));
 var Head = _interopDefault(require('next/head'));
 var Accordion = _interopDefault(require('react-bootstrap/Accordion'));
@@ -27,7 +28,6 @@ var AccordionToggle = require('react-bootstrap/AccordionToggle');
 var reactShare = require('react-share');
 var Form = _interopDefault(require('react-bootstrap/Form'));
 var FormControl = _interopDefault(require('react-bootstrap/FormControl'));
-var reactSocialIcons = require('react-social-icons');
 var Nav = _interopDefault(require('react-bootstrap/Nav'));
 var Navbar = _interopDefault(require('react-bootstrap/Navbar'));
 var NavDropdown = _interopDefault(require('react-bootstrap/NavDropdown'));
@@ -8855,46 +8855,78 @@ var Column1 = function Column1(props) {
 };
 
 var SideFooter = function SideFooter(props) {
+  /*
+  useage example: <SideFooter cache={props.cache} logo='/an_mjhls_brand_logo.png' />
+  */
+  var _props$cache$siteSett = props.cache.siteSettingCache,
+      socialLinks = _props$cache$siteSett.socialLinks,
+      footerLinks = _props$cache$siteSett.footerLinks,
+      name = _props$cache$siteSett.name;
+  var logo = props.logo;
+
   var year = new Date().getFullYear();
-  var website = props.website;
 
   return React__default.createElement(
     'div',
     { className: 'side-footer' },
-    website && website.sideFooterContent && website.sideFooterContent.length && React__default.createElement(
+    React__default.createElement(
       'ul',
       null,
-      website && website.sideFooterContent.map(function (content, index) {
-        return content.blank ? React__default.createElement(
-          'li',
-          { key: index },
-          React__default.createElement(
-            'a',
-            { target: '_blank', href: content.url },
-            content.title
-          )
-        ) : React__default.createElement(
-          'li',
-          { key: index },
-          React__default.createElement(
-            Link,
-            { href: content.url },
+      footerLinks && footerLinks.map(function (row, index) {
+        if (row.blank) {
+          return React__default.createElement(
+            'li',
+            { key: index },
             React__default.createElement(
               'a',
-              null,
-              content.title
+              { href: row.url, target: '_blank' },
+              row.title
             )
-          )
-        );
-      })
+          );
+        } else {
+          return React__default.createElement(
+            'li',
+            { key: index },
+            React__default.createElement(
+              Link,
+              { href: row.url },
+              React__default.createElement(
+                'a',
+                null,
+                row.title
+              )
+            )
+          );
+        }
+      }),
+      React__default.createElement(
+        'li',
+        { style: { marginTop: '10px' } },
+        socialLinks && socialLinks.map(function (row, index) {
+          return React__default.createElement(reactSocialIcons.SocialIcon, { key: index, index: index, url: row.url, style: { width: 30, height: 30, marginRight: 5 } });
+        })
+      )
     ),
-    website && website.title && React__default.createElement(
+    logo && React__default.createElement(
+      'ul',
+      null,
+      React__default.createElement(
+        'li',
+        { className: 'pt-2' },
+        React__default.createElement(
+          'a',
+          { href: 'https://www.mjhlifesciences.com' },
+          React__default.createElement('img', { style: { maxWidth: '100%' }, alt: 'MJHLS Brand Logo', src: logo })
+        )
+      )
+    ),
+    React__default.createElement(
       'p',
       null,
       '\xA9 ',
       year,
-      ' ',
-      website.title,
+      ' MJH Life Sciences and ',
+      name,
       '. All rights reserved.'
     )
   );
@@ -9809,80 +9841,159 @@ var NavMagazine = function NavMagazine(props) {
 };
 
 var NavNative = function NavNative(props) {
+  /*
+  Example Nav with acceptable props
+    <MagazineNav
+     showLogin
+     logo={props.settings.logo}
+     dataObject={props.cache.mainNavCache}
+     website={website}
+     subNav={props.cache.subNavCache}
+      />
+  */
+
   var logo = props.logo,
+      mobileLogo = props.mobileLogo,
       dataObject = props.dataObject,
-      _props$variant = props.variant,
-      variant = _props$variant === undefined ? 'dark' : _props$variant,
       subNav = props.subNav,
-      website = props.website;
+      website = props.website,
+      _props$showLogin = props.showLogin,
+      _props$userData = props.userData,
+      _props$socialFooterNa = props.socialFooterNav,
+      socialFooterNav = _props$socialFooterNa === undefined ? false : _props$socialFooterNa;
+
+  var navRef = React.useRef(null);
 
+  var _useState = React.useState(false),
+      _useState2 = slicedToArray(_useState, 2),
+      isSticky = _useState2[0],
+      setIsSticky = _useState2[1];
+
+  var _useState3 = React.useState(0),
+      _useState4 = slicedToArray(_useState3, 2),
+      screenWidth = _useState4[0],
+      setScreenWidth = _useState4[1];
+
+  React.useEffect(function () {
+    document.addEventListener('scroll', trackScrolling);
+    return function () {
+      document.removeEventListener('scroll', trackScrolling);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(function () {
+    setScreenWidth(parseInt(window.innerWidth));
+  }, []);
+
+  var trackScrolling = function trackScrolling() {
+    var offsetTop = navRef.current.getBoundingClientRect().top;
+
+    if (offsetTop === 0) {
+      setIsSticky(true);
+    } else {
+      setIsSticky(false);
+    }
+  };
 
   return React__default.createElement(
-    'section',
+    React__default.Fragment,
     null,
     React__default.createElement(
       Navbar,
-      { variant: variant, expand: 'lg', bg: 'primary' },
+      {
+        className: main_37 ? 'bottom-nav ios-nav' : 'bottom-nav android-nav',
+        variant: 'dark',
+        expand: 'xl',
+        bg: 'primary',
+        sticky: 'top',
+        ref: navRef,
+        style: { minHeight: '61px' } },
       React__default.createElement(
         Container,
-        null,
-        React__default.createElement(Navbar.Toggle, { 'aria-controls': 'basic-navbar-nav' }),
+        { className: 'mobile-nav' },
         React__default.createElement(
           Navbar.Brand,
-          { href: '/', style: { margin: '0 auto' } },
-          React__default.createElement('img', { src: logo, style: { height: '40px' } })
+          { id: 'nav-mobile-sm', className: 'nav-mobile-logo' },
+          React__default.createElement(
+            Link,
+            { href: '/' },
+            React__default.createElement(
+              'a',
+              null,
+              mobileLogo && screenWidth < 1200 ? React__default.createElement('img', { src: mobileLogo }) : React__default.createElement('img', { src: logo, className: 'logo', style: { height: '50px' } })
+            )
+          )
         ),
         React__default.createElement(
+          'div',
+          { className: 'nav-toggle' },
+          React__default.createElement(Navbar.Toggle, { 'aria-controls': 'basic-navbar-nav' }),
+          React__default.createElement(
+            Navbar.Brand,
+            { id: 'nav-mobile-md', className: 'nav-mobile-logo' },
+            React__default.createElement(
+              Link,
+              { href: '/' },
+              React__default.createElement(
+                'a',
+                null,
+                mobileLogo && screenWidth < 1200 ? React__default.createElement('img', { src: mobileLogo }) : React__default.createElement('img', { src: logo, className: 'logo', style: { height: '50px' } })
+              )
+            )
+          ),
+          React__default.createElement(Search, { device: 'mobile' })
+        ),
+        subNav && React__default.createElement(
           Navbar.Collapse,
-          { id: 'basic-navbar-nav' },
+          { id: 'basic-navbar-sub' },
           React__default.createElement(
             Nav,
             { className: 'mr-auto' },
-            dataObject && dataObject.map(function (row, index) {
-              if (row.subQuery.length > 1) {
-                return React__default.createElement(
+            subNav && subNav.map(function (row, index) {
+              if (row.subQuery && row.subQuery.length > 0) {
+                return row.name ? React__default.createElement(
                   NavDropdown,
                   { key: index, title: row.name, id: 'basic-nav-dropdown' },
                   row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
                     if (ddRow.type === 'divider') {
-                      return React__default.createElement(NavDropdown.Divider, null);
+                      return React__default.createElement(NavDropdown.Divider, { key: subIndex });
                     } else {
-                      return React__default.createElement(
-                        Link,
-                        { key: subIndex, href: ddRow.url || '#' },
-                        React__default.createElement(
-                          'a',
-                          { target: ddRow.blank ? '_blank' : '_self', className: 'dropdown-item' },
-                          ddRow.name
-                        )
-                      );
+                      if (ddRow.url && ddRow.name) {
+                        return ddRow.url && ddRow.name ? React__default.createElement(
+                          Link,
+                          { key: subIndex, href: ddRow.url },
+                          React__default.createElement(
+                            'a',
+                            { target: ddRow.blank ? '_blank' : '_self', className: 'dropdown-item' },
+                            ddRow.name
+                          )
+                        ) : null;
+                      } else return null;
                     }
                   })
-                );
+                ) : null;
               } else {
-                // Link default
-                // return <Nav.Link href={row.url} key={index}>{row.name}</Nav.Link>
-                return React__default.createElement(
+                return row.url && row.name ? React__default.createElement(
                   Link,
-                  { key: index, href: row.url || '#' },
+                  { key: index, href: row.url },
                   React__default.createElement(
                     'a',
                     { target: row.blank ? '_blank' : '_self', className: 'nav-link' },
                     row.name
                   )
-                );
+                ) : null;
               }
             })
-          ),
-          React__default.createElement(Search, null)
+          )
         ),
-        subNav && React__default.createElement(
+        React__default.createElement(
           Navbar.Collapse,
-          { id: 'basic-navbar-sub' },
+          { id: 'basic-navbar-nav' },
           React__default.createElement(
             Nav,
             { className: 'mr-auto' },
-            subNav && subNav.map(function (row, index) {
+            dataObject && dataObject.map(function (row, index) {
               if (row.subQuery && row.subQuery.length > 0) {
                 return row.name ? React__default.createElement(
                   NavDropdown,
@@ -9891,17 +10002,15 @@ var NavNative = function NavNative(props) {
                     if (ddRow.type === 'divider') {
                       return React__default.createElement(NavDropdown.Divider, { key: subIndex });
                     } else {
-                      if (ddRow.url && ddRow.name) {
-                        return ddRow.url && ddRow.name ? React__default.createElement(
-                          Link,
-                          { key: subIndex, href: ddRow.url },
-                          React__default.createElement(
-                            'a',
-                            { target: ddRow.blank ? '_blank' : '_self', className: 'dropdown-item' },
-                            ddRow.name
-                          )
-                        ) : null;
-                      } else return null;
+                      return ddRow.url && ddRow.name ? React__default.createElement(
+                        Link,
+                        { key: subIndex, href: ddRow.url },
+                        React__default.createElement(
+                          'a',
+                          { target: ddRow.blank ? '_blank' : '_self', className: 'dropdown-item' },
+                          ddRow.name
+                        )
+                      ) : null;
                     }
                   })
                 ) : null;
@@ -9917,7 +10026,8 @@ var NavNative = function NavNative(props) {
                 ) : null;
               }
             })
-          )
+          ),
+          React__default.createElement(Search, { device: 'mobile' })
         ),
         website && React__default.createElement(
           Navbar.Collapse,
@@ -9925,7 +10035,7 @@ var NavNative = function NavNative(props) {
           React__default.createElement(
             Nav,
             { className: 'mr-auto' },
-            React__default.createElement(NavFooter, { website: website })
+            socialFooterNav ? React__default.createElement(SocialNavFooter, { website: website }) : React__default.createElement(NavFooter, { website: website })
           )
         )
       )
@@ -9933,7 +10043,7 @@ var NavNative = function NavNative(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        @media screen and (max-width: 991px) {\n          .dropdown-menu {\n            max-height: 315px;\n            overflow: auto;\n          }\n          ::-webkit-scrollbar {\n            width: 10px;\n          }\n          ::-webkit-scrollbar-thumb {\n            border-radius: 4px;\n            background-color: rgba(214, 214, 214, 0.8);\n            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          }\n          .navbar-expand-lg .show#basic-navbar-sub {\n            display: block;\n          }\n          .navbar .mobile-nav .navbar-collapse.show {\n            padding-bottom: 20px;\n            border-bottom: 0.5px solid white;\n            margin-bottom: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse .form-inline {\n            margin: 5px 0px;\n          }\n          .navbar .mobile-nav .navbar-collapse:last-child {\n            border-bottom: none;\n            margin-bottom: 0px;\n            padding-bottom: 0px;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n            list-style-type: none;\n            padding: inherit;\n            margin-bottom: 0rem;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n            text-transform: capitalize !important;\n            font-weight: 300;\n          }\n          .navbar .mobile-nav .dropdown-item:focus {\n            background-color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: white;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: inherit;\n            border: none;\n          }\n        }\n        @media screen and (min-width: 992px) {\n          #basic-navbar-sub {\n            display: none !important;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: white;\n            border: 1 px solid #708090;\n          }\n        }\n      '
+      '\n        .sticky-home {\n          position: relative;\n          top: -3px;\n          left: -6px;\n          cursor: pointer;\n        }\n        .nav-item svg {\n          margin-bottom: 2px;\n        }\n        #nav-login,\n        #nav-logout,\n        #nav-register {\n          padding: 0.5rem;\n          cursor: pointer;\n        }\n        #nav-mobile-login,\n        #nav-mobile-logout,\n        #nav-mobile-register {\n          display: none;\n        }\n        #nav-mobile-logout,\n        #nav-mobile-login {\n          position: absolute;\n          right: 1rem;\n        }\n        #nav-mobile-register {\n          position: absolute;\n          left: 1rem;\n        }\n     \n        #nav-mobile-sm{\n          display: none;\n        }\n        \n\n        @media screen and (max-width: 1399px) {\n          .mobile-nav .nav-toggle {\n            width: 100%;\n            display: flex;\n            justify-content: space-between;\n          }\n          .nav-mobile-logo {\n            margin-left: 1.5rem;\n            \n          }\n          #nav-mobile-md{\n            margin-right: auto;\n          }\n          .nav-mobile-logo img {\n            height: 48px!important;\n            \n          }\n          .nav-mobile-logo img {\n            height: 38px !important;\n          }\n          .android-nav {\n            max-height: 80vh;\n          }\n\n          .ios-nav {\n            max-height: none;\n          }\n\n          .navbar.bg-primary {\n            overflow: auto;\n          }\n\n          .mobile-nav .nav-toggle .navbar-toggler {\n            float: left;\n            height: 45px;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            float: right;\n            margin: 4px 0px 0px 0px;\n          }\n          .mobile-nav .form-inline .mobile-search {\n            width: auto;\n          }\n          .sticky-home {\n            display: none;\n          }\n          .dropdown-menu {\n            max-height: 315px;\n            overflow: auto;\n          }\n          ul::-webkit-scrollbar, .dropdown-menu::-webkit-scrollbar {\n            width: 10px;\n            background: rgba(0,0,0,.35);\n          }\n          ul::-webkit-scrollbar-thumb, .dropdown-menu::-webkit-scrollbar-thumb {\n            border-radius: 4px;\n            background-color: rgba(214, 214, 214, 0.8);\n            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          }\n          .navbar-expand-lg .show#basic-navbar-sub {\n            display: block;\n          }\n          .navbar .mobile-nav .navbar-collapse.show {\n            padding-bottom: 10px;\n            border-bottom: 0.5px solid white;\n          }\n          .navbar .mobile-nav .navbar-collapse .form-inline {\n            display: none;\n          }\n          .navbar .mobile-nav .navbar-collapse {\n            margin-top: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse:last-child {\n            border-bottom: none;\n            margin-bottom: 0px;\n            padding-bottom: 0px;\n            margin-top: 0px;\n            padding-top: 10px;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n            list-style-type: none;\n            padding: inherit;\n            margin-bottom: 0rem;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n            text-transform: capitalize !important;\n            font-weight: 300;\n          }\n          .navbar .mobile-nav .dropdown-item:focus {\n            background-color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: white;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: inherit;\n            border: none;\n          }\n          .navbar .mobile-nav .dropdown-menu.show {\n            max-height: 100px;\n          }\n        }\n        @media screen and (max-width: 1199px) {\n          #nav-mobile-login,\n          #nav-mobile-logout,\n          #nav-mobile-register {\n            display: block;\n          }\n\n          .navbar-top {\n            flex-direction: row;\n            justify-content: space-around !important;\n            align-items: center;\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n            width: 100%;\n          }\n        }\n\n        @media screen and (min-width: 1399px) {\n          #basic-navbar-sub {\n            display: none !important;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: white;\n            border: 1 px solid #708090;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            display: none;\n          }\n        }\n\n        @media screen and (max-width: 376px) {\n          .mobile-nav .nav-toggle .form-inline .mobile-search {\n            width: 60%;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            flex: 1 1 auto;\n            margin-left: .25rem;\n          }\n        }\n        @media screen and (max-width: 328px) {\n          .mobile-nav .nav-toggle .form-inline .mobile-search {\n            margin-right: 5px;\n          }\n        }\n        @media screen and (max-width: 767px) {\n        \n          #nav-mobile-md{\n            display: none;\n          }\n          #nav-mobile-sm{\n            display: inline-block;\n            margin: 0 auto .5rem;\n          }\n          .nav-toggle{\n            margin:.5rem 0;\n          }\n        }\n       \n      '
     )
   );
 };
@@ -15733,4 +15843,5 @@ exports.AlphabeticList = AlphabeticList;
 exports.PdfDownload = PdfDownload;
 exports.RelatedTopicsDropdown = RelatedTopicsDropdown;
 exports.Ustream = Ustream;
+exports.SideFooter = SideFooter;
 //# sourceMappingURL=index.js.map