linear-react-components-ui 0.4.77-beta.22 → 0.4.77-beta.23

package/lib/treetable/index.js

@@ -1,297 +1,123 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _buttons = require("../buttons");
-
-var _table = _interopRequireWildcard(require("../table"));
+var _react = _interopRequireDefault(require("react"));
 
 require("../assets/styles/treetable.scss");
 
-var _helpers = _interopRequireDefault(require("./helpers"));
+var _table = _interopRequireWildcard(require("../table"));
+
+var _helpers = require("./helpers");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _TRow = _interopRequireDefault(require("./TRow"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 var TreeTable = function TreeTable(props) {
-  var _useState = (0, _react.useState)([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      data = _useState2[0],
-      setData = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      treeExpanded = _useState4[0],
-      setTreeExpanded = _useState4[1];
-
-  (0, _react.useEffect)(function () {
-    var objectArrayReturned = (0, _helpers["default"])(props.dataTable);
-    setData(objectArrayReturned);
-  }, [props.dataTable]);
-  var expandOrCollapseTreeTable = (0, _react.useCallback)(function (dataTree, selectedRowID, expandAll, collapseAll) {
-    var expandOrCollapse = function expandOrCollapse(children) {
-      var expand = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : expandAll;
-      var collapse = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : collapseAll;
-      return children.map(function (node) {
-        var setExpanded = node.rowID === selectedRowID ? !node.expanded : node.expanded;
-        var setVisible = node.parentRowID === selectedRowID ? !node.visible : node.visible;
-
-        if (expand) {
-          setExpanded = true;
-          setVisible = true;
-        }
-
-        if (collapse) {
-          setExpanded = false;
-          setVisible = false;
-        } // if (node.parentRowID === selectedRowID && !setVisible) collapse = true;
-
-
-        return Object.assign({}, node, {
-          visible: setVisible,
-          expanded: setExpanded,
-          children: expandOrCollapse(node.children, expand, collapse)
-        });
-      });
-    };
-
-    return expandOrCollapse(dataTree);
-  }, []);
-
-  var rowExpandOrCollapse = function rowExpandOrCollapse(rowID) {
-    var treeExpandOrCollapse = expandOrCollapseTreeTable(data, rowID, false, false);
-    setData(treeExpandOrCollapse);
-  };
-
-  var expandOrCollapseAll = (0, _react.useCallback)(function () {
-    var isExpanded = !treeExpanded;
-
-    var newTreeNodeExpandOrCollapse = function newTreeNodeExpandOrCollapse(children) {
-      return children.map(function (node) {
-        var isVisible = node.rowLevel === 1 ? true : isExpanded;
-        return Object.assign({}, node, {
-          visible: isVisible,
-          expanded: isExpanded,
-          children: newTreeNodeExpandOrCollapse(node.children)
-        });
-      });
-    };
-
-    setTreeExpanded(isExpanded);
-    setData(newTreeNodeExpandOrCollapse(data));
-  }, [data, treeExpanded]);
-
-  var generateDataColumn = function generateDataColumn(row, key, dataField) {
-    if (row.children && row.children.length > 0) {
-      var iconCell = row.expanded ? /*#__PURE__*/_react["default"].createElement("button", {
-        "aria-label": "collapse-row",
-        type: "button",
-        className: "button-collapse",
-        onClick: function onClick() {
-          return rowExpandOrCollapse(row.rowID);
-        }
-      }, "\u25BC") : /*#__PURE__*/_react["default"].createElement("button", {
-        "aria-label": "expand-row",
-        type: "button",
-        className: "button-expand",
-        onClick: function onClick() {
-          return rowExpandOrCollapse(row.rowID);
-        }
-      }, "\u25BA");
-
-      if (props.tableColumns[0].isFixedWidth) {
-        return /*#__PURE__*/_react["default"].createElement(_table.Td, {
-          key: key,
-          style: {
-            width: "".concat(props.tableColumns[0].percentageWidth, "%")
-          }
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "button-expand-tree",
-          style: {
-            marginLeft: "".concat(row.rowLevel, "rem")
-          }
-        }, iconCell, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "text-first-column"
-        }, row.data[dataField])));
-      }
-
-      return /*#__PURE__*/_react["default"].createElement(_table.Td, {
-        key: key
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "button-expand-tree",
-        style: {
-          marginLeft: "".concat(row.rowLevel, "rem")
-        }
-      }, iconCell, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "text-first-column"
-      }, row.data[dataField])));
+  var style = props.style,
+      initialData = props.initialData,
+      customClass = props.customClass,
+      skeletonize = props.skeletonize,
+      skeletonInRows = props.skeletonInRows,
+      skeletonInHeader = props.skeletonInHeader,
+      valuePropName = props.valuePropName,
+      labelPropName = props.labelPropName,
+      valuePropTitle = props.valuePropTitle,
+      labelPropTitle = props.labelPropTitle,
+      propHasChildren = props.propHasChildren,
+      onClickRowItem = props.onClickRowItem,
+      showHeaderTable = props.showHeaderTable,
+      onClickGetChildrens = props.onClickGetChildrens,
+      toolbarElements = props.toolbarElements;
+  var contextValue = (0, _extends2["default"])({}, props);
+  return /*#__PURE__*/_react["default"].createElement(_helpers.TreeTableContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "treetable-container"
+  }, /*#__PURE__*/_react["default"].createElement(_table["default"], {
+    hovered: true,
+    bordered: true,
+    headerColored: true,
+    condensed: true,
+    skeletonize: skeletonize,
+    skeletonInRows: skeletonInRows,
+    skeletonInHeader: skeletonInHeader
+  }, showHeaderTable && /*#__PURE__*/_react["default"].createElement(_table.THeader, null, /*#__PURE__*/_react["default"].createElement(_table.TRow, {
+    rowId: "header-table-id",
+    key: "header-table-key"
+  }, /*#__PURE__*/_react["default"].createElement(_table.Th, {
+    className: "first-column",
+    style: {
+      width: '50%'
     }
-
-    if (props.tableColumns[0].isFixedWidth) {
-      return /*#__PURE__*/_react["default"].createElement(_table.Td, {
-        key: key,
-        style: {
-          width: "".concat(props.tableColumns[0].percentageWidth, "%")
-        }
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "button-expand-tree",
-        style: {
-          marginLeft: "".concat(row.rowLevel, "rem")
-        }
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "text-first-column"
-      }, row.data[dataField])));
+  }, valuePropTitle || valuePropName), /*#__PURE__*/_react["default"].createElement(_table.Th, {
+    className: "another-columns",
+    style: {
+      width: '10%'
     }
-
-    return /*#__PURE__*/_react["default"].createElement(_table.Td, {
-      key: key
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: "button-expand-tree",
-      style: {
-        marginLeft: "".concat(row.rowLevel, "rem")
-      }
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: "text-first-column"
-    }, row.data[dataField])));
-  };
-
-  var generateDataRow = function generateDataRow(row) {
-    var rowBody = [];
-    var mapPerCell = props.tableColumns.map(function (column, index) {
-      var outputCell = row.data[column.columnContent];
-      var keyCell = "".concat(row.parentRowID, "-").concat(row.rowID, "-").concat(index);
-
-      if (index === 0) {
-        return generateDataColumn(row, keyCell, column.columnContent);
-      }
-
-      if (column.isFixedWidth) {
-        return /*#__PURE__*/_react["default"].createElement(_table.Td, {
-          key: keyCell,
-          style: {
-            width: "".concat(column.percentageWidth, "%")
-          }
-        }, outputCell);
-      }
-
-      return /*#__PURE__*/_react["default"].createElement(_table.Td, {
-        key: keyCell
-      }, outputCell);
-    });
-    rowBody.push(mapPerCell);
-    return rowBody;
-  };
-
-  var generateTableHeader = function generateTableHeader() {
-    var tableHeader = [];
-
-    if (props.tableColumns) {
-      tableHeader.push(props.tableColumns.map(function (column) {
-        if (column.columnTitle) {
-          return /*#__PURE__*/_react["default"].createElement(_table.Th, {
-            key: column.columnTitle,
-            style: {
-              width: "".concat(column.percentageWidth, "%")
-            }
-          }, column.columnTitle);
-        }
-
-        return /*#__PURE__*/_react["default"].createElement(_table.Th, {
-          key: column.columnContent,
-          style: {
-            width: "".concat(column.percentageWidth, "%")
-          }
-        }, column.columnContent);
-      }));
+  }), /*#__PURE__*/_react["default"].createElement(_table.Th, {
+    className: "another-columns",
+    style: {
+      width: '40%'
     }
-
-    return tableHeader;
-  };
-
-  var generateTableBody = function generateTableBody(dataBody) {
-    var tableBody = [];
-    dataBody.forEach(function (row) {
-      var cellRow = generateDataRow(row);
-      var keyRow = "".concat(row.parentRowID, "-").concat(row.rowID);
-      var isVisibleRow = row.visible ? 'show-tr' : 'hidden-tr';
-
-      var tr = /*#__PURE__*/_react["default"].createElement("tr", {
-        className: isVisibleRow,
-        key: keyRow
-      }, cellRow);
-
-      tableBody.push(tr);
-
-      if (row.children) {
-        tableBody.push.apply(tableBody, _toConsumableArray(generateTableBody(row.children)));
-      }
-    });
-    return tableBody;
-  };
-
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_buttons.PrimaryButton, {
-    label: treeExpanded ? 'Recolher todos' : 'Expandir todos',
-    onClick: expandOrCollapseAll,
-    customClass: "button-expand-or-collapse-all",
-    visible: props.showButtonExpandedOrCollapseAll
-  }), /*#__PURE__*/_react["default"].createElement(_table["default"], {
-    className: "table-content"
-  }, /*#__PURE__*/_react["default"].createElement(_table.THeader, null, /*#__PURE__*/_react["default"].createElement(_table.TRow, null, generateTableHeader())), /*#__PURE__*/_react["default"].createElement(_table.TBody, null, generateTableBody(data))));
+  }, labelPropTitle || labelPropName))), /*#__PURE__*/_react["default"].createElement(_table.TBody, null, initialData.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(_TRow["default"], (0, _extends2["default"])({}, item, {
+      key: item.id,
+      id: item.id,
+      customClass: customClass,
+      style: style,
+      label: item[labelPropName],
+      content: item[valuePropName],
+      hasChildren: item[propHasChildren] !== null || undefined,
+      onClickRow: onClickRowItem,
+      getChildrens: onClickGetChildrens,
+      toolbarElements: toolbarElements
+    }));
+  })))));
 };
 
 TreeTable.propTypes = {
-  dataTable: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    data: _propTypes["default"].object,
-    children: _propTypes["default"].arrayOf(_propTypes["default"].object)
-  })).isRequired,
-  tableColumns: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    // styles: PropTypes.object,
-    columnTitle: _propTypes["default"].string.isRequired,
-    columnContent: _propTypes["default"].string.isRequired,
-    isFixedWidth: _propTypes["default"].bool,
-    percentageWidth: _propTypes["default"].number
-  })),
-  showButtonExpandedOrCollapseAll: _propTypes["default"].bool
+  style: _propTypes["default"].object,
+  initialData: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired,
+  customClass: _propTypes["default"].string,
+  skeletonize: _propTypes["default"].bool,
+  skeletonInRows: _propTypes["default"].number,
+  skeletonInHeader: _propTypes["default"].bool,
+  valuePropName: _propTypes["default"].string.isRequired,
+  labelPropName: _propTypes["default"].string.isRequired,
+  valuePropTitle: _propTypes["default"].string,
+  labelPropTitle: _propTypes["default"].string,
+  propHasChildren: _propTypes["default"].string.isRequired,
+  showHeaderTable: _propTypes["default"].bool,
+  onClickRowItem: _propTypes["default"].func,
+  onClickGetChildrens: _propTypes["default"].func.isRequired,
+  toolbarElements: _propTypes["default"].arrayOf(_propTypes["default"].element)
 };
 TreeTable.defaultProps = {
-  tableColumns: [{
-    // styles: {},
-    isFixedWidth: false,
-    percentageWidth: 0
-  }],
-  showButtonExpandedOrCollapseAll: false
+  style: undefined,
+  skeletonize: false,
+  skeletonInRows: undefined,
+  skeletonInHeader: false,
+  customClass: undefined,
+  onClickRowItem: undefined,
+  valuePropTitle: undefined,
+  labelPropTitle: undefined,
+  showHeaderTable: true,
+  toolbarElements: undefined
 };
 var _default = TreeTable;
 exports["default"] = _default;