react-native-tree-multi-select 1.5.0-beta.2 → 1.5.0-beta.3

package/src/components/NodeList.tsx

@@ -111,11 +111,11 @@ function _NodeList(props: NodeListProps) {
             removeClippedSubviews={true}
             keyboardShouldPersistTaps="handled"
             drawDistance={50}
-            data={flattenedFilteredNodes}
-            renderItem={nodeRenderer}
             ListHeaderComponent={<HeaderFooterView />}
             ListFooterComponent={<HeaderFooterView />}
             {...treeFlashListProps}
+            data={flattenedFilteredNodes}
+            renderItem={nodeRenderer}
         />
     );
 };

package/src/helpers/expandCollapse.helper.ts

@@ -1,4 +1,3 @@
-import { TreeNode } from "../types/treeView.types";
 import { useTreeViewStore } from "../store/treeView.store";
 
 /**
@@ -11,52 +10,40 @@ import { useTreeViewStore } from "../store/treeView.store";
  */
 export function handleToggleExpand(id: string) {
     const {
-        initialTreeViewData,
         expanded,
-        updateExpanded
+        updateExpanded,
+        nodeMap
     } = useTreeViewStore.getState();
 
     // Create a new Set based on the current expanded state
     const newExpanded = new Set(expanded);
 
-    /**
-     * Recursively deletes a node and its descendants from the expanded set.
-     *
-     * @param node - The tree node to start deleting from.
-     */
-    function deleteChildrenFromExpanded(node: TreeNode) {
-        if (node.children) {
-            for (let child of node.children) {
-                newExpanded.delete(child.id);
-                deleteChildrenFromExpanded(child);
-            }
-        }
-    }
-
-    // Find the node to expand or collapse
-    const node = findNode(initialTreeViewData, id);
-
     if (expanded.has(id)) {
         // If the node is currently expanded, collapse it and its descendants
         newExpanded.delete(id);
-        /* 
-            istanbul ignore next:
-             
-            ignore because this condition is just added to satisfy 
-            typescript type check but the node will never be undefined if it is already in 
-            expanded Set 
-        */
-        if (node) {
-            deleteChildrenFromExpanded(node);
+
+        // Use an iterative approach to remove all descendants from the expanded set
+        const stack = [id];
+
+        while (stack.length > 0) {
+            const currentId = stack.pop()!;
+            const node = nodeMap.get(currentId);
+
+            if (node && node.children) {
+                for (const child of node.children) {
+                    newExpanded.delete(child.id);
+                    stack.push(child.id);
+                }
+            }
         }
     } else {
         // If the node is currently collapsed, expand it
         newExpanded.add(id);
     }
 
-    // Set the new expanded state
+    // Update the expanded state
     updateExpanded(newExpanded);
-};
+}
 
 /**
  * Expand all nodes in the tree.
@@ -66,51 +53,33 @@ export function expandAll() {
     // Create a new Set containing the IDs of all nodes
     const newExpanded = new Set(nodeMap.keys());
     updateExpanded(newExpanded);
-};
+}
 
 /**
  * Collapse all nodes in the tree.
  */
 export function collapseAll() {
     const { updateExpanded } = useTreeViewStore.getState();
-    // Create an empty Set
-    const newExpanded = new Set<string>();
-    updateExpanded(newExpanded);
-};
+    // Clear the expanded state
+    updateExpanded(new Set<string>());
+}
 
 /**
  * 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.
+ * its ancestors up to the root.
+ * @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);
-            /*
-                istanbul ignore else:
-
-                ignore because this condition is just added to satisfy 
-                typescript type check as parentId will never be undefined if it is already in 
-                childToParentMap Map 
-            */
-            if (parentId) {
-                /* istanbul ignore else: nothing to be done in else block */
-                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
-            }
+    const processedIds = new Set<string>();
+
+    ids.forEach((id) => {
+        let currentId: string | undefined = id;
+        while (currentId && !processedIds.has(currentId)) {
+            newExpanded.add(currentId);
+            processedIds.add(currentId);
+            currentId = childToParentMap.get(currentId);
         }
     });
 
