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

package/example/src/components/SearchInput.tsx

@@ -1,68 +0,0 @@
-import React, { useRef } from "react";
-import { TextInput, StyleSheet, View, TouchableOpacity } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-
-interface Props {
-  onChange: (value: string) => void;
-}
-
-const SearchInput = React.memo(_SearchInput);
-export default SearchInput;
-
-function _SearchInput(props: Props) {
-  const { onChange } = props;
-
-  const textInputRef = useRef<any>();
-
-  const handleChange = (value: string) => {
-    onChange(value);
-  };
-
-  const clearText = () => {
-    textInputRef.current?.clear?.();
-    onChange("");
-  };
-
-  return (
-    <View
-      style={styles.parentView}>
-      <TextInput
-        ref={textInputRef}
-        style={styles.textInput}
-        onChangeText={handleChange}
-        placeholder='Search here'
-        placeholderTextColor={"#888"}
-      />
-      <TouchableOpacity
-        onPress={clearText}>
-        <Icon
-          name={"close-circle"}
-          size={25}
-          color="grey"
-          style={styles.clearButtonIcon}
-        />
-      </TouchableOpacity>
-    </View>
-  );
-}
-
-
-const styles = StyleSheet.create({
-  parentView: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  textInput: {
-    color: "black",
-    borderRadius: 10,
-    margin: 10,
-    padding: 10,
-    backgroundColor: "#EEE",
-    height: 40,
-    fontSize: 16,
-    flex: 1
-  },
-  clearButtonIcon: {
-    marginEnd: 15
-  }
-});

package/example/src/screens/CustomArrowScreen.tsx

@@ -1,99 +0,0 @@
-import * as React from 'react';
-
-import {
-    Button,
-    SafeAreaView,
-    View
-} from 'react-native';
-
-import SearchInput from '../components/SearchInput';
-
-import { debounce } from "lodash";
-
-import {
-    TreeView,
-    type TreeViewRef
-} from 'react-native-tree-multi-select';
-
-import { styles } from './screens.styles';
-import { generateTreeList } from '../utils/sampleDataGenerator';
-import { CustomArrow } from '../components/CustomArrow';
-
-export default function CustomArrowScreen() {
-    const sampleData = React.useRef(generateTreeList(50, 4, 5));
-    const treeViewRef = React.useRef<TreeViewRef | null>(null);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const debouncedSetSearchText = React.useCallback(
-        debounce((text) => treeViewRef.current?.setSearchText(text), 375, {
-            leading: true,
-            trailing: true,
-            maxWait: 750
-        }),
-        []
-    );
-
-    const handleSelectionChange = (_checkedIds: string[]) => {
-        // NOTE: Handle _checkedIds here
-    };
-    const handleExpanded = (_expandedIds: string[]) => {
-        // NOTE: Handle _expandedIds here
-    };
-
-    // Expand collapse calls using ref
-    const expandAllPress = () => treeViewRef.current?.expandAll?.();
-    const collapseAllPress = () => treeViewRef.current?.collapseAll?.();
-
-    // Multi-select calls using ref
-    const onSelectAllPress = () => treeViewRef.current?.selectAll?.();
-    const onUnselectAllPress = () => treeViewRef.current?.unselectAll?.();
-    const onSelectAllFilteredPress = () => treeViewRef.current?.selectAllFiltered?.();
-    const onUnselectAllFilteredPress = () => treeViewRef.current?.unselectAllFiltered?.();
-
-    return (
-        <SafeAreaView
-            style={styles.mainView}>
-            <SearchInput onChange={debouncedSetSearchText} />
-            <View
-                style={styles.selectionButtonRow}>
-                <Button
-                    title='Select All'
-                    onPress={onSelectAllPress} />
-                <Button
-                    title='Unselect All'
-                    onPress={onUnselectAllPress} />
-            </View>
-            <View
-                style={styles.selectionButtonRow}>
-                <Button
-                    title='Select Filtered'
-                    onPress={onSelectAllFilteredPress} />
-                <Button
-                    title='Unselect Filtered'
-                    onPress={onUnselectAllFilteredPress} />
-            </View>
-
-            <View
-                style={[styles.selectionButtonRow, styles.selectionButtonBottom]}>
-                <Button
-                    title='Expand All'
-                    onPress={expandAllPress} />
-                <Button
-                    title='Collapse All'
-                    onPress={collapseAllPress} />
-            </View>
-
-            <View
-                style={styles.treeViewParent}>
-                <TreeView
-                    ref={treeViewRef}
-                    data={sampleData.current}
-                    onCheck={handleSelectionChange}
-                    onExpand={handleExpanded}
-
-                    ExpandCollapseIconComponent={CustomArrow}
-                />
-            </View>
-        </SafeAreaView>
-    );
-}

