@mjhls/mjh-framework 1.0.445 → 1.0.446

package/dist/esm/CMEDeck.js

@@ -0,0 +1,448 @@
+import './_commonjsHelpers-0c4b6f40.js';
+import './_to-object-16fd8b46.js';
+import './core.get-iterator-method-f5c0d66a.js';
+import './_library-528f1934.js';
+import './_iter-detect-6e099a34.js';
+import './from-2c0a5f49.js';
+import { _ as _toConsumableArray } from './toConsumableArray-8712d678.js';
+import './_object-pie-33c40e79.js';
+import { _ as _extends } from './extends-6e00b262.js';
+import './web.dom.iterable-46c95e52.js';
+import React, { useState, useRef, useEffect } from 'react';
+import { l as lib_3 } from './index-fb49124c.js';
+import 'prop-types';
+import './moment-12415288.js';
+import { useRouter } from 'next/router';
+import './isSymbol-c1b9be80.js';
+import { d as debounce_1 } from './debounce-8cd9e09c.js';
+import { I as InfiniteScroll } from './index.es-27d0bae9.js';
+import 'react-dom';
+import { V as VisibilitySensor } from './visibility-sensor-87d6b78c.js';
+import { m as main_36 } from './main-8c8784b8.js';
+import { _ as _slicedToArray } from './slicedToArray-f1e40361.js';
+import { _ as _asyncToGenerator, r as regenerator } from './asyncToGenerator-204b5a5c.js';
+import './_set-species-6f64f1c1.js';
+import './promise-53143c9a.js';
+import { Spinner, Container, Row, Col } from 'react-bootstrap';
+
+var corsProxy = 'https://cors-anywhere.herokuapp.com/';
+var itemsPerPage = 10;
+
+var CMEDeck = function CMEDeck(_ref) {
+  var getData = function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(params) {
+      var form, response, result, regex, newData;
+      return regenerator.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              form = new FormData();
+
+              form.append('doc', 'per');
+              form.append('from', params.from);
+              form.append('limit', params.limit);
+              form.append('keyword', keywords);
+              _context.prev = 5;
+              _context.next = 8;
+              return fetch(corsProxy + 'http://vaccine.mjhassoc.com/doc_loader.php', {
+                method: 'POST',
+                body: form
+              });
+
+            case 8:
+              response = _context.sent;
+              _context.next = 11;
+              return response.json();
+
+            case 11:
+              result = _context.sent;
+              regex = /(™)|(®)|(–)|(&)/gim;
+
+
+              if (result && result.length > 0) {
+                newData = result.map(function (activity) {
+                  var entities = {
+                    '™': '\u2122',
+                    '®': '\xAE',
+                    '–': '\u2013',
+                    '&': '&'
+                  };
+
+                  return _extends({}, activity, {
+                    title: activity.title.replace(regex, function (match) {
+                      return entities[match];
+                    }),
+                    href: 'https://www.gotoper.com/' + activity.get1 + '/' + activity.get2 + '/' + activity.doc,
+                    pageNumber: currentPage
+                  });
+                });
+
+                setIsLoading(false);
+                newData.length === itemsPerPage ? setScrolling(true) : setScrolling(false);
+                setData(function (prevData) {
+                  return [].concat(_toConsumableArray(prevData), _toConsumableArray(newData));
+                });
+              } else {
+                setScrolling(false);
+              }
+              _context.next = 19;
+              break;
+
+            case 16:
+              _context.prev = 16;
+              _context.t0 = _context['catch'](5);
+
+              console.log(_context.t0);
+
+            case 19:
+            case 'end':
+              return _context.stop();
+          }
+        }
+      }, _callee, this, [[5, 16]]);
+    }));
+
+    return function getData(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var _ref$autoScroll = _ref.autoScroll,
+      autoScroll = _ref$autoScroll === undefined ? true : _ref$autoScroll,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === undefined ? 'left' : _ref$variant,
+      rightItems = _ref.rightItems,
+      _ref$seoPaginate = _ref.seoPaginate,
+      seoPaginate = _ref$seoPaginate === undefined ? true : _ref$seoPaginate,
+      pageview = _ref.pageview,
+      _ref$keywords = _ref.keywords,
+      keywords = _ref$keywords === undefined ? '' : _ref$keywords;
+
+  var router = useRouter();
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      scrolling = _useState4[0],
+      setScrolling = _useState4[1];
+
+  var _useState5 = useState(router && router.query && router.query.page ? parseInt(router.query.page) : 1),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentPage = _useState6[0],
+      setCurrentPage = _useState6[1];
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      data = _useState8[0],
+      setData = _useState8[1];
+
+  var _useState9 = useState(router && router.query && router.query.page ? (parseInt(router.query.page) - 1) * itemsPerPage : 0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      from = _useState10[0],
+      setFrom = _useState10[1];
+
+  var currentPageRef = useRef(currentPage);
+  var fromeRef = useRef(from);
+
+  useEffect(function () {
+    // load initial data
+    getData({ from: from, limit: itemsPerPage });
+  }, []);
+
+  var changePageNumber = function changePageNumber(pageNumber) {
+    if (seoPaginate) {
+      var path = router.asPath;
+      var qrIndex = path.indexOf('?');
+      var pathname = router.pathname;
+      var queryString = '';
+
+      if (qrIndex > 0) {
+        path = path.substring(1, qrIndex);
+
+        var partialQS = router.asPath.substring(qrIndex + 1);
+        var partialQSArr = partialQS.split('&');
+
+        // exclude page=xxx from query string
+        partialQSArr.map(function (item) {
+          var itemArr = item.split('=');
+          var key = itemArr[0];
+          var val = itemArr[1];
+
+          if (key !== 'page') {
+            queryString += (queryString.length === 0 ? '' : '&') + key + '=' + val;
+          }
+        });
+      }
+
+      if (queryString.length > 0) {
+        path += '?' + queryString;
+      }
+
+      pageNumber = parseInt(pageNumber);
+
+      if (currentPageRef.current !== pageNumber) {
+        lib_3.refresh();
+
+        currentPageRef.current = pageNumber;
+        if (path[0] !== '/') {
+          path = '/' + path;
+        }
+        var newPath = pageNumber === 1 ? '' + path : path + '?page=' + pageNumber;
+
+        if (pageview) {
+          pageview(newPath);
+        }
+        router.push(pathname, newPath, {
+          shallow: true
+        });
+      }
+    }
+  };
+
+  var loadMore = debounce_1(function () {
+    setFrom(function (prevFrom) {
+      return prevFrom + itemsPerPage;
+    });
+    setCurrentPage(function (prevCurrentPage) {
+      return prevCurrentPage + 1;
+    });
+  }, 0);
+
+  useEffect(function () {
+    if (currentPageRef.current !== currentPage && fromeRef.current !== from) {
+      fromeRef.current = from;
+      getData({ from: from, limit: itemsPerPage });
+    }
+  }, [currentPage]);
+
+  var cardLoader = function cardLoader() {
+    var numberOfItemsBeforeAd = 6;
+    return React.createElement(
+      Row,
+      null,
+      data && data.map(function (row, index) {
+        var pageNumber = row.pageNumber || 1;
+        return React.createElement(
+          React.Fragment,
+          { key: index },
+          React.createElement(
+            VisibilitySensor,
+            {
+              onChange: function onChange(isVisible) {
+                isVisible && changePageNumber(pageNumber);
+              } },
+            variant === 'left' ? React.createElement(
+              Col,
+              { xl: 12, style: { marginBottom: '1rem' } },
+              React.createElement(
+                Row,
+                null,
+                React.createElement(
+                  Col,
+                  { xs: 3, sm: 4, md: 4, lg: 4, xl: 4, style: { padding: '0' } },
+                  React.createElement(
+                    'a',
+                    { href: row.href, target: '_blank' },
+                    React.createElement('img', { style: { width: '100%', borderRadius: '0 0 0 10%', marginBottom: '20px', borderTop: '1px solid #EEE' }, src: row.thumbnail })
+                  )
+                ),
+                React.createElement(
+                  Col,
+                  { xs: 9, sm: 8, md: 8, lg: 8, xl: 8, style: { paddingTop: '10px', marginBottom: '20px', borderTop: '1px solid #EEE' } },
+                  React.createElement(
+                    'a',
+                    { href: row.href, target: '_blank' },
+                    React.createElement('h4', { className: 'mb-1', style: { fontWeight: '500', fontSize: '22px' }, dangerouslySetInnerHTML: { __html: row.title } }),
+                    React.createElement(
+                      'p',
+                      { className: 'mb-2' },
+                      row.date
+                    ),
+                    React.createElement('p', { dangerouslySetInnerHTML: { __html: row.intro } })
+                  )
+                )
+              )
+            ) : React.createElement(
+              Row,
+              { style: { margin: '0', padding: '0' } },
+              React.createElement(
+                Col,
+                { xs: 9, sm: 8, lg: 8, xl: 8 },
+                React.createElement(
+                  'a',
+                  { href: row.href, target: '_blank' },
+                  React.createElement('h4', { className: 'mb-1', style: { fontWeight: '500', fontSize: '22px' }, dangerouslySetInnerHTML: { __html: row.title } }),
+                  React.createElement(
+                    'p',
+                    null,
+                    row.date
+                  ),
+                  React.createElement('p', { dangerouslySetInnerHTML: { __html: row.intro } })
+                )
+              ),
+              React.createElement(
+                Col,
+                { xs: 3, sm: 4, lg: 4, xl: 4 },
+                React.createElement(
+                  'a',
+                  { href: row.href, target: '_blank' },
+                  React.createElement('img', { style: { width: '100%', borderRadius: '0 0 10% 0' }, src: row.thumbnail && urlFor(row.thumbnail.asset).url() })
+                )
+              )
+            )
+          ),
+          main_36 && rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && React.createElement(
+            'div',
+            { style: { margin: '0 auto' } },
+            renderMobileAd(index, numberOfItemsBeforeAd)
+          )
+        );
+      })
+    );
+  };
+
+  var renderMobileAd = function renderMobileAd(index, numberOfItemsBeforeAd) {
+    var i = ((index + 1) / numberOfItemsBeforeAd - 1) % rightItems.length;
+    return React.createElement(
+      Col,
+      { md: 12, style: { display: 'flex', flex: '1 0 auto' } },
+      rightItems[i].component
+    );
+  };
+
+  var renderManualPagination = function renderManualPagination() {
+    var currentPage = 1;
+    return React.createElement(
+      'div',
+      { className: 'd-flex justify-content-between' },
+       currentPage > 1 ,
+      React.createElement(
+        'a',
+        { href: '?page=' + (currentPage + 1) },
+        'Next >>'
+      )
+    );
+  };
+
+  if (isLoading) {
+    return React.createElement(
+      'div',
+      { style: { display: 'flex', justifyContent: 'center', marginTop: '48px' } },
+      React.createElement(
+        Spinner,
+        { animation: 'border', role: 'status' },
+        React.createElement(
+          'span',
+          { className: 'sr-only' },
+          'Loading...'
+        )
+      )
+    );
+  }
+
+  if (data.length > 0) {
+    return React.createElement(
+      'div',
+      { className: 'contentDeck' },
+      autoScroll ? React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+          'style',
+          { jsx: true },
+          '\n                .infinite-scroll-component {\n                  overflow: hidden !important;\n                }\n              '
+        ),
+        React.createElement(
+          InfiniteScroll,
+          {
+            dataLength: data.length,
+            next: loadMore,
+            hasMore: scrolling,
+            scrollThreshold: 0.9,
+            loader: React.createElement(
+              'div',
+              { style: { textAlign: 'center' } },
+              React.createElement(
+                Spinner,
+                { animation: 'border', role: 'status' },
+                React.createElement(
+                  'span',
+                  { className: 'sr-only' },
+                  'Loading...'
+                )
+              )
+            ),
+            endMessage: React.createElement(
+              'p',
+              { style: { textAlign: 'center' } },
+              React.createElement(
+                'b',
+                null,
+                'Yay! You have seen it all'
+              )
+            ) },
+          React.createElement(
+            Container,
+            null,
+            cardLoader()
+          )
+        ),
+        React.createElement(
+          'noscript',
+          null,
+          renderManualPagination()
+        )
+      ) : React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+          Container,
+          null,
+          cardLoader()
+        ),
+        React.createElement(
+          'div',
+          { style: { padding: '0px 10px' } },
+          scrolling ? React.createElement(
+            'button',
+            {
+              style: { margin: 'auto', width: '100%' },
+              onClick: function onClick(e) {
+                loadMore();
+              } },
+            'Load More'
+          ) : React.createElement(
+            'p',
+            { style: { textAlign: 'center' } },
+            React.createElement(
+              'b',
+              null,
+              'End of data'
+            )
+          )
+        ),
+        React.createElement(
+          'noscript',
+          null,
+          renderManualPagination()
+        )
+      )
+    );
+  } else {
+    return React.createElement(
+      'div',
+      null,
+      React.createElement(
+        'div',
+        null,
+        'No data found '
+      )
+    );
+  }
+};
+
+export default CMEDeck;

