react-native-tree-multi-select 0.8.7 → 0.8.8

package/src/components/NodeList.tsx

@@ -4,22 +4,19 @@ import {
     StyleSheet,
 
     TouchableOpacity,
-    type TouchableOpacityProps,
 } from "react-native";
 import { FlashList } from "@shopify/flash-list";
 
 import type {
-    TreeFlatListProps,
     TreeNode,
 
     CheckboxValueType,
-    ExpandIconProps,
-    CheckBoxViewStyleProps,
-    CheckBoxViewProps,
     __FlattenedTreeNode__,
+    NodeListProps,
+    NodeProps,
 } from "../types/treeView.types";
 
-import { useStore } from "../store/global.store";
+import { useTreeViewStore } from "../store/treeView.store";
 import {
     doesNodeContainSearchTerm,
     handleToggleExpand,
@@ -27,15 +24,7 @@ import {
 } 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>;
-}
+import { defaultIndentationMultiplier } from "../constants/treeView.constants";
 
 const NodeList = React.memo(_NodeList);
 export default NodeList;
@@ -44,6 +33,7 @@ function _NodeList(props: NodeListProps) {
     const {
         treeFlashListProps,
         checkBoxViewStyleProps,
+        indentationMultiplier,
 
         CheckboxComponent,
         ExpandCollapseIconComponent,
@@ -52,11 +42,11 @@ function _NodeList(props: NodeListProps) {
 
     const {
         expanded,
-        globalData,
+        initialTreeViewData,
         updatedInnerMostChildrenIds,
         searchKeys,
         searchText
-    } = useStore();
+    } = useTreeViewStore();
 
     const [filteredTree, setFilteredTree] = React.useState<TreeNode[]>([]);
     const [flattenedFilteredNodes, setFlattenedFilteredNodes]
@@ -85,9 +75,9 @@ function _NodeList(props: NodeListProps) {
             return filtered;
         };
 
-        const tempFilterTree = filterTreeData(globalData);
+        const tempFilterTree = filterTreeData(initialTreeViewData);
         setFilteredTree(tempFilterTree);
-    }, [searchText, searchKeys, globalData]);
+    }, [searchText, searchKeys, initialTreeViewData]);
 
     React.useEffect(() => {
         const flattenTreeData = (
@@ -134,6 +124,7 @@ function _NodeList(props: NodeListProps) {
                 level={item.level || 0}
 
                 checkBoxViewStyleProps={checkBoxViewStyleProps}
+                indentationMultiplier={indentationMultiplier}
 
                 CheckboxComponent={CheckboxComponent}
                 ExpandCollapseIconComponent={ExpandCollapseIconComponent}
@@ -144,7 +135,8 @@ function _NodeList(props: NodeListProps) {
         CheckboxComponent,
         ExpandCollapseIconComponent,
         ExpandCollapseTouchableComponent,
-        checkBoxViewStyleProps
+        checkBoxViewStyleProps,
+        indentationMultiplier
     ]);
 
     return (
@@ -168,17 +160,6 @@ function HeaderFooterView() {
     );
 }
 
-interface NodeProps {
-    node: __FlattenedTreeNode__;
-    level: number;
-
-    checkBoxViewStyleProps?: CheckBoxViewStyleProps;
-
-    ExpandCollapseIconComponent?: React.ComponentType<ExpandIconProps>;
-    CheckboxComponent?: React.ComponentType<CheckBoxViewProps>;
-    ExpandCollapseTouchableComponent?: React.ComponentType<TouchableOpacityProps>;
-}
-
 function getValue(
     isChecked: boolean,
     isIndeterminate: boolean
@@ -199,13 +180,14 @@ function _Node(props: NodeProps) {
         level,
 
         checkBoxViewStyleProps,
+        indentationMultiplier = defaultIndentationMultiplier,
 
         ExpandCollapseIconComponent = CustomExpandCollapseIcon,
         CheckboxComponent = CheckboxView,
         ExpandCollapseTouchableComponent = TouchableOpacity,
     } = props;
 
-    const { expanded, checked, indeterminate } = useStore();
+    const { expanded, checked, indeterminate } = useTreeViewStore();
 
     const isChecked = checked.has(node.id);
     const isIndeterminate = indeterminate.has(node.id);
@@ -228,7 +210,7 @@ function _Node(props: NodeProps) {
     return (
         <View style={[
             styles.nodeParentView,
-            { marginLeft: level * 15, }
+            { marginStart: level * indentationMultiplier, }
         ]}>
             <View style={styles.nodeCheckboxAndArrowRow}>
                 <CheckboxComponent

package/src/constants/treeView.constants.ts

@@ -0,0 +1 @@
+export const defaultIndentationMultiplier = 15;

package/src/helpers/expandCollapse.helper.ts

@@ -1,5 +1,5 @@
 import { TreeNode } from "../types/treeView.types";
-import { useStore } from "../store/global.store";
+import { useTreeViewStore } from "../store/treeView.store";
 
 /**
  * Toggle the expanded state of a tree node by its ID.
@@ -10,7 +10,11 @@ import { useStore } from "../store/global.store";
  * @param id - The ID of the tree node to toggle.
  */
 export function handleToggleExpand(id: string) {
-    const { globalData, expanded, updateExpanded } = useStore.getState();
+    const {
+        initialTreeViewData,
+        expanded,
+        updateExpanded
+    } = useTreeViewStore.getState();
 
     // Create a new Set based on the current expanded state
     const newExpanded = new Set(expanded);
@@ -50,7 +54,7 @@ export function handleToggleExpand(id: string) {
     }
 
     // Find the node to expand or collapse
-    const node = findNode(globalData);
+    const node = findNode(initialTreeViewData);
 
     if (expanded.has(id)) {
         // If the node is currently expanded, collapse it and its descendants
@@ -71,7 +75,7 @@ export function handleToggleExpand(id: string) {
  * Expand all nodes in the tree.
  */
 export function expandAll() {
-    const { nodeMap, updateExpanded } = useStore.getState();
+    const { nodeMap, updateExpanded } = useTreeViewStore.getState();
     // Create a new Set containing the IDs of all nodes
     const newExpanded = new Set(nodeMap.keys());
     updateExpanded(newExpanded);
@@ -81,7 +85,7 @@ export function expandAll() {
  * Collapse all nodes in the tree.
  */
 export function collapseAll() {
-    const { updateExpanded } = useStore.getState();
+    const { updateExpanded } = useTreeViewStore.getState();
     // Create an empty Set
     const newExpanded = new Set<string>();
     updateExpanded(newExpanded);

package/src/helpers/initNodeMap.helper.ts

@@ -1,7 +1,7 @@
 import type { TreeNode } from "../types/treeView.types";
 import {
-    useStore
-} from "../store/global.store";
+    useTreeViewStore
+} from "../store/treeView.store";
 import { toggleCheckboxes } from "./toggleCheckbox.helper";
 
 /**
@@ -20,7 +20,7 @@ export function initializeNodeMaps(
     const {
         updateNodeMap,
         updateChildToParentMap
-    } = useStore.getState();
+    } = useTreeViewStore.getState();
 
     const tempNodeMap: Map<string, TreeNode> = new Map();;
     const tempChildToParentMap: Map<string, string> = new Map();;

package/src/helpers/selectAll.helper.ts

@@ -1,4 +1,4 @@
-import { useStore } from "../store/global.store";
+import { useTreeViewStore } from "../store/treeView.store";
 import { toggleCheckboxes } from "./toggleCheckbox.helper";
 
 /**
@@ -7,7 +7,7 @@ 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();
+    const { searchText, innerMostChildrenIds } = useTreeViewStore.getState();
 
 
     // If there's no search text, select all nodes
@@ -25,7 +25,7 @@ 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();
+    const { searchText, innerMostChildrenIds } = useTreeViewStore.getState();
 
     // If there's no search text, unselect all nodes
     if (!searchText) {
@@ -42,7 +42,11 @@ 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();
+    const {
+        nodeMap,
+        updateChecked,
+        updateIndeterminate
+    } = useTreeViewStore.getState();
 
     // Create a new set containing the ids of all nodes
     const newChecked = new Set(nodeMap.keys());
@@ -58,7 +62,7 @@ export function selectAll() {
  * This function unselects all nodes by clearing both the checked and indeterminate sets.
  */
 export function unselectAll() {
-    const { updateChecked, updateIndeterminate } = useStore.getState();
+    const { updateChecked, updateIndeterminate } = useTreeViewStore.getState();
     // Update the state to mark all nodes as unchecked
 
     updateChecked(new Set());

package/src/helpers/toggleCheckbox.helper.ts

@@ -1,4 +1,4 @@
-import { useStore } from "../store/global.store";
+import { useTreeViewStore } from "../store/treeView.store";
 
 /**
  * Function to toggle checkbox state for a tree structure.
@@ -17,7 +17,7 @@ export function toggleCheckboxes(ids: string[], forceCheck?: boolean) {
 
         nodeMap,
         childToParentMap
-    } = useStore.getState();
+    } = useTreeViewStore.getState();
 
     // Create new sets for checked and indeterminate state so as not to mutate the original state.
     const tempChecked = new Set(checked);

package/src/store/{global.store.ts → treeView.store.ts}

@@ -2,7 +2,7 @@ import type { TreeNode } from "src/types/treeView.types";
 
 import { create } from 'zustand';
 
-export type GlobalState = {
+type TreeViewState = {
     checked: Set<string>;
     updateChecked: (checked: Set<string>) => void;
 
@@ -12,8 +12,8 @@ export type GlobalState = {
     expanded: Set<string>;
     updateExpanded: (expanded: Set<string>) => void;
 
-    globalData: TreeNode[];
-    updateGlobalData: (globalData: TreeNode[]) => void;
+    initialTreeViewData: TreeNode[];
+    updateInitialTreeViewData: (initialTreeViewData: TreeNode[]) => void;
 
     nodeMap: Map<string, TreeNode>;
     updateNodeMap: (nodeMap: Map<string, TreeNode>) => void;
@@ -30,10 +30,10 @@ export type GlobalState = {
     innerMostChildrenIds: string[];
     updatedInnerMostChildrenIds: (innerMostChildrenIds: string[]) => void;
 
-    cleanUpGlobalStore: () => void;
+    cleanUpTreeViewStore: () => void;
 };
 
-export const useStore = create<GlobalState>((set) => ({
+export const useTreeViewStore = create<TreeViewState>((set) => ({
     checked: new Set(),
     updateChecked: (checked: Set<string>) => set({ checked }),
 
@@ -43,8 +43,10 @@ export const useStore = create<GlobalState>((set) => ({
     expanded: new Set<string>(),
     updateExpanded: (expanded: Set<string>) => set({ expanded }),
 
-    globalData: [],
-    updateGlobalData: (globalData: TreeNode[]) => set({ globalData }),
+    initialTreeViewData: [],
+    updateInitialTreeViewData: (initialTreeViewData: TreeNode[]) => set({
+        initialTreeViewData
+    }),
 
     nodeMap: new Map<string, TreeNode>(),
     updateNodeMap: (nodeMap: Map<string, TreeNode>) => set({ nodeMap }),
@@ -61,12 +63,12 @@ export const useStore = create<GlobalState>((set) => ({
     innerMostChildrenIds: [],
     updatedInnerMostChildrenIds: (innerMostChildrenIds: string[]) => set({ innerMostChildrenIds }),
 
-    cleanUpGlobalStore: () =>
+    cleanUpTreeViewStore: () =>
         set({
             checked: new Set(),
             indeterminate: new Set(),
             expanded: new Set<string>(),
-            globalData: [],
+            initialTreeViewData: [],
             nodeMap: new Map<string, TreeNode>(),
             childToParentMap: new Map<string, string>(),
             searchText: "",

package/src/types/treeView.types.ts

@@ -1,4 +1,9 @@
-import type { StyleProp, TextProps, TouchableOpacityProps, ViewStyle } from "react-native";
+import type {
+    StyleProp,
+    TextProps,
+    TouchableOpacityProps,
+    ViewStyle
+} from "react-native";
 import type { FlashListProps } from "@shopify/flash-list";
 import {
     type Props as RNPaperCheckboxAndroidProps
@@ -28,22 +33,34 @@ export type TreeFlatListProps<ItemT = any> = Omit<
     | "renderItem"
 >;
 
-export interface TreeViewProps {
-    data: TreeNode[];
-
-    onCheck?: (checkedIds: string[]) => void;
-    onExpand?: (expandedIds: string[]) => void;
-
-    preselectedIds?: string[],
-
-    treeFlashListProps?: TreeFlatListProps;
+export interface TreeItemCustomizations {
     checkBoxViewStyleProps?: CheckBoxViewStyleProps;
 
+    indentationMultiplier?: number;
+
     CheckboxComponent?: React.ComponentType<CheckBoxViewProps>;
     ExpandCollapseIconComponent?: React.ComponentType<ExpandIconProps>;
     ExpandCollapseTouchableComponent?: React.ComponentType<TouchableOpacityProps>;
 }
 
+export interface NodeProps extends TreeItemCustomizations {
+    node: __FlattenedTreeNode__;
+    level: number;
+}
+
+export interface NodeListProps extends TreeItemCustomizations {
+    treeFlashListProps?: TreeFlatListProps;
+}
+
+export interface TreeViewProps extends NodeListProps {
+    data: TreeNode[];
+
+    onCheck?: (checkedIds: string[]) => void;
+    onExpand?: (expandedIds: string[]) => void;
+
+    preselectedIds?: string[];
+}
+
 type CheckboxProps = Omit<RNPaperCheckboxAndroidProps, "onPress" | "status">;
 
 export interface CheckBoxViewStyleProps {

package/android/build.gradle

@@ -1,94 +0,0 @@
-buildscript {
-  // Buildscript is evaluated before everything else so we can't use getExtOrDefault
-  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["TreeMultiSelect_kotlinVersion"]
-
-  repositories {
-    google()
-    mavenCentral()
-  }
-
-  dependencies {
-    classpath "com.android.tools.build:gradle:7.2.1"
-    // noinspection DifferentKotlinGradleVersion
-    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
-  }
-}
-
-def isNewArchitectureEnabled() {
-  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
-}
-
-apply plugin: "com.android.library"
-apply plugin: "kotlin-android"
-
-
-def appProject = rootProject.allprojects.find { it.plugins.hasPlugin('com.android.application') }
-
-if (isNewArchitectureEnabled()) {
-  apply plugin: "com.facebook.react"
-}
-
-def getExtOrDefault(name) {
-  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["TreeMultiSelect_" + name]
-}
-
-def getExtOrIntegerDefault(name) {
-  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["TreeMultiSelect_" + name]).toInteger()
-}
-
-def isAGPVersionGreaterThan(version) {
-  def agpVersion = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')[0].toInteger()
-  return agpVersion > version
-}
-
-android {
-  if (isAGPVersionGreaterThan(7)) {
-    namespace "com.treemultiselect"
-  }
-
-  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
-
-  defaultConfig {
-    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
-    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
-    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
-  }
-  buildTypes {
-    release {
-      minifyEnabled false
-    }
-  }
-
-  lintOptions {
-    disable "GradleCompatible"
-  }
-
-  compileOptions {
-    sourceCompatibility JavaVersion.VERSION_1_8
-    targetCompatibility JavaVersion.VERSION_1_8
-  }
-
-}
-
-repositories {
-  mavenCentral()
-  google()
-}
-
-def kotlin_version = getExtOrDefault("kotlinVersion")
-
-dependencies {
-  // For < 0.71, this will be from the local maven repo
-  // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
-  //noinspection GradleDynamicVersion
-  implementation "com.facebook.react:react-native:+"
-  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-}
-
-if (isNewArchitectureEnabled()) {
-  react {
-    jsRootDir = file("../src/")
-    libraryName = "TreeMultiSelect"
-    codegenJavaPackageName = "com.treemultiselect"
-  }
-}

package/android/gradle.properties

@@ -1,5 +0,0 @@
-TreeMultiSelect_kotlinVersion=1.8.0
-TreeMultiSelect_minSdkVersion=21
-TreeMultiSelect_targetSdkVersion=31
-TreeMultiSelect_compileSdkVersion=31
-TreeMultiSelect_ndkversion=21.4.7075529

package/android/src/main/AndroidManifest.xml

@@ -1,4 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-          package="com.treemultiselect">
-
-</manifest>

package/android/src/main/java/com/treemultiselect/TreeMultiSelectModule.kt

@@ -1,25 +0,0 @@
-package com.treemultiselect
-
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReactContextBaseJavaModule
-import com.facebook.react.bridge.ReactMethod
-import com.facebook.react.bridge.Promise
-
-class TreeMultiSelectModule(reactContext: ReactApplicationContext) :
-  ReactContextBaseJavaModule(reactContext) {
-
-  override fun getName(): String {
-    return NAME
-  }
-
-  // Example method
-  // See https://reactnative.dev/docs/native-modules-android
-  @ReactMethod
-  fun multiply(a: Double, b: Double, promise: Promise) {
-    promise.resolve(a * b)
-  }
-
-  companion object {
-    const val NAME = "TreeMultiSelect"
-  }
-}

package/android/src/main/java/com/treemultiselect/TreeMultiSelectPackage.kt

@@ -1,17 +0,0 @@
-package com.treemultiselect
-
-import com.facebook.react.ReactPackage
-import com.facebook.react.bridge.NativeModule
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.uimanager.ViewManager
-
-
-class TreeMultiSelectPackage : ReactPackage {
-  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-    return listOf(TreeMultiSelectModule(reactContext))
-  }
-
-  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-    return emptyList()
-  }
-}

package/ios/TreeMultiSelect-Bridging-Header.h

@@ -1,2 +0,0 @@
-#import <React/RCTBridgeModule.h>
-#import <React/RCTViewManager.h>

package/ios/TreeMultiSelect.mm

@@ -1,14 +0,0 @@
-#import <React/RCTBridgeModule.h>
-
-@interface RCT_EXTERN_MODULE(TreeMultiSelect, NSObject)
-
-RCT_EXTERN_METHOD(multiply:(float)a withB:(float)b
-                 withResolver:(RCTPromiseResolveBlock)resolve
-                 withRejecter:(RCTPromiseRejectBlock)reject)
-
-+ (BOOL)requiresMainQueueSetup
-{
-  return NO;
-}
-
-@end

package/ios/TreeMultiSelect.swift

@@ -1,8 +0,0 @@
-@objc(TreeMultiSelect)
-class TreeMultiSelect: NSObject {
-
-  @objc(multiply:withB:withResolver:withRejecter:)
-  func multiply(a: Float, b: Float, resolve:RCTPromiseResolveBlock,reject:RCTPromiseRejectBlock) -> Void {
-    resolve(a*b)
-  }
-}