react-native-tree-multi-select 0.5.0

package/src/components/CheckboxView.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import {
+    Platform,
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View
+} from "react-native";
+
+import { Checkbox } from 'react-native-paper';
+import type {
+    CheckBoxViewProps,
+    CheckboxValueType
+} from "../types/treeView.types";
+
+function arePropsEqual(
+    prevProps: CheckBoxViewProps,
+    nextProps: CheckBoxViewProps
+) {
+    return (
+        prevProps.value === nextProps.value &&
+        prevProps.text === nextProps.text
+    );
+}
+
+export const CheckboxView = React.memo(_CheckboxView, arePropsEqual);
+
+function _CheckboxView(props: CheckBoxViewProps) {
+    const {
+        value,
+        onValueChange,
+        text,
+
+        outermostParentViewStyle = defaultCheckboxViewStyles.mainView,
+        checkboxParentViewStyle = defaultCheckboxViewStyles.checkboxView,
+        textTouchableStyle,
+
+        checkboxProps,
+        textProps = {
+            style: defaultCheckboxViewStyles.checkboxTextStyle,
+            numberOfLines: 1,
+            ellipsizeMode: "middle",
+        },
+    } = props;
+
+    function customCheckboxValueTypeToRNPaperType(
+        customCheckboxValueType: CheckboxValueType
+    ) {
+        return customCheckboxValueType === 'indeterminate'
+            ? 'indeterminate'
+            : customCheckboxValueType
+                ? 'checked'
+                : 'unchecked';
+    }
+
+    /**
+     * This function modifies the change in value when the previous state was indeterminate.
+     * If the prior value is 'indeterminate', it will mark the CheckBox as checked upon click.
+     *
+     * @param newValue This represents the updated CheckBox value after it's clicked.
+     */
+    function onValueChangeModifier() {
+        // If the previous state was 'indeterminate', set checked to true
+        if (value === 'indeterminate') onValueChange(true);
+        else onValueChange(!value);
+    }
+
+    return (
+        <View
+            style={outermostParentViewStyle}>
+            <View
+                style={checkboxParentViewStyle}>
+                <Checkbox.Android
+                    {...checkboxProps}
+                    status={customCheckboxValueTypeToRNPaperType(value)}
+                    onPress={onValueChangeModifier} />
+            </View>
+
+            {text ? (
+                <TouchableOpacity
+                    style={textTouchableStyle}
+                    onPress={onValueChangeModifier}>
+                    <Text
+                        {...textProps}>
+                        {text}
+                    </Text>
+                </TouchableOpacity>
+            ) : null}
+        </View>
+    );
+}
+
+export const defaultCheckboxViewStyles = StyleSheet.create({
+    mainView: {
+        alignSelf: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+
+        marginEnd: 10
+    },
+    checkboxView: {
+        marginStart: 5,
+        transform: [{ scale: 1.2 }]
+    },
+    checkboxTextStyle: {
+        color: "black",
+        marginTop: Platform.OS === 'android' ? 2 : undefined,
+    },
+});

package/src/components/CustomExpandCollapseIcon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+import { ExpandIconProps } from "src/types/treeView.types";
+
+export default function CustomExpandCollapseIcon(props: ExpandIconProps) {
+    const { isExpanded } = props;
+
+    return (
+        <Icon
+            name={
+                isExpanded
+                    ? 'caret-down'
+                    : 'caret-right'
+            }
+            size={20}
+            color="black"
+        />
+    );
+}

package/src/components/NodeList.tsx

