react-native-tree-multi-select 1.5.1 → 1.6.0

package/src/helpers/expandCollapse.helper.ts

@@ -1,4 +1,4 @@
-import { useTreeViewStore } from "../store/treeView.store";
+import { getTreeViewStore } from "../store/treeView.store";
 
 /**
  * Toggle the expanded state of a tree node by its ID.
@@ -8,12 +8,13 @@ import { useTreeViewStore } from "../store/treeView.store";
  *
  * @param id - The ID of the tree node to toggle.
  */
-export function handleToggleExpand(id: string) {
+export function handleToggleExpand(storeId: string, id: string) {
+    const treeViewStore = getTreeViewStore(storeId);
     const {
         expanded,
         updateExpanded,
         nodeMap
-    } = useTreeViewStore.getState();
+    } = treeViewStore.getState();
 
     // Create a new Set based on the current expanded state
     const newExpanded = new Set(expanded);
@@ -48,8 +49,9 @@ export function handleToggleExpand(id: string) {
 /**
  * Expand all nodes in the tree.
  */
-export function expandAll() {
-    const { nodeMap, updateExpanded } = useTreeViewStore.getState();
+export function expandAll(storeId: string) {
+    const treeViewStore = getTreeViewStore(storeId);
+    const { nodeMap, updateExpanded } = treeViewStore.getState();
     // Create a new Set containing the IDs of all nodes
     const newExpanded = new Set(nodeMap.keys());
     updateExpanded(newExpanded);
@@ -58,8 +60,9 @@ export function expandAll() {
 /**
  * Collapse all nodes in the tree.
  */
-export function collapseAll() {
-    const { updateExpanded } = useTreeViewStore.getState();
+export function collapseAll(storeId: string) {
+    const treeViewStore = getTreeViewStore(storeId);
+    const { updateExpanded } = treeViewStore.getState();
     // Clear the expanded state
     updateExpanded(new Set<string>());
 }
@@ -69,8 +72,9 @@ export function collapseAll() {
  * its ancestors up to the root.
  * @param ids - Ids of nodes to expand.
  */
-export function expandNodes(ids: string[]) {
-    const { expanded, updateExpanded, childToParentMap } = useTreeViewStore.getState();
+export function expandNodes(storeId: string, ids: string[]) {
+    const treeViewStore = getTreeViewStore(storeId);
+    const { expanded, updateExpanded, childToParentMap } = treeViewStore.getState();
     const newExpanded = new Set(expanded);
     const processedIds = new Set<string>();
 
@@ -91,8 +95,9 @@ export function expandNodes(ids: string[]) {
  * its descendants.
  * @param ids - Ids of nodes to collapse.
  */
-export function collapseNodes(ids: string[]) {
-    const { expanded, updateExpanded, nodeMap } = useTreeViewStore.getState();
+export function collapseNodes(storeId: string, ids: string[]) {
+    const treeViewStore = getTreeViewStore(storeId);
+    const { expanded, updateExpanded, nodeMap } = treeViewStore.getState();
     const newExpanded = new Set(expanded);
 
     // Use an iterative approach to remove all descendants from the expanded set

package/src/helpers/selectAll.helper.ts

@@ -1,5 +1,5 @@
 import { TreeNode } from "../types/treeView.types";
-import { useTreeViewStore } from "../store/treeView.store";
+import { getTreeViewStore } from "../store/treeView.store";
 import { toggleCheckboxes } from "./toggleCheckbox.helper";
 
 /**
@@ -7,16 +7,16 @@ 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 } = useTreeViewStore.getState();
-
+export function selectAllFiltered(storeId: string) {
+    const treeViewStore = getTreeViewStore(storeId);
+    const { searchText, innerMostChildrenIds } = treeViewStore.getState();
 
     // If there's no search text, select all nodes
     if (!searchText) {
-        selectAll();
+        selectAll(storeId);
     } else {
         // If there's search text, only select the visible nodes
-        toggleCheckboxes(innerMostChildrenIds, true);
+        toggleCheckboxes(storeId, innerMostChildrenIds, true);
     }
 };
 
@@ -25,15 +25,16 @@ 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 } = useTreeViewStore.getState();
+export function unselectAllFiltered(storeId: string) {
+    const treeViewStore = getTreeViewStore(storeId);
+    const { searchText, innerMostChildrenIds } = treeViewStore.getState();
 
     // If there's no search text, unselect all nodes
     if (!searchText) {
-        unselectAll();
+        unselectAll(storeId);
     } else {
         // If there's search text, only unselect the visible nodes
-        toggleCheckboxes(innerMostChildrenIds, false);
+        toggleCheckboxes(storeId, innerMostChildrenIds, false);
     }
 };
 
@@ -42,12 +43,13 @@ 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() {
+export function selectAll(storeId: string) {
+    const treeViewStore = getTreeViewStore(storeId);
     const {
         nodeMap,
         updateChecked,
         updateIndeterminate
-    } = useTreeViewStore.getState();
+    } = treeViewStore.getState();
 
     // Create a new set containing the ids of all nodes
     const newChecked = new Set(nodeMap.keys());
@@ -62,8 +64,9 @@ export function selectAll() {
  * 
  * This function unselects all nodes by clearing both the checked and indeterminate sets.
  */
-export function unselectAll() {
-    const { updateChecked, updateIndeterminate } = useTreeViewStore.getState();
+export function unselectAll(storeId: string) {
+    const treeViewStore = getTreeViewStore(storeId);
+    const { updateChecked, updateIndeterminate } = treeViewStore.getState();
     // Update the state to mark all nodes as unchecked
 
     updateChecked(new Set());

package/src/helpers/toggleCheckbox.helper.ts

@@ -1,4 +1,4 @@
-import { useTreeViewStore } from "../store/treeView.store";
+import { getTreeViewStore } from "../store/treeView.store";
 
 /**
  * Function to toggle checkbox state for a tree structure.
@@ -7,7 +7,12 @@ import { useTreeViewStore } from "../store/treeView.store";
  * @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) {
+export function toggleCheckboxes(
+    storeId: string,
+    ids: string[],
+    forceCheck?: boolean
+) {
+    const treeViewStore = getTreeViewStore(storeId);
     const {
         checked,
         updateChecked,
@@ -18,7 +23,7 @@ export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
         nodeMap,
         childToParentMap,
         selectionPropagation
-    } = useTreeViewStore.getState();
+    } = treeViewStore.getState();
 
     const { toChildren, toParents } = selectionPropagation;
 

package/src/helpers/treeNode.helper.ts

@@ -1,6 +1,6 @@
 import type { TreeNode } from "../types/treeView.types";
 import {
-    useTreeViewStore
+    getTreeViewStore,
 } from "../store/treeView.store";
 
 /**
@@ -12,11 +12,12 @@ import {
  * @param initialData - An array of TreeNode objects that represent the initial tree structure.
  * @param preselectedIds - An optional array of TreeNode IDs that should be preselected.
  */
-export function initializeNodeMaps(initialData: TreeNode[]) {
+export function initializeNodeMaps(storeId: string, initialData: TreeNode[]) {
+    const treeViewStore = getTreeViewStore(storeId);
     const {
         updateNodeMap,
         updateChildToParentMap
-    } = useTreeViewStore.getState();
+    } = treeViewStore.getState();
 
     const tempNodeMap: Map<string, TreeNode> = new Map();;
     const tempChildToParentMap: Map<string, string> = new Map();;

package/src/store/treeView.store.ts

@@ -1,6 +1,5 @@
 import type { SelectionPropagation, TreeNode } from "src/types/treeView.types";
-
-import { create } from 'zustand';
+import { create, StoreApi, UseBoundStore } from 'zustand';
 
 export type TreeViewState = {
     // Store ids of checked tree nodes
@@ -48,58 +47,74 @@ export type TreeViewState = {
     cleanUpTreeViewStore: () => void;
 };
 
-export const useTreeViewStore = create<TreeViewState>((set) => ({
-    checked: new Set(),
-    updateChecked: (checked: Set<string>) => set({ checked }),
-
-    indeterminate: new Set(),
-    updateIndeterminate: (indeterminate: Set<string>) => set({ indeterminate }),
-
-    expanded: new Set<string>(),
-    updateExpanded: (expanded: Set<string>) => set({ expanded }),
-
-    initialTreeViewData: [],
-    updateInitialTreeViewData: (initialTreeViewData: TreeNode[]) => set({
-        initialTreeViewData
-    }),
-
-    nodeMap: new Map<string, TreeNode>(),
-    updateNodeMap: (nodeMap: Map<string, TreeNode>) => set({ nodeMap }),
-
-    childToParentMap: new Map<string, string>(),
-    updateChildToParentMap: (childToParentMap: Map<string, string>) => set({ childToParentMap }),
-
-    searchText: "",
-    updateSearchText: (searchText: string) => set({ searchText }),
-
-    searchKeys: [""],
-    updateSearchKeys: (searchKeys: string[]) => set({ searchKeys }),
-
-    innerMostChildrenIds: [],
-    updateInnerMostChildrenIds: (innerMostChildrenIds: string[]) => set({ innerMostChildrenIds }),
-
-    selectionPropagation: { toChildren: true, toParents: true },
-    setSelectionPropagation: (selectionPropagation) => set(
-        {
-            selectionPropagation: {
-                // Default selection propagation for parent and children to true if not mentioned
-                toChildren: selectionPropagation.toChildren ?? true,
-                toParents: selectionPropagation.toParents ?? true
-            }
-        }
-    ),
+// Map to store individual tree view stores by id
+const treeViewStores = new Map<string, UseBoundStore<StoreApi<TreeViewState>>>();
 
-    cleanUpTreeViewStore: () =>
-        set({
+export function getTreeViewStore(id: string): UseBoundStore<StoreApi<TreeViewState>> {
+    if (!treeViewStores.has(id)) {
+        const store = create<TreeViewState>((set) => ({
             checked: new Set(),
+            updateChecked: (checked: Set<string>) => set({ checked }),
+
             indeterminate: new Set(),
+            updateIndeterminate: (indeterminate: Set<string>) => set({ indeterminate }),
+
             expanded: new Set<string>(),
+            updateExpanded: (expanded: Set<string>) => set({ expanded }),
+
             initialTreeViewData: [],
+            updateInitialTreeViewData: (initialTreeViewData: TreeNode[]) => set({
+                initialTreeViewData
+            }),
+
             nodeMap: new Map<string, TreeNode>(),
+            updateNodeMap: (nodeMap: Map<string, TreeNode>) => set({ nodeMap }),
+
             childToParentMap: new Map<string, string>(),
+            updateChildToParentMap: (childToParentMap: Map<string, string>) => set({
+                childToParentMap
+            }),
+
             searchText: "",
+            updateSearchText: (searchText: string) => set({ searchText }),
+
             searchKeys: [""],
+            updateSearchKeys: (searchKeys: string[]) => set({ searchKeys }),
+
             innerMostChildrenIds: [],
+            updateInnerMostChildrenIds: (innerMostChildrenIds: string[]) => set({
+                innerMostChildrenIds
+            }),
+
             selectionPropagation: { toChildren: true, toParents: true },
-        }),
-}));
+            setSelectionPropagation: (selectionPropagation) => set({
+                selectionPropagation: {
+                    // Default selection propagation for parent and children to true if not specified
+                    toChildren: selectionPropagation.toChildren ?? true,
+                    toParents: selectionPropagation.toParents ?? true
+                }
+            }),
+
+            cleanUpTreeViewStore: () =>
+                set({
+                    checked: new Set(),
+                    indeterminate: new Set(),
+                    expanded: new Set<string>(),
+                    initialTreeViewData: [],
+                    nodeMap: new Map<string, TreeNode>(),
+                    childToParentMap: new Map<string, string>(),
+                    searchText: "",
+                    searchKeys: [""],
+                    innerMostChildrenIds: [],
+                    selectionPropagation: { toChildren: true, toParents: true },
+                }),
+        }));
+
+        treeViewStores.set(id, store);
+    }
+    return treeViewStores.get(id)!;
+}
+
+export function useTreeViewStore(id: string) {
+    return getTreeViewStore(id);
+}

package/src/types/treeView.types.ts

@@ -59,13 +59,15 @@ export interface TreeItemCustomizations {
 export interface NodeProps extends TreeItemCustomizations {
     node: __FlattenedTreeNode__;
     level: number;
+    storeId: string;
 }
 
 export interface NodeListProps extends TreeItemCustomizations {
     treeFlashListProps?: TreeFlatListProps;
+    storeId: string;
 }
 
-export interface TreeViewProps extends NodeListProps {
+export interface TreeViewProps extends Omit<NodeListProps, "storeId"> {
     data: TreeNode[];
 
     onCheck?: (checkedIds: string[], indeterminateIds: string[]) => void;