package/example/src/screens/CustomCheckboxScreen.tsx

@@ -1,99 +0,0 @@
-import * as React from 'react';
-
-import {
-    Button,
-    SafeAreaView,
-    View
-} from 'react-native';
-
-import SearchInput from '../components/SearchInput';
-
-import { debounce } from "lodash";
-
-import {
-    TreeView,
-    type TreeViewRef
-} from 'react-native-tree-multi-select';
-
-import { styles } from './screens.styles';
-import { generateTreeList } from '../utils/sampleDataGenerator';
-import { CustomCheckboxView } from '../components/CustomCheckboxView';
-
-export default function CustomCheckboxScreen() {
-    const sampleData = React.useRef(generateTreeList(50, 4, 5));
-    const treeViewRef = React.useRef<TreeViewRef | null>(null);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const debouncedSetSearchText = React.useCallback(
-        debounce((text) => treeViewRef.current?.setSearchText(text), 375, {
-            leading: true,
-            trailing: true,
-            maxWait: 750
-        }),
-        []
-    );
-
-    const handleSelectionChange = (_checkedIds: string[]) => {
-        // NOTE: Handle _checkedIds here
-    };
-    const handleExpanded = (_expandedIds: string[]) => {
-        // NOTE: Handle _expandedIds here
-    };
-
-    // Expand collapse calls using ref
-    const expandAllPress = () => treeViewRef.current?.expandAll?.();
-    const collapseAllPress = () => treeViewRef.current?.collapseAll?.();
-
-    // Multi-select calls using ref
-    const onSelectAllPress = () => treeViewRef.current?.selectAll?.();
-    const onUnselectAllPress = () => treeViewRef.current?.unselectAll?.();
-    const onSelectAllFilteredPress = () => treeViewRef.current?.selectAllFiltered?.();
-    const onUnselectAllFilteredPress = () => treeViewRef.current?.unselectAllFiltered?.();
-
-    return (
-        <SafeAreaView
-            style={styles.mainView}>
-            <SearchInput onChange={debouncedSetSearchText} />
-            <View
-                style={styles.selectionButtonRow}>
-                <Button
-                    title='Select All'
-                    onPress={onSelectAllPress} />
-                <Button
-                    title='Unselect All'
-                    onPress={onUnselectAllPress} />
-            </View>
-            <View
-                style={styles.selectionButtonRow}>
-                <Button
-                    title='Select Filtered'
-                    onPress={onSelectAllFilteredPress} />
-                <Button
-                    title='Unselect Filtered'
-                    onPress={onUnselectAllFilteredPress} />
-            </View>
-
-            <View
-                style={[styles.selectionButtonRow, styles.selectionButtonBottom]}>
-                <Button
-                    title='Expand All'
-                    onPress={expandAllPress} />
-                <Button
-                    title='Collapse All'
-                    onPress={collapseAllPress} />
-            </View>
-
-            <View
-                style={styles.treeViewParent}>
-                <TreeView
-                    ref={treeViewRef}
-                    data={sampleData.current}
-                    onCheck={handleSelectionChange}
-                    onExpand={handleExpanded}
-
-                    CheckboxComponent={CustomCheckboxView}
-                />
-            </View>
-        </SafeAreaView>
-    );
-}

package/example/src/screens/CustomNodeRowViewScreen.tsx

