增加修改 schema name 的 ui

src/components/common/schema/Schema.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 
-import {Button, Col, Icon, Modal, Pagination, Row, Spin} from 'antd';
+import {Button, Col, Icon, Modal, Pagination, Row, Spin, Input} from 'antd';
 import './index.css';
 import {Mutation, Query} from "react-apollo";
 import gql from "graphql-tag";
@@ -8,6 +8,7 @@ import {DELETE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE, UPDATE_SCHEMA} from '../../gql'
 import Table from "./Table";
 
 const confirm = Modal.confirm;
+const Search = Input.Search;
 
 class Schema extends Component {
     constructor(props) {
@@ -17,6 +18,7 @@ class Schema extends Component {
             // default schemaID and schemaName
             schemaID: props.schemaID || props.location.state.schemaID,
             schemaName: props.schemaName || props.location.state.schemaName,
+            editSchemaName: '',
             data: ''
         };
     }
@@ -76,14 +78,33 @@ class Schema extends Component {
                                 {
                                     this.state.currentTable === '' ?
                                         <div>
-                                            <div className={'schema'} onClick={() => {
-                                                this.setState({
-                                                    currentTable: ''
-                                                })
-                                            }}>
-                                                <span className={'schema-name'}>{this.state.schemaName}</span>
-                                                <Icon style={{marginLeft: 15}} type="edit" theme="twoTone"/>
-                                            </div>
+                                            {
+                                                this.state.editSchemaName?
+                                                    <div className={'schema'}>
+                                                        <Search
+                                                            value={this.state.editSchemaName}
+                                                            enterButton="Confirm"
+                                                            style={{width: 500}}
+                                                            size="large"
+                                                            onChange={e => this.setState({
+                                                                editSchemaName: e.target.value
+                                                            })}
+                                                            onSearch={value => {
+                                                                this.setState({
+                                                                   editSchemaName: ''
+                                                                });
+                                                                console.log('我还没做 value = ', value)
+                                                            }}
+                                                        />
+                                                    </div>
+                                                    :
+                                                    <div className={'schema'}>
+                                                        <span className={'schema-name'}>{this.state.schemaName}</span>
+                                                        <Icon style={{marginLeft: 15}} type="edit" theme="twoTone" onClick={()=>{this.setState({editSchemaName:this.state.schemaName})}
+                                                        }/>
+                                                    </div>
+                                            }
+
                                             <div className={'schema-table-list-title'}>
                                                 <Row>
                                                     <Col span={10}><span
@@ -176,7 +197,6 @@ class Schema extends Component {
                                                                 userID={userID}
                                                                 schemaName={this.state.schemaName}
                                                             />
-                                                            {/*<Button type="danger">delete</Button>*/}
                                                         </div>
                                                     </Col>
                                                     <Col span={4} offset={16}>