diff --git a/example/src/App.tsx b/example/src/App.tsx index b859c86..27fe5dd 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -17,6 +17,7 @@ import { } from './screens/SelectionPropagationScreens'; import packageJson from '../../package.json'; import { TwoTreeViewsScreen } from "./screens/TwoTreeViewsScreen"; +import CustomNodeID from './screens/CustomNodeIDScreen'; const data: ShowcaseExampleScreenSectionType[] = [ { @@ -57,6 +58,11 @@ const data: ShowcaseExampleScreenSectionType[] = [ slug: 'custom-row-item', getScreen: () => CustomNodeRowViewScreen, }, + { + name: 'Custom Node ID', + slug: 'custom-node-id', + getScreen: () => CustomNodeID + } ], }, { @@ -104,4 +110,4 @@ export default function App() { data={data} /> ); -} \ No newline at end of file +} diff --git a/example/src/screens/CustomNodeIDScreen.tsx b/example/src/screens/CustomNodeIDScreen.tsx new file mode 100644 index 0000000..708cb8f --- /dev/null +++ b/example/src/screens/CustomNodeIDScreen.tsx @@ -0,0 +1,114 @@ +import { debounce } from "lodash"; +import React, { useEffect, useRef } from "react"; +import { SafeAreaView, View, Button } from "react-native"; +import { SelectionPropagation, TreeViewRef, TreeView } from "react-native-tree-multi-select"; +import SearchInput from "../components/SearchInput"; +import { generateTreeList, TreeNode } from "../utils/sampleDataGenerator"; +import { styles } from "./screens.styles"; +import { CustomNodeRowView } from "../components/CustomNodeRowView"; + +interface Props { + selectionPropagation?: SelectionPropagation; +} + +const customMapper: (parentName?: string) => (it: TreeNode, idx: number) => TreeNode = (parentStr?: string) => (it: TreeNode, idx: number) => { + const name = `${parentStr ? `${parentStr}.` : ''}${idx + 1}`; + return { + ...it, + name, + children: it.children?.map(customMapper(name)) ?? [] + } as TreeNode +} + +export default function CustomNodeID(props: Props) { + const { selectionPropagation } = props; + + const idRef = useRef(1); + + useEffect(() => { + return () => { + idRef.current = 1 + }; + }, []) + + const sampleData = React.useMemo(() => generateTreeList(30, 4, 5, (_prev, _idx) => idRef.current++, 1).map(customMapper()), []); + console.log(sampleData); + const treeViewRef = React.useRef | 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: number[], + _indeterminateIds: number[] + ) => { + // NOTE: Handle _checkedIds and _indeterminateIds here + }; + const handleExpanded = (_expandedIds: number[]) => { + // 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 ( + + + +