@@ -1,99 +0,0 @@
-import * as React from 'react';
-
-import {
-    Button,
-    SafeAreaView,
-    View
-} from 'react-native';
-
-import SearchInput from '../components/SearchInput';
-
-import { debounce } from "lodash";
-
-import {
-    TreeView,
-    type TreeViewRef
-} from 'react-native-tree-multi-select';
-
-import { styles } from './screens.styles';
-import { generateTreeList } from '../utils/sampleDataGenerator';
-import { CustomNodeRowView } from '../components/CustomNodeRowView';
-
-export default function CustomNodeRowViewScreen() {
-    const sampleData = React.useRef(generateTreeList(50, 4, 5));
-    const treeViewRef = React.useRef<TreeViewRef | null>(null);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const debouncedSetSearchText = React.useCallback(
-        debounce((text) => treeViewRef.current?.setSearchText(text), 375, {
-            leading: true,
-            trailing: true,
-            maxWait: 750
-        }),
-        []
-    );
-
-    const handleSelectionChange = (_checkedIds: string[]) => {
-        // NOTE: Handle _checkedIds here
-    };
-    const handleExpanded = (_expandedIds: string[]) => {
-        // NOTE: Handle _expandedIds here
-    };
-
-    // Expand collapse calls using ref
-    const expandAllPress = () => treeViewRef.current?.expandAll?.();
-    const collapseAllPress = () => treeViewRef.current?.collapseAll?.();
-
-    // Multi-select calls using ref
-    const onSelectAllPress = () => treeViewRef.current?.selectAll?.();
-    const onUnselectAllPress = () => treeViewRef.current?.unselectAll?.();
-    const onSelectAllFilteredPress = () => treeViewRef.current?.selectAllFiltered?.();
-    const onUnselectAllFilteredPress = () => treeViewRef.current?.unselectAllFiltered?.();
-
-    return (
-        <SafeAreaView
-            style={styles.mainView}>
-            <SearchInput onChange={debouncedSetSearchText} />
-            <View
-                style={styles.selectionButtonRow}>
-                <Button
-                    title='Select All'
-                    onPress={onSelectAllPress} />
-                <Button
-                    title='Unselect All'
-                    onPress={onUnselectAllPress} />
-            </View>
-            <View
-                style={styles.selectionButtonRow}>
-                <Button
-                    title='Select Filtered'
-                    onPress={onSelectAllFilteredPress} />
-                <Button
-                    title='Unselect Filtered'
-                    onPress={onUnselectAllFilteredPress} />
-            </View>
-
-            <View
-                style={[styles.selectionButtonRow, styles.selectionButtonBottom]}>
-                <Button
-                    title='Expand All'
-                    onPress={expandAllPress} />
-                <Button
-                    title='Collapse All'
-                    onPress={collapseAllPress} />
-            </View>
-
-            <View
-                style={styles.treeViewParent}>
-                <TreeView
-                    ref={treeViewRef}
-                    data={sampleData.current}
-                    onCheck={handleSelectionChange}
-                    onExpand={handleExpanded}
-
-                    CustomNodeRowComponent={CustomNodeRowView}
-                />
-            </View>
-        </SafeAreaView>
-    );
-}

package/example/src/screens/LargeDataScreen.tsx

