@quintype/components 3.5.1-csv-table.2 → 3.5.1-image-below-fold.1

package/dist/cjs/index.js

@@ -17,9 +17,9 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var reactDfp = require('react-dfp');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _extends = require('@babel/runtime/helpers/extends');
 var emptyWebGif = require('empty-web-gif');
 var quintypeJs = require('quintype-js');
-var _extends = require('@babel/runtime/helpers/extends');
 var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
 var classNames = require('classnames');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
@@ -60,8 +60,8 @@ var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var emptyWebGif__default = /*#__PURE__*/_interopDefaultLegacy(emptyWebGif);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var emptyWebGif__default = /*#__PURE__*/_interopDefaultLegacy(emptyWebGif);
 var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
@@ -1844,6 +1844,66 @@ function hashString(string) {
   return hash;
 }
 
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var forceLoadingGumlet = false;
+
+function loadGumlet() {
+  if (window.GUMLET_CONFIG || window.gumlet || forceLoadingGumlet === true) {
+    return;
+  }
+
+  if (process.env.NODE_ENV == "development") {
+    console.warn("Loading Gumlet Dynamically! This is really bad for page speed. Please see https://developers.quintype.com/malibu/tutorial/gumlet-integration");
+  }
+
+  forceLoadingGumlet = true;
+  window.GUMLET_CONFIG = window.GUMLET_CONFIG || {
+    hosts: []
+  };
+  var script = document.createElement("script");
+  script.type = "text/javascript";
+  script.src = "https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js";
+  document.body.appendChild(script);
+}
+
+function GumletImage(props) {
+  var slug = props.slug,
+      metadata = props.metadata,
+      aspectRatio = props.aspectRatio,
+      imageCDN = props.imageCDN,
+      imgParams = props.imgParams,
+      reactTag = props.reactTag,
+      className = props.className;
+  var image = new quintypeJs.FocusedImage(slug, metadata);
+  var imageProps = {
+    src: emptyWebGif__default["default"],
+    "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams),
+    key: hashString(slug)
+  };
+  var Tag = reactTag || "img";
+  React.useEffect(loadGumlet);
+  console.log("aa--imageProps", imageProps);
+  console.log("aa--props", props);
+  console.log("aa--USED_PARAMS", USED_PARAMS);
+  console.log("aa--omit(props, USED_PARAMS)", omit__default["default"](props, USED_PARAMS));
+  React.useEffect(function () {
+    console.log("aa--imageProps", imageProps);
+    console.log("aa--props", props);
+    console.log("aa--USED_PARAMS", USED_PARAMS);
+    console.log("aa--omit(props, USED_PARAMS)", omit__default["default"](props, USED_PARAMS));
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Tag, _extends__default["default"]({}, imageProps, omit__default["default"](props, USED_PARAMS), {
+    className: className ? "qt-image ".concat(className) : "qt-image"
+  })), /*#__PURE__*/React__default["default"].createElement("noscript", null, /*#__PURE__*/React__default["default"].createElement("img", {
+    src: "https://".concat(imageCDN, "/").concat(image.path(aspectRatio, _objectSpread$4(_objectSpread$4({}, imgParams), {}, {
+      w: 1200
+    }))),
+    alt: props.alt || ""
+  })));
+}
+
 function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
 
 function _isNativeReflectConstruct$g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -1940,56 +2000,6 @@ ThumborImage.contextTypes = {
   lazyLoadEagerPredicate: propTypes.func
 };
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var forceLoadingGumlet = false;
-
-function loadGumlet() {
-  if (window.GUMLET_CONFIG || window.gumlet || forceLoadingGumlet === true) {
-    return;
-  }
-
-  if (process.env.NODE_ENV == 'development') {
-    console.warn("Loading Gumlet Dynamically! This is really bad for page speed. Please see https://developers.quintype.com/malibu/tutorial/gumlet-integration");
-  }
-
-  forceLoadingGumlet = true;
-  window.GUMLET_CONFIG = window.GUMLET_CONFIG || {
-    hosts: []
-  };
-  var script = document.createElement('script');
-  script.type = 'text/javascript';
-  script.src = 'https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js';
-  document.body.appendChild(script);
-}
-
-function GumletImage(props) {
-  var slug = props.slug,
-      metadata = props.metadata,
-      aspectRatio = props.aspectRatio,
-      imageCDN = props.imageCDN,
-      imgParams = props.imgParams,
-      reactTag = props.reactTag,
-      className = props.className;
-  var image = new quintypeJs.FocusedImage(slug, metadata);
-  var imageProps = {
-    src: emptyWebGif__default["default"],
-    "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams),
-    key: hashString(slug)
-  };
-  var Tag = reactTag || "img";
-  React.useEffect(loadGumlet);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Tag, _extends__default["default"]({}, imageProps, omit__default["default"](props, USED_PARAMS), {
-    className: className ? "qt-image ".concat(className) : 'qt-image'
-  })), /*#__PURE__*/React__default["default"].createElement("noscript", null, /*#__PURE__*/React__default["default"].createElement("img", {
-    src: "https://".concat(imageCDN, "/").concat(image.path(aspectRatio, _objectSpread$4(_objectSpread$4({}, imgParams), {}, {
-      w: 1200
-    }))),
-    alt: props.alt || ""
-  })));
-}
-
 function mapStateToProps$6(state) {
   return {
     imageCDN: state.qt.config["cdn-image"],
@@ -1998,7 +2008,9 @@ function mapStateToProps$6(state) {
 }
 
 function ResponsiveImageBase(props) {
-  if (process.env.NODE_ENV == 'development' && !props.alt && !props.reactTag) {
+  console.log("aa--ResponsiveImageBase-Props", props);
+
+  if (process.env.NODE_ENV == "development" && !props.alt && !props.reactTag) {
     global.console && global.console.warn("Image Found without an alt attribute: ".concat(props.slug));
   }
 
@@ -3118,10 +3130,9 @@ function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeRefl
 
 function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function TableHeader() {
-  var columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+function TableHeader(columns) {
   return /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", null, columns.map(function (col) {
-    return /*#__PURE__*/React__default["default"].createElement("th", null, col);
+    return /*#__PURE__*/React__default["default"].createElement("th", null, col.Header);
   })));
 }
 
@@ -3133,8 +3144,8 @@ function TableView(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("table", {
     className: className
   }, hasHeader && TableHeader(columns), /*#__PURE__*/React__default["default"].createElement("tbody", null, data.map(function (row) {
-    return /*#__PURE__*/React__default["default"].createElement("tr", null, row.map(function (item) {
-      return /*#__PURE__*/React__default["default"].createElement("td", null, item);
+    return /*#__PURE__*/React__default["default"].createElement("tr", null, columns.map(function (col) {
+      return /*#__PURE__*/React__default["default"].createElement("td", null, row[col.Header]);
     }));
   })));
 }
@@ -3148,7 +3159,6 @@ var Table = /*#__PURE__*/function (_React$Component) {
 
     _classCallCheck__default["default"](this, Table);
 
-    // props.data = {content: '', content-type: 'csv'}
     _this = _super.call(this, props);
     _this.state = {
       tableData: []
@@ -3166,8 +3176,7 @@ var Table = /*#__PURE__*/function (_React$Component) {
       'papaparse')); }).then(function (_ref2) {
         var parse = _ref2.parse;
         parse(content, {
-          header: false,
-          // with header true, the order of columns in table is not guaranteed, so we will handle the case
+          header: _this2.props.hasHeader,
           complete: function complete(results) {
             return _this2._isMounted && _this2.setState({
               tableData: results.data
@@ -3180,9 +3189,7 @@ var Table = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this._isMounted = true;
-      this.parseCSVToJson(this.props.data.content); // csv string
-
-      console.log("aa--qc-tableData", this.state.tableData);
+      this.parseCSVToJson(this.props.data.content);
     }
   }, {
     key: "componentWillUnmount",
@@ -3192,8 +3199,6 @@ var Table = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(nextProps) {
-      console.log("aa--qc-nextProps", nextProps);
-
       if (this.props.data.content !== nextProps.data.content) {
         this.parseCSVToJson(nextProps.data.content);
       }
@@ -3201,21 +3206,25 @@ var Table = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      console.log("aa--qc-tableLength", this.state.tableData.length);
+      var _this3 = this;
 
       if (!this.state.tableData.length > 0) {
         return null;
       }
 
-      var _ref3 = this.props.hasHeader ? [this.state.tableData[0], this.state.tableData.slice(1)] : [[], this.state.tableData],
-          _ref4 = _slicedToArray__default["default"](_ref3, 2),
-          columns = _ref4[0],
-          tableData = _ref4[1];
-
+      var columns = Object.keys(this.state.tableData[0]).map(function (header) {
+        return {
+          Header: header,
+          accessor: header,
+          headerStyle: !_this3.props.hasHeader ? {
+            display: "none"
+          } : {}
+        };
+      });
       var className = "story-element-table-".concat(this.props.id);
       return /*#__PURE__*/React__default["default"].createElement(this.props.tableComponent || TableView, {
         hasHeader: this.props.hasHeader,
-        data: tableData,
+        data: this.state.tableData,
         columns: columns,
         showPageSizeOptions: false,
         showPageJump: false,

package/dist/es/components/impl/gumlet-image.js

@@ -5,11 +5,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import React, { useEffect } from "react";
-import emptyWebGif from 'empty-web-gif';
+import omit from "@babel/runtime/helpers/objectWithoutProperties";
+import emptyWebGif from "empty-web-gif";
 import { FocusedImage } from "quintype-js";
+import React, { useEffect } from "react";
 import { hashString, USED_PARAMS } from "./image-utils";
-import omit from '@babel/runtime/helpers/objectWithoutProperties';
 var forceLoadingGumlet = false;
 
 function loadGumlet() {
@@ -17,7 +17,7 @@ function loadGumlet() {
     return;
   }
 
-  if (process.env.NODE_ENV == 'development') {
+  if (process.env.NODE_ENV == "development") {
     console.warn("Loading Gumlet Dynamically! This is really bad for page speed. Please see https://developers.quintype.com/malibu/tutorial/gumlet-integration");
   }
 
@@ -25,9 +25,9 @@ function loadGumlet() {
   window.GUMLET_CONFIG = window.GUMLET_CONFIG || {
     hosts: []
   };
-  var script = document.createElement('script');
-  script.type = 'text/javascript';
-  script.src = 'https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js';
+  var script = document.createElement("script");
+  script.type = "text/javascript";
+  script.src = "https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js";
   document.body.appendChild(script);
 }
 
@@ -47,8 +47,18 @@ export function GumletImage(props) {
   };
   var Tag = reactTag || "img";
   useEffect(loadGumlet);
+  console.log("aa--imageProps", imageProps);
+  console.log("aa--props", props);
+  console.log("aa--USED_PARAMS", USED_PARAMS);
+  console.log("aa--omit(props, USED_PARAMS)", omit(props, USED_PARAMS));
+  useEffect(function () {
+    console.log("aa--imageProps", imageProps);
+    console.log("aa--props", props);
+    console.log("aa--USED_PARAMS", USED_PARAMS);
+    console.log("aa--omit(props, USED_PARAMS)", omit(props, USED_PARAMS));
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, _extends({}, imageProps, omit(props, USED_PARAMS), {
-    className: className ? "qt-image ".concat(className) : 'qt-image'
+    className: className ? "qt-image ".concat(className) : "qt-image"
   })), /*#__PURE__*/React.createElement("noscript", null, /*#__PURE__*/React.createElement("img", {
     src: "https://".concat(imageCDN, "/").concat(image.path(aspectRatio, _objectSpread(_objectSpread({}, imgParams), {}, {
       w: 1200

package/dist/es/components/responsive-image.js

@@ -1,8 +1,8 @@
-import { connect } from "react-redux";
+import { arrayOf, number, object, string } from "prop-types";
 import React from "react";
-import { ThumborImage } from "./impl/thumbor-image";
-import { string, arrayOf, number, object } from 'prop-types';
+import { connect } from "react-redux";
 import { GumletImage } from "./impl/gumlet-image";
+import { ThumborImage } from "./impl/thumbor-image";
 
 function mapStateToProps(state) {
   return {
@@ -12,7 +12,9 @@ function mapStateToProps(state) {
 }
 
 function ResponsiveImageBase(props) {
-  if (process.env.NODE_ENV == 'development' && !props.alt && !props.reactTag) {
+  console.log("aa--ResponsiveImageBase-Props", props);
+
+  if (process.env.NODE_ENV == "development" && !props.alt && !props.reactTag) {
     global.console && global.console.warn("Image Found without an alt attribute: ".concat(props.slug));
   }
 

package/dist/es/components/story-elements/table.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -11,10 +10,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from "react";
 
-function TableHeader() {
-  var columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+function TableHeader(columns) {
   return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, columns.map(function (col) {
-    return /*#__PURE__*/React.createElement("th", null, col);
+    return /*#__PURE__*/React.createElement("th", null, col.Header);
   })));
 }
 
@@ -26,8 +24,8 @@ export function TableView(_ref) {
   return /*#__PURE__*/React.createElement("table", {
     className: className
   }, hasHeader && TableHeader(columns), /*#__PURE__*/React.createElement("tbody", null, data.map(function (row) {
-    return /*#__PURE__*/React.createElement("tr", null, row.map(function (item) {
-      return /*#__PURE__*/React.createElement("td", null, item);
+    return /*#__PURE__*/React.createElement("tr", null, columns.map(function (col) {
+      return /*#__PURE__*/React.createElement("td", null, row[col.Header]);
     }));
   })));
 }
@@ -41,7 +39,6 @@ export var Table = /*#__PURE__*/function (_React$Component) {
 
     _classCallCheck(this, Table);
 
-    // props.data = {content: '', content-type: 'csv'}
     _this = _super.call(this, props);
     _this.state = {
       tableData: []
@@ -59,8 +56,7 @@ export var Table = /*#__PURE__*/function (_React$Component) {
       "papaparse").then(function (_ref2) {
         var parse = _ref2.parse;
         parse(content, {
-          header: false,
-          // with header true, the order of columns in table is not guaranteed, so we will handle the case
+          header: _this2.props.hasHeader,
           complete: function complete(results) {
             return _this2._isMounted && _this2.setState({
               tableData: results.data
@@ -73,9 +69,7 @@ export var Table = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this._isMounted = true;
-      this.parseCSVToJson(this.props.data.content); // csv string
-
-      console.log("aa--qc-tableData", this.state.tableData);
+      this.parseCSVToJson(this.props.data.content);
     }
   }, {
     key: "componentWillUnmount",
@@ -85,8 +79,6 @@ export var Table = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(nextProps) {
-      console.log("aa--qc-nextProps", nextProps);
-
       if (this.props.data.content !== nextProps.data.content) {
         this.parseCSVToJson(nextProps.data.content);
       }
@@ -94,21 +86,25 @@ export var Table = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      console.log("aa--qc-tableLength", this.state.tableData.length);
+      var _this3 = this;
 
       if (!this.state.tableData.length > 0) {
         return null;
       }
 
-      var _ref3 = this.props.hasHeader ? [this.state.tableData[0], this.state.tableData.slice(1)] : [[], this.state.tableData],
-          _ref4 = _slicedToArray(_ref3, 2),
-          columns = _ref4[0],
-          tableData = _ref4[1];
-
+      var columns = Object.keys(this.state.tableData[0]).map(function (header) {
+        return {
+          Header: header,
+          accessor: header,
+          headerStyle: !_this3.props.hasHeader ? {
+            display: "none"
+          } : {}
+        };
+      });
       var className = "story-element-table-".concat(this.props.id);
       return /*#__PURE__*/React.createElement(this.props.tableComponent || TableView, {
         hasHeader: this.props.hasHeader,
-        data: tableData,
+        data: this.state.tableData,
         columns: columns,
         showPageSizeOptions: false,
         showPageJump: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/components",
-  "version": "3.5.1-csv-table.2",
+  "version": "3.5.1-image-below-fold.1",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",