react-native-tree-multi-select 1.2.0 → 1.2.3

package/example/ios/TreeMultiSelectExample.xcodeproj/xcshareddata/xcschemes/TreeMultiSelectExample.xcscheme

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "1210"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+               BuildableName = "TreeMultiSelectExample.app"
+               BlueprintName = "TreeMultiSelectExample"
+               ReferencedContainer = "container:TreeMultiSelectExample.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES">
+      <Testables>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "TreeMultiSelectExampleTests.xctest"
+               BlueprintName = "TreeMultiSelectExampleTests"
+               ReferencedContainer = "container:TreeMultiSelectExample.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+   </TestAction>
+   <LaunchAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
+      allowLocationSimulation = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "TreeMultiSelectExample.app"
+            BlueprintName = "TreeMultiSelectExample"
+            ReferencedContainer = "container:TreeMultiSelectExample.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </LaunchAction>
+   <ProfileAction
+      buildConfiguration = "Release"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      debugDocumentVersioning = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "TreeMultiSelectExample.app"
+            BlueprintName = "TreeMultiSelectExample"
+            ReferencedContainer = "container:TreeMultiSelectExample.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>

package/example/ios/TreeMultiSelectExample.xcworkspace/contents.xcworkspacedata

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Workspace
+   version = "1.0">
+   <FileRef
+      location = "group:TreeMultiSelectExample.xcodeproj">
+   </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
+</Workspace>

package/example/ios/TreeMultiSelectExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

package/example/ios/TreeMultiSelectExampleTests/Info.plist

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>BNDL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+</dict>
+</plist>

package/example/ios/TreeMultiSelectExampleTests/TreeMultiSelectExampleTests.m

@@ -0,0 +1,66 @@
+#import <UIKit/UIKit.h>
+#import <XCTest/XCTest.h>
+
+#import <React/RCTLog.h>
+#import <React/RCTRootView.h>
+
+#define TIMEOUT_SECONDS 600
+#define TEXT_TO_LOOK_FOR @"Welcome to React"
+
+@interface TreeMultiSelectExampleTests : XCTestCase
+
+@end
+
+@implementation TreeMultiSelectExampleTests
+
+- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test
+{
+  if (test(view)) {
+    return YES;
+  }
+  for (UIView *subview in [view subviews]) {
+    if ([self findSubviewInView:subview matching:test]) {
+      return YES;
+    }
+  }
+  return NO;
+}
+
+- (void)testRendersWelcomeScreen
+{
+  UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
+  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
+  BOOL foundElement = NO;
+
+  __block NSString *redboxError = nil;
+#ifdef DEBUG
+  RCTSetLogFunction(
+      ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
+        if (level >= RCTLogLevelError) {
+          redboxError = message;
+        }
+      });
+#endif
+
+  while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
+    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+    [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+
+    foundElement = [self findSubviewInView:vc.view
+                                  matching:^BOOL(UIView *view) {
+                                    if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
+                                      return YES;
+                                    }
+                                    return NO;
+                                  }];
+  }
+
+#ifdef DEBUG
+  RCTSetLogFunction(RCTDefaultLogFunction);
+#endif
+
+  XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
+  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
+}
+
+@end

package/example/metro.config.js

@@ -0,0 +1,45 @@
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const path = require('path');
+const escape = require('escape-string-regexp');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
+const pak = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
+const modules = Object.keys({ ...pak.peerDependencies });
+
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {
+  watchFolders: [root],
+
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we block them at the root, and alias them to the versions in example's node_modules
+  resolver: {
+    blacklistRE: exclusionList(
+      modules.map(
+        (m) =>
+          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
+      )
+    ),
+
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

package/example/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "tree-multi-select-example",
+  "version": "0.4.3",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "ios_ip_14": "react-native run-ios --simulator=\"iPhone 14 Pro\"",
+    "start": "react-native start",
+    "pods": "pod-install --quiet"
+  },
+  "dependencies": {
+    "@gorhom/showcase-template": "^2.1.0",
+    "@react-navigation/native": "^6.1.7",
+    "@react-navigation/native-stack": "^6.9.15",
+    "@react-navigation/stack": "^6.3.17",
+    "@shopify/flash-list": "^1.4.3",
+    "lodash": "^4.17.21",
+    "react": "18.2.0",
+    "react-native": "0.72.1",
+    "react-native-gesture-handler": "^2.12.0",
+    "react-native-paper": "^5.9.1",
+    "react-native-safe-area-context": "^4.7.1",
+    "react-native-screens": "^3.22.1",
+    "react-native-vector-icons": "^9.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
+    "@react-native/eslint-config": "^0.72.2",
+    "@react-native/metro-config": "^0.72.7",
+    "@types/lodash": "^4.14.195",
+    "@types/metro-config": "^0.76.3",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "metro-react-native-babel-preset": "0.76.5"
+  },
+  "engines": {
+    "node": ">=16"
+  }
+}

