refactor: update example app's sample data generator to generate node…

…s with different id types
JairajJangle · Jan 16, 2025 · dd564cc · dd564cc
1 parent 45baaac
commit dd564cc
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 32 deletions.
diff --git a/example/src/components/CustomNodeRowView.tsx b/example/src/components/CustomNodeRowView.tsx
@@ -3,7 +3,7 @@ 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);
+export const CustomNodeRowView = React.memo(_CustomNodeRowView) as typeof _CustomNodeRowView;
 
 const VerticalLine = () => (
     <View style={styles.verticalLineStyle} />
@@ -23,7 +23,7 @@ const Levels = ({
     );
 };
 
-function _CustomNodeRowView(props: NodeRowProps) {
+function _CustomNodeRowView<ID = string>(props: NodeRowProps<ID>) {
     const { node, level, checkedValue, isExpanded, onCheck, onExpand } = props;
 
     const backgroundColor =

diff --git a/example/src/screens/CustomArrowScreen.tsx b/example/src/screens/CustomArrowScreen.tsx
@@ -16,11 +16,11 @@ import {
 } from 'react-native-tree-multi-select';
 
 import { styles } from './screens.styles';
-import { generateTreeList } from '../utils/sampleDataGenerator';
+import { defaultID, generateTreeList } from '../utils/sampleDataGenerator';
 import { CustomArrow } from '../components/CustomArrow';
 
 export default function CustomArrowScreen() {
-    const sampleData = React.useRef(generateTreeList(50, 4, 5));
+    const sampleData = React.useRef(generateTreeList(50, 4, 5, defaultID, "1"));
     const treeViewRef = React.useRef<TreeViewRef | null>(null);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -99,4 +99,4 @@ export default function CustomArrowScreen() {
             </View>
         </SafeAreaView>
     );
-}
+}
diff --git a/example/src/screens/CustomCheckboxScreen.tsx b/example/src/screens/CustomCheckboxScreen.tsx
@@ -16,11 +16,11 @@ import {
 } from 'react-native-tree-multi-select';
 
 import { styles } from './screens.styles';
-import { generateTreeList } from '../utils/sampleDataGenerator';
+import { defaultID, generateTreeList } from '../utils/sampleDataGenerator';
 import { CustomCheckboxView } from '../components/CustomCheckboxView';
 
 export default function CustomCheckboxScreen() {
-    const sampleData = React.useRef(generateTreeList(50, 4, 5));
+    const sampleData = React.useRef(generateTreeList(50, 4, 5, defaultID, "1"));
     const treeViewRef = React.useRef<TreeViewRef | null>(null);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -99,4 +99,4 @@ export default function CustomCheckboxScreen() {
             </View>
         </SafeAreaView>
     );
-}
+}
diff --git a/example/src/screens/CustomNodeRowViewScreen.tsx b/example/src/screens/CustomNodeRowViewScreen.tsx
@@ -16,11 +16,11 @@ import {
 } from 'react-native-tree-multi-select';
 
 import { styles } from './screens.styles';
-import { generateTreeList } from '../utils/sampleDataGenerator';
+import { defaultID, generateTreeList } from '../utils/sampleDataGenerator';
 import { CustomNodeRowView } from '../components/CustomNodeRowView';
 
 export default function CustomNodeRowViewScreen() {
-    const sampleData = React.useRef(generateTreeList(50, 4, 5));
+    const sampleData = React.useRef(generateTreeList(50, 4, 5, defaultID, "1"));
     const treeViewRef = React.useRef<TreeViewRef | null>(null);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -99,4 +99,4 @@ export default function CustomNodeRowViewScreen() {
             </View>
         </SafeAreaView>
     );
-}
+}
diff --git a/example/src/screens/LargeDataScreen.tsx b/example/src/screens/LargeDataScreen.tsx
@@ -16,10 +16,10 @@ import {
 } from 'react-native-tree-multi-select';
 
 import { styles } from './screens.styles';
-import { generateTreeList } from '../utils/sampleDataGenerator';
+import { defaultID, generateTreeList } from '../utils/sampleDataGenerator';
 
 export default function LargeDataScreen() {
-    const sampleData = React.useRef(generateTreeList(200, 5, 6));
+    const sampleData = React.useRef(generateTreeList(200, 5, 6, defaultID, "1"));
     const treeViewRef = React.useRef<TreeViewRef | null>(null);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -95,4 +95,4 @@ export default function LargeDataScreen() {
             </View>
         </SafeAreaView>
     );
-}
+}
diff --git a/example/src/screens/MediumDataScreen.tsx b/example/src/screens/MediumDataScreen.tsx
@@ -16,10 +16,10 @@ import {
 } from 'react-native-tree-multi-select';
 
 import { styles } from './screens.styles';
