Issue #8 : Fix deep for objects and arrays

Author: oxyno-zeta

package.json

@@ -47,7 +47,7 @@
     "html-loader": "^0.4.4",
     "html-webpack-plugin": "^2.24.1",
     "lodash": "^4.17.2",
-    "node-sass": "^4.6.0",
+    "node-sass": "^4.9.3",
     "postcss-loader": "^1.1.1",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",

src/JsonTree.js

@@ -53,7 +53,7 @@ const propTypes = {
 // Default props
 const defaultProps = {
     rootName: 'root',
-    isCollapsed: (keyPath, deep) => (deep !== 0),
+    isCollapsed: (keyPath, deep) => (deep !== -1),
     getStyle: (keyName, data, keyPath, deep, dataType) => {
         switch (dataType) {
             case 'Object':

src/components/JsonArray.js

@@ -60,13 +60,12 @@ class JsonArray extends Component {
             ...props.keyPath,
             props.name,
         ];
-        const deep = props.deep + 1;
         this.state = {
             data: props.data,
             name: props.name,
             keyPath,
-            deep,
-            collapsed: props.isCollapsed(keyPath, deep, props.data),
+            deep: props.deep,
+            collapsed: props.isCollapsed(keyPath, props.deep, props.data),
             addFormVisible: false,
         };
 
@@ -234,7 +233,7 @@ class JsonArray extends Component {
                 className: 'rejt-minus-menu',
                 style: minus,
             });
-            minusElement = (deep !== 0) ? minusMenuLayout : null;
+            minusElement = (deep !== -1) ? minusMenuLayout : null;
         }
 
         const itemName = (numberOfItems > 1) ? 'items' : 'item';
@@ -282,7 +281,7 @@ class JsonArray extends Component {
                 className: 'rejt-minus-menu',
                 style: minus,
             });
-            minusElement = (deep !== 0) ? minusMenuLayout : null;
+            minusElement = (deep !== -1) ? minusMenuLayout : null;
         }
 
         const list = data
@@ -291,7 +290,7 @@ class JsonArray extends Component {
                 name={`${index}`}
                 data={item}
                 keyPath={keyPath}
-                deep={deep}
+                deep={deep + 1}
                 isCollapsed={isCollapsed}
                 handleRemove={this.handleRemoveItem(index)}
                 handleUpdateValue={this.handleEditValue}

src/components/JsonObject.js

@@ -56,17 +56,16 @@ const defaultProps = {
 class JsonObject extends Component {
     constructor(props) {
         super(props);
-        const deep = props.deep + 1;
-        const keyPath = (deep === 0) ? [] : [
+        const keyPath = (props.deep === -1) ? [] : [
             ...props.keyPath,
             props.name,
         ];
         this.state = {
             name: props.name,
             data: props.data,
             keyPath,
-            deep,
-            collapsed: props.isCollapsed(keyPath, deep, props.data),
+            deep: props.deep,
+            collapsed: props.isCollapsed(keyPath, props.deep, props.data),
             addFormVisible: false,
         };
 
@@ -232,7 +231,7 @@ class JsonObject extends Component {
                 className: 'rejt-minus-menu',
                 style: minus,
             });
-            minusElement = (deep !== 0) ? minusMenuLayout : null;
+            minusElement = (deep !== -1) ? minusMenuLayout : null;
         }
 
         /* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -279,7 +278,7 @@ class JsonObject extends Component {
                 className: 'rejt-minus-menu',
                 style: minus,
             });
-            minusElement = (deep !== 0) ? minusMenuLayout : null;
+            minusElement = (deep !== -1) ? minusMenuLayout : null;
         }
 
         const list = keyList
@@ -288,7 +287,7 @@ class JsonObject extends Component {
                 name={key}
                 data={data[key]}
                 keyPath={keyPath}
-                deep={deep}
+                deep={deep + 1}
                 isCollapsed={isCollapsed}
                 handleRemove={this.handleRemoveValue(key)}
                 handleUpdateValue={this.handleEditValue}