package/example/react-native.config.js

@@ -0,0 +1,10 @@
+const path = require('path');
+const pak = require('../package.json');
+
+module.exports = {
+  dependencies: {
+    [pak.name]: {
+      root: path.join(__dirname, '..'),
+    },
+  },
+};

package/example/src/App.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+import SmallDataScreen from './screens/SmallDataScreen';
+import { ShowcaseApp } from '@gorhom/showcase-template';
+import {
+  ShowcaseExampleScreenSectionType
+} from '@gorhom/showcase-template/lib/typescript/types';
+import MediumDataScreen from './screens/MediumDataScreen';
+import LargeDataScreen from './screens/LargeDataScreen';
+import CustomCheckboxScreen from './screens/CustomCheckboxScreen';
+import CustomArrowScreen from './screens/CustomArrowScreen';
+import CustomNodeRowViewScreen from './screens/CustomNodeRowViewScreen';
+
+const data: ShowcaseExampleScreenSectionType[] = [
+  {
+    title: 'Default UI',
+    data: [
+      {
+        name: 'Small Data',
+        slug: 'small-data',
+        getScreen: () => SmallDataScreen,
+      },
+      {
+        name: 'Medium Data',
+        slug: 'medium-data',
+        getScreen: () => MediumDataScreen,
+      },
+      {
+        name: 'Large Data',
+        slug: 'large-data',
+        getScreen: () => LargeDataScreen,
+      }
+    ],
+  },
+  {
+    title: 'Customizations',
+    data: [
+      {
+        name: 'Custom Checkbox',
+        slug: 'custom-checkbox',
+        getScreen: () => CustomCheckboxScreen,
+      },
+      {
+        name: 'Custom Arrow',
+        slug: 'custom-arrow',
+        getScreen: () => CustomArrowScreen,
+      },
+      {
+        name: 'Custom Row Item',
+        slug: 'custom-row-item',
+        getScreen: () => CustomNodeRowViewScreen,
+      },
+    ],
+  },
+];
+
+export default function App() {
+  return (
+    <ShowcaseApp
+      version="1.0.0"
+      name="react-native-tree-multi-select"
+      description="⚡️Super-fast tree view with multi-selection capabilities, using checkboxes and search filtering"
+      author={{
+        username: '@JairajJangle',
+        url: 'https://github.com/JairajJangle',
+      }}
+      data={data}
+    />
+  );
+}

package/example/src/components/CustomArrow.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import { ExpandIconProps } from "src/types/treeView.types";
+
+export const CustomArrow = React.memo(_CustomArrow);
+
+function _CustomArrow(props: ExpandIconProps) {
+    const { isExpanded } = props;
+
+    return (
+        <View
+            style={styles.mainView}>
+            <View
+                style={[
+                    styles.innerView,
+                    isExpanded
+                        ? styles.innerViewExpanded
+                        : styles.innerViewCollapsed
+                ]}>
+                <Icon
+                    name={
+                        isExpanded
+                            ? 'arrow-collapse-vertical'
+                            : 'arrow-expand-vertical'
+                    }
+                    size={25}
+                    color={isExpanded ? "black" : "white"}
+                />
+                <Text
+                    style={[styles.text,
+                    isExpanded
+                        ? styles.textExpanded
+                        : styles.textCollapsed
+                    ]}>
+                    {isExpanded ? "Collapse" : "Expand"}
+                </Text>
+            </View>
+        </View>
+    );
+}
+
+export const styles = StyleSheet.create({
+    mainView: {
+        flexDirection: 'row',
+        marginVertical: 5
+    },
+    innerView: {
+        flexDirection: 'row',
+        alignItems: "center",
+        borderWidth: 1,
+        borderRadius: 10,
+        padding: 2,
+    },
+    innerViewExpanded: {
+        backgroundColor: "white"
+    },
+    innerViewCollapsed: {
+        backgroundColor: "black"
+    },
+    text: {
+        fontSize: 10,
+    },
+    textExpanded: {
+        color: "black",
+    },
+    textCollapsed: {
+        color: "white",
+    }
+});

package/example/src/components/CustomCheckboxView.tsx