package/dist/esm/Column1.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+var Column1 = function Column1(props) {
+  var title = props.title;
+
+  return React.createElement(
+    'section',
+    null,
+    React.createElement(
+      Row,
+      { className: 'justify-content-md-center' },
+      React.createElement(
+        Col,
+        { className: 'middleCol', style: { marginTop: !title && '10px' } },
+        title && React.createElement(
+          'h1',
+          null,
+          title
+        ),
+        props.children
+      )
+    )
+  );
+};
+
+export default Column1;
+export { Column1 };

package/dist/esm/Column2.js

@@ -0,0 +1,57 @@
+import './_commonjsHelpers-0c4b6f40.js';
+import React from 'react';
+import 'prop-types';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import './isSymbol-c1b9be80.js';
+import './_arrayMap-a8dd2b2c.js';
+import './get-ae817b75.js';
+import './react-social-icons-3822f1ce.js';
+import SideFooter from './SideFooter.js';
+import { C as ConferenceBanner } from './ConferenceBanner-9162d0ca.js';
+
+var Column2 = function Column2(props) {
+  var rightItems = props.rightItems,
+      title = props.title,
+      website = props.website;
+
+
+  return React.createElement(
+    'section',
+    null,
+    React.createElement(
+      Row,
+      { className: 'justify-content-md-center' },
+      React.createElement(
+        Col,
+        { md: true, className: 'middleCol', style: { marginTop: !title && '10px' } },
+        title && React.createElement(
+          'h1',
+          null,
+          title
+        ),
+        props.children
+      ),
+      React.createElement(
+        Col,
+        { xs: 12, className: 'rightCol' },
+        website && website.conferenceBannerContent && React.createElement(ConferenceBanner, { website: website }),
+        React.createElement(
+          'div',
+          { className: 'sticky-top', style: { top: '60px' } },
+          rightItems && rightItems.map(function (row, index) {
+            return React.createElement(
+              'div',
+              { key: index },
+              row.component
+            );
+          }),
+          website && website.sideFooterContent && website.sideFooterContent.length && !website.showFooterOnLeftSide && React.createElement(SideFooter, { website: website })
+        )
+      )
+    )
+  );
+};
+
+export default Column2;
+export { Column2 };

