Minor improvements to <Hotkeys /> component (#7261)

* left align, close to button it's related to
* text-muted, so it's a bit more subtle
* fix required func props, where no func it actually passed
This commit is contained in:
Maxime Beauchemin 2019-04-11 23:08:38 -07:00 committed by GitHub
parent 763db8fd76
commit 14647fc2ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 15 deletions

View File

@ -25,7 +25,7 @@ const propTypes = {
hotkeys: PropTypes.arrayOf(PropTypes.shape({ hotkeys: PropTypes.arrayOf(PropTypes.shape({
key: PropTypes.string.isRequired, key: PropTypes.string.isRequired,
descr: PropTypes.string.isRequired, descr: PropTypes.string.isRequired,
func: PropTypes.func.isRequired, func: PropTypes.func,
})).isRequired, })).isRequired,
header: PropTypes.string, header: PropTypes.string,
placement: PropTypes.string, placement: PropTypes.string,
@ -38,7 +38,9 @@ const defaultProps = {
export default class Hotkeys extends React.PureComponent { export default class Hotkeys extends React.PureComponent {
componentDidMount() { componentDidMount() {
this.props.hotkeys.forEach((keyConfig) => { this.props.hotkeys.forEach((keyConfig) => {
Mousetrap.bind([keyConfig.key], keyConfig.func); if (keyConfig.func) {
Mousetrap.bind([keyConfig.key], keyConfig.func);
}
}); });
} }
renderPopover() { renderPopover() {

View File

@ -47,17 +47,11 @@ const keymap = {
SAVE: 'ctrl + s', SAVE: 'ctrl + s',
}; };
const getHotKeys = () => { const getHotKeys = () => Object.keys(keymap).map(k => ({
const d = []; name: k,
Object.keys(keymap).forEach((k) => { descr: keymap[k],
d.push({ key: k,
name: k, }));
descr: keymap[k],
key: k,
});
});
return d;
};
const propTypes = { const propTypes = {
actions: PropTypes.object.isRequired, actions: PropTypes.object.isRequired,
@ -321,7 +315,7 @@ class ExploreViewContainer extends React.Component {
)} )}
<div className="row"> <div className="row">
<div className="col-sm-4"> <div className="col-sm-4">
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
<QueryAndSaveBtns <QueryAndSaveBtns
canAdd="True" canAdd="True"
onQuery={this.onQuery} onQuery={this.onQuery}
@ -332,7 +326,7 @@ class ExploreViewContainer extends React.Component {
errorMessage={this.renderErrorMessage()} errorMessage={this.renderErrorMessage()}
datasourceType={this.props.datasource_type} datasourceType={this.props.datasource_type}
/> />
<div> <div className="m-l-5 text-muted">
<Hotkeys <Hotkeys
header="Keyboard shortcuts" header="Keyboard shortcuts"
hotkeys={getHotKeys()} hotkeys={getHotKeys()}