Merge pull request #6 from aspecto-io/fix/arrayGroup

bugfix: incorrect ArrayGroup opened

package.json

@@ -1,7 +1,7 @@
 {
     "name": "searchable-react-json-view",
     "description": "Interactive react component for displaying javascript arrays and JSON objects.",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "main": "dist/main.js",
     "dependencies": {
         "flux": "^3.1.3",

src/js/components/ArrayGroup.js

@@ -15,18 +15,47 @@ export default class extends React.PureComponent {
     constructor(props) {
         super(props);
         this.state = {
-            expanded: []
+            expanded: {}
         };
     }
 
-    toggleCollapsed = (i) => {
-        const newExpanded = [];
-        for (const j in this.state.expanded) {
-            newExpanded.push(this.state.expanded[j]);
+    componentDidMount() {
+        this.updateExpandedGroups();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.highlightSearch !== this.props.highlightSearch) {
+            this.updateExpandedGroups();
+        }
+    }
+
+
+    updateExpandedGroups = () => {
+        const size = this.props.groupArraysAfterLength;
+        const groups = Math.ceil(this.props.src.length / size);
+        const expandedGroups = {};
+        for (let i in [...Array(groups)]) {
+            const groupSrc = this.props.src.slice(i * size, i * size + size)
+            const groupContainingSearch = this.props.highlightSearch && JSON.stringify(groupSrc).toLowerCase().includes(this.props.highlightSearch.toLowerCase());
+            if (groupContainingSearch) {
+                expandedGroups[i] = true;
+            }
         }
-        newExpanded[i] = !newExpanded[i];
+
+        this.setState({
+            ...this.state,
+            expanded: expandedGroups
+        });
+    }
+
+    toggleCollapsed = (i) => {
+        const groupState = !this.state.expanded[i];
         this.setState({
-            expanded: newExpanded
+            ...this.state,
+            expanded: {
+                ...this.state.expanded,
+                [i]: groupState,
+            }
         });
     }