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

package/lib/treetable/TRow.js

@@ -0,0 +1,255 @@
+"use strict";
+
+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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _uuid = require("uuid");
+
+require("../assets/styles/treetable.scss");
+
+var _icons = _interopRequireDefault(require("../icons"));
+
+var _SpinnerLoading = _interopRequireDefault(require("../spinner/SpinnerLoading"));
+
+var _table = require("../table");
+
+var _toolbar = _interopRequireWildcard(require("../toolbar"));
+
+var _helpers = require("./helpers");
+
+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; }
+
+var TRow = function TRow(props) {
+  var id = props.id,
+      label = props.label,
+      style = props.style,
+      content = props.content,
+      rowLevel = props.rowLevel,
+      onClickRow = props.onClickRow,
+      statusEnum = props.statusEnum,
+      customClass = props.customClass,
+      hasChildren = props.hasChildren,
+      getChildrens = props.getChildrens;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      children = _useState4[0],
+      setChildren = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      showToolbar = _useState6[0],
+      setShowToolbar = _useState6[1];
+
+  var _useContext = (0, _react.useContext)(_helpers.TreeTableContext),
+      valuePropName = _useContext.valuePropName,
+      labelPropName = _useContext.labelPropName,
+      propHasChildren = _useContext.propHasChildren,
+      onClickRowItem = _useContext.onClickRowItem,
+      toolbarElements = _useContext.toolbarElements,
+      onClickGetChildrens = _useContext.onClickGetChildrens;
+
+  var onClickOpenChildren = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var dataReturnAfterGetChildrens, dataWithNewProps;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setOpen(function (prevState) {
+                return !prevState;
+              });
+
+              if (open) {
+                _context.next = 7;
+                break;
+              }
+
+              _context.next = 4;
+              return getChildrens(id);
+
+            case 4:
+              dataReturnAfterGetChildrens = _context.sent;
+              dataWithNewProps = (0, _helpers.assignableObjectArrayWithNewProps)({
+                childrenData: dataReturnAfterGetChildrens,
+                rowLevel: rowLevel ? rowLevel + 1 : 1
+              });
+              setChildren(dataWithNewProps);
+
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onClickOpenChildren() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var buildToolbarElements = function buildToolbarElements(elements) {
+    var newElements = [];
+
+    if (elements) {
+      newElements = elements.map(function (element) {
+        var _onClick = element.props.onClick;
+        var newProps = (0, _extends2["default"])({}, element.props, {
+          key: (0, _uuid.v1)(),
+          onClick: function onClick(event) {
+            _onClick(props);
+
+            if (event.stopPropagation) event.stopPropagation();
+          }
+        });
+        return /*#__PURE__*/(0, _react.cloneElement)(element, (0, _extends2["default"])({}, newProps));
+      });
+    }
+
+    return newElements;
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_table.TRow, {
+    style: style,
+    key: id,
+    rowId: id,
+    dataId: id,
+    customClass: customClass
+  }, /*#__PURE__*/_react["default"].createElement(_table.Td, {
+    style: {
+      width: '50%'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "column-container",
+    onMouseEnter: function onMouseEnter() {
+      return toolbarElements ? setShowToolbar(true) : null;
+    },
+    onMouseLeave: function onMouseLeave() {
+      return toolbarElements ? setShowToolbar(false) : null;
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "column-more-childrens ".concat(rowLevel && 'line-path-decoration'),
+    style: {
+      marginLeft: "".concat(rowLevel, "rem")
+    }
+  }, hasChildren && /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: function onClick() {
+      return onClickOpenChildren();
+    },
+    className: "open-close-children"
+  }, open ? /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+    name: "up",
+    size: 10
+  }) : /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+    name: "arrow_right",
+    size: 10
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "value-button",
+    style: {
+      marginLeft: "".concat(!hasChildren ? 'calc(1rem + 2px)' : '0')
+    },
+    onKeyPress: function onKeyPress() {},
+    role: "button",
+    tabIndex: 0,
+    onClick: function onClick() {
+      return onClickRow ? onClickRow(props) : null;
+    }
+  }, content)), toolbarElements && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "container-toolbar-buttons"
+  }, showToolbar && /*#__PURE__*/_react["default"].createElement(_toolbar["default"], {
+    size: "small",
+    customClass: "row-toolbar"
+  }, /*#__PURE__*/_react["default"].createElement(_toolbar.ToolBarGroup, {
+    style: {
+      "float": 'left'
+    }
+  }, buildToolbarElements(toolbarElements)))))), /*#__PURE__*/_react["default"].createElement(_table.Td, {
+    style: {
+      width: '10%'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "container-toolbar-status"
+  }, /*#__PURE__*/_react["default"].createElement(_toolbar["default"], null, /*#__PURE__*/_react["default"].createElement(_toolbar.ToolBarGroup, {
+    style: {
+      "float": 'left'
+    }
+  }, (0, _helpers.labelStatusItem)(statusEnum))))), /*#__PURE__*/_react["default"].createElement(_table.Td, {
+    style: {
+      width: '40%'
+    }
+  }, label)), open && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !children ? /*#__PURE__*/_react["default"].createElement(_table.TRow, {
+    key: "tr-for-loading-childrens-".concat((0, _uuid.v1)())
+  }, /*#__PURE__*/_react["default"].createElement("td", {
+    colSpan: 3,
+    className: "td-loading-childrens"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "td-loading-childrens-container"
+  }, /*#__PURE__*/_react["default"].createElement(_SpinnerLoading["default"], {
+    align: "center",
+    text: "Carregando...",
+    delayTime: 0,
+    heightAuto: true
+  })))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(TRow, (0, _extends2["default"])({}, item, {
+      key: item.id,
+      id: item.id,
+      style: style,
+      customClass: customClass,
+      label: item[labelPropName],
+      content: item[valuePropName],
+      hasChildren: item[propHasChildren] !== null || undefined,
+      onClickRow: onClickRowItem,
+      getChildrens: onClickGetChildrens,
+      toolbarElements: toolbarElements
+    }));
+  }))));
+};
+
+TRow.propTypes = {
+  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
+  label: _propTypes["default"].string.isRequired,
+  content: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
+  style: _propTypes["default"].object,
+  customClass: _propTypes["default"].string,
+  statusEnum: _propTypes["default"].object,
+  rowLevel: _propTypes["default"].number,
+  hasChildren: _propTypes["default"].bool,
+  getChildrens: _propTypes["default"].func.isRequired,
+  onClickRow: _propTypes["default"].func
+};
+TRow.defaultProps = {
+  style: undefined,
+  rowLevel: undefined,
+  onClickRow: undefined,
+  statusEnum: undefined,
+  hasChildren: undefined,
+  customClass: undefined
+};
+var _default = TRow;
+exports["default"] = _default;

