Add key command constants

dist/index.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { ViewStyle } from 'react-native';
+import React from 'react';
+export declare const constants: {
+    keyModifierShift: number;
+    keyModifierControl: number;
+    keyModifierAlternate: number;
+    keyModifierCommand: number;
+    keyModifierNumericPad: number;
+    keyInputUpArrow: string;
+    keyInputDownArrow: string;
+    keyInputLeftArrow: string;
+    keyInputRightArrow: string;
+    keyInputEscape: string;
+};
+export interface KeyCommand {
+    input: string;
+    keyModifier?: number;
+    discoverabilityTitle?: string;
+}
+export interface Props {
+    style?: ViewStyle;
+    keyCommands: Array<KeyCommand>;
+    testID?: string;
+}
+export default class KeyCommands extends React.Component<Props> {
+    render(): JSX.Element;
+}

dist/index.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
+import { NativeModules, StyleSheet, requireNativeComponent } from 'react-native';
+import React from 'react';
+const { KeyCommandConstants } = NativeModules;
+const RCTKeyCommands = requireNativeComponent('RCTRCTKeyCommands');
+const defaultStyles = StyleSheet.create({
+    main: {
+        backgroundColor: 'transparent'
+    }
+});
+export const constants = {
+    keyModifierShift: KeyCommandConstants.keyModifierShift,
+    keyModifierControl: KeyCommandConstants.keyModifierControl,
+    keyModifierAlternate: KeyCommandConstants.keyModifierAlternate,
+    keyModifierCommand: KeyCommandConstants.keyModifierCommand,
+    keyModifierNumericPad: KeyCommandConstants.keyModifierNumericPad,
+    keyInputUpArrow: KeyCommandConstants.keyInputUpArrow,
+    keyInputDownArrow: KeyCommandConstants.keyInputDownArrow,
+    keyInputLeftArrow: KeyCommandConstants.keyInputLeftArrow,
+    keyInputRightArrow: KeyCommandConstants.keyInputRightArrow,
+    keyInputEscape: KeyCommandConstants.keyInputEscape,
+};
+export default class KeyCommands extends React.Component {
+    render() {
+        const _a = this.props, { style } = _a, props = __rest(_a, ["style"]);
+        return (<RCTKeyCommands {...Object.assign({}, props, { style: [defaultStyles.main, style] })}/>);
+    }
+}

ios/KeyCommands.xcodeproj/project.pbxproj

@@ -9,6 +9,7 @@
 /* Begin PBXBuildFile section */
 		78B1A2FF2058822E00873224 /* RCTKeyCommandsView.m in Sources */ = {isa = PBXBuildFile; fileRef = 78B1A2FD2058822E00873224 /* RCTKeyCommandsView.m */; };
 		78B1A3002058822E00873224 /* RCTKeyCommandsManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 78B1A2FE2058822E00873224 /* RCTKeyCommandsManager.m */; };
