{"size": 1776, "ext": "js", "max_stars_repo_path": "src/stories/flex/ControlledEditDemo.js", "max_stars_repo_name": "prakash1998/grid-tools", "max_stars_repo_stars_event_min_datetime": "2019-12-13T15:55:21.000Z", "max_stars_repo_stars_event_max_datetime": "2019-12-13T15:55:21.000Z", "max_issues_repo_path": "src/stories/flex/ControlledEditDemo.js", "max_issues_repo_name": "prakash1998/grid-tools", "max_issues_repo_issues_event_min_datetime": "2018-12-09T23:13:09.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T10:06:21.000Z", "max_forks_repo_path": "src/stories/flex/ControlledEditDemo.js", "max_forks_repo_name": "prakash1998/grid-tools", "max_forks_repo_forks_event_min_datetime": "2018-12-21T09:05:31.000Z", "max_forks_repo_forks_event_max_datetime": "2020-05-11T14:09:51.000Z"}
{"max_stars_count": 1, "max_issues_count": 35, "max_forks_count": 6, "avg_line_length": 26.1176470588, "max_line_length": 95, "alphanum_fraction": 0.5563063063}
import React from 'react'
import R from 'ramda'

import Grid, { flexGridRenderer, renderRowEditorContent } from '../../index'

class ControlledEditDemo extends React.Component {
  state = { data: this.props.data, showAdd: false }

  onEdit = ({ originalRow, editedRow }, done) => {
    if (originalRow) {
      this.setState(({ data }) => ({
        data: data.map(row => (row === originalRow ? editedRow : row)),
      }))
    } else {
      this.setState(
        ({ data }) => ({
          data: [editedRow, ...data],
          showAdd: false,
        }),
        done
      )
    }
  }

  onEditCancel = _ => this.setState({ showAdd: false })

  addRow = _ => this.setState({ showAdd: true })

  removeRow = _ =>
    this.setState(({ data }) => ({
      data: data.filter(row => R.isNil(this.selectedRows) || !this.selectedRows.includes(row)),
    }))

  selectionChange = ({ selectedRows }) => {
    this.selectedRows = selectedRows
  }

  render() {
    const { data, showAdd } = this.state
    const { headers, controlled } = this.props
    return (
      <div>
        <div style={{ marginBottom: '.3em' }}>
          <button onClick={this.addRow}>Add Row</button>
          <button onClick={this.removeRow}>Remove Row</button>
        </div>
        <Grid
          data={data}
          headers={headers}
          rowsPerPage={15}
          render={flexGridRenderer({
            renderRowEditorContent: renderRowEditorContent({
              headerWidth: '130px',
            }),
          })}
          onEdit={controlled ? this.onEdit : undefined}
          onSelectionChange={this.selectionChange}
          isEditable
          showAdd={showAdd}
          onEditCancel={this.onEditCancel}
        />
      </div>
    )
  }
}

export default ControlledEditDemo
