online/src/config/index.js

import React, {Component} from 'react';

import {Row, Col, Input, Button} from 'antd';

import './index.css';
import Diff from './diff';

const Search = Input.Search;



class Config extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentConfig: '',
      switch: true,
      configs: [
        {
          name: 'Tenc and Mongo',
          cloudServer: 'tencent',
          database: 'mongodb',
          configLocal: {
            SCF_secretID: 'scfscfscfididididiid',
            SCF_secretKey: 'i_am_a_key',
            API_secretID: 'apiapiapiididididiid',
            API_secretKey: 'apiapipaikeykeykey'
          }
        },
        {
          name: 'Ali but nedb',
          cloudServer: 'Aliyun',
          database: 'nedb',
          configLocal: {
            SCF_secretID: 'sididid34idiid',
            SCF_secretKey: 'scfkeyk243weeykkeykey',
            API_secretID: 'iidididdapi3eapiapidiid',
            API_secretKey: 'apiapipav_ikeykeykey'
          }
        }
      ]
    };
    if(this.state.configs.length !== 0) {
      this.state.currentConfig = this.state.configs[0].name
    }
  }

  switchConfig = (name) => {
    return () => {
      this.setState({
        currentConfig: name
      })
    }
  };

  addConfig = (content, name) => {
    if (content === 'new') {
      this.setState({
        configs: [...this.state.configs, {
          name,
          schemas: [],
          cloudServer: '',
          database: '',
          configLocal: {}
        }]
      })
    } else {
      let configs = this.state.configs;
      configs.splice(this.state.configs.findIndex(obj => obj.name === name), 1, content);
      this.setState({
        configs
      })
    }
  };

  deleteConfig = (name) => {
    let configs = this.state.configs;
    configs.splice(this.state.configs.findIndex(obj => obj.name === name), 1);
    this.setState({
      configs
    });
    if (this.state.configs.length !== 0) {
      this.setState({
        currentConfig: this.state.configs[0].name
      });
    } else {
      this.setState({
        currentConfig: ''
      });
    }
  };

  render() {
    return (
      <div>
        <Row>
          <Col span={6}>
            <div className='warpper'>
              <div className='current'>{this.state.currentConfig}</div>
              {
                this.state.switch?
                  <Button className='add' type='dashed' icon="plus" onClick={()=>{this.setState({switch: false})}} /> :
                  <Search
                    className='add-input'
                    placeholder="input config_name"
                    enterButton="Confirm"
                    onSearch={value => {
                      this.setState({
                        switch: true,
                      });
                      this.addConfig('new', value);
                    }}
                    disabled={this.state.switch}
                  />
              }
            </div>

            {
              this.state.configs.map((config) => {
                return <div key={config.name} onClick={this.switchConfig(config.name)} className='title'>
                  <Row>
                    <Col span={22}>Config: ({config.name})</Col>
                  </Row>
                </div>
              })
            }

          </Col>
          <Col span={18}>
            <Diff addConfig={this.addConfig} deleteConfig={this.deleteConfig} currentConfig={this.state.currentConfig} configs={this.state.configs} />
          </Col>
        </Row>
      </div>
    )
  }

}

export default Config;