Adding ShortcutWrapper

demo/src/Menu.js

@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import mouseTrap from 'react-mousetrap';
+
+import {
+  InputWithShortcut,
+  SelectWithShortcut,
+  ButtonWithShortcut,
+} from '../shared';
+import '../App.css';
+
+const optionValues = [
+  {
+    value: 1,
+    name: 'Deadmau5',
+  },
+  {
+    value: 2,
+    name: 'Clapton',
+  },
+  {
+    value: 3,
+    name: 'Duki',
+  },
+  {
+    value: 4,
+    name: 'Khea',
+  },
+];
+
+const initialState = {
+  input: '',
+  select: optionValues[0].value,
+};
+
+class Menu extends Component {
+  state = initialState;
+
+  toggleRow = props => console.log(props);
+
+  clearState = () => this.setState(initialState);
+
+  onConfirm = () => console.log(this.state);
+
+  onInputChange = event => this.setState({ input: event.target.value });
+
+  onSelectValueChange = event => this.setState({ select: event.target.value });
+
+  render() {
+    return (
+      <div className="Menu">
+        <InputWithShortcut
+          shortcut="shift+1"
+          shortcutName={'Get Focus on Select with Shift + 1'}
+          value={this.state.input}
+          onChange={this.onInputChange}
+        />
+
+        <p>Shift + 2</p>
+        <SelectWithShortcut
+          optionValues={optionValues}
+          shortcut="shift+2"
+          value={this.state.select}
+          onChange={this.onSelectValueChange}
+        />
+
+        <div style={{ marginTop: 30 }}>
+          <ButtonWithShortcut onClick={this.clearState} shortcut={'shift+3'}>
+            Delete (shift+3)
+          </ButtonWithShortcut>
+          <ButtonWithShortcut onClick={this.onConfirm} shortcut={'shift+4'}>
+            Confirm (shift+4)
+          </ButtonWithShortcut>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default mouseTrap(Menu);

demo/src/Menu1.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import ShorcutWrapper from '../../src/ShorcutWrapper';
+import { Tooltip } from 'react-tippy';
+
+const Menu1 = () => (
+  <div className="Home">
+    <p>
+      Duis exercitation officia consectetur et id sint consectetur. Non proident
+      ut eu reprehenderit enim et. Sunt laborum consectetur deserunt ipsum. Ad
+      sunt deserunt adipisicing excepteur enim ad excepteur dolore dolore veniam
+      consectetur enim. Occaecat Lorem excepteur duis culpa irure commodo anim
+      cupidatat quis sunt. Anim tempor eiusmod elit nisi enim velit officia sint
+      nostrud. Consectetur aute voluptate sint in ullamco occaecat aute sunt
+      commodo et velit id non in. Pariatur excepteur fugiat sit culpa sint
+      pariatur. Est eu tempor fugiat ut minim id cupidatat sit aliquip sit ut.
+      Excepteur amet do labore nostrud in aliquip tempor do. Fugiat commodo sint
+      veniam ullamco in ullamco nostrud non officia culpa. Occaecat veniam est
+    </p>
+    <ShorcutWrapper shortcut="a" onShortcutPressed="focus">
+      <button onClick={() => console.log('asdasd')}>Button 1</button>
+    </ShorcutWrapper>
+    <p>
+      ex veniam occaecat non sit nostrud occaecat laborum culpa minim incididunt
+      occaecat. Aute duis dolor do eiusmod esse eu. Elit laborum exercitation
+      sint aliquip nostrud nisi officia cupidatat aute ex labore cupidatat.
+      Cillum eu non dolore cupidatat consectetur ipsum velit non ea qui nisi
+      ullamco. Tempor reprehenderit est cillum ipsum magna laboris irure. Nulla
+      minim excepteur esse esse laborum eu ipsum. Exercitation deserunt do ut
+      enim nisi aliqua excepteur Lorem proident. Magna esse ex sunt elit.
+      Laboris qui fugiat mollit voluptate voluptate tempor culpa velit ullamco
+      id pariatur dolor. Voluptate consectetur aute amet ea veniam ullamco ut
+      dolore fugiat Lorem.
+    </p>
+
+    <ShorcutWrapper shortcut="b" onShortcutPressed="focus">
+      <button onClick={() => console.log('asdasd')}>Button 2</button>
+    </ShorcutWrapper>
+    <p>
+      Id exercitation esse magna irure ipsum consequat aliquip ea sunt
+      consectetur aliqua amet. Excepteur deserunt cillum voluptate pariatur
+      ullamco et fugiat nulla Lorem id magna laboris. Consectetur officia id ex
+      laborum eu sunt duis exercitation laboris qui velit esse ad. Eiusmod culpa
+      quis sint do id culpa excepteur duis tempor occaecat. Commodo nostrud non
+      adipisicing veniam labore voluptate fugiat culpa. Velit ullamco sunt
+      voluptate sit nulla culpa adipisicing labore pariatur ut veniam. Eiusmod
+      sit fugiat amet dolor. Laboris sit cillum veniam commodo. Laboris sit
+      minim aliquip irure laboris fugiat aliquip ad ut proident enim fugiat.
+      Magna mollit id dolore eu culpa reprehenderit consequat mollit elit non.
+      Dolor est quis cillum consectetur excepteur nisi. Fugiat consequat
+      pariatur nostrud occaecat qui quis proident enim anim ea nulla amet elit
+      ea. Ad irure id adipisicing excepteur incididunt ea nisi sunt fugiat
+      deserunt nostrud cillum cillum. Aliquip labore proident nulla voluptate
+      aliquip magna nostrud excepteur labore enim exercitation dolor laboris
+      veniam. Eu dolore enim eu est est consequat sit id ullamco Lorem officia
+      Lorem. Incididunt commodo duis ipsum sit id ullamco magna elit. Sint quis
+      consequat esse est pariatur adipisicing reprehenderit consequat. Cillum ex
+      exercitation nostrud eu duis amet aliqua pariatur. Non labore consequat ex
+      voluptate officia. Incididunt esse culpa aliquip non pariatur amet cillum
+      tempor elit consectetur nostrud pariatur irure. Est officia Lorem labore
+      minim incididunt aute mollit enim exercitation est. Voluptate consequat
+      excepteur nostrud anim excepteur do amet labore. Fugiat culpa quis do esse
+      ex in voluptate do reprehenderit aliqua veniam tempor non duis. Et nostrud
+      exercitation eiusmod deserunt ipsum sunt incididunt exercitation pariatur
+      veniam minim anim adipisicing. Incididunt reprehenderit aliqua esse
+      laboris irure sit adipisicing ullamco adipisicing id mollit ut elit.
+      Cillum velit duis commodo esse do veniam velit esse nulla proident
+      occaecat anim proident tempor. Laborum duis consectetur irure laborum qui
+      voluptate laboris est officia exercitation est mollit. Ullamco nisi
+      eiusmod veniam exercitation eiusmod. Ea enim occaecat sunt cillum.
+      Voluptate adipisicing quis esse aliquip nulla exercitation veniam officia
+      voluptate incididunt veniam cillum sunt culpa. Quis qui enim eu cillum
+      laboris qui cupidatat laboris anim elit id duis irure. Deserunt in ipsum
+      irure minim cillum qui duis proident ea Lorem tempor sunt reprehenderit
+      adipisicing. Qui laboris deserunt ullamco non cupidatat commodo eu sint
+      minim quis sunt ipsum aliquip id. Non sit consectetur Lorem sint mollit
+      aliquip enim aute Lorem tempor ea adipisicing est. Culpa nostrud sit culpa
+      sint amet Lorem aliqua sunt proident culpa voluptate. Quis cillum velit
+      aute occaecat adipisicing velit mollit occaecat veniam id ipsum cupidatat
+      dolor. Do ex cupidatat quis deserunt aute dolore mollit id. Ex amet sunt
+      laboris officia enim qui magna. Laborum voluptate pariatur excepteur
+      occaecat nostrud cupidatat. Nostrud veniam ad laborum labore labore eu
+      aute nostrud reprehenderit tempor et. Quis aliquip anim dolor id amet sit
+      culpa irure. Aliqua mollit exercitation et sit. Exercitation ea mollit
+      deserunt non. Id sint quis culpa consequat velit commodo eu dolor
+      voluptate id et. Adipisicing ad labore exercitation non.
+    </p>
+  </div>
+);
+
+export default Menu1;

demo/src/index.js

@@ -1,15 +1,18 @@
-import React, {Component} from 'react'
-import {render} from 'react-dom'
-
-import Example from '../../src'
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import Menu from './Menu1';
+import Example from '../../src';
 
 class Demo extends Component {
   render() {
-    return <div>
-      <h1>react-hotkey-tooltip Demo</h1>
-      <Example/>
-    </div>
+    return (
+      <div>
+        <h1>react-hotkey-tooltip Demo</h1>
+        <Example />
+        <Menu />
+      </div>
+    );
   }
 }
 
-render(<Demo/>, document.querySelector('#demo'))
+render(<Demo />, document.querySelector('#demo'));