#6588 Clear all other query tabs (#6617)

* #6588 Clear all other query tabs

* Improve SQLEditor methods bind

* Update loop syntax
This commit is contained in:
Yongjie Zhao 2019-01-12 08:35:53 +08:00 committed by Grace Guo
parent 0053a86684
commit b143b16dff
1 changed files with 18 additions and 4 deletions

View File

@ -41,6 +41,10 @@ class TabbedSqlEditors extends React.PureComponent {
dataPreviewQueries: [], dataPreviewQueries: [],
hideLeftBar: false, hideLeftBar: false,
}; };
this.removeQueryEditor = this.removeQueryEditor.bind(this);
this.renameTab = this.renameTab.bind(this);
this.toggleLeftBar = this.toggleLeftBar.bind(this);
this.removeAllOtherQueryEditors = this.removeAllOtherQueryEditors.bind(this);
} }
componentDidMount() { componentDidMount() {
const query = URI(window.location).search(true); const query = URI(window.location).search(true);
@ -152,6 +156,10 @@ class TabbedSqlEditors extends React.PureComponent {
removeQueryEditor(qe) { removeQueryEditor(qe) {
this.props.actions.removeQueryEditor(qe); this.props.actions.removeQueryEditor(qe);
} }
removeAllOtherQueryEditors(cqe) {
this.props.queryEditors
.forEach(qe => qe !== cqe && this.removeQueryEditor(qe));
}
toggleLeftBar() { toggleLeftBar() {
this.setState({ hideLeftBar: !this.state.hideLeftBar }); this.setState({ hideLeftBar: !this.state.hideLeftBar });
} }
@ -171,7 +179,7 @@ class TabbedSqlEditors extends React.PureComponent {
const tabTitle = ( const tabTitle = (
<div> <div>
<TabStatusIcon onClose={this.removeQueryEditor.bind(this, qe)} tabState={state} />{' '} <TabStatusIcon onClose={() => this.removeQueryEditor(qe)} tabState={state} />{' '}
{qe.title}{' '} {qe.title}{' '}
<DropdownButton <DropdownButton
bsSize="small" bsSize="small"
@ -179,24 +187,30 @@ class TabbedSqlEditors extends React.PureComponent {
className="ddbtn-tab" className="ddbtn-tab"
title="" title=""
> >
<MenuItem eventKey="1" onClick={this.removeQueryEditor.bind(this, qe)}> <MenuItem eventKey="1" onClick={() => this.removeQueryEditor(qe)}>
<div className="icon-container"> <div className="icon-container">
<i className="fa fa-close" /> <i className="fa fa-close" />
</div> </div>
{t('Close tab')} {t('Close tab')}
</MenuItem> </MenuItem>
<MenuItem eventKey="2" onClick={this.renameTab.bind(this, qe)}> <MenuItem eventKey="2" onClick={() => this.renameTab(qe)}>
<div className="icon-container"> <div className="icon-container">
<i className="fa fa-i-cursor" /> <i className="fa fa-i-cursor" />
</div> </div>
{t('Rename tab')} {t('Rename tab')}
</MenuItem> </MenuItem>
<MenuItem eventKey="3" onClick={this.toggleLeftBar.bind(this)}> <MenuItem eventKey="3" onClick={this.toggleLeftBar}>
<div className="icon-container"> <div className="icon-container">
<i className="fa fa-cogs" /> <i className="fa fa-cogs" />
</div> </div>
{this.state.hideLeftBar ? t('Expand tool bar') : t('Hide tool bar')} {this.state.hideLeftBar ? t('Expand tool bar') : t('Hide tool bar')}
</MenuItem> </MenuItem>
<MenuItem eventKey="4" onClick={() => this.removeAllOtherQueryEditors(qe)}>
<div className="icon-container">
<i className="fa fa-times-circle-o" />
</div>
{t('Close all other tabs')}
</MenuItem>
</DropdownButton> </DropdownButton>
</div> </div>
); );