Merge pull request #73 from fjmorant/childrenAsObject

Javier Morant · web-flow · commit 0e868bf3f736 · 2018-04-05T08:57:57.000+01:00
diff --git a/examples/ChildrenAsObjectExample.js b/examples/ChildrenAsObjectExample.js
@@ -0,0 +1,103 @@
+/* @flow */
+
+import React from 'react'
+import {
+  Alert,
+  StyleSheet,
+  Text,
+  View,
+  type Props,
+  type State,
+} from 'react-native'
+import NestedListView from 'react-native-nested-listview'
+
+const data = [
+  {
+    name: 'Main Parent',
+    children: {
+      child1: {
+        name: 'Main Child 1',
+        children: {
+          child1: {
+            name: 'Sub Child 1',
+            children: {},
+          },
+          child2: {
+            name: 'Sub Child 2',
+            children: {
+              subChild: {
+                name: 'Sample',
+                children: {},
+              },
+            },
+          },
+        },
+      },
+      child2: {
+        name: 'Main Child 2',
+        children: {
+          child1: {
+            name: 'Sub Child 1',
+            children: {},
+          },
+          child2: {
+            name: 'Sub Child 2',
+            children: {},
+          },
+        },
+      },
+    },
+  },
+]
+
+const colorLevels = {
+  [0]: 'white',
+  [1]: 'blue',
+  [2]: 'green',
+  [3]: 'red',
+}
+
+const styles = StyleSheet.create({
+  container: {flex: 1, backgroundColor: 'rgb(255, 255, 255)', padding: 15},
+  node: {
+    flex: 1,
+    padding: 10,
+    borderWidth: 1,
+    borderColor: 'rgb(0, 0, 0)',
+  },
+})
+export default class ExampleApp extends React.Component<Props, State> {
+  nestedListView: any
+
+  renderNode = (node: Object, level: number) => {
+    const paddingLeft = (level + 1) * 30
+    const backgroundColor = colorLevels[level] || 'white'
+
+    return (
+      <View style={[styles.node, {backgroundColor, paddingLeft}]}>
+        <Text>{node.name}</Text>
+      </View>
+    )
+  }
+
+  onNodePressed = (node: any) => {
+    alert(node.name)
+  }
+
+  getChildrenName = (node: Object) => {
+    return 'children'
+  }
+
+  render = () => {
+    return (
+      <View style={styles.container}>
+        <NestedListView
+          data={data}
+          getChildrenName={this.getChildrenName}
+          onNodePressed={this.onNodePressed}
+          renderNode={this.renderNode}
+        />
+      </View>
+    )
+  }
+}
diff --git a/examples/HomeScreen.js b/examples/HomeScreen.js
@@ -23,6 +23,10 @@ const options = [
     screen: 'DynamicContentExample',
     title: 'Dynamic Content',
   },
