react-native-tree-multi-select 1.1.2 → 1.2.1

package/src/TreeView.tsx

@@ -14,9 +14,12 @@ import {
   initializeNodeMaps,
   expandAll,
   collapseAll,
-  toggleCheckboxes
+  toggleCheckboxes,
+  expandNodes,
+  collapseNodes
 } from './helpers';
 import { useTreeViewStore } from './store/treeView.store';
+import usePreviousState from './utils/usePreviousState';
 
 const _TreeView = React.forwardRef<TreeViewRef, TreeViewProps>(
   (props, ref) => {
@@ -28,6 +31,8 @@ const _TreeView = React.forwardRef<TreeViewRef, TreeViewProps>(
 
       preselectedIds = [],
 
+      preExpandedIds = [],
+
       treeFlashListProps,
       checkBoxViewStyleProps,
       indentationMultiplier,
@@ -66,9 +71,14 @@ const _TreeView = React.forwardRef<TreeViewRef, TreeViewProps>(
       expandAll,
       collapseAll,
 
+      expandNodes,
+      collapseNodes,
+
       setSearchText
     }));
 
+    const prevSearchText = usePreviousState(searchText);
+
     function setSearchText(text: string, keys: string[] = ["name"]) {
       updateSearchText(text);
       updateSearchKeys(keys);
@@ -79,8 +89,11 @@ const _TreeView = React.forwardRef<TreeViewRef, TreeViewProps>(
 
       initializeNodeMaps(data);
 
-      // Check any preselected nodes
+      // Check any pre-selected nodes
       toggleCheckboxes(preselectedIds, true);
+
+      // Expand pre-expanded nodes
+      expandNodes(preExpandedIds);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -108,12 +121,20 @@ const _TreeView = React.forwardRef<TreeViewRef, TreeViewProps>(
           )));
         });
       }
-      else {
+      else if (prevSearchText && prevSearchText !== "") {
+        /* Collapse all nodes only if previous search query was non-empty: this is 
+        done to prevent node collapse on first render if preExpandedIds is provided */
         InteractionManager.runAfterInteractions(() => {
           updateExpanded(new Set());
         });
       }
-    }, [getIds, initialTreeViewData, searchText, updateExpanded]);
+    }, [
+      getIds,
+      initialTreeViewData,
+      prevSearchText,
+      searchText,
+      updateExpanded
+    ]);
 
     React.useEffect(() => {
       return () => {

package/src/helpers/expandCollapse.helper.ts

@@ -33,28 +33,8 @@ export function handleToggleExpand(id: string) {
         }
     }
 
-    /**
-     * Finds a node in the tree by its ID.
-     *
-     * @param nodes - The array of tree nodes to search through.
-     * @returns The found tree node, or undefined if not found.
-     */
-    function findNode(nodes: TreeNode[]): TreeNode | undefined {
-        for (let node of nodes) {
-            if (node.id === id) {
-                return node;
-            } else if (node.children) {
-                const found = findNode(node.children);
-                if (found) {
-                    return found;
-                }
-            }
-        }
-        return undefined;
-    }
-
     // Find the node to expand or collapse
-    const node = findNode(initialTreeViewData);
+    const node = findNode(initialTreeViewData, id);
 
     if (expanded.has(id)) {
         // If the node is currently expanded, collapse it and its descendants
@@ -97,3 +77,84 @@ export function collapseAll() {
     const newExpanded = new Set<string>();
     updateExpanded(newExpanded);
 };
+
+/**
+ * Expand tree nodes of given ids. If the id is of a child, it also expands
+ * the parent which it belongs to. 
+ * @param ids Ids of nodes to expand.
+ */
+export function expandNodes(ids: string[]) {
+    const { expanded, updateExpanded, childToParentMap } = useTreeViewStore.getState();
+    const newExpanded = new Set(expanded);
+    const processedParents = new Set();  // To track already processed parents
+
+    ids.forEach(id => {
+        newExpanded.add(id);  // Start by adding the node ID to the set
+        let currentId = id;
+
+        while (currentId && childToParentMap.has(currentId) && !processedParents.has(currentId)) {
+            const parentId = childToParentMap.get(currentId);
+            if (parentId) {
+                if (!newExpanded.has(parentId)) {
+                    newExpanded.add(parentId);  // Add the parent ID only if not already processed
+                    processedParents.add(parentId);
+                }
+                currentId = parentId;  // Move up to the next parent
+            } else {
+                break;  // Break the loop if there's no further parent
+            }
+        }
+    });
+
+    updateExpanded(newExpanded);
+}
+
+/**
+ * Collapse tree nodes of given ids. If the id is of a parent, it also collapses
+ * the children inside it. 
+ * @param ids Ids of nodes to collapse.
+ */
+export function collapseNodes(ids: string[]) {
+    const { expanded, updateExpanded, nodeMap } = useTreeViewStore.getState();
+    const newExpanded = new Set(expanded);
+
+    // Function to recursively remove child nodes from the expanded set
+    const deleteChildrenFromExpanded = (nodeId: string, visited = new Set()) => {
+        if (visited.has(nodeId)) return; // Prevent redundant processing
+        visited.add(nodeId);
+
+        const node = nodeMap.get(nodeId);
+        node?.children?.forEach(child => {
+            newExpanded.delete(child.id);
+            deleteChildrenFromExpanded(child.id, visited);
+        });
+    };
+
+    ids.forEach(id => {
+        // Remove the node ID from the set and all its children
+        newExpanded.delete(id);
+        deleteChildrenFromExpanded(id);
+    });
+
+    updateExpanded(newExpanded);
+}
+
+/**
+ * Finds a node in the tree by its ID.
+ *
+ * @param nodes - The array of tree nodes to search through.
+ * @returns The found tree node, or undefined if not found.
+ */
+function findNode(nodes: TreeNode[], parentId: string): TreeNode | undefined {
+    for (let node of nodes) {
+        if (node.id === parentId) {
+            return node;
+        } else if (node.children) {
+            const found = findNode(node.children, parentId);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return undefined;
+}

package/src/helpers/toggleCheckbox.helper.ts

@@ -163,4 +163,4 @@ export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
     // Update the state object with the new checked and indeterminate sets.
     updateChecked(tempChecked);
     updateIndeterminate(tempIndeterminate);
-};
+}

package/src/types/treeView.types.ts

@@ -72,6 +72,8 @@ export interface TreeViewProps extends NodeListProps {
     onExpand?: (expandedIds: string[]) => void;
 
     preselectedIds?: string[];
+
+    preExpandedIds?: string[];
 }
 
 type CheckboxProps = Omit<RNPaperCheckboxAndroidProps, "onPress" | "status">;
@@ -107,5 +109,8 @@ export interface TreeViewRef {
     expandAll: () => void;
     collapseAll: () => void;
 
+    expandNodes: (ids: string[]) => void;
+    collapseNodes: (ids: string[]) => void;
+
     setSearchText: (searchText: string, searchKeys?: string[]) => void;
 }

package/src/utils/usePreviousState.ts

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Get previous value of a state
+ * @param value state
+ * @returns previous value of @param value after it's updated
+ */
+export default function usePreviousState<T>(value: T) {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}