@mjhls/mjh-framework 1.0.63 → 1.0.65

package/README.md

@@ -1,4 +1,4 @@
-# mjh-framework v. 1.0.62
+# mjh-framework v. 1.0.65
 
 > Foundation Framework
 

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React__default, { Component, useState, createElement, createContext } from 'react';
+import React__default, { Component, useState, createContext, createElement } from 'react';
 import PropTypes from 'prop-types';
 import reactDom from 'react-dom';
 import Row from 'react-bootstrap/Row';
@@ -3823,8 +3823,7 @@ var DeckContent = function (_React$Component) {
       currentPage: _this.props.currentPage || 1
     }, _this.loadMore = debounce_1(function () {
       _this.setState(function (state) {
-        var currentPage = state.currentPage,
-            page = state.page,
+        var page = state.page,
             from = state.from,
             per = state.per,
             to = state.to;
@@ -3845,10 +3844,10 @@ var DeckContent = function (_React$Component) {
       var client = _this.props.client;
 
 
-      var params = { from: from, to: to };
-      var queryUpdated = query.replace('$from', params.from).replace('$to', params.to);
-      // const query = '*[_type == "article" && defined(title) && defined(thumbnail)][$from...$to] { title, summary, thumbnail { asset-> }, url }'
-      client.fetch(queryUpdated).then(function (dataArr) {
+      var params = _extends({}, _this.params, { from: from, to: to
+        // const queryUpdated = query.replace('$from', params.from).replace('$to', params.to)
+        // const query = '*[_type == "article" && defined(title) && defined(thumbnail)][$from...$to] { title, summary, thumbnail { asset-> }, url }'
+      });client.fetch(query, params).then(function (dataArr) {
         if (_this.pointer && _this.pointerArray) {
           var pointer = _this.pointer;
           dataArr = dataArr[_this.pointerArray][pointer];
@@ -3878,8 +3877,8 @@ var DeckContent = function (_React$Component) {
       var builder = imageUrlBuilder(client);
       return builder.image(source);
     }, _this.renderCardImage = function (row, page) {
-      if (row.thumbnail && row.thumbnail.asset) {
-        return _this.urlFor(row.thumbnail.asset).url();
+      if (row.thumbnail) {
+        return _this.urlFor(row.thumbnail).url();
       } else {
         return _this.defaultImage;
       }
@@ -3891,7 +3890,6 @@ var DeckContent = function (_React$Component) {
       var currentPage = _this.state.currentPage;
 
       if (seoPaginate) {
-
         var path = router.asPath;
         var qrIndex = path.indexOf('?');
         var pathname = router.pathname;
@@ -3903,7 +3901,7 @@ var DeckContent = function (_React$Component) {
           var partialQS = router.asPath.substring(qrIndex + 1);
           var partialQSArr = partialQS.split('&');
 
-          // exclude page=xxx from query string 
+          // exclude page=xxx from query string
           partialQSArr.map(function (item) {
             var itemArr = item.split('=');
             var key = itemArr[0];
@@ -3922,7 +3920,6 @@ var DeckContent = function (_React$Component) {
         pageNumber = parseInt(pageNumber);
 
         if (currentPage !== pageNumber) {
-
           lib_3.refresh();
           if (pageview) {
             _this.setState({
@@ -3935,15 +3932,15 @@ var DeckContent = function (_React$Component) {
               var newPath = pageNumber === 1 ? '' + path : path + '?page=' + pageNumber;
 
               // please leave this for later debug purpose : Yong Jun.
-              /*console.log('page change reported', {
-                currentPage: currentPage,
-                pageNumber: pageNumber,
-                pathname: pathname,
-                path: path,
-                newPath: newPath,
-                firstPage: pageNumber === 1,
-                queryString: queryString
-              })*/
+              /* console.log('page change reported', {
+              currentPage: currentPage,
+              pageNumber: pageNumber,
+              pathname: pathname,
+              path: path,
+              newPath: newPath,
+              firstPage: pageNumber === 1,
+              queryString: queryString
+              }) */
 
               pageview(newPath);
 
@@ -5162,12 +5159,12 @@ var DeckQueue = function (_React$Component) {
       var client = _this.props.client;
 
 
-      var params = { from: from, to: to };
-      var queryUpdated = query.replace('$from', params.from).replace('$to', params.to);
+      var params = _extends({}, _this.params, { from: from, to: to
+        // const queryUpdated = query.replace('$from', params.from).replace('$to', params.to)
 
-      if (_this.pointer && _this.pointerArray) {
+      });if (_this.pointer && _this.pointerArray) {
         var pointer = _this.pointer;
-        client.fetch(queryUpdated).then(function (dataArr) {
+        client.fetch(query, params).then(function (dataArr) {
           _this.setState(function (state, props) {
             if (dataArr[_this.pointerArray][pointer].length > 0) {
               return {
@@ -5182,7 +5179,7 @@ var DeckQueue = function (_React$Component) {
           });
         });
       } else {
-        client.fetch(queryUpdated).then(function (dataArr) {
+        client.fetch(query, params).then(function (dataArr) {
           _this.setState(function (state, props) {
             if (dataArr.length > 0) {
               return {
@@ -5218,7 +5215,7 @@ var DeckQueue = function (_React$Component) {
         null,
         this.state.data && this.state.data.map(function (row, index) {
           // const thumbnailURL = get(row, 'thumbnail.asset.url', this.props.defaultImage)
-          var thumbnailURL = row.thumbnail && row.thumbnail.asset ? _this2.urlFor(row.thumbnail.asset).url() : _this2.props.defaultImage;
+          var thumbnailURL = row.thumbnail ? _this2.urlFor(row.thumbnail).url() : _this2.props.defaultImage;
           return React__default.createElement(
             Col,
             { key: index, md: 12, lg: lgVar, style: { display: 'flex', flex: '1 0 auto' } },
@@ -5335,13 +5332,7 @@ var ThumbnailCard = function ThumbnailCard(_ref) {
       return React__default.createElement(
         Media,
         { className: 'mb-3 thumbnail-card' },
-        React__default.createElement('img', {
-          width: size,
-          height: size,
-          className: 'mr-3',
-          src: item.thumbnail && item.thumbnail.asset ? urlFor(item.thumbnail.asset).url() : defaultImage,
-          alt: 'Generic placeholder'
-        }),
+        React__default.createElement('img', { width: size, height: size, className: 'mr-3', src: item.thumbnail ? urlFor(item.thumbnail).url() : defaultImage, alt: 'Generic placeholder' }),
         React__default.createElement(
           Media.Body,
           null,
@@ -7386,14 +7377,17 @@ var AD300x250x600 = function AD300x250x600(_ref) {
 };
 
 var FigureComponent = function FigureComponent(_ref) {
-  var caption = _ref.caption,
-      _ref$widthP = _ref.widthP,
-      widthP = _ref$widthP === undefined ? '100' : _ref$widthP,
-      _ref$alignment = _ref.alignment,
-      alignment = _ref$alignment === undefined ? 'center' : _ref$alignment,
-      asset = _ref.asset,
+  var node$$1 = _ref.node,
       client = _ref.client;
-
+  var caption = node$$1.caption,
+      asset = node$$1.asset,
+      alt = node$$1.alt,
+      blank = node$$1.blank,
+      link = node$$1.link,
+      _node$widthP = node$$1.widthP,
+      widthP = _node$widthP === undefined ? '100' : _node$widthP,
+      _node$alignment = node$$1.alignment,
+      alignment = _node$alignment === undefined ? 'center' : _node$alignment;
 
   var builder = imageUrlBuilder(client);
 
@@ -7401,13 +7395,33 @@ var FigureComponent = function FigureComponent(_ref) {
     return builder.image(source);
   };
   var imgWidth = widthP + '%';
+  var imgFloat = alignment.toLowerCase() === 'center' ? 'none' : alignment.toLowerCase();
+  var figureMargin = void 0;
+  if (imgFloat === 'none') {
+    figureMargin = '0 auto 2rem';
+  }
+  if (imgFloat === 'left') {
+    figureMargin = '0 2rem 2rem 0';
+  }
+  if (imgFloat === 'right') {
+    figureMargin = '0 0 2rem 2rem';
+  }
   return React__default.createElement(
-    'div',
-    { style: { textAlign: alignment, marginTop: '1em', marginBottom: '1em' } },
-    React__default.createElement(
-      Figure,
-      { style: { width: imgWidth } },
-      React__default.createElement(Figure.Image, { src: urlFor(asset).url() }),
+    Figure,
+    { className: 'd-block text-center mb-3', style: { width: imgWidth, float: imgFloat, margin: figureMargin } },
+    link ? React__default.createElement(
+      'a',
+      { href: link, target: blank ? '_blank' : '_self' },
+      React__default.createElement(Figure.Image, { src: urlFor(asset).url(), alt: alt && alt }),
+      caption && React__default.createElement(
+        Figure.Caption,
+        null,
+        caption
+      )
+    ) : React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement(Figure.Image, { src: urlFor(asset).url(), alt: alt && alt }),
       caption && React__default.createElement(
         Figure.Caption,
         null,
@@ -7436,7 +7450,7 @@ var Slideshow = function Slideshow(_ref) {
         return React__default.createElement(
           Carousel.Item,
           { key: slide._key },
-          React__default.createElement('img', { src: urlFor(slide.asset).url(), style: { width: '100%' } })
+          React__default.createElement('img', { src: urlFor(slide).url(), style: { width: '100%' } })
         );
       })
     )
@@ -11086,17 +11100,43 @@ var Media$1 = function Media$$1(_ref) {
     return builder.image(source);
   };
 
+  var renderFigure = function renderFigure(uploadDoc, poster, blank, caption) {
+    if (uploadDoc && uploadDoc.asset && poster && poster.asset) {
+      return React__default.createElement(
+        Figure,
+        { className: 'd-block text-center mb-3' },
+        React__default.createElement(
+          'a',
+          { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
+          React__default.createElement(Figure.Image, { src: urlFor(poster.asset).url(), fluid: true }),
+          caption && React__default.createElement(
+            Figure.Caption,
+            null,
+            caption
+          )
+        )
+      );
+    } else if (poster && poster.asset) {
+      return React__default.createElement(
+        Figure,
+        { className: 'd-block text-center mb-3' },
+        React__default.createElement(Figure.Image, { src: urlFor(poster.asset).url() }),
+        caption && React__default.createElement(
+          Figure.Caption,
+          null,
+          caption
+        )
+      );
+    }
+  };
+
   return React__default.createElement(
-    Figure,
+    React__default.Fragment,
     null,
-    uploadDoc ? React__default.createElement(
+    renderFigure(uploadDoc, poster, blank, caption),
+    !poster && uploadDoc && uploadDoc.asset && React__default.createElement(
       'a',
       { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
-      React__default.createElement(Figure.Image, { src: urlFor(poster.asset).url() })
-    ) : React__default.createElement(Figure.Image, { src: urlFor(poster.asset).url() }),
-    caption && React__default.createElement(
-      Figure.Caption,
-      null,
       caption
     )
   );
@@ -11113,12 +11153,8 @@ var getSerializers$1 = function getSerializers(client) {
       },
       figure: function figure(_ref2) {
         var node = _ref2.node;
-        var asset = node.asset,
-            caption = node.caption,
-            widthP = node.widthP,
-            alignment = node.alignment;
 
-        return React__default.createElement(FigureComponent, { caption: caption, asset: asset, client: client, widthP: widthP, alignment: alignment });
+        return React__default.createElement(FigureComponent, { node: node, client: client });
       },
       slideshow: function slideshow(_ref3) {
         var node = _ref3.node;