GithubHelp home page GithubHelp logo

fjmorant / react-native-nested-listview Goto Github PK

View Code? Open in Web Editor NEW
195.0 4.0 25.0 1.67 MB

Display nested arrays of N levels with this React Native library.

License: MIT License

TypeScript 93.19% JavaScript 3.01% Shell 3.81%
react-native listview nested-structures nested-objects react reactjs react-component tree treeview android ios typescript expo

react-native-nested-listview's Introduction

react-native-nested-listview

UI component for React Native that allows to create a listview with N levels of nesting

platforms CircleCI codecov npm github release CodeFactor

Table of contents

  1. Show
  2. Usage
  3. Props
  4. Examples
  5. Roadmap

Show

react-native-nested-listview react-native-nested-listview

Usage

yarn add react-native-nested-listview
import NestedListView, {NestedRow} 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, isLastLevel) => (
    <NestedRow
      level={level}
      style={styles.row}
    >
      <Text>{node.title}</Text>
    </NestedRow>
  )}
/>

Props

NestedListView

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, isLastLevel} (see 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
extraData A marker property for telling the list to re-render Boolean Not required
keepOpenedState Prop for keeping the opened state of each node when data passed to the list changes Boolean Not required
initialNumToRender Prop for setting the initial amount of items to render. number Not required

NestedRow

Prop Description Type Default
height Height of the row number 50
children Content of the NestedRow Component Required
level Level where a given node is number Required
style NestedRow container style Style Not required

Examples

You can find examples here and also an Expo project here

Version App React Native Library
1.0.0 0.70.1 0.14.0

Roadmap

I have moved the roadmap of this library to this trello board so that it can be easier to add more things and like that it doesn't create issues in GitHub if I need to create a ticket

Roadmap Trello Board

Development

In other to start watch mode and develop the library with the examples project (described above), you need to have installed the following npm packages:

  • npm -g json
  • npm -g wml

And have the library and examples project in the same root folder, example:

  • root
    • react-native-nested-listview
    • react-native-nested-listview-examples

After the previous steps you can then run the following command:

yarn start-watch

and then you can start the examples app as usual:

yarn ios or yarn android

When you finish with watch mode remember to stop it to get back to normal like this:

yarn stop-watch

Invite me a coffee

If you want to invite me for a coffee after enjoying this library or just for fun.

ko-fi

Thanks

react-native-nested-listview's People

Contributors

bermani avatar dependabot-preview[bot] avatar dependabot[bot] avatar epicfaace avatar fjmorant avatar greenkeeper[bot] avatar nattatorn-dev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

react-native-nested-listview's Issues

Fix warnings for lifecycle events

When using this library, we currently receive the following warnings as of RN 0.61:

 WARN  Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: NestedListView, NodeView
  WARN  Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: NestedListView, NodeView

these guidelines should be followed and an update should be applied to this lib

Unable to resolve error

Hello.
I installed it through npm i react-native-nested-listview

and I am getting an error:
could not resolve 'E:\mypath\node_modules\react-native-listview\dist\src\NestedListView as a file not as a folder'

when I looked at that folder there is no src folder inside the dist folder.

Is the installation file incomplete or am I doing something wrong?

NestedRow not updating on state change

I have a NestedListView that have checkboxes (using TouchableOpacity with Image that looks like a checkbox) in all of them.

When I click on the Checkbox in each NestedRow, the state changes as output in the componentWillUpdate and render methods, but the NestedRow itself isn't updating.

Here is a quick example I've whipped up from another issue.
The selected array in the state is like

[
  {
    parent: false, //parent 0 value
    child: [
      false, // child 0 value
      false
    ]
  }
...etc
]
const generateXNumItems = (pid, numItems, prefix) => {
    const items = []
    let i
    for (i = 0; i < numItems; i++) {
        items.push({
            name: `${prefix}.${i}`,
            childId: i,
            parentId: pid,
        })
    }

    return items
}

const data = [
    {
        name: 'Item level 1.1',
        parentId: 0,
        descendants: generateXNumItems(0, 10, 'Item level 1.1'),
    },
    {
        name: 'Item level 1.2',
        parentId: 1,
        descendants: generateXNumItems(1, 5, 'Item level 1.1'),
    },
    {
        name: 'Item level 1.3',
        parentId: 2,
        descendants: generateXNumItems(2, 2, 'Item level 1.3'),
    },
]

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)',
    },
})

