superset2/superset/assets/javascripts/components/Hotkeys.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { OverlayTrigger, Popover } from 'react-bootstrap';
import { Table } from 'reactable';

import Mousetrap from 'mousetrap';

const propTypes = {
  hotkeys: PropTypes.arrayOf(PropTypes.shape({
    key: PropTypes.string.isRequired,
    descr: PropTypes.string.isRequired,
    func: PropTypes.func.isRequired,
  })).isRequired,
  header: PropTypes.string,
};

const defaultProps = {
  hotkeys: [],
};

export default class Hotkeys extends React.PureComponent {
  componentDidMount() {
    this.props.hotkeys.forEach((keyConfig) => {
      Mousetrap.bind([keyConfig.key], keyConfig.func);
    });
  }
  renderPopover() {
    return (
      <Popover id="popover-hotkeys" title={this.props.header} style={{ width: '300px' }}>
        <Table
          className="table table-condensed"
          data={this.props.hotkeys.map(keyConfig => ({
            Key: keyConfig.key,
            Action: keyConfig.descr,
          }))}
        />
      </Popover>);
  }
  render() {
    return (
      <OverlayTrigger
        overlay={this.renderPopover()}
        trigger={['hover', 'focus']}
        placement="top"
      >
        <i className="fa fa-keyboard-o fa-lg" />
      </OverlayTrigger>
    );
  }
}

Hotkeys.propTypes = propTypes;
Hotkeys.defaultProps = defaultProps;