React

by shtrih

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/mousetrap.js"></script>
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  padding: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

const onScriptLoad = () => {
  const {
    HotKeys
  } = ReactHotkeys;

	if (typeof ReactHotkeys.configure === 'function') {
    ReactHotkeys.configure({
  		logLevel: 'debug',
      simulateMissingKeyPressEvents: false
  	});
  }

  class TodoApp extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        controlDown: null,
        controlKeyUp: null
      }

      this.hotKeys = {
        controlKeyUp: {sequence: 'shift', action: 'keyup'},
        controlDown: [
          {sequence: 'ctrl', action: 'keydown'},
          {sequence: 'ctrl', action: 'keyup'},
          
          {sequence: 'f', action: 'keydown'},
          {sequence: 'f', action: 'keyup'},
        ],
      };
      this.hotKeyHandlers = {
        controlDown: (e) => {
        	if (typeof e.persist === "function") {
          	e.persist();
          }
          
          console.log(e);

          if (e.repeat) {
            return;
          }

          this.setState({
            controlDown: e.type !== 'keyup'
          });
        },
        controlKeyUp: (e) => {
        	this.setState({
            controlKeyUp: 'handled'
          });
        }
      };
    }

    render() {
      return (
        <HotKeys keyMap={this.hotKeys} handlers={this.hotKeyHandlers}>
          <p>Control (or F) is down: {this.state.controlDown + ''}</p>
          <p>Shift keyUp: {this.state.controlKeyUp + ''}</p>
        </HotKeys>
      )
    }
  }

  ReactDOM.render(<TodoApp />, document.querySelector("#app"))
};

// Hacks for react-hotkeys:
function require() {
	return window.Mousetrap;
}

window.isEqual = _.isEqual;
window.isBool = _.isBoolean;
window.isObject = _.isObject;

var element = document.createElement("script");
element.language = "javascript";
element.type = "text/javascript";       
//element.src = 'https://unpkg.com/[email protected]/umd/react-hotkeys.js';
element.src = 'https://unpkg.com/[email protected]/umd/react-hotkeys.js';
element.onload =...