+  {
+    screen: 'ChildrenAsObjectExample',
+    title: 'Children as Object',
+  },
 ]
 
 export default class HomeScreen extends React.Component {
diff --git a/examples/index.js b/examples/index.js
@@ -5,6 +5,7 @@ import StateChangeNodeExample from './StateChangeNodeExample'
 import ErrorMessageExample from './ErrorMessageExample'
 import NestedRowExample from './NestedRowExample'
 import DynamicContentExample from './DynamicContentExample'
+import ChildrenAsObjectExample from './ChildrenAsObjectExample'
 
 import HomeScreen from './HomeScreen'
 
@@ -17,6 +18,7 @@ const SimpleApp = StackNavigator({
   ErrorMessageExample: {screen: ErrorMessageExample},
   NestedRowExample: {screen: NestedRowExample},
   DynamicContentExample: {screen: DynamicContentExample},
+  ChildrenAsObjectExample: {screen: ChildrenAsObjectExample},
 })
 
 AppRegistry.registerComponent('example', () => SimpleApp)
diff --git a/examples/yarn.lock b/examples/yarn.lock
@@ -3712,10 +3712,12 @@ react-native-drawer-layout@1.3.2:
     react-native-dismiss-keyboard "1.0.0"
 
 "react-native-nested-listview@file:..":
-  version "0.3.0"
+  version "0.4.3"
   dependencies:
     "@types/lodash.isequal" "^4.5.2"
     lodash.isequal "^4.5.0"
+    react "16.2.0"
+    react-native "0.54.2"
     shortid "^2.2.8"
 
 react-native-safe-area-view@^0.7.0:
@@ -3824,6 +3826,15 @@ react-transform-hmr@^1.0.4:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
+react@16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
 react@^16.3.0-alpha.1:
   version "16.3.0-alpha.3"
   resolved "https://registry.yarnpkg.com/react/-/react-16.3.0-alpha.3.tgz#b925cbb4a971db2b0ab87cb9da449227d1ccafb4"
diff --git a/package.json b/package.json
@@ -18,6 +18,8 @@
   "dependencies": {
     "@types/lodash.isequal": "^4.5.2",
     "lodash.isequal": "^4.5.0",
+    "react": "16.2.0",
+    "react-native": "0.54.2",
     "shortid": "^2.2.8"
   },
   "peerDependencies": {
@@ -49,7 +51,12 @@
     "tslint": "^5.9.1",
     "typescript": "^2.7.2"
   },
-  "keywords": ["react", "native", "list", "nested"],
+  "keywords": [
+    "react",
+    "native",
+    "list",
+    "nested"
+  ],
   "author": "Javier Morant",
   "license": "MIT",
   "bugs": {
@@ -58,7 +65,11 @@
   "homepage": "https://github.com/fjmorant/react-native-nested-listview#readme",
   "jest": {
     "preset": "react-native",
-    "moduleFileExtensions": ["ts", "tsx", "js"],
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ],
     "transform": {
       "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
       "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
@@ -67,7 +78,9 @@
       "node_modules/(?!(jest-)|react-native|react-navigation|react-clone-referenced-element|mobx-react)"
     ],
     "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
-    "modulePathIgnorePatterns": ["<rootDir>/examples/"],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/examples/"
+    ],
     "testPathIgnorePatterns": [
       "\\.snap$",
       "<rootDir>/node_modules/",
diff --git a/src/NestedListView.test.tsx b/src/NestedListView.test.tsx
@@ -103,6 +103,57 @@ describe('NestedListView', () => {
     expect(nestedListView).toMatchSnapshot()
   })
 
+  test('renders with children as objects', () => {
+    const data = [
+      {
+        name: 'Main Parent',
+        children: {
+          child1: {
+            name: 'Main Child 1',
+            children: {
+              child1: {
+                name: 'Sub Child 1',
+                children: {},
+              },
+              child2: {
+                name: 'Sub Child 2',
+                children: {
+                  subChild1: {
+                    name: 'Sample',
+                    children: {},
+                  },
+                },
+              },
+            },
+          },
+          child2: {
+            name: 'Main Child 2',
+            children: {
+              child1: {
+                name: 'Sub Child 1',
+                children: {},
+              },
+              child2: {
+                name: 'Sub Child 2',
+                children: {},
+              },
+            },
+          },
+        },
+      },
+    ]
+    const nestedListView = renderer
+      .create(
+        <NestedListView
+          getChildrenName={(node: any) => 'children'}
+          renderNode={renderNode}
+          data={data}
+        />
+      )
+      .toJSON()
+    expect(nestedListView).toMatchSnapshot()
+  })
+
   test('renders with onNodePressed', () => {
     const data = [{title: 'child1'}, {title: 'child2'}, {title: 'child3'}]
     const nestedListView = renderer
diff --git a/src/NestedListView.tsx b/src/NestedListView.tsx
@@ -54,9 +54,12 @@ export default class NestedListView extends React.PureComponent<
     }
 
     const childrenName: string = this.props.getChildrenName(node) || 'items'
-    const children = node[childrenName]
+    let children = node[childrenName]
 
     if (children) {
+      if (!Array.isArray(children)) {
+        children = Object.keys(children).map((key: string) => children[key])
+      }
       node[childrenName] = children.map((_: INode, index: number) =>
         this.generateIds(children[index])
       )
diff --git a/src/__snapshots__/NestedListView.test.tsx.snap b/src/__snapshots__/NestedListView.test.tsx.snap
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -54,9 +54,12 @@ export default class NestedListView extends React.PureComponent<`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`const childrenName: string = this.props.getChildrenName(node) \|\| 'items'`
`57`		`- const children = node[childrenName]`
	`57`	`+ let children = node[childrenName]`
`58`	`58`
`59`	`59`	`if (children) {`
	`60`	`+ if (!Array.isArray(children)) {`
	`61`	`+ children = Object.keys(children).map((key: string) => children[key])`
	`62`	`+ }`
`60`	`63`	`node[childrenName] = children.map((_: INode, index: number) =>`
`61`	`64`	`this.generateIds(children[index])`
`62`	`65`	`)`