Merge pull request #1 from fjmorant/0.0.1

0.0.1 release

Author: Javier Morant

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["react-native"]
+}

.eslintcache

@@ -0,0 +1 @@
+{"/Users/morant84/Work/react-native-nested-listview/example/index.android.js":{"size":178,"mtime":1506461733000,"hashOfConfig":"18q17kc","results":{"filePath":"/Users/morant84/Work/react-native-nested-listview/example/index.android.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/morant84/Work/react-native-nested-listview/example/index.ios.js":{"size":178,"mtime":1506461736000,"hashOfConfig":"18q17kc","results":{"filePath":"/Users/morant84/Work/react-native-nested-listview/example/index.ios.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/morant84/Work/react-native-nested-listview/example/ExampleApp.js":{"size":2151,"mtime":1507097693000,"hashOfConfig":"18q17kc","results":{"filePath":"/Users/morant84/Work/react-native-nested-listview/example/ExampleApp.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/morant84/Work/react-native-nested-listview/index.js":{"size":1963,"mtime":1507071227000,"hashOfConfig":"18q17kc","results":{"filePath":"/Users/morant84/Work/react-native-nested-listview/index.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/morant84/Work/react-native-nested-listview/index.test.js":{"size":3703,"mtime":1507012094000,"hashOfConfig":"18q17kc","results":{"filePath":"/Users/morant84/Work/react-native-nested-listview/index.test.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/morant84/Work/react-native-nested-listview/NodeView.js":{"size":1790,"mtime":1507071227000,"hashOfConfig":"18q17kc","results":{"filePath":"/Users/morant84/Work/react-native-nested-listview/NodeView.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}}}

.eslintignore

@@ -0,0 +1 @@
+flow-typed

.eslintrc

@@ -0,0 +1,18 @@
+{
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["react", "react-native", "flowtype"],
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:react-native/all",
+    "plugin:flowtype/recommended"
+  ],
+  "rules": {
+    "react-native/no-color-literals": 0
+  }
+}

.flowconfig

@@ -0,0 +1,47 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+.*/node_modules/*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
+flow-typed
+
+[options]
+emoji=true
+
+module.system=haste
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
+
+[version]

.npmignore

@@ -0,0 +1,3 @@
+example
+
+node_modules

NodeView.js

@@ -0,0 +1,80 @@
+/* @flow */
+
+import React from 'react'
+import {
+  TouchableWithoutFeedback,
+  View,
+  FlatList,
+  type Props,
+  type State,
+} from 'react-native'
+
+export type Node = {
+  id: string,
+  hidden: boolean,
+  opened: boolean,
+}
+
+export default class NodeView extends React.PureComponent<Props, State> {
+  props: {
+    generateIds: Function,
+    getChildren: Function,
+    getChildrenName: Function,
+    node: Node,
+    level: number,
+    onNodePressed: Function,
+    renderNode: Function,
+    renderChildrenNode: Function,
+  }
+
+  componentWillMount = () => {
+    this.setState({
+      node: this.props.node,
+    })
+  }
+
+  onNodePressed = () => {
+    this.setState({
+      node: {
+        ...this.state.node,
+        opened: !this.state.node.opened,
+      },
+    })
+
+    this.props.onNodePressed(this.state.node)
+  }
+
+  renderChildren = (item: Node, level: number) => {
+    return (
+      <NodeView
+        getChildrenName={this.props.getChildrenName}
+        node={item}
+        level={level + 1}
+        onNodePressed={this.props.onNodePressed}
+        renderNode={this.props.renderNode}
+      />
+    )
+  }
+
+  render() {
+    const rootChildrenName = this.props.getChildrenName(this.state.node)
+    const rootChildren = this.state.node[rootChildrenName]
+
+    return (
+      <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={rootChildren}
+            renderItem={({item}) => this.renderChildren(item, this.props.level)}
+            keyExtractor={item => item.id}
+          />
+        ) : null}
+      </View>
+    )
+  }
+}

README.md

@@ -1,2 +1,53 @@
 # react-native-nested-listview
-Nested Listview for React native
+Nested listview component for React native that it allows to create a listview that has N levels of nesting
+
+
+## Table of contents
+
+1. [Usage](#usage)
+1. [Props](#props)
+1. [Example](#example)
+1. [Roadmap](#roadmap)
+
+
+## Usage
+
+```
+yarn add react-native-nested-listview
+```
+
+```javascript
+import NestedListview from 'react-native-nested-listview'
+
+const data = [{title: 'Node 1', items: [{title: 'Node 1.1'}, {title: 'Node 1.2'}]}]
+
+<NestedListView
+  data={data}
+  getChildrenName={(node) => 'items'}
+  onNodePressed={(node) => alert('Selected node')}
+  renderNode={(node, level) => <Text>{node.name}</Text>}
+/>
+```
+
+## Props
+
+### Required
+
+Prop | Description | Type | Default
+------ | ------ | ------ | ------
+**`data`** | Array of nested items | Array | **Required**
+**`renderNode`** | Takes a node from data and renders it into the NestedlistView. The function receives `{node, level}` (see [Usage](#usage)) and must return a React element. | Function | **Required**
+**`getChildrenName`** | Function to determine in a node where are the children, by default NestedListView will try to find them in **items** | Function | **items**
+**`onNodePressed`** | Function called when a node is pressed by a user | Function | Not required
+
+## Example
+You can find the following example in the [`/example` folder](https://github.com/fjmorant/react-native-nested-listview/tree/master/example).
+
+![react-native-nested-listview](https://imgur.com/OqvopyK.gif)
+
+## Roadmap
+
+ - Autoscrolling optionally
+ - Expand/contract nodes programatically
+ - Support animations
+ - Add more examples of usage