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

View File

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