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

[
  {
    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;
                    }

                }}
            />
        )
    }
};

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>
    );
  };
}