react-native-tree-multi-select 0.5.0

package/src/helpers/toggleCheckbox.helper.ts

@@ -0,0 +1,144 @@
+import { childToParentMap, nodeMap, state } from "../signals/global.signals";
+
+/**
+ * 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. 
+ * If not provided, the check state will be toggled based on the current state.
+ */
+export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
+    // 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);
+
+    // Maps for memoization of the recursive functions areAllDescendantsChecked and areAnyDescendantsChecked.
+    const memoAllDescendantsChecked = new Map();
+    const memoAnyDescendantsChecked = new Map();
+
+    /**
+     * Recursive function to check/uncheck a node and all its children.
+     * @param {string} nodeId - The id of the node to be checked or unchecked.
+     * @param {boolean} isChecked - Whether the node should be checked or unchecked.
+     */
+    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);
+        } else {
+            checked.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);
+        node?.children?.forEach((childNode) => {
+            if (isChecked) indeterminate.delete(childNode.id);
+            toggleNodeAndChildren(childNode.id, isChecked);
+        });
+    };
+
+    /**
+     * 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.value.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 = checked.has(nodeId);
+        }
+
+        // Store the result in the map and return it.
+        memoAllDescendantsChecked.set(nodeId, allChecked);
+        return allChecked;
+    };
+
+    /**
+     * Recursive function to check if any 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 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.value.get(nodeId);
+        let anyChecked = false;
+        if (node?.children) {
+            // If the node has children, recursively check all children.
+            for (const childNode of node.children) {
+                anyChecked = anyChecked || areAnyDescendantsChecked(childNode.id);
+            }
+        } else {
+            // If the node has no children, its state is equal to whether it is in the checked set.
+            anyChecked = checked.has(nodeId);
+        }
+
+        // Store the result in the map and return it.
+        memoAnyDescendantsChecked.set(nodeId, anyChecked);
+        return anyChecked;
+    };
+
+    /**
+     * Function to update the indeterminate and checked state of a node and its ancestors.
+     * @param {string} nodeId - The id of the node to be updated.
+     */
+    const updateNodeAndAncestorsState = (nodeId: string) => {
+        const node = nodeMap.value.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);
+        } 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);
+            } else {
+                checked.delete(nodeId);
+                indeterminate.add(nodeId);
+            }
+        } else {
+            checked.delete(nodeId);
+            indeterminate.delete(nodeId);
+        }
+    };
+
+    // Toggle the clicked nodes and their children.
+    ids.forEach((id) => {
+        const isChecked = checked.has(id);
+        toggleNodeAndChildren(id, forceCheck === undefined ? !isChecked : forceCheck);
+    });
+
+    // Update the state of all affected nodes.
+    ids.forEach((id) => {
+        let currentNodeId: string | undefined = id;
+        while (currentNodeId) {
+            updateNodeAndAncestorsState(currentNodeId);
+            currentNodeId = childToParentMap.value.get(currentNodeId);
+        }
+    });
+
+    // Update the state object with the new checked and indeterminate sets.
+    state.value = ({ checked, indeterminate });
+};

package/src/index.tsx

@@ -0,0 +1,22 @@
+import type {
+    TreeNode,
+    TreeViewProps,
+    TreeViewRef,
+    TreeFlatListProps,
+    ExpandIconProps,
+    CheckBoxViewProps,
+    CheckBoxViewStyleProps
+} from "./types/treeView.types";
+
+export * from "./TreeView";
+export * from "./components/CheckboxView";
+
+export type {
+    TreeNode,
+    TreeViewProps,
+    TreeViewRef,
+    TreeFlatListProps,
+    ExpandIconProps,
+    CheckBoxViewProps,
+    CheckBoxViewStyleProps
+};

package/src/signals/global.signals.ts

