linear-react-components-ui 0.4.76-beta.33 → 0.4.76-beta.34

package/lib/treeview/Node.js

@@ -27,6 +27,8 @@ var _list = _interopRequireWildcard(require("../list"));
 
 var _toolbar = _interopRequireWildcard(require("../toolbar"));
 
+var _SpinnerLoading = _interopRequireDefault(require("../spinner/SpinnerLoading"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
@@ -133,7 +135,8 @@ var TreeNode = /*#__PURE__*/function (_Component) {
           children = _this$props3.children,
           isParent = _this$props3.isParent,
           onNodeClick = _this$props3.onNodeClick,
-          nodeMenuButtonSize = _this$props3.nodeMenuButtonSize;
+          nodeMenuButtonSize = _this$props3.nodeMenuButtonSize,
+          selectedNodeId = _this$props3.selectedNodeId;
       var node = this.state.node;
       var showNodeElements = this.state.showNodeElements;
       return /*#__PURE__*/_react["default"].createElement(_constants.TreeviewContext.Consumer, null, function (_ref) {
@@ -155,6 +158,10 @@ var TreeNode = /*#__PURE__*/function (_Component) {
           className: "treeviewitem"
         }, _this2.getSpan(), /*#__PURE__*/_react["default"].createElement("div", {
           className: "label",
+          style: {
+            textDecoration: !onNodeClick ? 'none' : null,
+            backgroundColor: selectedNodeId === node.id ? 'rgb(209, 209, 209)' : null
+          },
           ref: _this2.labelRef,
           role: "button",
           onKeyPress: null,
@@ -240,8 +247,11 @@ var _initialiseProps = function _initialiseProps() {
     enumerable: true,
     writable: true,
     value: function value() {
-      var alwaysShowArrow = _this3.props.alwaysShowArrow;
+      var _this3$props = _this3.props,
+          alwaysShowArrow = _this3$props.alwaysShowArrow,
+          idsInLoading = _this3$props.idsInLoading;
       var node = _this3.state.node;
+      var isLoading = idsInLoading.includes(node.id);
 
       var span = /*#__PURE__*/_react["default"].createElement("noscript", null);
 
@@ -250,11 +260,17 @@ var _initialiseProps = function _initialiseProps() {
           onKeyPress: null,
           tabIndex: 0,
           role: "button",
+          style: isLoading ? {
+            marginLeft: '-30px',
+            marginTop: '-5px'
+          } : null,
           className: "opencloseicon",
           onClick: function onClick() {
             return _this3.openCloseTree(node);
           }
-        }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_SpinnerLoading["default"], {
+          size: "35px"
+        }) : /*#__PURE__*/_react["default"].createElement(_icons["default"], {
           name: _this3.state.isVisible ? 'up' : 'down',
           size: 10
         }));
@@ -431,7 +447,9 @@ TreeNode.propTypes = {
   onNodeClick: _propTypes["default"].func,
   handlerOnNodeOpen: _propTypes["default"].func,
   nodeElementsValidations: _propTypes["default"].object,
-  startNodesOpened: _propTypes["default"].bool.isRequired
+  startNodesOpened: _propTypes["default"].bool.isRequired,
+  idsInLoading: _propTypes["default"].arrayOf(_propTypes["default"].number),
+  selectedNodeId: _propTypes["default"].number
 };
 TreeNode.defaultProps = {
   childrenIds: [],
@@ -444,7 +462,9 @@ TreeNode.defaultProps = {
   nodeMenuButtonSize: 'small',
   onNodeClick: undefined,
   handlerOnNodeOpen: undefined,
-  nodeElementsValidations: undefined
+  nodeElementsValidations: undefined,
+  idsInLoading: [],
+  selectedNodeId: undefined
 };
 TreeNode.contextType = _constants.TreeviewContext;
 var _default = TreeNode;

package/lib/treeview/index.js

@@ -469,7 +469,9 @@ var TreeView = /*#__PURE__*/function (_Component) {
             nodeToolbarElements = _this$props3.nodeToolbarElements,
             nodeMenuButtonSize = _this$props3.nodeMenuButtonSize,
             alwaysShowArrow = _this$props3.alwaysShowArrow,
-            startNodesOpened = _this$props3.startNodesOpened;
+            startNodesOpened = _this$props3.startNodesOpened,
+            idsInLoading = _this$props3.idsInLoading,
+            selectedNodeId = _this$props3.selectedNodeId;
         var childrenIds = [];
 
         if (node.itens && node.itens.length > 0) {
@@ -487,6 +489,7 @@ var TreeView = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react["default"].createElement(_Node["default"], {
           key: "node-".concat(node.id),
           node: node,
+          idsInLoading: idsInLoading,
           startNodesOpened: startNodesOpened,
           alwaysShowArrow: alwaysShowArrow,
           childrenIds: childrenIds,
@@ -497,6 +500,7 @@ var TreeView = /*#__PURE__*/function (_Component) {
           nodeElementsValidations: nodeElementsValidations,
           nodeMenuButtonSize: nodeMenuButtonSize,
           onNodeClick: onNodeClick,
+          selectedNodeId: selectedNodeId,
           handlerOnNodeOpen: _this.handleOnNodeOpen
         }, childrenIds.length > 0 && node.itens.map(function (nodeitem) {
           return _this.buildTree(nodeitem, node.id, ids);
@@ -606,7 +610,9 @@ TreeView.propTypes = {
   onNodeClick: _propTypes["default"].func,
   onNodeOpen: _propTypes["default"].func,
   nodeElementsValidations: _propTypes["default"].object,
-  enableDynamicData: _propTypes["default"].bool
+  enableDynamicData: _propTypes["default"].bool,
+  idsInLoading: _propTypes["default"].arrayOf(_propTypes["default"].number),
+  selectedNodeId: _propTypes["default"].number
 };
 TreeView.defaultProps = {
   customClass: '',
@@ -628,7 +634,9 @@ TreeView.defaultProps = {
   onNodeClick: undefined,
   onNodeOpen: undefined,
   nodeElementsValidations: undefined,
-  enableDynamicData: false
+  enableDynamicData: false,
+  idsInLoading: [],
+  selectedNodeId: undefined
 };
 var _default = TreeView;
 exports["default"] = _default;

package/lib/treeview/treeview.spec.js

@@ -257,5 +257,23 @@ describe('Treeview', function () {
 
       expect(container.querySelector('ul')).toHaveStyle('background-color: #000');
     });
+    it('should apply idsInLoading', function () {
+      var _render13 = (0, _react.render)(treeviewRenderMock({
+        idsInLoading: [1]
+      })),
+          container = _render13.container;
+
+      var li = container.querySelector('li').firstChild;
+      expect(li.firstChild).toHaveClass('spinnerloading');
+    });
+    it('should apply selectedNodeId', function () {
+      var _render14 = (0, _react.render)(treeviewRenderMock({
+        selectedNodeId: 1
+      })),
+          container = _render14.container;
+
+      var filhosLi = container.querySelector('li').children;
+      expect(filhosLi[1]).toHaveStyle('background-color: rgb(209, 209, 209)');
+    });
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "0.4.76-beta.33",
+  "version": "0.4.76-beta.34",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "scripts": {