@@ -0,0 +1,278 @@
+import React from "react";
+import {
+    View,
+    StyleSheet,
+
+    TouchableOpacity,
+    type TouchableOpacityProps,
+} from "react-native";
+import {
+    computed,
+    effect,
+    Signal,
+    useComputed,
+    useSignal
+} from "@preact/signals-react";
+import { FlashList } from "@shopify/flash-list";
+
+import type {
+    TreeFlatListProps,
+    TreeNode,
+
+    CheckboxValueType,
+    ExpandIconProps,
+    CheckBoxViewStyleProps,
+    CheckBoxViewProps,
+    __FlattenedTreeNode__,
+} from "../types/treeView.types";
+
+import {
+    expanded,
+    globalData,
+    innerMostChildrenIds,
+    searchKeys,
+    searchText,
+    state
+} from "../signals/global.signals";
+import {
+    doesNodeContainSearchTerm,
+    handleToggleExpand,
+    toggleCheckboxes
+} from "../helpers";
+import { CheckboxView } from "./CheckboxView";
+import CustomExpandCollapseIcon from "./CustomExpandCollapseIcon";
+
+interface NodeListProps {
+    treeFlashListProps?: TreeFlatListProps;
+    checkBoxViewStyleProps?: CheckBoxViewStyleProps;
+
+    CheckboxComponent?: React.ComponentType<CheckBoxViewProps>;
+    ExpandCollapseIconComponent?: React.ComponentType<ExpandIconProps>;
+    ExpandCollapseTouchableComponent?: React.ComponentType<TouchableOpacityProps>;
+}
+
+const NodeList = React.memo(_NodeList);
+export default NodeList;
+
+function _NodeList(props: NodeListProps) {
+    const {
+        treeFlashListProps,
+        checkBoxViewStyleProps,
+
+        CheckboxComponent,
+        ExpandCollapseIconComponent,
+        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 });
+                        }
+                    }
+                }
+
+                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 flattenTreeData(filteredTree.value);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    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);
+                    }
+                }
+            };
+
+            getLeafNodes(filteredTree.value);
+
+            innerMostChildrenIds.value = allLeafIds;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const nodeRenderer = React.useCallback((
+        { item }: { item: __FlattenedTreeNode__; }
+    ) => {
+        return (
+            <Node
+                node={item}
+                level={item.level || 0}
+                checkBoxViewStyleProps={checkBoxViewStyleProps}
+
+                CheckboxComponent={CheckboxComponent}
+                ExpandCollapseIconComponent={ExpandCollapseIconComponent}
+                ExpandCollapseTouchableComponent={ExpandCollapseTouchableComponent}
+            />
+        );
+    }, [
+        CheckboxComponent,
+        ExpandCollapseIconComponent,
+        ExpandCollapseTouchableComponent,
+        checkBoxViewStyleProps
+    ]);
+
+    const keyExtractor = React.useCallback((item: TreeNode) => item.id, []);
+
+    return (
+        <FlashList
+            estimatedItemSize={36}
+            removeClippedSubviews={true}
+            keyboardShouldPersistTaps="handled"
+            drawDistance={50}
+            data={flattenedFilteredNodes.value}
+            renderItem={nodeRenderer}
+            keyExtractor={keyExtractor}
+            ListHeaderComponent={<HeaderFooterView />}
+            ListFooterComponent={<HeaderFooterView />}
+            {...treeFlashListProps}
+        />
+    );
+};
+
+function HeaderFooterView() {
+    return (
+        <View style={styles.defaultHeaderFooter} />
+    );
+}
+
+interface NodeProps {
+    node: __FlattenedTreeNode__;
+    level: number;
+
+    checkBoxViewStyleProps?: CheckBoxViewStyleProps;
+
+    ExpandCollapseIconComponent?: React.ComponentType<ExpandIconProps>;
+    CheckboxComponent?: React.ComponentType<CheckBoxViewProps>;
+    ExpandCollapseTouchableComponent?: React.ComponentType<TouchableOpacityProps>;
+}
+
+const Node = React.memo(_Node);
+function _Node(props: NodeProps) {
+    const {
+        node: _node,
+        level,
+
+        checkBoxViewStyleProps,
+
+        ExpandCollapseIconComponent = CustomExpandCollapseIcon,
+        CheckboxComponent = CheckboxView,
+        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 _onToggleExpand = React.useCallback(() => {
+        handleToggleExpand(node.value.id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const _onCheck = React.useCallback(() => {
+        toggleCheckboxes([node.value.id]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <View style={[
+            styles.nodeParentView,
+            { marginLeft: level * 15, }
+        ]}>
+            <View style={styles.nodeCheckboxAndArrowRow}>
+                <CheckboxComponent
+                    text={node.value.name}
+                    onValueChange={_onCheck}
+                    value={value.value}
+                    {...checkBoxViewStyleProps} />
+
+                {node.value.children?.length ? (
+                    <ExpandCollapseTouchableComponent
+                        style={styles.nodeExpandableArrowTouchable}
+                        onPress={_onToggleExpand}>
+                        <ExpandCollapseIconComponent
+                            isExpanded={isExpanded.value}
+                        />
+                    </ExpandCollapseTouchableComponent>
+                ) : null}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    defaultHeaderFooter: {
+        padding: 5
+    },
+    nodeParentView: {
+        flex: 1
+    },
+    nodeExpandableArrowTouchable: {
+        flex: 1
+    },
+    nodeCheckboxAndArrowRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minWidth: "100%",
+    }
+});
+

package/src/helpers/expandCollapse.helper.ts

@@ -0,0 +1,88 @@
+import { TreeNode } from "../types/treeView.types";
+import {
+    expanded,
+    globalData,
+    nodeMap
+} from "../signals/global.signals";
+
+/**
+ * Toggle the expanded state of a tree node by its ID.
+ *
+ * If the node is currently expanded, it and its descendants will be collapsed.
+ * If it is currently collapsed, it will be expanded.
+ *
+ * @param id - The ID of the tree node to toggle.
+ */
+export function handleToggleExpand(id: string) {
+    // Create a new Set based on the current expanded state
+    const newExpanded = new Set(expanded.value);
+
+    /**
+     * 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);
+            }
+        }
+    }
+
+    /**
+     * 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(globalData.value);
+
+    if (expanded.value.has(id)) {
+        // If the node is currently expanded, collapse it and its descendants
+        newExpanded.delete(id);
+        if (node) {
+            deleteChildrenFromExpanded(node);
+        }
+    } else {
+        // If the node is currently collapsed, expand it
+        newExpanded.add(id);
+    }
+
+    // Set the new expanded state
+    expanded.value = newExpanded;
+};
+
+/**
+ * Expand all nodes in the tree.
+ */
+export function expandAll() {
+    // Create a new Set containing the IDs of all nodes
+    const newExpanded = new Set(nodeMap.value.keys());
+    expanded.value = newExpanded;
+};
+
+/**
+ * Collapse all nodes in the tree.
+ */
+export function collapseAll() {
+    // Create an empty Set
+    const newExpanded = new Set<string>();
+    expanded.value = newExpanded;
+};

package/src/helpers/index.ts

@@ -0,0 +1,5 @@
+export * from "./expandCollapse.helper";
+export * from "./initNodeMap.helper";
+export * from "./selectAll.helper";
+export * from "./toggleCheckbox.helper";
+export * from "./search.helper";

package/src/helpers/initNodeMap.helper.ts

@@ -0,0 +1,46 @@
+import type { TreeNode } from "../types/treeView.types";
+import {
+    childToParentMap,
+    nodeMap,
+} from "../signals/global.signals";
+import { toggleCheckboxes } from "./toggleCheckbox.helper";
+
+/**
+ * Initialize the maps for tracking tree nodes and their parent-child relationships.
+ *
+ * This function is intended to be called once, during component initialization, 
+ * with the initial tree data and any preselected node IDs.
+ *
+ * @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[],
+    preselectedIds: string[] = [],
+) {
+    /**
+     * Recursively processes nodes, adding them to the nodeMap and childToParentMap.
+     *
+     * @param nodes - An array of TreeNode objects to be processed.
+     * @param parentId - The ID of the parent node, if applicable.
+     */
+    const processNodes = (
+        nodes: TreeNode[],
+        parentId: string | null = null
+    ) => {
+        nodes.forEach((node) => {
+            // Each node is added to the nodeMap with its ID as the key
+            nodeMap.value.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 the node has children, recursively process them
+            if (node.children) processNodes(node.children, node.id);
+        });
+    };
+
+    // Begin processing with the initial tree data
+    processNodes(initialData);
+
+    // Check any preselected nodes
+    toggleCheckboxes(preselectedIds, true);
+}

package/src/helpers/search.helper.ts

@@ -0,0 +1,28 @@
+import { TreeNode } from "../types/treeView.types";
+
+/**
+ * Checks if a given tree node contains a specific search term in any of its specified keys.
+ *
+ * This function will check each of the specified keys in the tree node, convert the key's value to a string, 
+ * and check if it includes the search term.
+ *
+ * @param node - The tree node to search through.
+ * @param searchTerm - The term to search for.
+ * @param searchKeys - The keys in the tree node to search in.
+ * @returns True if the search term is found in any of the specified keys, false otherwise.
+ */
+export function doesNodeContainSearchTerm(
+    node: TreeNode,
+    searchTerm: string,
+    searchKeys: string[]
+): boolean {
+    // We're using the `some` method on the array of keys to check each one
+    return searchKeys.some(key => {
+        // Get the value of the key in the tree node
+        const nodeValue = node[key];
+        // Check if the string representation of the key's value includes the search term
+        // If the value is undefined or null, `nodeValue?.toString()` will return undefined, 
+        // and the call to `toLowerCase().includes(searchTerm)` will return false.
+        return (nodeValue?.toString().toLowerCase().includes(searchTerm));
+    });
+}

package/src/helpers/selectAll.helper.ts

@@ -0,0 +1,59 @@
+import {
+    innerMostChildrenIds,
+    nodeMap,
+    searchText,
+    state
+} from "../signals/global.signals";
+import { toggleCheckboxes } from "./toggleCheckbox.helper";
+
+/**
+ * Selects all nodes that are currently visible due to the applied filter.
+ * 
+ * If there is no search text, then it selects all nodes; otherwise, it selects all visible nodes.
+ */
+export function selectAllFiltered() {
+    // If there's no search text, select all nodes
+    if (!searchText.value) {
+        selectAll();
+    } else {
+        // If there's search text, only select the visible nodes
+        toggleCheckboxes(innerMostChildrenIds.value, true);
+    }
+};
+
+/**
+ * Unselects all nodes that are currently visible due to the applied filter.
+ * 
+ * If there is no search text, then it unselects all nodes; otherwise, it unselects all visible nodes.
+ */
+export function unselectAllFiltered() {
+    // If there's no search text, unselect all nodes
+    if (!searchText.value) {
+        unselectAll();
+    } else {
+        // If there's search text, only unselect the visible nodes
+        toggleCheckboxes(innerMostChildrenIds.value, false);
+    }
+};
+
+/**
+ * Selects all nodes in the tree.
+ * 
+ * This function selects all nodes by adding all node ids to the checked set and clearing the indeterminate set.
+ */
+export function selectAll() {
+    // Create a new set containing the ids of all nodes
+    const newChecked = new Set(nodeMap.value.keys());
+    // Update the state to mark all nodes as checked
+    state.value = ({ checked: newChecked, indeterminate: new Set() });
+};
+
+/**
+ * Unselects all nodes in the tree.
+ * 
+ * This function unselects all nodes by clearing both the checked and indeterminate sets.
+ */
+export function unselectAll() {
+    // Update the state to mark all nodes as unchecked
+    state.value = ({ checked: new Set(), indeterminate: new Set() });
+};