linear-react-components-ui 0.4.75-beta.5 → 0.4.75-beta.9

package/lib/treeview/Node.js

@@ -93,7 +93,9 @@ var TreeNode = /*#__PURE__*/function (_Component) {
             tabIndex: 0,
             role: "button",
             className: "opencloseicon",
-            onClick: _this.openCloseTree
+            onClick: function onClick() {
+              return _this.openCloseTree(node);
+            }
           }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
             name: _this.state.isVisible ? 'up' : 'down',
             size: 10
@@ -107,10 +109,23 @@ var TreeNode = /*#__PURE__*/function (_Component) {
       configurable: true,
       enumerable: true,
       writable: true,
-      value: function value() {
-        _this.setState({
-          isVisible: !_this.state.isVisible
-        });
+      value: function value(node) {
+        var _this$state = _this.state,
+            isVisible = _this$state.isVisible,
+            wasOpened = _this$state.wasOpened;
+        var onNodeOpen = _this.props.onNodeOpen;
+        var nextState = {
+          isVisible: !isVisible
+        };
+
+        if (!wasOpened && onNodeOpen) {
+          nextState = _extends({}, nextState, {
+            wasOpened: true
+          });
+          onNodeOpen(node);
+        }
+
+        _this.setState(nextState);
       }
     });
     Object.defineProperty(_assertThisInitialized(_this), "handleShowNodeElements", {
@@ -118,9 +133,9 @@ var TreeNode = /*#__PURE__*/function (_Component) {
       enumerable: true,
       writable: true,
       value: function value() {
-        var _this$state = _this.state,
-            showNodeElements = _this$state.showNodeElements,
-            keepMenuOpened = _this$state.keepMenuOpened;
+        var _this$state2 = _this.state,
+            showNodeElements = _this$state2.showNodeElements,
+            keepMenuOpened = _this$state2.keepMenuOpened;
         if (!showNodeElements) _this.setState({
           showNodeElements: true
         });else if (showNodeElements && !keepMenuOpened) {
@@ -155,8 +170,9 @@ var TreeNode = /*#__PURE__*/function (_Component) {
 
               if (onNodeElementClick) {
                 newProps = _extends({}, newProps, {
-                  onClick: function onClick() {
-                    return onNodeElementClick(node);
+                  onClick: function onClick(e) {
+                    onNodeElementClick(node);
+                    if (e.stopPropagation) e.stopPropagation();
                   },
                   onNodeElementClick: null
                 });
@@ -246,6 +262,7 @@ var TreeNode = /*#__PURE__*/function (_Component) {
     _this.labelRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
       isVisible: context.startNodesOpened,
+      wasOpened: context.startNodesOpened,
       showNodeElements: false,
       keepMenuOpened: false
     };
@@ -381,6 +398,7 @@ TreeNode.propTypes = {
   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,
   nodeElementsValidations: _propTypes["default"].object
 };
 TreeNode.defaultProps = {
@@ -392,6 +410,7 @@ TreeNode.defaultProps = {
   nodeToolbarElements: undefined,
   nodeMenuButtonSize: 'small',
   onNodeClick: undefined,
+  onNodeOpen: undefined,
   nodeElementsValidations: undefined
 };
 TreeNode.contextType = _constants.TreeviewContext;

package/lib/treeview/index.js

@@ -95,6 +95,28 @@ var TreeView = /*#__PURE__*/function (_Component) {
         });
       }
     });
+    Object.defineProperty(_assertThisInitialized(_this), "handleNewSelectedIds", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function value(selectedIds) {
+        var requiredIds = [];
+        var newSelectedIds = [];
+        selectedIds.forEach(function (id) {
+          var _this$checkAllAncestr = _this.checkAllAncestry(id, [], true, false),
+              requiredParentsIds = _this$checkAllAncestr.requiredParentsIds,
+              updatedIdsWithAncestryIds = _this$checkAllAncestr.updatedIdsWithAncestryIds;
+
+          newSelectedIds = [].concat(_toConsumableArray(newSelectedIds), _toConsumableArray(updatedIdsWithAncestryIds));
+          requiredIds = [].concat(_toConsumableArray(requiredIds), _toConsumableArray(requiredParentsIds));
+        });
+
+        _this.setState({
+          requiredParentsIds: _lodash["default"].uniq(requiredIds),
+          selectedIds: _lodash["default"].uniq(newSelectedIds)
+        });
+      }
+    });
     Object.defineProperty(_assertThisInitialized(_this), "returnParentId", {
       configurable: true,
       enumerable: true,
@@ -149,14 +171,14 @@ var TreeView = /*#__PURE__*/function (_Component) {
         } : nodeChildrenIds;
       }
     });
-    Object.defineProperty(_assertThisInitialized(_this), "returnAncestryIdsAllowedToUncheck", {
+    Object.defineProperty(_assertThisInitialized(_this), "returnRequiredAncestryIds", {
       configurable: true,
       enumerable: true,
       writable: true,
       value: function value(nodeId) {
-        var parentsIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+        var requiredAncestryIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
         var previousParentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
-        var selectedSiblingsIds;
+        var selectedSiblingsIds = [];
         var selectedIds = _this.state.selectedIds;
 
         var parentId = _this.returnParentId(nodeId);
@@ -166,20 +188,22 @@ var TreeView = /*#__PURE__*/function (_Component) {
             return childId !== nodeId;
           });
 
+          var isPreviousParentSelected = selectedIds.includes(previousParentId);
+
           if (nodeSiblingsIds && nodeSiblingsIds.length > 0) {
             selectedSiblingsIds = selectedIds.filter(function (id) {
               return nodeSiblingsIds.includes(id);
             });
           }
 
-          var result = selectedSiblingsIds && selectedSiblingsIds.length > 0 ? _toConsumableArray(parentsIds) : [].concat(_toConsumableArray(parentsIds), [parentId]);
+          var requiredIds = isPreviousParentSelected || selectedSiblingsIds.length > 0 ? _toConsumableArray(requiredAncestryIds) : [].concat(_toConsumableArray(requiredAncestryIds), [parentId]);
 
-          if (!selectedSiblingsIds || selectedSiblingsIds && selectedSiblingsIds.length === 0 && !selectedIds.includes(previousParentId)) {
-            return _this.returnAncestryIdsAllowedToUncheck(parentId, result, parentId);
+          if (selectedSiblingsIds.length === 0 && !isPreviousParentSelected) {
+            return _this.returnRequiredAncestryIds(parentId, requiredIds, parentId);
           }
         }
 
-        return parentsIds;
+        return requiredAncestryIds;
       }
     });
     Object.defineProperty(_assertThisInitialized(_this), "toggleCheckChildren", {
@@ -202,6 +226,7 @@ var TreeView = /*#__PURE__*/function (_Component) {
       writable: true,
       value: function value(nodeId, codigos) {
         var returnRequiredParentsIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+        var updateState = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
         var selectedIds = _this.state.selectedIds;
         var requiredParentsIds = _this.state.requiredParentsIds;
 
@@ -215,11 +240,9 @@ var TreeView = /*#__PURE__*/function (_Component) {
         });
         selectedIds = [].concat(_toConsumableArray(selectedIds), _toConsumableArray(codigos), _toConsumableArray(notSelectedAncestryIds));
         requiredParentsIds = [].concat(_toConsumableArray(requiredParentsIds), _toConsumableArray(notRequiredAncestryIds));
-
-        _this.setState({
+        if (updateState) _this.setState({
           requiredParentsIds: requiredParentsIds
         });
-
         return !returnRequiredParentsIds ? selectedIds : {
           updatedIdsWithAncestryIds: selectedIds,
           requiredParentsIds: requiredParentsIds
@@ -233,7 +256,7 @@ var TreeView = /*#__PURE__*/function (_Component) {
       value: function value(nodeId, codigos, requiredParentsIds) {
         var selectedIds = _this.state.selectedIds;
 
-        var ancestryIds = _this.returnAncestryIdsAllowedToUncheck(nodeId);
+        var ancestryIds = _this.returnRequiredAncestryIds(nodeId);
 
         var remainRequiredParentsIds = requiredParentsIds.filter(function (id) {
           return !ancestryIds.includes(id);
@@ -340,9 +363,9 @@ var TreeView = /*#__PURE__*/function (_Component) {
 
         if (isParent && isHandlingSelectedIds && allowCheckAllChildren) {
           if (allowCheckAllAncestry) {
-            var _this$checkAllAncestr = _this.checkAllAncestry(nodeId, codigos, true),
-                updatedIdsWithAncestryIds = _this$checkAllAncestr.updatedIdsWithAncestryIds,
-                requiredParentsIds = _this$checkAllAncestr.requiredParentsIds;
+            var _this$checkAllAncestr2 = _this.checkAllAncestry(nodeId, codigos, true),
+                updatedIdsWithAncestryIds = _this$checkAllAncestr2.updatedIdsWithAncestryIds,
+                requiredParentsIds = _this$checkAllAncestr2.requiredParentsIds;
 
             var updatedIdsWithChidlrenIds = _this.checkAllChildren(nodeId, true, requiredParentsIds);
 
@@ -419,7 +442,8 @@ var TreeView = /*#__PURE__*/function (_Component) {
             onNodeClick = _this$props3.onNodeClick,
             nodeElementsValidations = _this$props3.nodeElementsValidations,
             nodeToolbarElements = _this$props3.nodeToolbarElements,
-            nodeMenuButtonSize = _this$props3.nodeMenuButtonSize;
+            nodeMenuButtonSize = _this$props3.nodeMenuButtonSize,
+            onNodeOpen = _this$props3.onNodeOpen;
         var childrenIds = [];
 
         if (node.itens && node.itens.length > 0) {
@@ -444,7 +468,8 @@ var TreeView = /*#__PURE__*/function (_Component) {
           nodeToolbarElements: nodeToolbarElements,
           nodeElementsValidations: nodeElementsValidations,
           nodeMenuButtonSize: nodeMenuButtonSize,
-          onNodeClick: onNodeClick
+          onNodeClick: onNodeClick,
+          onNodeOpen: onNodeOpen
         }, childrenIds.length > 0 && node.itens.map(function (nodeitem) {
           return _this.buildTree(nodeitem, node.id, ids);
         }));
@@ -453,6 +478,7 @@ var TreeView = /*#__PURE__*/function (_Component) {
     _this.idsWithChildren = {};
     _this.state = {
       data: _this.props.data,
+      propSelectedIds: _this.props.selectedIds,
       selectedIds: _this.props.selectedIds,
       isHandlingSelectedIds: false,
       requiredParentsIds: []
@@ -465,6 +491,18 @@ var TreeView = /*#__PURE__*/function (_Component) {
     value: function componentDidMount() {
       this.buildTree(this.state.data, undefined, this.idsWithChildren);
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this$state3 = this.state,
+          selectedIds = _this$state3.selectedIds,
+          propSelectedIds = _this$state3.propSelectedIds;
+      var allowCheckAllAncestry = this.props.allowCheckAllAncestry;
+
+      var isSameSelectedIds = _lodash["default"].isEqual(propSelectedIds.sort(), prevState.propSelectedIds.sort());
+
+      if (allowCheckAllAncestry && !isSameSelectedIds) this.handleNewSelectedIds(selectedIds);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -486,10 +524,20 @@ var TreeView = /*#__PURE__*/function (_Component) {
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
-      var data = props.data;
-      if (data !== state.data) return {
-        data: data
-      };
+      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;
     }
   }]);
@@ -518,6 +566,7 @@ TreeView.propTypes = {
   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,
   nodeElementsValidations: _propTypes["default"].object
 };
 TreeView.defaultProps = {
@@ -537,6 +586,7 @@ TreeView.defaultProps = {
   nodeToolbarElements: undefined,
   nodeMenuButtonSize: 'small',
   onNodeClick: undefined,
+  onNodeOpen: undefined,
   nodeElementsValidations: undefined
 };
 var _default = TreeView;

package/package.json

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