class ExampleApp extends Component {
    constructor(props) {
        // console.log(JSON.stringify(data));
        super(props)
        this.state = {
            selected: []
        }
    }

    componentWillMount() {
        let selected = data.map(element => {
            return {
                parent: false,
                child: Array(element.descendants.length).fill(false)
            }
        })

        // console.log(JSON.stringify(selected));
        this.setState({
            ... this.state,
            selected: selected
        });
    }

    toggleChecked(pid, cid = -1) {
        let a = this.state.selected.slice(); //creates the clone of the state
        if (cid === -1) {
            a[pid].parent = !a[pid].parent;
        } else {
            a[pid].child[cid] = !a[pid].child[cid];
        }

        this.setState({
            ... this.state,
            selected: a
        });
    }

    componentWillUpdate(nextProp, nextState) {
        console.log(JSON.stringify(nextState));
    }

    render() {
        return (
            <NestedListView
                data={data}
                getChildrenName={() => 'descendants'}
                onNodePressed={category => {
                }}
                renderNode={(item, level) => {
                    switch (level) {
                        case 1:
                            return (
                                <NestedRow level={level} style={{ marginLeft: -10 }}>
                                    <View
                                        style={[
                                            styles.node,
                                            {
                                                backgroundColor: colorLevels[level] || 'white',
                                                paddingLeft: (level + 1) * 30,
                                            },
                                        ]}>
                                        <Text>{item.name}</Text>
                                        <TouchableOpacity onPress={() => this.toggleChecked(item.parentId)}>
                                            {
                                                this.state.selected[item.parentId] ?
                                                    <Text>CHECKED</Text>
                                                    :
                                                    <Text>NOT CHECKED</Text>
                                            }

                                        </TouchableOpacity>
                                    </View>
                                </NestedRow>
                            );
                            break;
                        case 2:
                            console.log(item.parentId, item.childId);
                            return (
                                <NestedRow level={level} style={{ marginLeft: -10 }}>
                                    <View
                                        style={[
                                            styles.node,
                                            {
                                                backgroundColor: colorLevels[level] || 'white',
                                                paddingLeft: (level + 1) * 30,
                                            },
                                        ]}>
                                        <Text>{item.name}</Text>
                                        <TouchableOpacity onPress={() => this.toggleChecked(item.parentId, item.childId)}>
                                            {
                                                this.state.selected[item.parentId].child[item.childId] ?
                                                    <Text>CHECKED</Text>
                                                    :
                                                    <Text>NOT CHECKED</Text>
                                            }

                                        </TouchableOpacity>
                                    </View>
                                </NestedRow>
                            );
                            break;
                    }

                }}
            />
        )
    }
};

As you can see, when clicking on the TouchableOpacity to change the state of the selected node from true to false and false to true (basically toggling), the componentWillUpdate is shown to have updated the state (for example, clicking the first parent "CHECKED" will toggle the value), but the view itself is not rendering the updated value.

Thank you.

Edit:
https://www.youtube.com/watch?v=Cpp1hRQrgR0&feature=youtu.be

add selectedValues and currentValue properties

it would be nice to have a list of all selected (opened) values of the list as selectedValues
and the last clicked node as currentValue, so that we can give e visual feedback on which node is currently selected.

Add to NestedRow paddingLeftIncrement prop

Now the NstedRow component has a fixed paddingLeft increment of ten times the current level as you can see in this code:

<View
style={[
    styles.nestedRow,
    {
    ...style,
    height,
    paddingLeft: level * 10,
    },
]}>
   {children}
</View>

Now then is fixed, you should be able to set the paddingLeftIncrement per level

List collapses on state (data) change

Hey,

