Refactored nestedlistview

Author: fjmorant

example/ExampleApp.js

@@ -28,23 +28,23 @@ const generateXNumItems = (numItems, prefix) => {
 const data = [
   {
     name: 'Item level 1.1',
-    items: generateXNumItems(100, 'Item level 1.1'),
+    descendants: generateXNumItems(10, 'Item level 1.1'),
   },
   {
     name: 'Item level 1.2',
-    items: [
+    descendants: [
       {
         name: 'Item level 1.2.1',
       },
       {
         name: 'Item level 1.2.2',
-        children: generateXNumItems(2, 'Item level 1.2.2'),
+        children: generateXNumItems(25, 'Item level 1.2.2'),
       },
     ],
   },
   {
     name: 'Item level 1.3',
-    items: generateXNumItems(1000, 'Item level 1.3'),
+    descendants: generateXNumItems(50, 'Item level 1.3'),
   },
 ]
 
@@ -63,7 +63,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'rgb(0, 0, 0)',
   },
-  nestedListView: {padding: 10},
+  nestedListView: {padding: 10, flex: 1},
 })
 export default class ExampleApp extends React.Component<Props, State> {
   nestedListView: any
@@ -80,15 +80,15 @@ export default class ExampleApp extends React.Component<Props, State> {
   }
 
   onNodePressed = (node: any) => {
-    Alert.alert(node.id)
+    // alert(node)
   }
 
   getChildrenName = (node: Object) => {
     if (node.name === 'Item level 1.2.2') {
       return 'children'
     }
 
-    return 'items'
+    return 'descendants'
   }
 
   render = () => {

example/nestedListView/NodeView.js

@@ -14,57 +14,53 @@ export default class NodeView extends React.PureComponent<Props, State> {
     generateIds: Function,
     getChildren: Function,
     node: any,
-    searchTree: Function,
     onNodePressed: Function,
     onLayout: Function,
     renderNode: Function,
     renderChildrenNode: Function,
   }
 
-  state: {
-    childrenNodes: Array<any>,
-  }
-
-  state = {
-    childrenNodes: [],
-  }
-
   componentWillMount = () => {
-    const rootChildren = this.props.getChildren(this.props.node)
-
-    if (rootChildren) {
-      this.setState({
-        childrenNodes: rootChildren.map((child, index) => {
-          return this.props.generateIds(rootChildren[index])
-        }),
-      })
-    }
+    this.setState({
+      node: this.props.node,
+    })
   }
 
-  onNodePressed = (node: any) => {
-    if (this.state.childrenNodes) {
-      const childrenNodes = this.state.childrenNodes.map((child, index) => {
-        return this.props.searchTree(this.state.childrenNodes[index], node)
-      })
-
-      this.setState({childrenNodes})
-    }
+  onNodePressed = () => {
+    this.setState({
+      node: {
+        ...this.state.node,
+        opened: !this.state.node.opened,
+      },
+    })
+  }
 
-    this.props.onNodePressed(node)
+  renderChildren = (item: any, level: number) => {
+    return (
+      <NodeView
+        getChildrenName={this.props.getChildrenName}
+        node={item}
+        level={level + 1}
+        renderNode={(item, level) => this.props.renderNode(item, level)}
+      />
+    )
   }
 
   render() {
-    const {node, onLayout, renderNode, renderChildrenNode} = this.props
+    const rootChildrenName = this.props.getChildrenName(this.state.node)
+    const rootChildren = this.state.node[rootChildrenName]
 
     return (
-      <View onLayout={onLayout}>
-        <TouchableWithoutFeedback onPress={() => this.onNodePressed(node)}>
-          {renderNode()}
-        </TouchableWithoutFeedback>
-        {node.opened && this.state.childrenNodes ? (
+      <View>
+        {!this.state.node.hidden ? (
+          <TouchableWithoutFeedback onPress={this.onNodePressed}>
+            {this.props.renderNode(this.state.node, this.props.level)}
+          </TouchableWithoutFeedback>
+        ) : null}
+        {this.state.node.opened && rootChildren ? (
           <FlatList
-            data={this.state.childrenNodes}
-            renderItem={({item}) => renderChildrenNode(item)}
+            data={rootChildren}
+            renderItem={({item}) => this.renderChildren(item, this.props.level)}
             keyExtractor={item => item.id}
           />
         ) : null}

example/nestedListView/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import React from 'react'
-import {FlatList, type Props, type State} from 'react-native'
+import {FlatList, type Props, type State, View} from 'react-native'
 import NodeView from './NodeView'
 import shortid from 'shortid'
 
@@ -14,47 +14,18 @@ export default class NestedListView extends React.PureComponent<Props, State> {
     style: any,
   }
 
-  state: {
-    childrenNodes: Array<any>,
-  }
-
-  state = {
-    childrenNodes: [],
-  }
-
   componentWillMount = () => {
-    const rootChildren = this.props.data
-    if (rootChildren) {
-      this.setState({
-        childrenNodes: rootChildren.map((child, index) =>
-          this.generateIds(rootChildren[index])
-        ),
-      })
-    }
-  }
-
-  searchTree = (element: any, otherElement: any) => {
-    if (element.id === otherElement.id) {
-      element.opened = !element.opened
-
-      return element
+    const root = {
+      id: 1,
+      items: this.props.data.map((child, index) =>
+        this.generateIds(this.props.data[index])
+      ),
+      name: 'root',
+      opened: true,
+      hidden: true,
     }
 
-    const childrenName = this.props.getChildrenName(element)
-
-    if (childrenName) {
-      const children = element[childrenName]
-
-      if (children) {
-        element[childrenName] = children.map((child, index) =>
-          this.searchTree(children[index], otherElement)
-        )
-      }
-
-      return element
-    }
-
-    return element
+    this.setState({root})
   }
 
   generateIds = (element: any) => {
@@ -79,39 +50,25 @@ export default class NestedListView extends React.PureComponent<Props, State> {
     return element
   }
 
-  onNodePressed = (node: any) => {
-    const childrenNodes = this.state.childrenNodes.map((child, index) =>
-      this.searchTree(this.state.childrenNodes[index], node)
-    )
-
-    this.setState({childrenNodes})
-    this.props.onNodePressed(node)
-  }
+  getChildrenName = node => {
+    if (node.name === 'root') {
+      return 'items'
+    }
 
-  onCreateChildren = (item: any, level: number) => {
-    return (
-      <NodeView
-        getChildren={(node: Object) => node[this.props.getChildrenName(node)]}
-        key={item.id}
-        node={item}
-        searchTree={this.searchTree}
-        generateIds={this.generateIds}
-        onNodePressed={() => this.onNodePressed(item)}
-        renderChildrenNode={(childrenNode: Object) =>
-          this.onCreateChildren(childrenNode, level + 1)}
-        renderNode={() => this.props.renderNode(item, level)}
-      />
-    )
+    return this.props.getChildrenName(node)
   }
 
   render = () => {
     return (
-      <FlatList
-        data={this.state.childrenNodes}
-        style={this.props.style}
-        renderItem={({item}) => this.onCreateChildren(item, 0)}
-        keyExtractor={item => item.id}
-      />
+      <View style={this.props.style}>
+        <NodeView
+          getChildrenName={this.getChildrenName}
+          node={this.state.root}
+          generateIds={this.generateIds}
+          level={0}
+          renderNode={(item, level) => this.props.renderNode(item, level)}
+        />
+      </View>
     )
   }
 }