@quintype/components 3.5.0 → 3.5.1-csv-table.2

package/dist/cjs/index.js

@@ -3118,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);
   })));
 }
 
@@ -3132,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);
     }));
   })));
 }
@@ -3147,6 +3148,7 @@ 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: []
@@ -3164,7 +3166,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
@@ -3177,7 +3180,9 @@ var Table = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this._isMounted = true;
-      this.parseCSVToJson(this.props.data.content);
+      this.parseCSVToJson(this.props.data.content); // csv string
+
+      console.log("aa--qc-tableData", this.state.tableData);
     }
   }, {
     key: "componentWillUnmount",
@@ -3187,6 +3192,8 @@ 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);
       }
@@ -3194,25 +3201,21 @@ var Table = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      console.log("aa--qc-tableLength", this.state.tableData.length);
 
       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/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);
     }));
   })));
 }
@@ -39,6 +41,7 @@ export var Table = /*#__PURE__*/function (_React$Component) {
 
     _classCallCheck(this, Table);
 
+    // props.data = {content: '', content-type: 'csv'}
     _this = _super.call(this, props);
     _this.state = {
       tableData: []
@@ -56,7 +59,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
@@ -69,7 +73,9 @@ export var Table = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this._isMounted = true;
-      this.parseCSVToJson(this.props.data.content);
+      this.parseCSVToJson(this.props.data.content); // csv string
+
+      console.log("aa--qc-tableData", this.state.tableData);
     }
   }, {
     key: "componentWillUnmount",
@@ -79,6 +85,8 @@ 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);
       }
@@ -86,25 +94,21 @@ export var Table = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      console.log("aa--qc-tableLength", this.state.tableData.length);
 
       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.5.0",
+  "version": "3.5.1-csv-table.2",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",