really neat library you got here! My only problem so far, is when I want to change my data structure via setState(), the whole list collapses, and I have to start opening everything again.

Is there a way to go around this? (I couldn't find any similar cases in the examples, nor the Issues on github.

export default class ExampleApp extends React.Component {
  state = {
    currentList: data
  }

  getChildrenName = node => {
    return 'children';
  }

  addItem = () => {
    this.setState({
      currentList: [
        ...this.state.currentList.slice(0, 0), // 2018 year
        {
          ...this.state.currentList[0],
          children: [
            ...this.state.currentList[0].children.slice(0, 0), // oktober first month
            {
              ...this.state.currentList[0].children[0],
              children: [
                ...this.state.currentList[0].children[0].children.slice(0, 0),
                {
                  name: 'SORELEJE'
                },
                ...this.state.currentList[0].children[0].children.slice(1)
              ]
            },
            ...this.state.currentList[0].children.slice(1)
          ]
        },
        ...this.state.currentList.slice(1)
      ]
    })
  }

  renderItem = (node, level) => {
    console.log('Level', level);
    return (
      <View
        style={{ paddingLeft: 12, flexDirection: 'row', alignItems: 'center' }}
      >
        <Text style={{ marginRight: 24 }}>{node.name}</Text>
        {level == 2 && (
          <TouchableOpacity onPress={this.addItem} >
            <Icon name="add" size={30} />
          </TouchableOpacity>
        )}
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <NestedListView
          data={this.state.currentList}
          getChildrenName={this.getChildrenName}
          renderNode={(node, level) => (
            <NestedRow
              level={level}
              paddingLeftIncrement={0}
              style={{ borderColor: 'black', borderWidth: 1 }}
            >
              {this.renderItem(node, level)}
            </NestedRow>
          )}
        />
      </View>
    );
  };
}

Accordion like behavior of list

Hello :)

Just want to ask if there is a plan for the nested list view to have an Accordion like behavior. It would be better if there is an option that we can close other list if a list header of it's same level is clicked. If it isn't too much to ask. Thanks.

Inconsistent typescript definition for onNodePressed

NestedListView declares the type of the onNodePressed prop as () => any

onNodePressed?: () => any

This prop gets passed directly to NodeView which has an inconsistent signature: (item: any) => any

onNodePressed?: (item: any) => any

Neither signature is accurate to the actual usage of the onNodePressed prop. The only time where the prop is actually used is this line:

if (this.props.onNodePressed) {
this.props.onNodePressed(this.state.node)
}

And the type of this.state.node is INode:

export interface IState {
node: INode

So the correct signature in all locations should be (node?: INode) => void

add getChildrenId

most of the time we retrive the data from a service, and the data already has an ID value, and often is called id. This could conflict with node id you are generating, or have unnecessary double ids.
Consider adding a function to set the name of the current data ID.

i want dynamic height of row

 <NestedListView
     style={{ height: '100%',flexGrow: 0 }}
    data={devices}
    getChildrenName={(node) => 'children'}
    onNodePressed={(node) => {alert(node.name)
    console.log(node)}}
    renderNode={(node, level) => (

<NestedRow
// height = {0} //this shoud not be hard coded
level={level}
style={{ flexGrow:0,borderColor: 'black', borderWidth: 1}}
>

          <DeviceRow cropType={node.cropType} gpm={node.gpm} name={node.name} status={node.status} />
        
        </NestedRow>

Help Wanted: Multi Level Object Example

Hello thanks for your plugin ๐Ÿ‘

Is there a way to use your component from an object source like this?

{
    name: 'Main Parent',
    descendants: {
      "1":{
        name: "Main Child 1",
        children: {
          "1":{
            name: "Sub Child 1",
            children:{}
          },
          "2":{
            name: "Sub Child 2",
            children:{
              name: "Sample",
              children:{}
            }
          }
        }
      },
      "2":{
        name: "Main Child 2",
        children: {
          "1":{
            name: "Sub Child 1",
            children:{}
          },
          "2":{
            name: "Sub Child 2",
            children:{}
          }
        }
      },
    }
  },

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.