import React, { Component } from 'react'
import PropTypes from 'prop-types'
import TableRow from './TableRow/index.js'
import Button from '../../Components/Button/index.js'

export default class Table extends Component {

  static propTypes = {
    readOnly: PropTypes.bool,
    name: PropTypes.string.isRequired,
    addRow: PropTypes.func.isRequired,
    columns: PropTypes.arrayOf(PropTypes.shape({
      name: PropTypes.string.isRequired,
      type: PropTypes.string
    }).isRequired).isRequired 
  }

  state = {
    rows: Array.isArray(this.props.children) ? this.props.children : [this.props.children]
  }

  addRow = () => {
    const cells = this.columns.map((column) => {
      return {value: "", type: column.type}
    })
    const newRow = {
      tableName: this.props.name,
      editing: true,
      readOnly: false,
      cells
    }
    this.props.addRow(newRow)
  }

  render(){
    const { columns, readOnly } = this.props
    return(
      <div>
        <TableRow 
          readOnly 
          cells={columns.map((col) => {return {value: col.name, type: col.type || "text"}})}
        />
        {this.state.rows}
        {readOnly || <Button className="round" buttonText="+" onClick={this.addRow} />}
      </div>
    )
  }
}
@@ -171,448 +171,72 @@
 s'%0A%0A
-export default class Table extends Component %7B%0A%0A  static propTypes = %7B%0A    readOnly: PropTypes.bool,%0A    name: PropTypes.string.isRequired,%0A    addRow: PropTypes.func.isRequired,%0A    columns: PropTypes.arrayOf(PropTypes.shape(%7B%0A      name: PropTypes.string.isRequired,%0A      type: PropTypes.string%0A    %7D).isRequired).isRequired %0A  %7D%0A%0A  state
+const Table = (%7BreadOnly, name, addRow, columns, children%7D)
  =
+%3E
  %7B
-%0A    rows: Array.isArray(this.props.children) ? this.props.children : %5Bthis.props.children%5D%0A  %7D
 %0A%0A  
@@ -270,21 +270,16 @@
 cells = 
-this.
 columns.
@@ -385,27 +385,16 @@
 leName: 
-this.props.
 name,%0A  
@@ -461,19 +461,8 @@
     
-this.props.
 addR
@@ -493,53 +493,8 @@
 ()%7B%0A
-    const %7B columns, readOnly %7D = this.props%0A
     
@@ -669,23 +669,16 @@
    %7B
-this.state.rows
+children
 %7D%0A  
@@ -750,13 +750,8 @@
 ck=%7B
-this.
 addR
@@ -782,8 +782,297 @@
  )%0A  %7D%0A%7D
+%0A%0ATable.propTypes = %7B%0A  readOnly: PropTypes.bool,%0A  name: PropTypes.string.isRequired,%0A  addRow: PropTypes.func.isRequired,%0A  columns: PropTypes.arrayOf(PropTypes.shape(%7B%0A    name: PropTypes.string.isRequired,%0A    type: PropTypes.string%0A  %7D).isRequired).isRequired %0A%7D%0A%0Aexport default Table

Make table functional component