@@ -0,0 +1,119 @@
+import React, { useCallback } from "react";
+import {
+    ColorValue,
+    Platform,
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View
+} from "react-native";
+
+import {
+    CheckBoxViewProps,
+} from "react-native-tree-multi-select";
+
+function arePropsEqual(
+    prevProps: CheckBoxViewProps,
+    nextProps: CheckBoxViewProps
+) {
+    return (
+        prevProps.value === nextProps.value &&
+        prevProps.text === nextProps.text
+    );
+}
+
+export const CustomCheckboxView = React.memo(_CustomCheckboxView, arePropsEqual);
+
+function _CustomCheckboxView(props: CheckBoxViewProps) {
+    const {
+        value,
+        onValueChange,
+        text,
+    } = props;
+
+    const getCheckboxColor: () => ColorValue = useCallback(() => {
+        return (
+            value === "indeterminate"
+                ? "yellow"
+                : value
+                    ? "green"
+                    : "red"
+        );
+    }, [value]);
+
+    const getCheckboxText = useCallback(() => {
+        return (
+            value === "indeterminate"
+                ? "😐"
+                : value
+                    ? "😃"
+                    : "😶"
+        );
+    }, [value]);
+
+    /**
+     * 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={styles.mainView}>
+
+            <TouchableOpacity
+                style={[styles.checkboxTouchable,
+                {
+                    borderColor: getCheckboxColor()
+                }]}
+                onPress={onValueChangeModifier}>
+                <Text
+                    style={styles.checkboxView}>
+                    {getCheckboxText()}
+                </Text>
+            </TouchableOpacity>
+
+            {text ? (
+                <TouchableOpacity
+                    onPress={onValueChangeModifier}>
+                    <Text
+                        style={styles.checkboxTextStyle}
+                        numberOfLines={1}>
+                        {text}
+                    </Text>
+                </TouchableOpacity>
+            ) : null}
+        </View>
+    );
+}
+
+export const styles = StyleSheet.create({
+    mainView: {
+        alignSelf: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+
+        marginEnd: 10
+    },
+    checkboxTouchable: {
+        marginVertical: 4,
+        marginEnd: 5,
+        marginStart: 10,
+        borderWidth: 5,
+        borderRadius: 45,
+    },
+    checkboxView: {
+        fontSize: 30,
+        margin: -4
+    },
+    checkboxTextStyle: {
+        color: "black",
+        marginTop: Platform.OS === 'android' ? 2 : undefined,
+    },
+});

package/example/src/components/CustomNodeRowView.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { TouchableOpacity, View, Text, StyleSheet } from "react-native";
+import { NodeRowProps } from "react-native-tree-multi-select";
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+export const CustomNodeRowView = React.memo(_CustomNodeRowView);
+
+const VerticalLine = () => (
+    <View style={styles.verticalLineStyle} />
+);
+
+const Levels = ({
+    levels
+}: {
+    levels: number;
+}) => {
+    return (
+        <View style={styles.levelsStyle}>
+            {
+                Array(levels).fill(null).map((_, i) => <VerticalLine key={i} />)
+            }
+        </View>
+    );
+};
+
+function _CustomNodeRowView(props: NodeRowProps) {
+    const { node, level, checkedValue, isExpanded, onCheck, onExpand } = props;
+
+    const backgroundColor =
+        checkedValue === true
+            ? "black"
+            : checkedValue === "indeterminate"
+                ? "lightgrey"
+                : "white";
+    const color =
+        checkedValue === true ? "white" : undefined;
+    const iconColor =
+        checkedValue === true
+            ? isExpanded ? "white" : "#9a9a9a"
+            : isExpanded ? "black" : "#a1a1a1";
+
+
+
+    return (
+        <View style={[styles.rowView, { backgroundColor }]}>
+            <View style={styles.innerRowView}>
+                <Levels levels={level} />
+
+                <TouchableOpacity style={styles.touchableOpacity} onPress={onCheck}>
+                    <View style={
+                        level === 0
+                            ? styles.textViewMarginNegative
+                            : styles.textView
+                    }>
+                        <Text style={{ color }}>{node.name}</Text>
+                    </View>
+                </TouchableOpacity>
+
+                {
+                    node.children?.length ? (
+                        <TouchableOpacity
+                            style={styles.iconTouchableView}
+                            onPress={onExpand}>
+                            <Icon
+                                name={
+                                    isExpanded
+                                        ? 'angle-double-up'
+                                        : 'angle-double-down'
+                                }
+                                size={25}
+                                color={iconColor}
+                            />
+                        </TouchableOpacity>
+                    ) : null
+                }
+
+            </View>
+        </View >
+    );
+}
+
+const styles = StyleSheet.create({
+    verticalLineStyle: {
+        borderLeftWidth: 1,
+        height: '110%',
+        marginStart: 25,
+        borderColor: "grey",
+    },
+    levelsStyle: {
+        flexDirection: 'row',
+        marginEnd: 10
+    },
+    rowView: {
+        marginHorizontal: 10,
+        paddingEnd: 10,
+        marginVertical: 0.5,
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: "space-between",
+        borderColor: "lightgrey",
+        borderTopWidth: 1,
+        borderTopColor: "#dedede"
+    },
+    innerRowView: {
+        flexDirection: "row",
+    },
+    touchableOpacity: {
+        padding: 4,
+        paddingVertical: 8,
+    },
+    textView: {
+        flexDirection: "row"
+    },
+    textViewMarginNegative: {
+        flexDirection: "row",
+        marginStart: -5
+    },
+    iconTouchableView: {
+        flex: 1,
+        alignItems: "flex-end",
+        justifyContent: "center",
+    }
+});