@quintype/components 3.4.7-test-version.0 → 3.5.1-csv-table.1

package/dist/cjs/index.js

@@ -1055,6 +1055,21 @@ function _isNativeReflectConstruct$l() { if (typeof Reflect === "undefined" || !
  *                      onItemFocus={(item) => console.log(`Story In View: ${item.story.headline}`)}
  *                      doNotChangeUrl={true} />
  * ```
+ *
+ * #### Configuring the the url to change
+ * When a story is focussed, the url is changed to the original slug of the story by default. To configure this, pass a prop called changeUrlTo as a function which returns the desired url.
+ * This is typically used when you want to change the url but not to the original slug.
+ *
+ * Example:
+ * ```javascript
+ *   <InfiniteStoryBase {...props}
+ *                      render={StoryPageBase}
+ *                      loadItems={storyPageLoadItems}
+ *                      onItemFocus={(item) => console.log(`Story In View: ${item.story.headline}`)}
+                        changeUrlTo={(item) => item.currentPath || props.currentPath}
+ *                      doNotChangeUrl={true} />
+ * ```
+ *
  * @component
  * @category Story Page
  */
@@ -1095,7 +1110,8 @@ var InfiniteStoryBase = /*#__PURE__*/function (_React$Component) {
         var storyPath = item.story.url ? new URL(item.story.url).pathname : "/" + item.story.slug;
         var metaTitle = get__default["default"](item, ['story', 'seo', 'meta-title'], item.story.headline);
         var title = get__default["default"](item, ["customSeo", "title"], metaTitle);
-        global.app.maybeSetUrl(storyPath, title);
+        var path = this.props.changeUrlTo ? this.props.changeUrlTo(item) : storyPath;
+        global.app.maybeSetUrl(path, title);
       }
 
       this.props.onItemFocus && this.props.onItemFocus(item, index);
@@ -3102,9 +3118,10 @@ 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(columns) {
+function TableHeader() {
+  var columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   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.Header);
+    return /*#__PURE__*/React__default["default"].createElement("th", null, col);
   })));
 }
 
@@ -3116,8 +3133,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, columns.map(function (col) {
-      return /*#__PURE__*/React__default["default"].createElement("td", null, row[col.Header]);
+    return /*#__PURE__*/React__default["default"].createElement("tr", null, row.map(function (item) {
+      return /*#__PURE__*/React__default["default"].createElement("td", null, item);
     }));
   })));
 }
@@ -3148,7 +3165,8 @@ var Table = /*#__PURE__*/function (_React$Component) {
       'papaparse')); }).then(function (_ref2) {
         var parse = _ref2.parse;
         parse(content, {
-          header: _this2.props.hasHeader,
+          header: false,
+          // with header true, the order of columns in table is not guaranteed, so we will handle the case
           complete: function complete(results) {
             return _this2._isMounted && _this2.setState({
               tableData: results.data
@@ -3178,25 +3196,19 @@ var Table = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
-
       if (!this.state.tableData.length > 0) {
         return null;
       }
 
-      var columns = Object.keys(this.state.tableData[0]).map(function (header) {
-        return {
-          Header: header,
-          accessor: header,
-          headerStyle: !_this3.props.hasHeader ? {
-            display: "none"
-          } : {}
-        };
-      });
+      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 className = "story-element-table-".concat(this.props.id);
       return /*#__PURE__*/React__default["default"].createElement(this.props.tableComponent || TableView, {
         hasHeader: this.props.hasHeader,
-        data: this.state.tableData,
+        data: tableData,
         columns: columns,
         showPageSizeOptions: false,
         showPageJump: false,

package/dist/es/components/infinite-story-base.js

@@ -56,6 +56,21 @@ import { removeDuplicateStories } from '../utils';
  *                      onItemFocus={(item) => console.log(`Story In View: ${item.story.headline}`)}
  *                      doNotChangeUrl={true} />
  * ```
+ *
+ * #### Configuring the the url to change
+ * When a story is focussed, the url is changed to the original slug of the story by default. To configure this, pass a prop called changeUrlTo as a function which returns the desired url.
+ * This is typically used when you want to change the url but not to the original slug.
+ *
+ * Example:
+ * ```javascript
+ *   <InfiniteStoryBase {...props}
+ *                      render={StoryPageBase}
+ *                      loadItems={storyPageLoadItems}
+ *                      onItemFocus={(item) => console.log(`Story In View: ${item.story.headline}`)}
+                        changeUrlTo={(item) => item.currentPath || props.currentPath}
+ *                      doNotChangeUrl={true} />
+ * ```
+ *
  * @component
  * @category Story Page
  */
@@ -96,7 +111,8 @@ export var InfiniteStoryBase = /*#__PURE__*/function (_React$Component) {
         var storyPath = item.story.url ? new URL(item.story.url).pathname : "/" + item.story.slug;
         var metaTitle = get(item, ['story', 'seo', 'meta-title'], item.story.headline);
         var title = get(item, ["customSeo", "title"], metaTitle);
-        global.app.maybeSetUrl(storyPath, title);
+        var path = this.props.changeUrlTo ? this.props.changeUrlTo(item) : storyPath;
+        global.app.maybeSetUrl(path, title);
       }
 
       this.props.onItemFocus && this.props.onItemFocus(item, index);

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

@@ -1,3 +1,4 @@
+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";
@@ -10,9 +11,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from "react";
 
-function TableHeader(columns) {
+function TableHeader() {
+  var columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, columns.map(function (col) {
-    return /*#__PURE__*/React.createElement("th", null, col.Header);
+    return /*#__PURE__*/React.createElement("th", null, col);
   })));
 }
 
@@ -24,8 +26,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, columns.map(function (col) {
-      return /*#__PURE__*/React.createElement("td", null, row[col.Header]);
+    return /*#__PURE__*/React.createElement("tr", null, row.map(function (item) {
+      return /*#__PURE__*/React.createElement("td", null, item);
     }));
   })));
 }
@@ -56,7 +58,8 @@ export var Table = /*#__PURE__*/function (_React$Component) {
       "papaparse").then(function (_ref2) {
         var parse = _ref2.parse;
         parse(content, {
-          header: _this2.props.hasHeader,
+          header: false,
+          // with header true, the order of columns in table is not guaranteed, so we will handle the case
           complete: function complete(results) {
             return _this2._isMounted && _this2.setState({
               tableData: results.data
@@ -86,25 +89,19 @@ export var Table = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
-
       if (!this.state.tableData.length > 0) {
         return null;
       }
 
-      var columns = Object.keys(this.state.tableData[0]).map(function (header) {
-        return {
-          Header: header,
-          accessor: header,
-          headerStyle: !_this3.props.hasHeader ? {
-            display: "none"
-          } : {}
-        };
-      });
+      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 className = "story-element-table-".concat(this.props.id);
       return /*#__PURE__*/React.createElement(this.props.tableComponent || TableView, {
         hasHeader: this.props.hasHeader,
-        data: this.state.tableData,
+        data: tableData,
         columns: columns,
         showPageSizeOptions: false,
         showPageJump: false,

package/package.json

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