@@ -1,95 +0,0 @@
-import * as React from 'react';
-
-import {
-    Button,
-    SafeAreaView,
-    View
-} from 'react-native';
-
-import SearchInput from '../components/SearchInput';
-
-import { debounce } from "lodash";
-
-import {
-    TreeView,
-    type TreeViewRef
-} from 'react-native-tree-multi-select';
-
-import { styles } from './screens.styles';
-import { generateTreeList } from '../utils/sampleDataGenerator';
-
-export default function LargeDataScreen() {
-    const sampleData = React.useRef(generateTreeList(200, 5, 6));
-    const treeViewRef = React.useRef<TreeViewRef | null>(null);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const debouncedSetSearchText = React.useCallback(
-        debounce((text) => treeViewRef.current?.setSearchText(text), 1000, {
-            trailing: true,
-            leading: false
-        }),
-        []
-    );
-
-    const handleSelectionChange = (_checkedIds: string[]) => {
-        // NOTE: Handle _checkedIds here
-    };
-    const handleExpanded = (_expandedIds: string[]) => {
-        // NOTE: Handle _expandedIds here
-    };
-
-    // Expand collapse calls using ref
-    const expandAllPress = () => treeViewRef.current?.expandAll?.();
-    const collapseAllPress = () => treeViewRef.current?.collapseAll?.();
-
-    // Multi-select calls using ref
-    const onSelectAllPress = () => treeViewRef.current?.selectAll?.();
-    const onUnselectAllPress = () => treeViewRef.current?.unselectAll?.();
-    const onSelectAllFilteredPress = () => treeViewRef.current?.selectAllFiltered?.();
-    const onUnselectAllFilteredPress = () => treeViewRef.current?.unselectAllFiltered?.();
-
-    return (
-        <SafeAreaView
-            style={styles.mainView}>
-            <SearchInput onChange={debouncedSetSearchText} />
-            <View
-                style={styles.selectionButtonRow}>
-                <Button
-                    title='Select All'
-                    onPress={onSelectAllPress} />
-                <Button
-                    title='Unselect All'
-                    onPress={onUnselectAllPress} />
-            </View>
-            <View
-                style={styles.selectionButtonRow}>
-                <Button
-                    title='Select Filtered'
-                    onPress={onSelectAllFilteredPress} />
-                <Button
-                    title='Unselect Filtered'
-                    onPress={onUnselectAllFilteredPress} />
-            </View>
-
-            <View
-                style={[styles.selectionButtonRow, styles.selectionButtonBottom]}>
-                <Button
-                    title='Expand All'
-                    onPress={expandAllPress} />
-                <Button
-                    title='Collapse All'
-                    onPress={collapseAllPress} />
-            </View>
-
-            <View
-                style={styles.treeViewParent}>
-                <TreeView
-                    ref={treeViewRef}
-                    data={sampleData.current}
-                    onCheck={handleSelectionChange}
-                    onExpand={handleExpanded}
-                />
-            </View>
-        </SafeAreaView>
-    );
-}

package/example/src/screens/MediumDataScreen.tsx

@@ -1,96 +0,0 @@
-import * as React from 'react';
-
-import {
-    Button,
-    SafeAreaView,
-    View
-} from 'react-native';
-
-import SearchInput from '../components/SearchInput';
-
-import { debounce } from "lodash";
-
-import {
-    TreeView,
-    type TreeViewRef
-} from 'react-native-tree-multi-select';
-
-import { styles } from './screens.styles';
-import { generateTreeList } from '../utils/sampleDataGenerator';
-
-export default function MediumDataScreen() {
-    const sampleData = React.useRef(generateTreeList(20, 4, 5));
-    const treeViewRef = React.useRef<TreeViewRef | null>(null);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const debouncedSetSearchText = React.useCallback(
-        debounce((text) => treeViewRef.current?.setSearchText(text), 375, {
-            leading: true,
-            trailing: true,
-            maxWait: 750
-        }),
-        []
-    );
-
-    const handleSelectionChange = (_checkedIds: string[]) => {
-        // NOTE: Handle _checkedIds here
-    };
-    const handleExpanded = (_expandedIds: string[]) => {
-        // NOTE: Handle _expandedIds here
-    };
-
-    // Expand collapse calls using ref
-    const expandAllPress = () => treeViewRef.current?.expandAll?.();
-    const collapseAllPress = () => treeViewRef.current?.collapseAll?.();
-
-    // Multi-select calls using ref
-    const onSelectAllPress = () => treeViewRef.current?.selectAll?.();
-    const onUnselectAllPress = () => treeViewRef.current?.unselectAll?.();
-    const onSelectAllFilteredPress = () => treeViewRef.current?.selectAllFiltered?.();
-    const onUnselectAllFilteredPress = () => treeViewRef.current?.unselectAllFiltered?.();
-
-    return (
-        <SafeAreaView
-            style={styles.mainView}>
-            <SearchInput onChange={debouncedSetSearchText} />
-            <View
-                style={styles.selectionButtonRow}>
-                <Button
-                    title='Select All'
-                    onPress={onSelectAllPress} />
-                <Button
-                    title='Unselect All'
-                    onPress={onUnselectAllPress} />
-            </View>
-            <View
-                style={styles.selectionButtonRow}>
-                <Button
-                    title='Select Filtered'
-                    onPress={onSelectAllFilteredPress} />
-                <Button
-                    title='Unselect Filtered'
-                    onPress={onUnselectAllFilteredPress} />
-            </View>
-
-            <View
-                style={[styles.selectionButtonRow, styles.selectionButtonBottom]}>
-                <Button
-                    title='Expand All'
-                    onPress={expandAllPress} />
-                <Button
-                    title='Collapse All'
-                    onPress={collapseAllPress} />
-            </View>
-
-            <View
-                style={styles.treeViewParent}>
-                <TreeView
-                    ref={treeViewRef}
-                    data={sampleData.current}
-                    onCheck={handleSelectionChange}
-                    onExpand={handleExpanded}
-                />
-            </View>
-        </SafeAreaView>
-    );
-}

