/* eslint-disable react/forbid-prop-types */
/**
 * mSupply Mobile
 * Sustainable Solutions (NZ) Ltd. 2018
 */

import React from 'react';
import { View, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { ReportCell } from './ReportCell';

export const ReportRow = ({ isHeader, rowData, rowIndex }) => {
  const headerStyle = isHeader ? localStyles.header : null;
  const rowStyle = StyleSheet.flatten([localStyles.container, headerStyle]);
  const cellsToRender = rowData.map(cell => (
    <ReportCell key={rowIndex} even={rowIndex % 2 === 0}>
      {cell}
    </ReportCell>
  ));

  return <View style={rowStyle}>{cellsToRender}</View>;
};

const localStyles = StyleSheet.create({
  header: {
    marginBottom: 1,
  },
  container: {
    width: '100%',
    flexDirection: 'row',
    height: 50,
  },
});

ReportRow.defaultProps = {
  isHeader: false,
};

ReportRow.propTypes = {
  isHeader: PropTypes.bool,
  rowData: PropTypes.array.isRequired,
  rowIndex: PropTypes.number.isRequired,
};

@@ -261,16 +261,335 @@
 Cell';%0A%0A
+/**%0A * This page receives data for an specific row to render on a Table report%0A * *%0A * @prop  %7Bboolean%7D   isHeader    Indicates if the cell row is the table header or not%0A * @prop  %7Barray%7D     rowData     Array containing the row data%0A * @prop  %7Bnumber%7D    rowIndex    Indicates the index of the corresponding row%0A */%0A%0A
 export c

Add docs for ReportRow.js