@mjhls/mjh-framework 1.0.85 → 1.0.86

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.85
+# mjh-framework v. 1.0.86
 
 
 > Foundation Framework

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React__default, { Component, useState, useEffect, createElement, createContext } from 'react';
+import React__default, { Component, useState, useEffect, useRef, createElement, createContext } from 'react';
 import PropTypes from 'prop-types';
 import reactDom from 'react-dom';
 import Container from 'react-bootstrap/Container';
@@ -8,6 +8,8 @@ import Card from 'react-bootstrap/Card';
 import Link from 'next/link';
 import { withRouter, useRouter } from 'next/router';
 import Media from 'react-bootstrap/Media';
+import { Media as Media$1, Card as Card$1, Container as Container$1, Figure, Carousel, Table } from 'react-bootstrap';
+import moment from 'moment';
 import ListGroup from 'react-bootstrap/ListGroup';
 import Head from 'next/head';
 import Accordion from 'react-bootstrap/Accordion';
@@ -19,7 +21,6 @@ import NavDropdown from 'react-bootstrap/NavDropdown';
 import Form from 'react-bootstrap/Form';
 import FormControl from 'react-bootstrap/FormControl';
 import Button from 'react-bootstrap/Button';
-import { Figure, Carousel, Card as Card$1, Table } from 'react-bootstrap';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -6157,6 +6158,333 @@ var YoutubeGroup = function YoutubeGroup(props) {
   );
 };
 