package/example/src/screens/SmallDataScreen.tsx

@@ -1,96 +0,0 @@
-import * as React from 'react';
-
-import {
-    Button,
-    SafeAreaView,
-    View
-} from 'react-native';
-
-import SearchInput from '../components/SearchInput';
-
-import { debounce } from "lodash";
-
-import {
-    TreeView,
-    type TreeViewRef
-} from 'react-native-tree-multi-select';
-
-import { styles } from './screens.styles';
-import { generateTreeList } from '../utils/sampleDataGenerator';
-
-export default function SmallDataScreen() {
-    const sampleData = React.useRef(generateTreeList(5, 4, 3));
-    const treeViewRef = React.useRef<TreeViewRef | null>(null);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const debouncedSetSearchText = React.useCallback(
-        debounce((text) => treeViewRef.current?.setSearchText(text), 375, {
-            leading: true,
-            trailing: true,
-            maxWait: 750
-        }),
-        []
-    );
-
-    const handleSelectionChange = (_checkedIds: string[]) => {
-        // NOTE: Handle _checkedIds here
-    };
-    const handleExpanded = (_expandedIds: string[]) => {
-        // NOTE: Handle _expandedIds here
-    };
-
-    // Expand collapse calls using ref
-    const expandAllPress = () => treeViewRef.current?.expandAll?.();
-    const collapseAllPress = () => treeViewRef.current?.collapseAll?.();
-
-    // Multi-select calls using ref
-    const onSelectAllPress = () => treeViewRef.current?.selectAll?.();
-    const onUnselectAllPress = () => treeViewRef.current?.unselectAll?.();
-    const onSelectAllFilteredPress = () => treeViewRef.current?.selectAllFiltered?.();
-    const onUnselectAllFilteredPress = () => treeViewRef.current?.unselectAllFiltered?.();
-
-    return (
-        <SafeAreaView
-            style={styles.mainView}>
-            <SearchInput onChange={debouncedSetSearchText} />
-            <View
-                style={styles.selectionButtonRow}>
-                <Button
-                    title='Select All'
-                    onPress={onSelectAllPress} />
-                <Button
-                    title='Unselect All'
-                    onPress={onUnselectAllPress} />
-            </View>
-            <View
-                style={styles.selectionButtonRow}>
-                <Button
-                    title='Select Filtered'
-                    onPress={onSelectAllFilteredPress} />
-                <Button
-                    title='Unselect Filtered'
-                    onPress={onUnselectAllFilteredPress} />
-            </View>
-
-            <View
-                style={[styles.selectionButtonRow, styles.selectionButtonBottom]}>
-                <Button
-                    title='Expand All'
-                    onPress={expandAllPress} />
-                <Button
-                    title='Collapse All'
-                    onPress={collapseAllPress} />
-            </View>
-
-            <View
-                style={styles.treeViewParent}>
-                <TreeView
-                    ref={treeViewRef}
-                    data={sampleData.current}
-                    onCheck={handleSelectionChange}
-                    onExpand={handleExpanded}
-                />
-            </View>
-        </SafeAreaView>
-    );
-}

package/example/src/screens/screens.styles.ts

@@ -1,25 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const styles = StyleSheet.create({
-    mainView: {
-        flex: 1,
-        alignSelf: "flex-start",
-        backgroundColor: "white",
-    },
-    selectionButtonRow: {
-        borderTopWidth: 0.5,
-        borderColor: "lightgrey",
-        paddingVertical: 2,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        marginHorizontal: 10,
-    },
-    selectionButtonBottom: {
-        borderBottomWidth: 0.5,
-        borderColor: "lightgrey"
-    },
-    treeViewParent: {
-        flex: 1,
-        minWidth: "100%"
-    }
-});