@@ -0,0 +1,36 @@
+import { signal } from "@preact/signals-react";
+import type { TreeNode, __CheckBoxState__ } from "src/types/treeView.types";
+
+export const state = signal<__CheckBoxState__>({
+    checked: new Set(),
+    indeterminate: new Set(),
+});
+export const expanded = signal(new Set<string>());
+
+export const globalData = signal<TreeNode[]>([]);
+
+export const nodeMap = signal(new Map<string, TreeNode>());
+export const childToParentMap = signal(new Map<string, string>());
+
+export const searchText = signal("");
+export const searchKeys = signal<string[]>([""]);
+
+export const innerMostChildrenIds = signal<string[]>([]);
+
+export function cleanUpGlobalSignals() {
+    state.value = ({
+        checked: new Set(),
+        indeterminate: new Set(),
+    });
+    expanded.value = new Set<string>();
+
+    globalData.value = [];
+
+    nodeMap.value = new Map<string, TreeNode>();
+    childToParentMap.value = new Map<string, string>();
+
+    searchText.value = "";
+    searchKeys.value = [];
+
+    innerMostChildrenIds.value = [];
+}

package/src/types/treeView.types.ts

@@ -0,0 +1,86 @@
+import type { StyleProp, TextProps, TouchableOpacityProps, ViewStyle } from "react-native";
+import type { FlashListProps } from "@shopify/flash-list";
+import {
+    type Props as RNPaperCheckboxAndroidProps
+} from 'react-native-paper/src/components/Checkbox/CheckboxAndroid';
+
+export type CheckboxValueType = boolean | 'indeterminate';
+
+export interface ExpandIconProps {
+    isExpanded: boolean;
+}
+
+export type __CheckBoxState__ = {
+    checked: Set<string>;
+    indeterminate: Set<string>;
+};
+
+export interface TreeNode {
+    id: string;
+    name: string;
+    children?: TreeNode[];
+    [key: string]: any;
+}
+
+export interface __FlattenedTreeNode__ {
+    id: string;
+    name: string;
+    children?: TreeNode[];
+    level?: number;
+    [key: string]: any;
+}
+
+export type TreeFlatListProps<ItemT = any> = Omit<
+    FlashListProps<ItemT>,
+    "data"
+    | "renderItem"
+    | "keyExtractor"
+>;
+
+export interface TreeViewProps {
+    data: TreeNode[];
+
+    onCheck?: (checkedIds: string[]) => void;
+    onExpand?: (expandedIds: string[]) => void;
+
+    preselectedIds?: string[],
+
+    treeFlashListProps?: TreeFlatListProps;
+    checkBoxViewStyleProps?: CheckBoxViewStyleProps;
+
+    CheckboxComponent?: React.ComponentType<CheckBoxViewProps>;
+    ExpandCollapseIconComponent?: React.ComponentType<ExpandIconProps>;
+    ExpandCollapseTouchableComponent?: React.ComponentType<TouchableOpacityProps>;
+}
+
+type CheckboxProps = Omit<RNPaperCheckboxAndroidProps, "onPress" | "status">;
+
+export interface CheckBoxViewProps extends CheckBoxViewStyleProps {
+    value: CheckboxValueType;
+    onValueChange: (value: boolean) => void;
+    text: string;
+}
+
+export interface CheckBoxViewStyleProps {
+    // Optional style modifiers
+    outermostParentViewStyle?: StyleProp<ViewStyle> | {};
+    checkboxParentViewStyle?: StyleProp<ViewStyle> | {};
+    textTouchableStyle?: StyleProp<ViewStyle> | {};
+
+    // Optional checkbox and text component props
+    checkboxProps?: CheckboxProps;
+    textProps?: TextProps;
+}
+
+export interface TreeViewRef {
+    selectAll: () => void;
+    unselectAll: () => void;
+
+    selectAllFiltered: () => void;
+    unselectAllFiltered: () => void;
+
+    expandAll: () => void;
+    collapseAll: () => void;
+
+    setSearchText: (searchText: string, searchKeys?: string[]) => void;
+}