keyboardable.js

// allows any component to respond to keyboard events
// currently only keydown but could be any depending on requirements

export default function keyboardable(WrappedComponent) {
  class KeyboardableComponent extends WrappedComponent {
    keyboardableOnKeyUp = (e) => {
      this.onKeyUp(e)
    }

    onKeyUp(e) {
      if (super.onKeyUp) {
        super.onKeyUp(e)
      } else if (this.props.onKeyUp) {
        this.props.onKeyUp(e)
      }
    }

    componentWillMount() {
      window.addEventListener('keyup', this.keyboardableOnKeyUp)
      if (super.componentWillMount) { super.componentWillMount() }
    }

    componentWillUnmount() {
      window.removeEventListener('keyup', this.keyboardableOnKeyUp)
      if (super.componentWillUnmount) { super.componentWillUnmount() }
    }
  }

  return KeyboardableComponent
}

/*

Silly example

const KeyboardableDiv = keyboardable(div)

class Tile {
  render() {
    return (
      <div style={ backgroundColor: this.props.backgroundColor }>{this.props.children}</div> 
    )
  }
}

const KeyboardableTile = keyboardable(Tile)

class Colorful extends React.Component {
  this.state = { color: 'white' }
  
  onKeyUp = (e) => {
    switch(String.fromCharCode(e.which)) {
      case 'R': this.setState({ color: 'red' }); break 
      case 'G': this.setState({ color: 'green' }); break 
      case 'B': this.setState({ color: 'blue' }); break
      case 'W': this.setState({ color: 'white' }); break
      default: return
    }
  }
  
  render() {
    const { color } = this.state
    return <KeyboardableTile onKeyUp={onKeyUp} />
  }
}

*/