+var _this = undefined;
+
+var urlFor = function urlFor(builder, source) {
+  return builder.image(source);
+};
+
+var loadMore = function loadMore(values, setValues, per) {
+  setValues({
+    page: values.page + 1,
+    from: values.from + per,
+    to: values.to + per
+  });
+};
+
+var loadData = function loadData(values, query, client, params, setData, setScrolling, pointer, pointerArray) {
+  params = _extends({}, params, {
+    from: values.from,
+    to: values.to
+  });
+
+  client.fetch(query, params).then(function (dataArr) {
+    if (pointer && pointerArray) {
+      var _pointer = _this.pointer;
+      dataArr = dataArr[pointerArray][_pointer];
+    }
+    dataArr = dataArr.map(function (item) {
+      return _extends({}, item, {
+        pageNumber: values.page
+      });
+    });
+
+    if (dataArr.length > 0) {
+      setData(function (prevData) {
+        return [].concat(toConsumableArray(prevData), toConsumableArray(dataArr));
+      });
+      setScrolling(true);
+    } else {
+      setScrolling(false);
+    }
+  });
+};
+
+var changePageNumber = function changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage) {
+  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 (currentPage !== pageNumber) {
+      lib_3.refresh();
+      if (pageview) {
+        setCurrentPage(pageNumber);
+        if (path[0] !== '/') {
+          path = '/' + path;
+        }
+        var newPath = pageNumber === 1 ? '' + path : path + '?page=' + pageNumber;
+        pageview(newPath);
+
+        router.push(pathname, newPath, {
+          shallow: true
+        });
+      }
+    }
+  }
+};
+
+var renderAuthor = function renderAuthor(authorName, authorURL, index$$1, length) {
+  if (authorName && authorURL) {
+    return React__default.createElement(
+      Link,
+      { href: '/authors/' + authorURL.current, key: index$$1 },
+      React__default.createElement(
+        'a',
+        null,
+        authorName,
+        length !== index$$1 + 1 && ' | '
+      )
+    );
+  } else if (authorName) {
+    return React__default.createElement(
+      'span',
+      { key: index$$1 },
+      authorName,
+      length !== index$$1 + 1 && ' | '
+    );
+  }
+};
+
+var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage) {
+  return React__default.createElement(
+    'div',
+    null,
+    data && data.map(function (article, index$$1) {
+      var pageNumber = article.pageNumber || values.page;
+      var contentCategoryName = article.contentCategory ? article.contentCategory.name : 'Articles';
+      return React__default.createElement(
+        VisibilitySensor,
+        {
+          key: article._id ? article._id : index$$1,
+          onChange: function onChange(isVisible) {
+            isVisible && changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage);
+          } },
+        React__default.createElement(
+          Card$1,
+          { key: article._id ? article._id : index$$1 },
+          React__default.createElement(
+            Card$1.Body,
+            null,
+            React__default.createElement(
+              Media$1,
+              null,
+              React__default.createElement(
+                Link,
+                { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
+                React__default.createElement(
+                  'a',
+                  null,
+                  React__default.createElement('img', { width: 200, height: 130, className: 'mr-3', src: urlFor(builder, article.thumbnail.asset).url(), style: { objectFit: 'cover' } })
+                )
+              ),
+              React__default.createElement(
+                Media$1.Body,
+                null,
+                React__default.createElement(
+                  Link,
+                  { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
+                  React__default.createElement(
+                    'a',
+                    null,
+                    article.title && React__default.createElement(
+                      'h5',
+                      { className: 'card-title' },
+                      article.title
+                    )
+                  )
+                ),
+                article.published && React__default.createElement(
+                  'h6',
+                  { className: 'card-text' },
+                  moment(article.published).format('MMMM DD, YYYY')
+                ),
+                article.authorDetails && article.authorDetails.length > 0 && article.authorDetails.map(function (authorDetail, index$$1) {
+                  return React__default.createElement(
+                    'div',
+                    { className: 'card-text d-inline', key: index$$1 },
+                    renderAuthor(authorDetail.displayName, authorDetail.url, index$$1, article.authorDetails.length)
+                  );
+                })
+              )
+            ),
+            article.summary && React__default.createElement(
+              'p',
+              { className: 'pt-2 card-text' },
+              article.summary
+            )
+          )
+        )
+      );
+    })
+  );
+};
+
+var renderManualPagination = function renderManualPagination(currentPage) {
+  return React__default.createElement(
+    'div',
+    { className: 'd-flex justify-content-between' },
+    currentPage && currentPage > 1 && React__default.createElement(
+      'a',
+      { href: '?page=' + (currentPage - 1) },
+      '<< Previous'
+    ),
+    React__default.createElement(
+      'a',
+      { href: '?page=' + (currentPage + 1) },
+      'Next >>'
+    )
+  );
+};
+
+var usePrevious = function usePrevious(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
+var QueueDeckExpanded = function QueueDeckExpanded(props) {
+  var router = useRouter();
+  var initialData = props.dataRecord,
+      client = props.client,
+      params = props.params,
+      query = props.query,
+      autoScroll = props.autoScroll,
+      pointer = props.pointer,
+      pointerArray = props.pointerArray,
+      mapping = props.mapping,
+      seoPaginate = props.seoPaginate,
+      pageview = props.pageview;
+  var initialCurrentPage = props.currentPage;
+
+  var builder = imageUrlBuilder(client);
+
+  var _useState = useState(initialData),
+      _useState2 = slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = slicedToArray(_useState3, 2),
+      scrolling = _useState4[0],
+      setScrolling = _useState4[1];
+
+  var _useState5 = useState(params ? params.to : 0),
+      _useState6 = slicedToArray(_useState5, 2),
+      per = _useState6[0],
+      setPer = _useState6[1];
+
+  var _useState7 = useState(initialCurrentPage || 1),
+      _useState8 = slicedToArray(_useState7, 2),
+      currentPage = _useState8[0],
+      setCurrentPage = _useState8[1];
+
+  var _useState9 = useState({
+    from: params ? params.from : 0,
+    to: params ? params.to : 0,
+    page: 1
+  }),
+      _useState10 = slicedToArray(_useState9, 2),
+      values = _useState10[0],
+      setValues = _useState10[1];
+
+  var prevValues = usePrevious(values);
+
+  useEffect(function () {
+    if (prevValues) {
+      if (values.page !== prevValues.page && values.from !== prevValues.from && values.to !== prevValues.from) {
+        loadData(values, query, client, params, setData, setScrolling, pointer, pointerArray);
+      }
+    }
+  }, [values, prevValues, query, client, params, setData, setScrolling, pointer, pointerArray]);
+
+  return React__default.createElement(
+    'div',
+    null,
+    autoScroll ? React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement(
+        InfiniteScroll,
+        { dataLength: data && data.length, next: function next() {
+            return loadMore(values, setValues, per);
+          }, hasMore: scrolling, scrollThreshold: 0.9 },
+        React__default.createElement(
+          Container$1,
+          null,
+          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage)
+        )
+      ),
+      React__default.createElement(
+        'noscript',
+        null,
+        renderManualPagination(currentPage)
+      )
+    ) : React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement(
+        Container$1,
+        null,
+        cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage)
+      ),
+      React__default.createElement(
+        'div',
+        { style: { padding: '0px 10px' } },
+        scrolling ? React__default.createElement(
+          'button',
+          {
+            style: { margin: 'auto', width: '100%' },
+            onClick: function onClick(e) {
+              loadMore(values, setValues, per);
+            } },
+          'Load More'
+        ) : React__default.createElement(
+          'p',
+          { style: { textAlign: 'center' } },
+          React__default.createElement(
+            'b',
+            null,
+            'End of data'
+          )
+        )
+      ),
+      React__default.createElement(
+        'noscript',
+        null,
+        renderManualPagination(currentPage)
+      )
+    )
+  );
+};
+
 var Column1 = function Column1(props) {
   var title = props.title;
 
@@ -8157,7 +8485,7 @@ var FigureComponent = function FigureComponent(_ref) {
   );
 };
 
