online/src/schema/change/index.js

import React, {Component} from 'react';

import {Select, Input, Icon, Button, notification} from 'antd';

const Option = Select.Option;

class Change extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentSchema: props.currentSchema,
      currentTable: props.currentTable,
      remark: props.remark,
      columns: props.columns,
      newColName: '',
      newColType: 'type',
      types: ['ID', 'String', 'Int', 'Float'],
      descriptions: ['description', 'key', 'non-null', 'non-null-list']
    }
  }


  handleNameChange = (index) => {
    return (e) => {
      let columns = this.state.columns;
      columns[index].name = e.target.value;
      this.setState({
        columns
      })
    };
  };

  handleNameNew = (e) => {
    this.setState({
      newColName: e.target.value,
      showNewColumn: false
    })
  };

  handleTypeChange = (index) => {
    return (value) => {
      let columns = this.state.columns;
      columns[index].type = value;
      this.setState({
        columns
      });
    }
  };

  handleTypeNew = (value) => {
    if (this.state.newColName !== '') {
      let columns = this.state.columns;
      columns.push({name: this.state.newColName, type: value, desc: 'description'});
      this.setState({
        columns,
        newColName: '',
        newColType: 'type'
      })
    } else {
      notification['warning']({
        message: 'Notification',
        description: 'Input a name first.',
      });
    }
  };

  handleDescChange = (index) => {
    return (value) => {
      let columns = this.state.columns;
      columns[index].desc = value;
      this.setState({
        columns
      });
    };
  };

  handleColDelete = (index) => {
    return () => {
      let columns = this.state.columns;
      columns.splice(index, 1);
      this.setState({
        columns
      });
    }
  };

  componentWillReceiveProps(next) {
    this.setState({
      currentTable: next.currentTable,
      currentSchema: next.currentSchema,
      columns: next.columns,
      remark: next.remark
    });
  };

  render() {
    return (
      <div style={{margin: 20}}>
        <div style={{marginBottom: 20}}>
          <span className='table-title'> Table name</span>
          <Input value={this.state.currentTable} placeholder="table_name" style={{width: 120}} onChange={(e) => {
            this.setState({currentTable: e.target.value})
          }}/>

        </div>

        <div style={{marginBottom: 20}}>
          <span className='table-title'> Table remark</span>
          <Input value={this.state.remark} placeholder="table_remark" style={{width: 250}} onChange={(e) => {
            this.setState({remark: e.target.value})
          }}/>
        </div>

        <div>
          <span className='table-title'> Table columns</span>
          <span className='column-title'>name</span>
          <span className='column-title'>type</span>
          <span className='column-title'>description</span>
          {
            this.state.columns.map((col, index) =>
              <div key={index} style={{marginBottom: 3}}>
                <Input style={{width: 120, marginRight: 10}} value={col.name} onChange={this.handleNameChange(index)}/>
                <Select defaultValue={col.type} style={{width: 120, marginRight: 10}}
                        onChange={this.handleTypeChange(index)}>
                  {
                    this.state.types.map((value) =>
                      <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
                    )
                  }
                </Select>
                <Select defaultValue={col.desc} style={{width: 120, marginRight: 10}}
                        onChange={this.handleDescChange(index)}>
                  {
                    this.state.descriptions.map((value) =>
                      <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
                    )
                  }
                </Select>
                <Icon type="delete" theme="outlined" style={{cursor: 'pointer'}}
                      onClick={this.handleColDelete(index)}/>
              </div>
            )
          }
          <div>
            <Input placeholder="column_name" style={{width: 120, marginRight: 10}} onChange={this.handleNameNew}
                   value={this.state.newColName}/>
            <Select defaultValue="type" style={{width: 120, marginRight: 10}} onChange={this.handleTypeNew}
                    value={this.state.newColType}>
              {
                this.state.types.map((value) =>
                  <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
                )
              }
            </Select>
          </div>
        </div>
        <div style={{marginTop: 10}}>
          <Button type="primary" onClick={() => {
            this.props.addTable(this.state.columns, this.state.remark, this.state.currentTable, this.state.currentSchema);
          }}>
            SUBMIT
          </Button>
          <Button style={{marginLeft: 10}} type="danger" onClick={() => {
            this.props.deleteTable(this.state.currentTable, this.state.currentSchema);
          }}>DELETE</Button>
        </div>
      </div>
    )
  }
}

export default Change;