-import { generateTreeList } from '../utils/sampleDataGenerator';
+import { defaultID, generateTreeList } from '../utils/sampleDataGenerator';
 
 export default function MediumDataScreen() {
-    const sampleData = React.useRef(generateTreeList(20, 4, 5));
+    const sampleData = React.useRef(generateTreeList(20, 4, 5, defaultID, "1"));
     const treeViewRef = React.useRef<TreeViewRef | null>(null);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -96,4 +96,4 @@ export default function MediumDataScreen() {
             </View>
         </SafeAreaView>
     );
-}
+}
diff --git a/example/src/screens/SmallDataScreen.tsx b/example/src/screens/SmallDataScreen.tsx
@@ -17,7 +17,7 @@ import {
 } from 'react-native-tree-multi-select';
 
 import { styles } from './screens.styles';
-import { generateTreeList } from '../utils/sampleDataGenerator';
+import { defaultID, generateTreeList } from '../utils/sampleDataGenerator';
 
 interface Props {
     selectionPropagation?: SelectionPropagation;
@@ -26,7 +26,7 @@ interface Props {
 export default function SmallDataScreen(props: Props) {
     const { selectionPropagation } = props;
 
-    const sampleData = React.useRef(generateTreeList(5, 4, 3));
+    const sampleData = React.useRef(generateTreeList(5, 4, 3, defaultID, `1`));
     const treeViewRef = React.useRef<TreeViewRef | null>(null);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -104,4 +104,4 @@ export default function SmallDataScreen(props: Props) {
             </View>
         </SafeAreaView>
     );
-}
+}
diff --git a/example/src/utils/sampleDataGenerator.ts b/example/src/utils/sampleDataGenerator.ts
@@ -1,32 +1,38 @@
-interface TreeNode {
-    id: string;
+export interface TreeNode<ID> {
+    id: ID;
     name: string;
-    children?: TreeNode[];
+    children?: TreeNode<ID>[];
 }
 
 // This function generates a TreeNode with a random number of children.
-function generateNode(id: string, level: number, maxLevel: number, maxChildren: number): TreeNode {
-    const node: TreeNode = {
-        id: id,
-        name: `Node ${id}`,
+function generateNode<ID = string>(id: ID, idx: number, level: number, maxLevel: number, maxChildren: number, nextID: (prev: ID, idx: number, parent?: ID) => ID, parentID?: ID): TreeNode<ID> {
+    let nid = nextID(id, idx, parentID);
+    const node: TreeNode<ID> = {
+        id: nid,
+        name: `Node ${nid}`,
     };
 
     if (level < maxLevel) {
         const numChildren = Math.floor(Math.random() * maxChildren) + 1; // generates a random number between 1 and maxChildren
         node.children = [];
         for (let i = 1; i <= numChildren; i++) {
-            node.children.push(generateNode(`${id}.${i}`, level + 1, maxLevel, maxChildren));
+            node.children.push(generateNode(nid, i, level + 1, maxLevel, maxChildren, nextID, node.id));
+            nid = nextID(nid, idx, node.id);
         }
     }
 
     return node;
 }
 
 // This function generates a list of TreeNodes
-export function generateTreeList(num: number, maxLevel: number, maxChildren: number): TreeNode[] {
-    let result: TreeNode[] = [];
+export function generateTreeList<ID = string>(num: number, maxLevel: number, maxChildren: number, nextID: (prev: ID, idx: number) => ID, initialValue: ID): TreeNode<ID>[] {
+    let result: TreeNode<ID>[] = [];
+    let curID = initialValue;
     for (let i = 1; i <= num; i++) {
-        result.push(generateNode(`${i}`, 1, maxLevel, maxChildren));
+      result.push(generateNode(curID, i, 1, maxLevel, maxChildren, nextID));
+      curID = nextID(curID, i);
     }
     return result;
-}  
+}
+
+export const defaultID = (_prev: string, idx: number, parentID?: string) => `${parentID ? parentID + '.' : ''}${idx}`