-var urlFor = function urlFor(source, builder) {
+var urlFor$1 = function urlFor(source, builder) {
   return builder.image(source);
 };
 
@@ -8193,7 +8521,7 @@ var Slideshow = function Slideshow(_ref) {
         return React__default.createElement(
           Carousel.Item,
           { key: slide._key },
-          React__default.createElement('img', { src: urlFor(slide.asset, builder).url(), style: { width: '100%' } })
+          React__default.createElement('img', { src: urlFor$1(slide.asset, builder).url(), style: { width: '100%' } })
         );
       })
     )
@@ -11781,7 +12109,7 @@ var TableShow = function TableShow(_ref) {
   );
 };
 
-var Media$1 = function Media$$1(_ref) {
+var Media$2 = function Media$$1(_ref) {
   var uploadDoc = _ref.uploadDoc,
       poster = _ref.poster,
       client = _ref.client,
@@ -12063,7 +12391,7 @@ var getSerializers$1 = function getSerializers(client, pageview) {
             caption = node.caption,
             blank = node.blank;
 
-        return React__default.createElement(Media$1, { uploadDoc: upload_doc, poster: poster, blank: blank, client: client, caption: caption });
+        return React__default.createElement(Media$2, { uploadDoc: upload_doc, poster: poster, blank: blank, client: client, caption: caption });
       },
       iframe: function iframe(_ref8) {
         var node = _ref8.node;
@@ -12102,5 +12430,5 @@ var getSerializers$1 = function getSerializers(client, pageview) {
   };
 };
 
-export { ContentCard as DeckContent, GridContent, DeckQueue, ThumbnailCard, TaxonomyCard, GroupDeck, YoutubeGroup, Column1, Column2, Column3, Header, LeftNav, AccordionPanel, SocialShare, NavMagazine, NavNative, NavNormal, NavDvm, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers$1 as getSerializers, Search };
+export { ContentCard as DeckContent, GridContent, DeckQueue, ThumbnailCard, TaxonomyCard, GroupDeck, YoutubeGroup, QueueDeckExpanded, Column1, Column2, Column3, Header, LeftNav, AccordionPanel, SocialShare, NavMagazine, NavNative, NavNormal, NavDvm, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers$1 as getSerializers, Search };
 //# sourceMappingURL=index.es.js.map