online/src/schema/index.js

import React, {Component} from 'react';

import {Row, Col, Input, Icon, Button} from 'antd';
import './index.css';
import Change from './change';

const Search = Input.Search;


class Schema extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentSchema: 'magazine',
      currentTable: 'user',
      switch: true
    }
  }

  changeSchema = (schema) => {
    return () => {
      this.setState({
        currentSchema: schema
      })
    }
  };

  changeTable = (table) => {
    return () => {
      this.setState({
        currentTable: table
      })
    }
  };

  findColumns = () => {
    let schema = this.props.schemas.find(schema => schema.name === this.state.currentSchema);
    if(schema === undefined) return [];
    //  if user insert a new schema, after merge to schemas with a {name: 'xx', tables: []}
    //  you can find the following table is undefined.
    //  so give a state here if you want add a tip!
    else {
      let table = schema.tables.find(table => table.name === this.state.currentTable);
      if(table === undefined) return [];
      else return table.cols;
    }
  };

  render() {
    return (
      <div>
        <Row>
          <Col span={6}>
            <div className='wrapper'>
              <div className='current'>{this.state.currentSchema}</div>
              {
                this.state.switch?
                  <Button className='add' type='dashed' icon="plus" onClick={()=>{this.setState({switch: false})}}>Add Schema</Button> :
                  <Search
                    className='add'
                    placeholder="input schema_name"
                    enterButton="Confirm"
                    onSearch={value => {
                      this.setState({
                        switch: true,
                        currentSchema: value,
                        currentTable: ''
                      });
                      this.props.addSchema(value);
                    }}
                    disabled={this.state.switch}
                  />
              }
            </div>

            <Search
              placeholder="search schema"
              enterButton
              onSearch={value => console.log(value)}
              style={{marginTop: 10}}
            />

            {
              this.props.schemas.map((schema) => {
                return <div key={schema.name} onClick={this.changeSchema(schema.name)} className='title'>
                  <Row>
                    <Col span={22}>Schemas: ({schema.name}) ({schema.tables.length})</Col>
                    <Col span={2}><Button onClick={() => this.setState({currentTable: 'add'})} type="primary"
                                          shape="circle" icon="plus" size='small'/></Col>
                  </Row>
                  {
                    schema.tables.map((table) =>
                      <p onClick={this.changeTable(table.name)} key={table.name} className='show'><Icon type="ordered-list" theme="outlined" /> {table.name}
                      </p>
                    )
                  }
                </div>
              })
            }

          </Col>

          <Col span={18}>
            {
              this.state.currentTable === 'add' ?
                <AddTable currentSchema={this.state.currentSchema} addTable={this.props.addTable} deleteTable={this.props.deleteTable}/> :
                <ShowTable currentSchema={this.state.currentSchema} currentTable={this.state.currentTable}
                           columns={this.findColumns()} addTable={this.props.addTable} deleteTable={this.props.deleteTable}/>
            }
          </Col>
        </Row>
      </div>
    )
  }
}

export default Schema;

class AddTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: []
    }
  }

  render() {
    return (
      <div style={{margin: 10}}>
        <div style={{fontSize: 30}}>Add a new table to <b>{this.props.currentSchema}</b></div>
        <Change currentSchema={this.props.currentSchema} currentTable={this.props.currentTable} columns={this.state.columns} addTable={this.props.addTable} deleteTable={this.props.deleteTable}/>
      </div>
    )
  }
}

class ShowTable extends Component {
  render() {
    return (
      <div style={{margin: 10}}>
        <div style={{fontSize: 30}}>{this.props.currentSchema} > {this.props.currentTable}</div>
        <Change currentSchema={this.props.currentSchema} currentTable={this.props.currentTable} columns={this.props.columns} addTable={this.props.addTable} deleteTable={this.props.deleteTable}/>
      </div>
    )
  }
}