Adds keyboard support to the renderer. (#19)

Author: skellock

package-lock.json

@@ -43,18 +43,20 @@
     "mobx": "3.2.1",
     "mobx-react": "4.2.2",
     "mobx-state-tree": "0.9.2",
+    "mousetrap": "1.6.1",
     "ramda": "0.24.1",
     "react": "15.6.1",
     "react-dom": "15.6.1",
     "rebass": "1.0.0"
   },
   "description": "An electron starter project.",
   "devDependencies": {
-    "@types/react": "^15.0.38",
-    "@types/react-dom": "^15.5.1",
+    "@types/mousetrap": "1.5.34",
+    "@types/react": "15.0.38",
+    "@types/react-dom": "15.5.1",
     "ava": "0.21.0",
     "electron": "1.7.4",
-    "electron-builder": "^19.16.0",
+    "electron-builder": "19.16.0",
     "fuse-box": "2.2.0",
     "husky": "0.14.3",
     "lint-staged": "4.0.1",
@@ -96,5 +98,5 @@
     "postinstall": "Used by electron-builder to build native dependencies.",
     "start": "Starts the app in dev mode."
   },
-  "version": "0.9.0"
-}
+  "version": "0.10.0"
+}

package.json

@@ -1,7 +1,9 @@
 import * as React from 'react'
 import { Tabs, TabItem } from 'rebass'
+import { bindKey, unbindKey } from '../../platform'
 
 export type SampleTabType = 'one' | 'two' | 'three'
+
 export interface SampleTabsProps {
   tab: SampleTabType
   onChangeTab: (tab: SampleTabType) => void
@@ -10,30 +12,39 @@ export interface SampleTabsProps {
 const style = { WebkitAppRegion: 'drag' }
 const tabStyle = { cursor: 'pointer', WebkitAppRegion: 'no-drag' }
 
-export function SampleTabs(props: SampleTabsProps) {
-  return (
-    <Tabs px={3} bg="gray1" style={style}>
-      <TabItem
-        style={tabStyle}
-        onClick={() => props.onChangeTab('one')}
-        active={props.tab === 'one'}
-      >
-        Random Dog
-      </TabItem>
-      <TabItem
-        style={tabStyle}
-        onClick={() => props.onChangeTab('two')}
-        active={props.tab === 'two'}
-      >
-        Long Content
-      </TabItem>
-      <TabItem
-        style={tabStyle}
-        onClick={() => props.onChangeTab('three')}
-        active={props.tab === 'three'}
-      >
-        Empty
-      </TabItem>
-    </Tabs>
-  )
+export class SampleTabs extends React.PureComponent<SampleTabsProps, {}> {
+  tab1 = () => this.props.onChangeTab('one')
+  tab2 = () => this.props.onChangeTab('two')
+  tab3 = () => this.props.onChangeTab('three')
+
+  componentDidMount() {
+    bindKey('command+1', () => this.tab1())
+    bindKey('command+2', () => this.tab2())
+    bindKey('command+3', () => this.tab3())
+  }
+
+  componentWillUnmount() {
+    unbindKey('command+1')
+    unbindKey('command+2')
+    unbindKey('command+3')
+  }
+
+  render() {
+    const isTab1 = this.props.tab === 'one'
+    const isTab2 = this.props.tab === 'two'
+    const isTab3 = this.props.tab === 'three'
+    return (
+      <Tabs px={3} bg="gray1" style={style}>
+        <TabItem style={tabStyle} onClick={() => this.tab1()} active={isTab1}>
+          Random Dog
+        </TabItem>
+        <TabItem style={tabStyle} onClick={() => this.tab2()} active={isTab2}>
+          Long Content
+        </TabItem>
+        <TabItem style={tabStyle} onClick={() => this.tab3()} active={isTab3}>
+          Empty
+        </TabItem>
+      </Tabs>
+    )
+  }
 }

src/renderer/features/welcome-screen/sample-tabs.tsx

@@ -1,2 +1,3 @@
+export * from './utils'
 export * from './theme/theme'
 export * from './components'

src/renderer/platform/index.ts

@@ -0,0 +1 @@
+export * from './keyboard/keyboard'

src/renderer/platform/utils/index.ts

@@ -0,0 +1,30 @@
+// A straight thru wrapper with the intention to add contexts
+// which will swap out groups of keybinds at a time.
+import * as Mousetrap from 'mousetrap'
+
+export type KeyboardCallback = (e: ExtendedKeyboardEvent, combo: string) => any
+export type KeyboardAction = 'keypress' | 'keydown' | 'keyup'
+
+// only needs to happen once
+Mousetrap.prototype.stopCallback = () => false
+
+/**
+ * Binds a keystroke to a function.
+ * 
+ * @param keys The keystroke.
+ * @param callback The function to fire.
+ * @param action Optional keyboard event to further constraint.
+ */
+export function bindKey(keys: string | string[], callback: KeyboardCallback, action?: KeyboardAction) {
+  Mousetrap.bind(keys, callback, action)
+}
+
+/**
+ * Removes a keybind.
+ * 
+ * @param keys The keystroke.
+ * @param action Optional keyboard event to further constraint.
+ */
+export function unbindKey(keys: string | string[], action?: KeyboardAction) {
+  Mousetrap.unbind(keys, action)
+}