react-native-tree-multi-select 0.5.3 → 0.8.3

package/src/components/NodeList.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
     View,
     StyleSheet,
@@ -6,13 +6,6 @@ import {
     TouchableOpacity,
     type TouchableOpacityProps,
 } from "react-native";
-import {
-    computed,
-    effect,
-    Signal,
-    useComputed,
-    useSignal
-} from "@preact/signals-react";
 import { FlashList } from "@shopify/flash-list";
 
 import type {
@@ -26,14 +19,7 @@ import type {
     __FlattenedTreeNode__,
 } from "../types/treeView.types";
 
-import {
-    expanded,
-    globalData,
-    innerMostChildrenIds,
-    searchKeys,
-    searchText,
-    state
-} from "../signals/global.signals";
+import { useStore } from "../store/global.store";
 import {
     doesNodeContainSearchTerm,
     handleToggleExpand,
@@ -64,74 +50,80 @@ function _NodeList(props: NodeListProps) {
         ExpandCollapseTouchableComponent,
     } = props;
 
-    const filteredTree = React.useMemo(() => {
-        return computed(() => {
-            const searchTrimmed = searchText.value.trim().toLowerCase();
-
-            const filterTreeData = (_nodes: TreeNode[]): TreeNode[] => {
-                let filtered: TreeNode[] = [];
-
-                for (let node of _nodes) {
-                    if (!searchTrimmed || doesNodeContainSearchTerm(node, searchTrimmed, searchKeys.value)) {
-                        // If node itself matches, include it and all its descendants
-                        filtered.push(node);
-                    } else if (node.children) {
-                        // If node does not match, check its children and include them if they match
-                        const childMatches = filterTreeData(node.children);
-                        if (childMatches.length > 0) {
-                            // If any children match, include the node, replacing its children with the matching ones
-                            filtered.push({ ...node, children: childMatches });
-                        }
+    const {
+        expanded,
+        globalData,
+        updatedInnerMostChildrenIds,
+        searchKeys,
+        searchText
+    } = useStore();
+
+    const [filteredTree, setFilteredTree] = useState<TreeNode[]>([]);
+    const [flattenedFilteredNodes, setFlattenedFilteredNodes]
+        = useState<__FlattenedTreeNode__[]>([]);
+
+    useEffect(() => {
+        const searchTrimmed = searchText.trim().toLowerCase();
+
+        const filterTreeData = (_nodes: TreeNode[]): TreeNode[] => {
+            let filtered: TreeNode[] = [];
+
+            for (let node of _nodes) {
+                if (!searchTrimmed || doesNodeContainSearchTerm(node, searchTrimmed, searchKeys)) {
+                    // If node itself matches, include it and all its descendants
+                    filtered.push(node);
+                } else if (node.children) {
+                    // If node does not match, check its children and include them if they match
+                    const childMatches = filterTreeData(node.children);
+                    if (childMatches.length > 0) {
+                        // If any children match, include the node, replacing its children with the matching ones
+                        filtered.push({ ...node, children: childMatches });
                     }
                 }
+            }
 
-                return filtered;
-            };
-
-            return filterTreeData(globalData.value);
-        });
-    }, []);
-
-    const flattenedFilteredNodes = React.useMemo(() => {
-        return computed(() => {
-            const flattenTreeData = (
-                _nodes: TreeNode[],
-                level: number = 0,
-            ): __FlattenedTreeNode__[] => {
-                let flattened: __FlattenedTreeNode__[] = [];
-                for (let node of _nodes) {
-                    flattened.push({ ...node, level });
-                    if (node.children && expanded.value.has(node.id)) {
-                        flattened = [...flattened, ...flattenTreeData(node.children, level + 1)];
-                    }
-                }
-                return flattened;
-            };
+            return filtered;
+        };
 
-            return flattenTreeData(filteredTree.value);
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        const tempFilterTree = filterTreeData(globalData);
+        setFilteredTree(tempFilterTree);
+    }, [searchText, searchKeys, globalData]);
 
     React.useEffect(() => {
-        effect(() => {
-            const allLeafIds: string[] = [];
-            const getLeafNodes = (_nodes: TreeNode[]) => {
-                for (let node of _nodes) {
-                    if (node.children) {
-                        getLeafNodes(node.children);
-                    } else {
-                        allLeafIds.push(node.id);
-                    }
+        const flattenTreeData = (
+            _nodes: TreeNode[],
+            level: number = 0,
+        ): __FlattenedTreeNode__[] => {
+            let flattened: __FlattenedTreeNode__[] = [];
+            for (let node of _nodes) {
+                flattened.push({ ...node, level });
+                if (node.children && expanded.has(node.id)) {
+                    flattened = [...flattened, ...flattenTreeData(node.children, level + 1)];
                 }
-            };
+            }
+            return flattened;
+        };
+
+        const tempFlattenTreeData = flattenTreeData(filteredTree);
+        setFlattenedFilteredNodes(tempFlattenTreeData);
+    }, [filteredTree, expanded]);
+
+    useEffect(() => {
+        const allLeafIds: string[] = [];
+        const getLeafNodes = (_nodes: TreeNode[]) => {
+            for (let node of _nodes) {
+                if (node.children) {
+                    getLeafNodes(node.children);
+                } else {
+                    allLeafIds.push(node.id);
+                }
+            }
+        };
 
-            getLeafNodes(filteredTree.value);
+        getLeafNodes(filteredTree);
 
-            innerMostChildrenIds.value = allLeafIds;
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        updatedInnerMostChildrenIds(allLeafIds);
+    }, [filteredTree, updatedInnerMostChildrenIds]);
 
     const nodeRenderer = React.useCallback((
         { item }: { item: __FlattenedTreeNode__; }
@@ -140,6 +132,7 @@ function _NodeList(props: NodeListProps) {
             <Node
                 node={item}
                 level={item.level || 0}
+
                 checkBoxViewStyleProps={checkBoxViewStyleProps}
 
                 CheckboxComponent={CheckboxComponent}
@@ -162,7 +155,7 @@ function _NodeList(props: NodeListProps) {
             removeClippedSubviews={true}
             keyboardShouldPersistTaps="handled"
             drawDistance={50}
-            data={flattenedFilteredNodes.value}
+            data={flattenedFilteredNodes}
             renderItem={nodeRenderer}
             keyExtractor={keyExtractor}
             ListHeaderComponent={<HeaderFooterView />}
@@ -189,10 +182,23 @@ interface NodeProps {
     ExpandCollapseTouchableComponent?: React.ComponentType<TouchableOpacityProps>;
 }
 
+function getValue(
+    isChecked: boolean,
+    isIndeterminate: boolean
+): CheckboxValueType {
+    if (isIndeterminate) {
+        return 'indeterminate';
+    } else if (isChecked) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
 const Node = React.memo(_Node);
 function _Node(props: NodeProps) {
     const {
-        node: _node,
+        node,
         level,
 
         checkBoxViewStyleProps,
@@ -202,36 +208,25 @@ function _Node(props: NodeProps) {
         ExpandCollapseTouchableComponent = TouchableOpacity,
     } = props;
 
-    const node = useSignal(_node);
-    React.useEffect(() => {
-        node.value = _node;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [_node]);
-
-    const isChecked = useComputed(() => state.value.checked.has(node.value.id));
-    const isIndeterminate = useComputed(() => state.value.indeterminate.has(
-        node.value.id
-    ));
-    const value: Signal<CheckboxValueType> = useComputed(() => {
-        if (isIndeterminate.value) {
-            return 'indeterminate';
-        } else if (isChecked.value) {
-            return true;
-        } else {
-            return false;
-        }
-    });
-    const isExpanded = useComputed(() => expanded.value.has(node.value.id));
+    const { expanded, checked, indeterminate } = useStore();
+
+    const isChecked = checked.has(node.id);
+    const isIndeterminate = indeterminate.has(node.id);
+    const isExpanded = expanded.has(node.id);
+
+    const [value, setValue] = useState(getValue(isChecked, isIndeterminate));
+
+    useEffect(() => {
+        setValue(getValue(isChecked, isIndeterminate));
+    }, [isChecked, isIndeterminate]);
 
     const _onToggleExpand = React.useCallback(() => {
-        handleToggleExpand(node.value.id);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        handleToggleExpand(node.id);
+    }, [node.id]);
 
     const _onCheck = React.useCallback(() => {
-        toggleCheckboxes([node.value.id]);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        toggleCheckboxes([node.id]);
+    }, [node.id]);
 
     return (
         <View style={[
@@ -240,17 +235,17 @@ function _Node(props: NodeProps) {
         ]}>
             <View style={styles.nodeCheckboxAndArrowRow}>
                 <CheckboxComponent
-                    text={node.value.name}
+                    text={node.name}
                     onValueChange={_onCheck}
-                    value={value.value}
+                    value={value}
                     {...checkBoxViewStyleProps} />
 
-                {node.value.children?.length ? (
+                {node.children?.length ? (
                     <ExpandCollapseTouchableComponent
                         style={styles.nodeExpandableArrowTouchable}
                         onPress={_onToggleExpand}>
                         <ExpandCollapseIconComponent
-                            isExpanded={isExpanded.value}
+                            isExpanded={isExpanded}
                         />
                     </ExpandCollapseTouchableComponent>
                 ) : null}

package/src/helpers/expandCollapse.helper.ts

@@ -1,9 +1,5 @@
 import { TreeNode } from "../types/treeView.types";
-import {
-    expanded,
-    globalData,
-    nodeMap
-} from "../signals/global.signals";
+import { useStore } from "../store/global.store";
 
 /**
  * Toggle the expanded state of a tree node by its ID.
@@ -14,8 +10,10 @@ import {
  * @param id - The ID of the tree node to toggle.
  */
 export function handleToggleExpand(id: string) {
+    const { globalData, expanded, updateExpanded } = useStore.getState();
+
     // Create a new Set based on the current expanded state
-    const newExpanded = new Set(expanded.value);
+    const newExpanded = new Set(expanded);
 
     /**
      * Recursively deletes a node and its descendants from the expanded set.
@@ -52,9 +50,9 @@ export function handleToggleExpand(id: string) {
     }
 
     // Find the node to expand or collapse
-    const node = findNode(globalData.value);
+    const node = findNode(globalData);
 
-    if (expanded.value.has(id)) {
+    if (expanded.has(id)) {
         // If the node is currently expanded, collapse it and its descendants
         newExpanded.delete(id);
         if (node) {
@@ -66,23 +64,25 @@ export function handleToggleExpand(id: string) {
     }
 
     // Set the new expanded state
-    expanded.value = newExpanded;
+    updateExpanded(newExpanded);
 };
 
 /**
  * Expand all nodes in the tree.
  */
 export function expandAll() {
+    const { nodeMap, updateExpanded } = useStore.getState();
     // Create a new Set containing the IDs of all nodes
-    const newExpanded = new Set(nodeMap.value.keys());
-    expanded.value = newExpanded;
+    const newExpanded = new Set(nodeMap.keys());
+    updateExpanded(newExpanded);
 };
 
 /**
  * Collapse all nodes in the tree.
  */
 export function collapseAll() {
+    const { updateExpanded } = useStore.getState();
     // Create an empty Set
     const newExpanded = new Set<string>();
-    expanded.value = newExpanded;
+    updateExpanded(newExpanded);
 };

package/src/helpers/initNodeMap.helper.ts

@@ -1,8 +1,7 @@
 import type { TreeNode } from "../types/treeView.types";
 import {
-    childToParentMap,
-    nodeMap,
-} from "../signals/global.signals";
+    useStore
+} from "../store/global.store";
 import { toggleCheckboxes } from "./toggleCheckbox.helper";
 
 /**
@@ -18,6 +17,14 @@ export function initializeNodeMaps(
     initialData: TreeNode[],
     preselectedIds: string[] = [],
 ) {
+    const {
+        updateNodeMap,
+        updateChildToParentMap
+    } = useStore.getState();
+
+    const tempNodeMap: Map<string, TreeNode> = new Map();;
+    const tempChildToParentMap: Map<string, string> = new Map();;
+
     /**
      * Recursively processes nodes, adding them to the nodeMap and childToParentMap.
      *
@@ -30,9 +37,9 @@ export function initializeNodeMaps(
     ) => {
         nodes.forEach((node) => {
             // Each node is added to the nodeMap with its ID as the key
-            nodeMap.value.set(node.id, node);
+            tempNodeMap.set(node.id, node);
             // If the node has a parent, its ID is mapped to the parent's ID in the childToParentMap
-            if (parentId) childToParentMap.value.set(node.id, parentId);
+            if (parentId) tempChildToParentMap.set(node.id, parentId);
             // If the node has children, recursively process them
             if (node.children) processNodes(node.children, node.id);
         });
@@ -41,6 +48,9 @@ export function initializeNodeMaps(
     // Begin processing with the initial tree data
     processNodes(initialData);
 
+    updateNodeMap(tempNodeMap);
+    updateChildToParentMap(tempChildToParentMap);
+
     // Check any preselected nodes
     toggleCheckboxes(preselectedIds, true);
 }

package/src/helpers/selectAll.helper.ts

@@ -1,9 +1,4 @@
-import {
-    innerMostChildrenIds,
-    nodeMap,
-    searchText,
-    state
-} from "../signals/global.signals";
+import { useStore } from "../store/global.store";
 import { toggleCheckboxes } from "./toggleCheckbox.helper";
 
 /**
@@ -12,12 +7,15 @@ import { toggleCheckboxes } from "./toggleCheckbox.helper";
  * If there is no search text, then it selects all nodes; otherwise, it selects all visible nodes.
  */
 export function selectAllFiltered() {
+    const { searchText, innerMostChildrenIds } = useStore.getState();
+
+
     // If there's no search text, select all nodes
-    if (!searchText.value) {
+    if (!searchText) {
         selectAll();
     } else {
         // If there's search text, only select the visible nodes
-        toggleCheckboxes(innerMostChildrenIds.value, true);
+        toggleCheckboxes(innerMostChildrenIds, true);
     }
 };
 
@@ -27,12 +25,14 @@ export function selectAllFiltered() {
  * If there is no search text, then it unselects all nodes; otherwise, it unselects all visible nodes.
  */
 export function unselectAllFiltered() {
+    const { searchText, innerMostChildrenIds } = useStore.getState();
+
     // If there's no search text, unselect all nodes
-    if (!searchText.value) {
+    if (!searchText) {
         unselectAll();
     } else {
         // If there's search text, only unselect the visible nodes
-        toggleCheckboxes(innerMostChildrenIds.value, false);
+        toggleCheckboxes(innerMostChildrenIds, false);
     }
 };
 
@@ -42,10 +42,14 @@ export function unselectAllFiltered() {
  * This function selects all nodes by adding all node ids to the checked set and clearing the indeterminate set.
  */
 export function selectAll() {
+    const { nodeMap, updateChecked, updateIndeterminate } = useStore.getState();
+
     // Create a new set containing the ids of all nodes
-    const newChecked = new Set(nodeMap.value.keys());
+    const newChecked = new Set(nodeMap.keys());
     // Update the state to mark all nodes as checked
-    state.value = ({ checked: newChecked, indeterminate: new Set() });
+
+    updateChecked(newChecked);
+    updateIndeterminate(new Set());
 };
 
 /**
@@ -54,6 +58,9 @@ export function selectAll() {
  * This function unselects all nodes by clearing both the checked and indeterminate sets.
  */
 export function unselectAll() {
+    const { updateChecked, updateIndeterminate } = useStore.getState();
     // Update the state to mark all nodes as unchecked
-    state.value = ({ checked: new Set(), indeterminate: new Set() });
+
+    updateChecked(new Set());
+    updateIndeterminate(new Set());
 };

package/src/helpers/toggleCheckbox.helper.ts

@@ -1,4 +1,4 @@
-import { childToParentMap, nodeMap, state } from "../signals/global.signals";
+import { useStore } from "../store/global.store";
 
 /**
  * Function to toggle checkbox state for a tree structure.
@@ -8,9 +8,20 @@ import { childToParentMap, nodeMap, state } from "../signals/global.signals";
  * If not provided, the check state will be toggled based on the current state.
  */
 export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
+    const {
+        checked,
+        updateChecked,
+
+        indeterminate,
+        updateIndeterminate,
+
+        nodeMap,
+        childToParentMap
+    } = useStore.getState();
+
     // Create new sets for checked and indeterminate state so as not to mutate the original state.
-    const checked = new Set(state.value.checked);
-    const indeterminate = new Set(state.value.indeterminate);
+    const tempChecked = new Set(checked);
+    const tempIndeterminate = new Set(indeterminate);
 
     // Maps for memoization of the recursive functions areAllDescendantsChecked and areAnyDescendantsChecked.
     const memoAllDescendantsChecked = new Map();
@@ -24,16 +35,16 @@ export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
     const toggleNodeAndChildren = (nodeId: string, isChecked: boolean) => {
         // Set or unset this node in the checked set, and remove it from the indeterminate set.
         if (isChecked) {
-            checked.add(nodeId);
-            indeterminate.delete(nodeId);
+            tempChecked.add(nodeId);
+            tempIndeterminate.delete(nodeId);
         } else {
-            checked.delete(nodeId);
+            tempChecked.delete(nodeId);
         }
 
         // Get the node from the node map and recursively apply the same state to all its children.
-        const node = nodeMap.value.get(nodeId);
+        const node = nodeMap.get(nodeId);
         node?.children?.forEach((childNode) => {
-            if (isChecked) indeterminate.delete(childNode.id);
+            if (isChecked) tempIndeterminate.delete(childNode.id);
             toggleNodeAndChildren(childNode.id, isChecked);
         });
     };
@@ -50,7 +61,7 @@ export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
             return memoAllDescendantsChecked.get(nodeId);
         }
 
-        const node = nodeMap.value.get(nodeId);
+        const node = nodeMap.get(nodeId);
         let allChecked = true;
         if (node?.children) {
             // If the node has children, recursively check all children.
@@ -59,7 +70,7 @@ export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
             }
         } else {
             // If the node has no children, its state is equal to whether it is in the checked set.
-            allChecked = checked.has(nodeId);
+            allChecked = tempChecked.has(nodeId);
         }
 
         // Store the result in the map and return it.
@@ -79,7 +90,7 @@ export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
             return memoAnyDescendantsChecked.get(nodeId);
         }
 
-        const node = nodeMap.value.get(nodeId);
+        const node = nodeMap.get(nodeId);
         let anyChecked = false;
         if (node?.children) {
             // If the node has children, recursively check all children.
@@ -88,7 +99,7 @@ export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
             }
         } else {
             // If the node has no children, its state is equal to whether it is in the checked set.
-            anyChecked = checked.has(nodeId);
+            anyChecked = tempChecked.has(nodeId);
         }
 
         // Store the result in the map and return it.
@@ -101,32 +112,32 @@ export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
      * @param {string} nodeId - The id of the node to be updated.
      */
     const updateNodeAndAncestorsState = (nodeId: string) => {
-        const node = nodeMap.value.get(nodeId);
+        const node = nodeMap.get(nodeId);
         const hasOnlyOneChild = node?.children && node.children.length === 1;
 
         // Update the node's state based on the state of its descendants.
         if (areAllDescendantsChecked(nodeId)) {
-            checked.add(nodeId);
-            indeterminate.delete(nodeId);
+            tempChecked.add(nodeId);
+            tempIndeterminate.delete(nodeId);
         } else if (areAnyDescendantsChecked(nodeId)) {
             if (hasOnlyOneChild) {
                 // If a node has only one child and it's not checked,
                 // remove this node from both checked and indeterminate sets.
-                checked.delete(nodeId);
-                indeterminate.delete(nodeId);
+                tempChecked.delete(nodeId);
+                tempIndeterminate.delete(nodeId);
             } else {
-                checked.delete(nodeId);
-                indeterminate.add(nodeId);
+                tempChecked.delete(nodeId);
+                tempIndeterminate.add(nodeId);
             }
         } else {
-            checked.delete(nodeId);
-            indeterminate.delete(nodeId);
+            tempChecked.delete(nodeId);
+            tempIndeterminate.delete(nodeId);
         }
     };
 
     // Toggle the clicked nodes and their children.
     ids.forEach((id) => {
-        const isChecked = checked.has(id);
+        const isChecked = tempChecked.has(id);
         toggleNodeAndChildren(id, forceCheck === undefined ? !isChecked : forceCheck);
     });
 
@@ -135,10 +146,11 @@ export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
         let currentNodeId: string | undefined = id;
         while (currentNodeId) {
             updateNodeAndAncestorsState(currentNodeId);
-            currentNodeId = childToParentMap.value.get(currentNodeId);
+            currentNodeId = childToParentMap.get(currentNodeId);
         }
     });
 
     // Update the state object with the new checked and indeterminate sets.
-    state.value = ({ checked, indeterminate });
+    updateChecked(tempChecked);
+    updateIndeterminate(tempIndeterminate);
 };