@@ -119,55 +88,35 @@ export function expandNodes(ids: string[]) {
 
 /**
  * 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.
+ * its descendants.
+ * @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()) => {
-        /* 
-            istanbul ignore next:
-             
-            ignore because this is a redundancy check.
-        */
-        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);
-        });
+    // Use an iterative approach to remove all descendants from the expanded set
+    const deleteChildrenFromExpanded = (nodeId: string) => {
+        const stack = [nodeId];
+
+        while (stack.length > 0) {
+            const currentId = stack.pop()!;
+            const node = nodeMap.get(currentId);
+
+            if (node && node.children) {
+                for (const child of node.children) {
+                    newExpanded.delete(child.id);
+                    stack.push(child.id);
+                }
+            }
+        }
     };
 
-    ids.forEach(id => {
-        // Remove the node ID from the set and all its children
+    ids.forEach((id) => {
+        // Remove the node ID from the set and all its descendants
         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

@@ -4,7 +4,7 @@ import { useTreeViewStore } from "../store/treeView.store";
  * Function to toggle checkbox state for a tree structure.
  * It sets the checked and indeterminate state for all affected nodes in the tree after an action to check/uncheck is made.
  * @param {string[]} ids - The ids of nodes that need to be checked or unchecked.
- * @param {boolean} [forceCheck] - Optional. If provided, will force the check state of the nodes to be this value. 
+ * @param {boolean} [forceCheck] - Optional. If provided, will force the check state of the nodes to be this value.
  * If not provided, the check state will be toggled based on the current state.
  */
 export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
@@ -26,145 +26,168 @@ export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
     const tempChecked = new Set(checked);
     const tempIndeterminate = new Set(indeterminate);
 
-    // Maps for memoization of the recursive functions areAllDescendantsChecked and areAnyDescendantsChecked.
-    const memoAllDescendantsChecked = new Map<string, boolean>();
-    const memoAnyDescendantsChecked = new Map<string, boolean>();
+    // Keep track of nodes that have been toggled or affected.
+    const affectedNodes = new Set<string>();
 
-    /**
-     * Recursive function to check if all descendants of a node are checked.
-     * It uses memoization to avoid redundant calculations.
-     * @param {string} nodeId - The id of the node to be checked.
-     * @returns {boolean} - Whether all descendants of the node are checked.
-     */
-    const areAllDescendantsChecked = (nodeId: string): boolean => {
-        // If the result for this node is already in the map, return it.
-        if (memoAllDescendantsChecked.has(nodeId)) {
-            return memoAllDescendantsChecked.get(nodeId)!;
-        }
-
-        const node = nodeMap.get(nodeId);
-        let allChecked = true;
-        if (node?.children) {
-            // If the node has children, recursively check all children.
-            for (const childNode of node.children) {
-                allChecked = allChecked && areAllDescendantsChecked(childNode.id);
-            }
-        } else {
-            // If the node has no children, its state is equal to whether it is in the checked set.
-            allChecked = tempChecked.has(nodeId);
-        }
+    // Memoization maps for node depths.
+    const nodeDepths = new Map<string, number>();
 
-        // Store the result in the map and return it.
-        memoAllDescendantsChecked.set(nodeId, allChecked);
-        return allChecked;
-    };
-
-    /**
-     * Updated function to check if any descendants of a node are checked.
-     * It uses memoization to avoid redundant calculations and avoids unnecessarily deep recursion.
-     * @param {string} nodeId - The id of the node to be checked.
-     * @returns {boolean} - Whether any descendants of the node are checked.
-     */
-    const areAnyDescendantsChecked = (nodeId: string): boolean => {
-        // If the result for this node is already in the map, return it.
-        if (memoAnyDescendantsChecked.has(nodeId)) {
-            return memoAnyDescendantsChecked.get(nodeId)!;
-        }
-
-        const node = nodeMap.get(nodeId);
-        let anyChecked = false;
-        if (node?.children) {
-            // Check if any direct child is checked, without requiring all descendants.
-            for (const childNode of node.children) {
-                if (tempChecked.has(childNode.id) || areAnyDescendantsChecked(childNode.id)) {
-                    anyChecked = true;
-                    break;
-                }
-            }
-        } else {
-            // If the node has no children, its state is equal to whether it is in the checked set.
-            anyChecked = tempChecked.has(nodeId);
+    // Step 1: Toggle the clicked nodes and their children without updating parents yet.
+    ids.forEach((id) => {
+        const node = nodeMap.get(id);
+        if (!node) {
+            // Node does not exist; skip processing this ID
+            return;
         }
 
-        // Store the result in the map and return it.
-        memoAnyDescendantsChecked.set(nodeId, anyChecked);
-        return anyChecked;
-    };
-
-    // Toggle the clicked nodes and their children.
-    ids.forEach((id) => {
         const isChecked = tempChecked.has(id);
         const newCheckedState = forceCheck === undefined ? !isChecked : forceCheck;
 
         if (newCheckedState) {
             tempChecked.add(id);
             tempIndeterminate.delete(id);
+            affectedNodes.add(id);
             if (toChildren) {
-                recursivelyUpdateChildren(id, true);
+                updateChildrenIteratively(id, true);
             }
         } else {
             tempChecked.delete(id);
             tempIndeterminate.delete(id);
+            affectedNodes.add(id);
             if (toChildren) {
-                recursivelyUpdateChildren(id, false);
+                updateChildrenIteratively(id, false);
             }
         }
-
-        // Skip updating parent nodes if toParents is false
-        if (toParents) {
-            updateParentNodes(id);
-        }
     });
 
-    // Function to recursively update children nodes as per childrenChecked value
-    function recursivelyUpdateChildren(nodeId: string, childrenChecked: boolean) {
-        const node = nodeMap.get(nodeId);
-        if (node && node.children) {
-            node.children.forEach((childNode) => {
-                if (childrenChecked) {
-                    tempChecked.add(childNode.id);
-                    tempIndeterminate.delete(childNode.id);
+    // Step 2: Collect all affected parent nodes.
+    const nodesToUpdate = new Set<string>();
+
+    if (toParents) {
+        affectedNodes.forEach((id) => {
+            let currentNodeId: string | undefined = id;
+            while (currentNodeId) {
+                const parentNodeId = childToParentMap.get(currentNodeId);
+                if (parentNodeId) {
+                    nodesToUpdate.add(parentNodeId);
+                    currentNodeId = parentNodeId;
                 } else {
-                    tempChecked.delete(childNode.id);
-                    tempIndeterminate.delete(childNode.id);
+                    break;
+                }
+            }
+        });
+    }
+
+    // Step 3: Update parent nodes in bottom-up order.
+    if (toParents && nodesToUpdate.size > 0) {
+        // Convert the set to an array and sort nodes by depth (deepest first).
+        const sortedNodes = Array.from(nodesToUpdate).sort((a, b) => {
+            return getNodeDepth(b) - getNodeDepth(a);
+        });
+
+        sortedNodes.forEach((nodeId) => {
+            updateNodeState(nodeId);
+        });
+    }
+
+    /**
+     * Function to iteratively update children nodes as per childrenChecked value.
+     * @param rootId - The ID of the root node to start updating from.
+     * @param childrenChecked - The desired checked state for children.
+     */
+    function updateChildrenIteratively(rootId: string, childrenChecked: boolean) {
+        const stack = [rootId];
+
+        while (stack.length > 0) {
+            const nodeId = stack.pop()!;
+            const node = nodeMap.get(nodeId);
+            if (!node) continue; // Node does not exist; skip
+
+            if (childrenChecked) {
+                tempChecked.add(nodeId);
+                tempIndeterminate.delete(nodeId);
+            } else {
+                tempChecked.delete(nodeId);
+                tempIndeterminate.delete(nodeId);
+            }
+            affectedNodes.add(nodeId);
+
+            if (node.children && node.children.length > 0) {
+                for (const childNode of node.children) {
+                    stack.push(childNode.id);
                 }
-                recursivelyUpdateChildren(childNode.id, childrenChecked);
-            });
+            }
         }
     }
 
-    // Function to update parent nodes
-    function updateParentNodes(nodeId: string) {
+    /**
+     * Function to get the depth of a node for sorting purposes, with memoization.
+     * @param nodeId - The ID of the node to get the depth for.
+     * @returns The depth of the node.
+     */
+    function getNodeDepth(nodeId: string): number {
+        if (nodeDepths.has(nodeId)) {
+            return nodeDepths.get(nodeId)!;
+        }
+
+        let depth = 0;
         let currentNodeId: string | undefined = nodeId;
         while (currentNodeId) {
             const parentNodeId = childToParentMap.get(currentNodeId);
             if (parentNodeId) {
-                if (tempChecked.has(parentNodeId)) {
-                    // If the parent node is currently checked, but not all child nodes are checked,
-                    // move the parent node to an indeterminate state
-                    if (!areAllDescendantsChecked(parentNodeId)) {
-                        tempChecked.delete(parentNodeId);
-                        tempIndeterminate.add(parentNodeId);
-                    }
-                } else if (tempIndeterminate.has(parentNodeId)) {
-                    // If the parent node is currently in an indeterminate state,
-                    // then check if all descendants are checked
-                    if (areAllDescendantsChecked(parentNodeId)) {
-                        tempIndeterminate.delete(parentNodeId);
-                        tempChecked.add(parentNodeId);
-                    } else if (!areAnyDescendantsChecked(parentNodeId)) {
-                        // If no descendants are checked, remove from indeterminate set
-                        tempIndeterminate.delete(parentNodeId);
-                    }
-                } else {
-                    // If the parent node is not checked or indeterminate,
-                    // check if any descendants are checked and update appropriately
-                    if (areAnyDescendantsChecked(parentNodeId)) {
-                        tempIndeterminate.add(parentNodeId);
-                    }
-                }
+                depth++;
+                currentNodeId = parentNodeId;
+            } else {
+                break;
+            }
+        }
+
+        nodeDepths.set(nodeId, depth);
+        return depth;
+    }
+
+    /**
+     * Function to update the state of a node based on its children's states.
+     * @param nodeId - The ID of the node to update.
+     */
+    function updateNodeState(nodeId: string) {
+        const node = nodeMap.get(nodeId);
+        if (!node || !node.children || node.children.length === 0) {
+            // Leaf nodes are already updated.
+            return;
+        }
+
+        let allChildrenChecked = true;
+        let anyChildCheckedOrIndeterminate = false;
+
+        for (const child of node.children) {
+            const isChecked = tempChecked.has(child.id);
+            const isIndeterminate = tempIndeterminate.has(child.id);
+
+            if (isChecked) {
+                anyChildCheckedOrIndeterminate = true;
+            } else if (isIndeterminate) {
+                anyChildCheckedOrIndeterminate = true;
+                allChildrenChecked = false;
+            } else {
+                allChildrenChecked = false;
+            }
+
+            // If both conditions are met, we can break early.
+            if (!allChildrenChecked && anyChildCheckedOrIndeterminate) {
+                break;
             }
-            currentNodeId = parentNodeId;
+        }
+
+        if (allChildrenChecked) {
+            tempChecked.add(nodeId);
+            tempIndeterminate.delete(nodeId);
+        } else if (anyChildCheckedOrIndeterminate) {
+            tempChecked.delete(nodeId);
+            tempIndeterminate.add(nodeId);
+        } else {
+            tempChecked.delete(nodeId);
+            tempIndeterminate.delete(nodeId);
         }
     }