package/lib/treetable/helpers.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.assignableObjectArrayWithNewProps = assignableObjectArrayWithNewProps;
+exports.labelStatusItem = labelStatusItem;
+exports.TreeTableContext = exports.STATUS_ENUM = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _toolbar = require("../toolbar");
+
+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; }
+
+var STATUS_ENUM = {
+  ativo: 0,
+  inativo: 1,
+  excluido: 2
+};
+exports.STATUS_ENUM = STATUS_ENUM;
+var styleLabel = {
+  lineHeight: 'normal',
+  padding: '2px 4px',
+  display: 'flex',
+  alignItems: 'center',
+  width: 'fit-content',
+  height: 'fit-content'
+};
+var TreeTableContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.TreeTableContext = TreeTableContext;
+
+function assignableObjectArrayWithNewProps(_ref) {
+  var childrenData = _ref.childrenData,
+      _ref$rowLevel = _ref.rowLevel,
+      rowLevel = _ref$rowLevel === void 0 ? 0 : _ref$rowLevel;
+
+  if (childrenData) {
+    var newObject = childrenData.map(function (item) {
+      return Object.assign({}, item, {
+        rowLevel: rowLevel
+      });
+    });
+    return newObject;
+  }
+
+  return childrenData;
+}
+
+function labelStatusItem(status) {
+  var _labelStatus;
+
+  if (!status) return '';
+  var labelStatus = (_labelStatus = {}, (0, _defineProperty2["default"])(_labelStatus, STATUS_ENUM.ativo, ''), (0, _defineProperty2["default"])(_labelStatus, STATUS_ENUM.inativo, /*#__PURE__*/_react["default"].createElement(_toolbar.LabelBar, {
+    type: "warning",
+    size: "small",
+    style: styleLabel
+  }, status.name)), (0, _defineProperty2["default"])(_labelStatus, STATUS_ENUM.excluido, /*#__PURE__*/_react["default"].createElement(_toolbar.LabelBar, {
+    type: "danger",
+    size: "small",
+    style: styleLabel
+  }, status.name)), _labelStatus);
+  return labelStatus[status.id];
+}

package/lib/treetable/index.js

@@ -0,0 +1,123 @@
+"use strict";
+
+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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+require("../assets/styles/treetable.scss");
+
+var _table = _interopRequireWildcard(require("../table"));
+
+var _helpers = require("./helpers");
+
+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; }
+
+var TreeTable = function TreeTable(props) {
+  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%'
+    }
+  }, valuePropTitle || valuePropName), /*#__PURE__*/_react["default"].createElement(_table.Th, {
+    className: "another-columns",
+    style: {
+      width: '10%'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_table.Th, {
+    className: "another-columns",
+    style: {
+      width: '40%'
+    }
+  }, 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 = {
+  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 = {
+  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;