linear-react-components-ui 0.4.75-beta.9 → 0.4.76-beta.1

package/lib/treeview/Node.js

@@ -83,11 +83,13 @@ var TreeNode = /*#__PURE__*/function (_Component) {
       enumerable: true,
       writable: true,
       value: function value() {
-        var node = _this.props.node;
+        var _this$props = _this.props,
+            node = _this$props.node,
+            alwaysShowArrow = _this$props.alwaysShowArrow;
 
         var span = /*#__PURE__*/_react["default"].createElement("noscript", null);
 
-        if (node.itens && node.itens.length > 0) {
+        if (node.itens && node.itens.length > 0 || alwaysShowArrow) {
           span = /*#__PURE__*/_react["default"].createElement("span", {
             onKeyPress: null,
             tabIndex: 0,
@@ -113,16 +115,16 @@ var TreeNode = /*#__PURE__*/function (_Component) {
         var _this$state = _this.state,
             isVisible = _this$state.isVisible,
             wasOpened = _this$state.wasOpened;
-        var onNodeOpen = _this.props.onNodeOpen;
+        var handlerOnNodeOpen = _this.props.handlerOnNodeOpen;
         var nextState = {
           isVisible: !isVisible
         };
 
-        if (!wasOpened && onNodeOpen) {
+        if (!wasOpened && handlerOnNodeOpen) {
           nextState = _extends({}, nextState, {
             wasOpened: true
           });
-          onNodeOpen(node);
+          handlerOnNodeOpen(node);
         }
 
         _this.setState(nextState);
@@ -150,9 +152,9 @@ var TreeNode = /*#__PURE__*/function (_Component) {
       enumerable: true,
       writable: true,
       value: function value(elements) {
-        var _this$props = _this.props,
-            node = _this$props.node,
-            nodeElementsValidations = _this$props.nodeElementsValidations;
+        var _this$props2 = _this.props,
+            node = _this$props2.node,
+            nodeElementsValidations = _this$props2.nodeElementsValidations;
         var updatedElements = [];
 
         if (elements) {
@@ -231,9 +233,9 @@ var TreeNode = /*#__PURE__*/function (_Component) {
       enumerable: true,
       writable: true,
       value: function value(validationKey) {
-        var _this$props2 = _this.props,
-            nodeElementsValidations = _this$props2.nodeElementsValidations,
-            node = _this$props2.node;
+        var _this$props3 = _this.props,
+            nodeElementsValidations = _this$props3.nodeElementsValidations,
+            node = _this$props3.node;
         var validations = nodeElementsValidations[validationKey];
         var options = {
           disabled: {
@@ -272,10 +274,10 @@ var TreeNode = /*#__PURE__*/function (_Component) {
   _createClass(TreeNode, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props3 = this.props,
-          isParent = _this$props3.isParent,
-          nodeToolbarElements = _this$props3.nodeToolbarElements,
-          nodeRightElements = _this$props3.nodeRightElements;
+      var _this$props4 = this.props,
+          isParent = _this$props4.isParent,
+          nodeToolbarElements = _this$props4.nodeToolbarElements,
+          nodeRightElements = _this$props4.nodeRightElements;
 
       if (isParent || nodeRightElements || nodeToolbarElements) {
         this.labelRef.current.addEventListener('mouseenter', this.handleShowNodeElements);
@@ -285,10 +287,10 @@ var TreeNode = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props4 = this.props,
-          isParent = _this$props4.isParent,
-          nodeToolbarElements = _this$props4.nodeToolbarElements,
-          nodeRightElements = _this$props4.nodeRightElements;
+      var _this$props5 = this.props,
+          isParent = _this$props5.isParent,
+          nodeToolbarElements = _this$props5.nodeToolbarElements,
+          nodeRightElements = _this$props5.nodeRightElements;
 
       if (isParent || nodeRightElements || nodeToolbarElements) {
         this.labelRef.current.removeEventListener('mouseenter', this.handleShowNodeElements);
@@ -300,12 +302,12 @@ var TreeNode = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props5 = this.props,
-          node = _this$props5.node,
-          children = _this$props5.children,
-          isParent = _this$props5.isParent,
-          onNodeClick = _this$props5.onNodeClick,
-          nodeMenuButtonSize = _this$props5.nodeMenuButtonSize;
+      var _this$props6 = this.props,
+          node = _this$props6.node,
+          children = _this$props6.children,
+          isParent = _this$props6.isParent,
+          onNodeClick = _this$props6.onNodeClick,
+          nodeMenuButtonSize = _this$props6.nodeMenuButtonSize;
       var showNodeElements = this.state.showNodeElements;
       return /*#__PURE__*/_react["default"].createElement(_constants.TreeviewContext.Consumer, null, function (_ref) {
         var valuePropName = _ref.valuePropName,
@@ -394,11 +396,12 @@ TreeNode.propTypes = {
   parentId: _propTypes["default"].number,
   disabled: _propTypes["default"].bool,
   isParent: _propTypes["default"].bool,
+  alwaysShowArrow: _propTypes["default"].bool,
   nodeRightElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].element, _propTypes["default"].object]),
   nodeToolbarElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].element, _propTypes["default"].object]),
   nodeMenuButtonSize: _propTypes["default"].oneOf(['mini', 'small', 'medium', 'large', 'default']),
   onNodeClick: _propTypes["default"].func,
-  onNodeOpen: _propTypes["default"].func,
+  handlerOnNodeOpen: _propTypes["default"].func,
   nodeElementsValidations: _propTypes["default"].object
 };
 TreeNode.defaultProps = {
@@ -406,11 +409,12 @@ TreeNode.defaultProps = {
   parentId: undefined,
   disabled: false,
   isParent: false,
+  alwaysShowArrow: false,
   nodeRightElements: undefined,
   nodeToolbarElements: undefined,
   nodeMenuButtonSize: 'small',
   onNodeClick: undefined,
-  onNodeOpen: undefined,
+  handlerOnNodeOpen: undefined,
   nodeElementsValidations: undefined
 };
 TreeNode.contextType = _constants.TreeviewContext;

package/lib/treeview/index.js

@@ -78,6 +78,15 @@ var TreeView = /*#__PURE__*/function (_Component) {
 
   var _super = _createSuper(TreeView);
 
+  // static getDerivedStateFromProps(props, state) {
+  //   const { data, selectedIds } = props;
+  //   const { propSelectedIds } = state;
+  //   const isSameSelectedIds = _.isEqual(propSelectedIds.sort(), selectedIds.sort());
+  //   if (data !== state.data || !isSameSelectedIds) {
+  //     return { data, selectedIds, propSelectedIds: selectedIds };
+  //   }
+  //   return null;
+  // }
   function TreeView(props) {
     var _this;
 
@@ -348,6 +357,25 @@ var TreeView = /*#__PURE__*/function (_Component) {
         });
       }
     });
+    Object.defineProperty(_assertThisInitialized(_this), "handleOnNodeOpen", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function value(node) {
+        var id = node.id;
+        var onNodeOpen = _this.props.onNodeOpen;
+        var alreadyOpenedIds = _this.state.alreadyOpenedIds;
+
+        if (!alreadyOpenedIds.includes(id) && onNodeOpen) {
+          alreadyOpenedIds = [].concat(_toConsumableArray(alreadyOpenedIds), [id]);
+          onNodeOpen(node);
+        }
+
+        _this.setState({
+          alreadyOpenedIds: alreadyOpenedIds
+        });
+      }
+    });
     Object.defineProperty(_assertThisInitialized(_this), "handleCheck", {
       configurable: true,
       enumerable: true,
@@ -443,7 +471,7 @@ var TreeView = /*#__PURE__*/function (_Component) {
             nodeElementsValidations = _this$props3.nodeElementsValidations,
             nodeToolbarElements = _this$props3.nodeToolbarElements,
             nodeMenuButtonSize = _this$props3.nodeMenuButtonSize,
-            onNodeOpen = _this$props3.onNodeOpen;
+            alwaysShowArrow = _this$props3.alwaysShowArrow;
         var childrenIds = [];
 
         if (node.itens && node.itens.length > 0) {
@@ -461,6 +489,7 @@ var TreeView = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react["default"].createElement(_Node["default"], {
           key: "node-".concat(node.id),
           node: node,
+          alwaysShowArrow: alwaysShowArrow,
           childrenIds: childrenIds,
           isParent: node.itens && node.itens.length > 0,
           parentId: parentId,
@@ -469,7 +498,7 @@ var TreeView = /*#__PURE__*/function (_Component) {
           nodeElementsValidations: nodeElementsValidations,
           nodeMenuButtonSize: nodeMenuButtonSize,
           onNodeClick: onNodeClick,
-          onNodeOpen: onNodeOpen
+          handlerOnNodeOpen: _this.handleOnNodeOpen
         }, childrenIds.length > 0 && node.itens.map(function (nodeitem) {
           return _this.buildTree(nodeitem, node.id, ids);
         }));
@@ -481,7 +510,8 @@ var TreeView = /*#__PURE__*/function (_Component) {
       propSelectedIds: _this.props.selectedIds,
       selectedIds: _this.props.selectedIds,
       isHandlingSelectedIds: false,
-      requiredParentsIds: []
+      requiredParentsIds: [],
+      alreadyOpenedIds: []
     };
     return _this;
   }
@@ -521,25 +551,6 @@ var TreeView = /*#__PURE__*/function (_Component) {
         className: "treeviewcontainer ".concat(bordered && '-bordered')
       }, this.buildTree(data))));
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      var data = props.data,
-          selectedIds = props.selectedIds;
-      var propSelectedIds = state.propSelectedIds;
-
-      var isSameSelectedIds = _lodash["default"].isEqual(propSelectedIds.sort(), selectedIds.sort());
-
-      if (data !== state.data || !isSameSelectedIds) {
-        return {
-          data: data,
-          selectedIds: selectedIds,
-          propSelectedIds: selectedIds
-        };
-      }
-
-      return null;
-    }
   }]);
 
   return TreeView;
@@ -553,6 +564,7 @@ TreeView.propTypes = {
   labelPropName: _propTypes["default"].string.isRequired,
   parentPropName: _propTypes["default"].string.isRequired,
   startNodesOpened: _propTypes["default"].bool,
+  alwaysShowArrow: _propTypes["default"].bool,
   selectedIds: _propTypes["default"].arrayOf(_propTypes["default"].number),
   requiredIds: _propTypes["default"].arrayOf(_propTypes["default"].number),
   showCheckBox: _propTypes["default"].bool,
@@ -573,6 +585,7 @@ TreeView.defaultProps = {
   customClass: '',
   bordered: false,
   startNodesOpened: false,
+  alwaysShowArrow: false,
   selectedIds: [],
   requiredIds: [],
   showCheckBox: false,

package/lib/treeview/treeview.spec.js

@@ -0,0 +1,261 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+require("@testing-library/jest-dom");
+
+require("babel-polyfill");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var dataMock = {
+  id: 1,
+  titulo: 'SG Linear',
+  codigo: 'SG_Linear',
+  permissoes: [{
+    codigo: 'ACESSO'
+  }, {
+    codigo: 'GRAVAR'
+  }],
+  itens: [{
+    id: 2,
+    titulo: 'Segurança',
+    codigo: 'seguranca',
+    permissoes: [{
+      codigo: 'ACESSO'
+    }, {
+      codigo: 'GRAVAR'
+    }],
+    itens: [{
+      id: 4,
+      titulo: 'Perfis',
+      codigo: 'perfis',
+      itens: [{
+        titulo: 'Editar',
+        codigo: 'Editar',
+        itens: [{
+          titulo: 'Editar permissão ERP',
+          codigo: 'Editar permissão ERP'
+        }]
+      }]
+    }]
+  }, {
+    id: 3,
+    titulo: 'Cadastros',
+    codigo: 'cadastros',
+    permissoes: [{
+      codigo: 'ACESSO'
+    }, {
+      codigo: 'GRAVAR'
+    }],
+    itens: [{
+      id: 5,
+      titulo: 'Empresas',
+      codigo: 'empresas'
+    }]
+  }]
+};
+
+var treeviewRenderMock = function treeviewRenderMock(props) {
+  return /*#__PURE__*/_react2["default"].createElement(_["default"], _extends({
+    data: dataMock,
+    valuePropName: "id",
+    labelPropName: "titulo",
+    parentPropName: "0"
+  }, props));
+};
+
+describe('Treeview', function () {
+  describe('Default', function () {
+    it('should render', function () {
+      var _render = (0, _react.render)(treeviewRenderMock()),
+          container = _render.container;
+
+      expect(container.firstChild).toBeTruthy();
+    });
+    it('should have start node visible', function () {
+      var _render2 = (0, _react.render)(treeviewRenderMock()),
+          queryByText = _render2.queryByText;
+
+      expect(queryByText(dataMock.titulo)).toBeTruthy();
+    });
+    it('should not have second node visible', function () {
+      var _render3 = (0, _react.render)(treeviewRenderMock()),
+          queryByText = _render3.queryByText;
+
+      expect(queryByText(dataMock.itens[0].titulo)).not.toBeTruthy();
+    });
+    it('should open on click', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _render4, queryByText, getByRole;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _render4 = (0, _react.render)(treeviewRenderMock()), queryByText = _render4.queryByText, getByRole = _render4.getByRole;
+
+              _react.fireEvent.click(getByRole('button'));
+
+              _context.next = 4;
+              return (0, _react.waitFor)(function () {
+                return queryByText(dataMock.itens[0].titulo);
+              });
+
+            case 4:
+              expect(queryByText(dataMock.itens[0].titulo)).toBeTruthy();
+              expect(queryByText(dataMock.itens[1].titulo)).toBeTruthy();
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    it('should open all layers', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var _render5, queryByText, getByRole, queryAllByRole;
+
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _render5 = (0, _react.render)(treeviewRenderMock()), queryByText = _render5.queryByText, getByRole = _render5.getByRole, queryAllByRole = _render5.queryAllByRole;
+
+              _react.fireEvent.click(getByRole('button'));
+
+              _context2.next = 4;
+              return (0, _react.waitFor)(function () {
+                return queryByText(dataMock.itens[0].titulo);
+              });
+
+            case 4:
+              _react.fireEvent.click(queryAllByRole('button')[1]);
+
+              _context2.next = 7;
+              return (0, _react.waitFor)(function () {
+                return queryByText(dataMock.itens[0].itens[0].titulo);
+              });
+
+            case 7:
+              _react.fireEvent.click(queryAllByRole('button')[2]);
+
+              _context2.next = 10;
+              return (0, _react.waitFor)(function () {
+                return queryByText(dataMock.itens[0].itens[0].itens[0].titulo);
+              });
+
+            case 10:
+              _react.fireEvent.click(queryAllByRole('button')[3]);
+
+              _context2.next = 13;
+              return (0, _react.waitFor)(function () {
+                return queryByText(dataMock.itens[0].itens[0].itens[0].itens[0].titulo);
+              });
+
+            case 13:
+              _react.fireEvent.click(queryAllByRole('button')[4]);
+
+              _context2.next = 16;
+              return (0, _react.waitFor)(function () {
+                return queryByText(dataMock.itens[1].itens[0].titulo);
+              });
+
+            case 16:
+              expect(queryByText(dataMock.itens[0].titulo)).toBeTruthy();
+              expect(queryByText(dataMock.itens[0].itens[0].titulo)).toBeTruthy();
+              expect(queryByText(dataMock.itens[0].itens[0].itens[0].titulo)).toBeTruthy();
+              expect(queryByText(dataMock.itens[0].itens[0].itens[0].itens[0].titulo)).toBeTruthy();
+              expect(queryByText(dataMock.itens[1].titulo)).toBeTruthy();
+              expect(queryByText(dataMock.itens[1].itens[0].titulo)).toBeTruthy();
+
+            case 22:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    it('should render checkbox', function () {
+      var _render6 = (0, _react.render)(treeviewRenderMock({
+        showCheckBox: true
+      })),
+          container = _render6.container;
+
+      expect(container.querySelector('.checkbox-component')).toBeTruthy();
+    });
+    it('should call onSelectedIdsChange callback', function () {
+      var mockCallback = jest.fn(function (x) {
+        return x;
+      });
+
+      var _render7 = (0, _react.render)(treeviewRenderMock({
+        showCheckBox: true,
+        onSelectedIdsChange: mockCallback
+      })),
+          container = _render7.container;
+
+      _react.fireEvent.click(container.querySelector('.checkbox-component'));
+
+      expect(mockCallback.mock.calls.length).toBe(1);
+      expect(mockCallback.mock.calls[0][0]).toStrictEqual([1]);
+    });
+    it('should control checkbox by selectedIds', function () {
+      var _render8 = (0, _react.render)(treeviewRenderMock({
+        showCheckBox: true,
+        selectedIds: [1]
+      })),
+          container = _render8.container;
+
+      expect(container.querySelector('input.checkbox-component')).toBeChecked();
+    });
+    it('should start checkbox unchecked', function () {
+      var _render9 = (0, _react.render)(treeviewRenderMock({
+        showCheckBox: true
+      })),
+          container = _render9.container;
+
+      expect(container.querySelector('input.checkbox-component')).not.toBeChecked();
+    });
+    it('should start nodes open', function () {
+      var _render10 = (0, _react.render)(treeviewRenderMock({
+        startNodesOpened: true
+      })),
+          queryByText = _render10.queryByText;
+
+      expect(queryByText(dataMock.itens[0].titulo)).toBeTruthy();
+      expect(queryByText(dataMock.itens[0].itens[0].titulo)).toBeTruthy();
+      expect(queryByText(dataMock.itens[0].itens[0].itens[0].titulo)).toBeTruthy();
+      expect(queryByText(dataMock.itens[0].itens[0].itens[0].itens[0].titulo)).toBeTruthy();
+      expect(queryByText(dataMock.itens[1].titulo)).toBeTruthy();
+      expect(queryByText(dataMock.itens[1].itens[0].titulo)).toBeTruthy();
+    });
+    it('should apply customClass', function () {
+      var _render11 = (0, _react.render)(treeviewRenderMock({
+        customClass: 'customClass'
+      })),
+          container = _render11.container;
+
+      expect(container.firstChild).toHaveClass('customClass');
+    });
+    it('should apply style', function () {
+      var _render12 = (0, _react.render)(treeviewRenderMock({
+        styleForContainer: {
+          backgroundColor: '#000'
+        }
+      })),
+          container = _render12.container;
+
+      expect(container.querySelector('ul')).toHaveStyle('background-color: #000');
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "0.4.75-beta.9",
+  "version": "0.4.76-beta.1",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "scripts": {
@@ -11,15 +11,19 @@
     "check:js": "./node_modules/.bin/eslint ./src/* --ext .js, --ext .jsx",
     "deploy:heroku": "npm run demo:prod && cd demo && git commit -am 'Deploy' && git push heroku master",
     "publish:npm": "npm run lib && npm publish",
-    "prepare": "husky install"
+    "publish:npm:beta": "npm run lib && npm publish --tag beta",
+    "prepare": "husky install",
+    "test": "jest --env=jsdom",
+    "test:watch": "jest --watchAll --env=jsdom",
+    "test:coverage": "jest --coverage --colors --env=jsdom"
   },
   "keywords": [],
   "license": "MIT",
   "peerDependencies": {
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0",
-    "react-router-dom": "^4.2.2",
-    "react-transition-group": "^2.2.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
+    "react-transition-group": "^4.4.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
@@ -28,8 +32,12 @@
     "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.36",
     "@babel/preset-env": "^7.0.0-beta.36",
     "@babel/preset-react": "^7.0.0-beta.36",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
     "babel-eslint": "^7.2.3",
+    "babel-jest": "^27.0.5",
     "babel-loader": "^8.0.0-beta.0",
+    "babel-polyfill": "^6.26.0",
     "css-loader": "^0.28.8",
     "eslint": "4.18.0",
     "eslint-config-airbnb": "16.1.0",
@@ -40,6 +48,8 @@
     "file-loader": "^1.1.6",
     "html-webpack-plugin": "^2.30.1",
     "husky": "^6.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.0.5",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
@@ -56,11 +66,11 @@
   },
   "dependencies": {
     "attach-dom-events": "^1.0.0",
-    "history": "^4.10.1",
+    "history": "^5.0.0",
     "imask": "^3.1.1",
     "init": "^0.1.2",
-    "lodash": "^4.17.15",
-    "moment": "^2.24.0",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.1",
     "node-sass": "^4.13.0",
     "prop-types": "^15.7.2",
     "react-syntax-highlighter": "^6.1.1",