+		78B1A3062059A7E000873224 /* RCTKeyCommandConstants.m in Sources */ = {isa = PBXBuildFile; fileRef = 78B1A3042059A7E000873224 /* RCTKeyCommandConstants.m */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXCopyFilesBuildPhase section */
@@ -29,6 +30,8 @@
 		78B1A2FC2058822D00873224 /* RCTKeyCommandsView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTKeyCommandsView.h; sourceTree = "<group>"; };
 		78B1A2FD2058822E00873224 /* RCTKeyCommandsView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTKeyCommandsView.m; sourceTree = "<group>"; };
 		78B1A2FE2058822E00873224 /* RCTKeyCommandsManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTKeyCommandsManager.m; sourceTree = "<group>"; };
+		78B1A3042059A7E000873224 /* RCTKeyCommandConstants.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTKeyCommandConstants.m; sourceTree = "<group>"; };
+		78B1A3052059A7E000873224 /* RCTKeyCommandConstants.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTKeyCommandConstants.h; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -63,6 +66,8 @@
 		D8C1B0701F5F430E00053884 /* KeyCommands */ = {
 			isa = PBXGroup;
 			children = (
+				78B1A3052059A7E000873224 /* RCTKeyCommandConstants.h */,
+				78B1A3042059A7E000873224 /* RCTKeyCommandConstants.m */,
 				78B1A2FB2058822D00873224 /* RCTKeyCommandsManager.h */,
 				78B1A2FE2058822E00873224 /* RCTKeyCommandsManager.m */,
 				78B1A2FC2058822D00873224 /* RCTKeyCommandsView.h */,
@@ -130,6 +135,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				78B1A3062059A7E000873224 /* RCTKeyCommandConstants.m in Sources */,
 				78B1A2FF2058822E00873224 /* RCTKeyCommandsView.m in Sources */,
 				78B1A3002058822E00873224 /* RCTKeyCommandsManager.m in Sources */,
 			);

ios/KeyCommands/RCTKeyCommandConstants.h

@@ -0,0 +1,14 @@
+//
+//  RCTKeyCommandConstants.h
+//  Envoy
+//
+//  Created by Fang-Pen Lin on 3/14/18.
+//  Copyright © 2018 Envoy Inc. All rights reserved.
+//
+
+#import <Foundation/Foundation.h>
+#import <React/RCTBridgeModule.h>
+
+@interface RCTKeyCommandConstants : NSObject<RCTBridgeModule>
+
+@end

ios/KeyCommands/RCTKeyCommandConstants.m

@@ -0,0 +1,31 @@
+//
+//  RCTKeyCommandConstants.m
+//  Envoy
+//
+//  Created by Fang-Pen Lin on 3/14/18.
+//  Copyright © 2018 Envoy Inc. All rights reserved.
+//
+
+#import <UIKit/UIKit.h>
+#import "RCTKeyCommandConstants.h"
+
+@implementation RCTKeyCommandConstants
+
+RCT_EXPORT_MODULE();
+
+- (NSDictionary *)constantsToExport {
+    return @{
+         @"keyModifierShift": @(UIKeyModifierAlphaShift),
+         @"keyModifierControl": @(UIKeyModifierControl),
+         @"keyModifierAlternate": @(UIKeyModifierAlternate),
+         @"keyModifierCommand": @(UIKeyModifierCommand),
+         @"keyModifierNumericPad": @(UIKeyModifierNumericPad),
+         @"keyInputUpArrow": UIKeyInputUpArrow,
+         @"keyInputDownArrow": UIKeyInputDownArrow,
+         @"keyInputLeftArrow": UIKeyInputLeftArrow,
+         @"keyInputRightArrow": UIKeyInputRightArrow,
+         @"keyInputEscape": UIKeyInputEscape
+    };
+}
+
+@end

src/index.tsx

@@ -1,22 +1,53 @@
 import {
+  NativeModules,
   StyleSheet,
   ViewStyle,
   requireNativeComponent
 } from 'react-native'
 
 import React from 'react'
 
+const { KeyCommandConstants } = NativeModules
 const RCTKeyCommands = requireNativeComponent('RCTRCTKeyCommands')
 const defaultStyles = StyleSheet.create({
   main: {
     backgroundColor: 'transparent'
   }
 })
 
+export const constants = {
+  keyModifierShift: KeyCommandConstants.keyModifierShift as number,
+  keyModifierControl: KeyCommandConstants.keyModifierControl as number,
+  keyModifierAlternate: KeyCommandConstants.keyModifierAlternate as number,
+  keyModifierCommand: KeyCommandConstants.keyModifierCommand as number,
+  keyModifierNumericPad: KeyCommandConstants.keyModifierNumericPad as number,
+  keyInputUpArrow: KeyCommandConstants.keyInputUpArrow as string,
+  keyInputDownArrow: KeyCommandConstants.keyInputDownArrow as string,
+  keyInputLeftArrow: KeyCommandConstants.keyInputLeftArrow as string,
+  keyInputRightArrow: KeyCommandConstants.keyInputRightArrow as string,
+  keyInputEscape: KeyCommandConstants.keyInputEscape as string,
+}
+
+export interface KeyCommand {
+  /// The input key, could be something like '1' stands for '1' key,
+  /// constatns like keyInputUpArrow and others can also be used here
+  input: string
+  /// Key modifier to be used along with the key press, like Command + Alt
+  /// can be passed like
+  ///
+  ///     constatns.keyModifierCommand | constants.keyModifierAlternate
+  ///
+  keyModifier?: number
+  /// Title of discoverability to display, leave it as undefined means we
+  /// don't want the key command to be displayed in discoverability overlayer
+  /// UI
+  discoverabilityTitle?: string
+}
+
 export interface Props {
   style?: ViewStyle
-  // TODO: add children
-  // TODO: add props here
+  /// Key commands
+  keyCommands: Array<KeyCommand>
   /// ID for UI automatic testing
   testID?: string
 }