Enable using Ctrl+Return to execute a query in the database plugin (#761)

Summary:
Having a key shortcut to execute the query you're typing helps to speed up the edit-run cycle.

## Changelog

In the database SQL execution tab, you can now execute queries with Ctrl+Return instead of pressing the 'Execute' button.
Pull Request resolved: https://github.com/facebook/flipper/pull/761

Test Plan:
I typed a query into the textarea, and while it was focussed, press Ctrl+Return, and the query executed.

Mousing over the 'Execute' button displays a tooltip informing you of this keyboard shortcut.

![image](https://user-images.githubusercontent.com/7407345/73128700-31860880-3fcb-11ea-9a7c-28a55b46a151.png)

Reviewed By: mweststrate

Differential Revision: D19578527

Pulled By: passy

fbshipit-source-id: be131e44e293caa578d48e324fc43b457edb1e4e
This commit is contained in:
Angus Holder
2020-01-27 06:06:29 -08:00
committed by Facebook Github Bot
parent 434d75f362
commit ac8bd8638a

View File

@@ -1012,6 +1012,15 @@ export default class DatabasesPlugin extends FlipperPlugin<
this.dispatchAction({type: 'Execute'});
};
onQueryTextareaKeyPress = (event: KeyboardEvent) => {
// Implement ctrl+enter as a shortcut for clicking 'Execute'.
if (event.key === '\n' && event.ctrlKey) {
event.preventDefault();
event.stopPropagation();
this.onExecuteClicked();
}
};
onFavoriteClicked = (selected: any) => {
this.setState({query: selected.target.value});
};
@@ -1304,6 +1313,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
marginBottom: '1%',
}}
onChange={this.onQueryChanged.bind(this)}
onKeyPress={this.onQueryTextareaKeyPress}
placeholder="Type query here.."
value={
this.state.query !== null &&
@@ -1351,7 +1361,11 @@ export default class DatabasesPlugin extends FlipperPlugin<
</ButtonGroup>
<Spacer />
<ButtonGroup>
<Button onClick={this.onExecuteClicked}>Execute</Button>
<Button
onClick={this.onExecuteClicked}
title={'Execute SQL [Ctrl+Return]'}>
Execute
</Button>
</ButtonGroup>
</Toolbar>
</div>