package/dist/esm/Column3.js

@@ -0,0 +1,131 @@
+import './_commonjsHelpers-0c4b6f40.js';
+import './_to-object-16fd8b46.js';
+import './core.get-iterator-method-f5c0d66a.js';
+import './_library-528f1934.js';
+import './_iter-detect-6e099a34.js';
+import './web.dom.iterable-46c95e52.js';
+import React, { useRef, useEffect } from 'react';
+import './index-fb49124c.js';
+import 'prop-types';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import './isSymbol-c1b9be80.js';
+import './debounce-8cd9e09c.js';
+import { m as main_36 } from './main-8c8784b8.js';
+import './slicedToArray-f1e40361.js';
+import './stringify-e30bc114.js';
+import './asyncToGenerator-204b5a5c.js';
+import './_set-species-6f64f1c1.js';
+import './promise-53143c9a.js';
+import './Beam.js';
+import './Segment.js';
+import './AdSlot.js';
+import './_arrayMap-a8dd2b2c.js';
+import './get-ae817b75.js';
+import './react-social-icons-3822f1ce.js';
+import 'react-bootstrap';
+import SideFooter from './SideFooter.js';
+import { C as ConferenceBanner } from './ConferenceBanner-9162d0ca.js';
+import ADSponsoredResources from './ADSponsoredResources.js';
+import 'react-bootstrap/ListGroup';
+import LeftNav from './LeftNav.js';
+import PageFilter from './PageFilter.js';
+
+var Column3 = function Column3(props) {
+  var leftItems = props.leftItems,
+      rightItems = props.rightItems,
+      title = props.title,
+      website = props.website,
+      showFilter = props.showFilter,
+      getParams = props.getParams,
+      filters = props.filters,
+      defaultFilter = props.defaultFilter,
+      showRightAd = props.showRightAd,
+      logo = props.logo;
+
+  var adRef = useRef(null);
+
+  useEffect(function () {
+    if (!main_36 && window.innerWidth >= 768) {
+      var navbar = document.querySelector('.navbar');
+      var AdOffsetTop = adRef.current.getBoundingClientRect().top;
+      window.addEventListener('scroll', function () {
+        if (window.pageYOffset + (AdOffsetTop - navbar.offsetHeight) > AdOffsetTop) {
+          if (adRef.current && adRef.current.style) {
+            adRef.current.style.position = 'fixed';
+            adRef.current.style.top = '60px';
+          }
+        } else {
+          if (adRef.current && adRef.current.style) {
+            adRef.current.style.position = 'relative';
+            adRef.current.style.top = '';
+          }
+        }
+      });
+    }
+  }, []);
+
+  return React.createElement(
+    'section',
+    null,
+    React.createElement(
+      Row,
+      { className: 'justify-content-md-center' },
+      React.createElement(
+        Col,
+        { md: true, className: 'leftCol', style: { width: '200px' } },
+        React.createElement(LeftNav, { leftItems: leftItems }),
+        website && website.sponsoredAd && React.createElement(ADSponsoredResources, { sponsoredAd: website.sponsoredAd }),
+        website && website.sideFooterContent && website.sideFooterContent.length && website.showFooterOnLeftSide && React.createElement(SideFooter, { website: website, cache: website.cache, logo: logo })
+      ),
+      React.createElement(
+        Col,
+        { md: true, className: 'middleCol', style: { maxWidth: '640px', marginTop: !title && '10px' } },
+        showFilter ? React.createElement(
+          'div',
+          { className: 'title-wrap' },
+          React.createElement(
+            'h1',
+            { className: 'title' },
+            title
+          ),
+          React.createElement(
+            'div',
+            { className: 'filter-box' },
+            React.createElement(PageFilter, { getParams: getParams, filters: filters, defaultFilter: defaultFilter })
+          )
+        ) : title && React.createElement(
+          'h1',
+          { className: 'title' },
+          title
+        ),
+        props.children
+      ),
+      React.createElement(
+        'style',
+        { jsx: 'true' },
+        '\n            .filter-box {\n              float: right;\n              padding-top: 6px;\n              padding-right: 18px;\n            }\n            @media only screen and (min-width: 768px) {\n              .title-wrap {\n                display: flex;\n                justify-content: space-between;\n              }\n            }\n            @media only screen and (max-width: 767px) {\n              /* .filter-box {\n                float: right;\n                display: flex;\n                justify-content: flex-end;\n              } */\n              .title-wrap {\n                display: flex;\n                flex-direction: column;\n                margin-bottom: 10px;\n              }\n            }\n          '
+      ),
+      (!main_36 || showRightAd) && React.createElement(
+        Col,
+        { xs: 12, className: 'rightCol' },
+        website && website.conferenceBannerContent && React.createElement(ConferenceBanner, { website: website }),
+        React.createElement(
+          'div',
+          { ref: adRef },
+          rightItems && rightItems.map(function (row, index) {
+            return React.createElement(
+              'div',
+              { key: index },
+              row.component
+            );
+          }),
+          website && website.sideFooterContent && website.sideFooterContent.length && !website.showFooterOnLeftSide && React.createElement(SideFooter, { website: website, cache: website.cache, logo: logo })
+        )
+      )
+    )
+  );
+};
+
+export default Column3;
+export { Column3 };