react-native-1app/__lib/GridView.js

import React, { Component } from 'react';
import { ListView, View, Platform, StyleSheet } from 'react-native';

export default class GridView extends Component {
  constructor(props) {
    super(props);
    this.state = { lista: props.dataSource, dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }) };
    this.state.dataSource = this.setLista(props.dataSource);
  }
  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps != this.props) {
      nextState.lista = nextProps.dataSource; // this.state.dataSource.cloneWithRows(nextProps.dataSource)
      nextState.dataSource = this.setLista(nextProps.dataSource);
      // console.log(nextProps.dataSource);
    }
    return true;
  }

  setLista(lista) {
    if (!lista) {
      return this.state.dataSource;
    }
    this.pos = 0;
    if (!this.props.column) {
      this.itemsPerRow = 2;
    } else {
      this.itemsPerRow = parseInt(this.props.column);
    }

    var groups = this.groupItems(lista, this.itemsPerRow);
    return this.state.dataSource.cloneWithRows(groups);
  }
  groupItems(items, itemsPerRow) {
    var itemsGroups = [];
    var group = [];
    // console.log(items);
    items.forEach(function (item) {
      if (group.length === itemsPerRow) {
        itemsGroups.push(group);
        group = [item];
      } else {
        group.push(item);
      }
    });
    if (group.length > 0) {
      itemsGroups.push(group);
    }
    return itemsGroups;
  }

  row_gridview_1(rowData, sectionID, rowID) {
    if (rowID == 0) {
      this.pos = 0;
    }
    // console.log(rowData);
    for (var i = 0; i < this.itemsPerRow; i++) {
      if (!rowData[i]) {
        rowData[i] = false;
      }
    }
    var items = rowData.map(item => {
      this.pos++;
      let cell = React.createElement(View, null);
      if (item) {
        cell = this.props.renderRow(item, sectionID, this.pos - 1);
      }

      return React.createElement(
        View,
        { style: {
            // height:50,
            // backgroundColor:"#000",
            margin: this.props.margin ? this.props.margin : 0,
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center'
          }, key: this.pos + "_cell" },
        cell
      );
      // return this.props.renderItem(item,sectionID,(this.pos-1));
    });

    let group = {
      // height:50,
      // backgroundColor:"#ccc",
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center'
    };
    if (this.props.itemsH) {
      group.height = this.props.itemsH;
    }
    return React.createElement(
      View,
      { style: group },
      items
    );
  }

  render() {

    var style = {};

    if (this.props.style) {
      var lista = [];
      if (Array === this.props.style.constructor) {
        lista = this.props.style;
      } else {
        lista.push(this.props.style);
      }
      for (var a = 0; a < lista.length; a++) {
        var st = lista[a];
        if (typeof st === "object" && st !== null) {
          //nada
        } else if (st) {
          st = StyleSheet.flatten(this.props.style);
        } else if (!st) {
          continue;
        }
        var tags = Object.keys(st);
        for (var i = 0; i < tags.length; i++) {
          style[tags[i]] = st[tags[i]];
        }
      }
    }

    return React.createElement(ListView, { style: style,
      enableEmptySections: true,
      refreshControl: this.props.refreshControl,
      automaticallyAdjustContentInsets: false,
      dataSource: this.state.dataSource,
      renderRow: (rowData, sectionID, rowID) => this.row_gridview_1(rowData, sectionID, rowID) });
  }
}