Created
November 26, 2015 20:17
-
-
Save josser/20cf6648ea495dee1b78 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import { connect } from "react-redux"; | |
import Window from "components/Window"; | |
import Toolbar from "components/Toolbar"; | |
import { query } from "reducers/connections"; | |
var AceEditor = require('react-ace'); | |
var brace = require('brace'); | |
require('brace/mode/sql'); | |
require('brace/theme/xcode'); | |
class Explorer extends Component { | |
constructor(args) { | |
super(args); | |
this.handleChangeQuery = this.handleChangeQuery.bind(this); | |
} | |
state = { | |
aaa: '' | |
} | |
handleChangeQuery(value) { | |
console.log(this); | |
this.state.aaa = value; | |
} | |
componentWillMount () { | |
if (this.props.newQueryRequested) { | |
this.props.dispatch(query(this.state.query)); | |
} | |
} | |
render() { | |
return ( | |
<Window> | |
<Toolbar title="ReDB" type="header"></Toolbar> | |
<div className="tab-group"> | |
<div className="tab-item active"> | |
<span className="icon icon-cancel icon-close-tab"></span> | |
ReDB | |
</div> | |
<div className="tab-item tab-item-fixed"> | |
<span className="icon icon-plus"></span> | |
</div> | |
</div> | |
<div className="window-content"> | |
<div className="pane-group"> | |
<div className="pane-sm sidebar"> | |
<nav className="nav-group"> | |
<h5 className="nav-group-title"></h5> | |
<span className="nav-group-item"> | |
<span className="icon icon-flash"></span> | |
Quick Connection | |
</span> | |
</nav> | |
<nav className="nav-group"> | |
</nav> | |
</div> | |
<div className="pane"> | |
<AceEditor | |
mode="sql" | |
theme="xcode" | |
name="sql-editor" | |
width="100%" | |
highlightActiveLine={true} | |
onChange={this.handleChangeQuery} | |
editorProps={{$blockScrolling: true}} | |
/> | |
</div> | |
<div className="pane"> | |
<table className="table-striped"> | |
<thead> | |
<tr> | |
<th>Name</th> | |
<th>Kind</th> | |
<th>File Size</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>photon.css</td> | |
<td>CSS</td> | |
<td>28K</td> | |
</tr> | |
<tr> | |
<td>photon.css</td> | |
<td>CSS</td> | |
<td>28K</td> | |
</tr> | |
<tr> | |
<td>photon.css</td> | |
<td>CSS</td> | |
<td>28K</td> | |
</tr> | |
<tr> | |
<td>photon.css</td> | |
<td>CSS</td> | |
<td>28K</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
</div> | |
<Toolbar title="status bar" type="footer"></Toolbar> | |
</Window> | |
); | |
} | |
} | |
const mapStateToProps = function (state) { | |
return { | |
newQueryRequested: state.connections.newQueryRequested | |
} | |
} | |
export default connect(mapStateToProps)(Explorer); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment