all files / src/components/ Hotkeys.jsx

100% Statements 19/19
100% Branches 0/0
100% Functions 5/5
100% Lines 18/18
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54                                     18×                                    
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;