diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js index 3293d9a404c32d..8f7a4999d43dd2 100644 --- a/Libraries/Components/Button.js +++ b/Libraries/Components/Button.js @@ -20,7 +20,7 @@ const View = require('./View/View'); const invariant = require('invariant'); -import type {PressEvent} from '../Types/CoreEventTypes'; +import type {PressEvent, KeyEvent} from '../Types/CoreEventTypes'; import type {FocusEvent, BlurEvent} from './TextInput/TextInput'; // TODO(OSS Candidate ISS#2710739) type ButtonProps = $ReadOnly<{| @@ -112,6 +112,28 @@ type ButtonProps = $ReadOnly<{| * Handler to be called when the button loses key focus */ onFocus?: ?(e: FocusEvent) => void, + + /** + * Handler to be called when a key down press is detected + */ + onKeyDown?: ?(e: KeyEvent) => void, + + /** + * Handler to be called when a key up press is detected + */ + onKeyUp?: ?(e: KeyEvent) => void, + + /* + * Array of keys to receive key down events for + * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow", + */ + validKeysDown?: ?Array, + + /* + * Array of keys to receive key up events for + * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow", + */ + validKeysUp?: ?Array, // ]TODO(OSS Candidate ISS#2710739) |}>; @@ -162,6 +184,10 @@ class Button extends React.Component { testID, onFocus, // TODO(OSS Candidate ISS#2710739) onBlur, // TODO(OSS Candidate ISS#2710739) + onKeyDown, + validKeysDown, + validKeysUp, + onKeyUp, } = this.props; const buttonStyles = [styles.button]; const textStyles = [styles.text]; @@ -206,6 +232,10 @@ class Button extends React.Component { onPress={onPress} onFocus={onFocus} // TODO(OSS Candidate ISS#2710739) onBlur={onBlur} // TODO(OSS Candidate ISS#2710739) + onKeyDown={onKeyDown} + onKeyUp={onKeyUp} + validKeysDown={validKeysDown} + validKeysUp={validKeysUp} touchSoundDisabled={touchSoundDisabled}> diff --git a/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap b/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap index 0f2f841dc5a432..75a0ab5bb1838d 100644 --- a/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap +++ b/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap @@ -12,6 +12,8 @@ exports[`TextInput tests should render as expected: should deep render when mock onChange={[Function]} onClick={[Function]} onFocus={[Function]} + onKeyDown={[Function]} + onKeyUp={[Function]} onResponderGrant={[Function]} onResponderMove={[Function]} onResponderRelease={[Function]} @@ -40,6 +42,8 @@ exports[`TextInput tests should render as expected: should deep render when not onChange={[Function]} onClick={[Function]} onFocus={[Function]} + onKeyDown={[Function]} + onKeyUp={[Function]} onResponderGrant={[Function]} onResponderMove={[Function]} onResponderRelease={[Function]} diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.js b/Libraries/Components/Touchable/TouchableNativeFeedback.js index 691cce92eaeaeb..37de744e6a87e2 100644 --- a/Libraries/Components/Touchable/TouchableNativeFeedback.js +++ b/Libraries/Components/Touchable/TouchableNativeFeedback.js @@ -76,6 +76,18 @@ type Props = $ReadOnly<{| */ nextFocusUp?: ?number, + /* + * Array of keys to receive key down events for + * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow", + */ + validKeysDown?: ?Array, + + /* + * Array of keys to receive key up events for + * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow", + */ + validKeysUp?: ?Array, + /** * Set to true to add the ripple effect to the foreground of the view, instead * of the background. This is useful if one of your child views has a @@ -285,6 +297,8 @@ class TouchableNativeFeedback extends React.Component { nextFocusUp: this.props.nextFocusUp, onLayout: this.props.onLayout, testID: this.props.testID, + validKeysDown: this.props.validKeysDown, + validKeysUp: this.props.validKeysUp, }, ...children, ); diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index 53d9cab5ed7590..cc687765a66c95 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/Libraries/Components/Touchable/TouchableOpacity.js @@ -38,6 +38,17 @@ type Props = $ReadOnly<{| style?: ?ViewStyleProp, hostRef: React.Ref, + /* + * Array of keys to receive key down events for + * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow", + */ + validKeysDown?: ?Array, + + /* + * Array of keys to receive key up events for + * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow", + */ + validKeysUp?: ?Array, |}>; type State = $ReadOnly<{| @@ -169,11 +180,23 @@ class TouchableOpacity extends React.Component { this.props.onLongPress(event); } }, + onKeyDown: event => { + if (this.props.onKeyDown != null) { + this.props.onKeyDown(event); + } + }, + onKeyUp: event => { + if (this.props.onKeyUp != null) { + this.props.onKeyUp(event); + } + }, onPress: event => { if (this.props.onPress != null) { this.props.onPress(event); } }, + validKeysDown: this.props.validKeysDown, + validKeysUp: this.props.validKeysUp, onPressIn: event => { this._opacityActive( event.dispatchConfig.registrationName === 'onResponderGrant' @@ -278,6 +301,10 @@ class TouchableOpacity extends React.Component { onDrop={this.props.onDrop} onFocus={this.props.onFocus} onBlur={this.props.onBlur} + onKeyDown={this.props.onKeyDown} + onKeyUp={this.props.onKeyUp} + validKeysDown={this.props.validKeysDown} + validKeysUp={this.props.validKeysUp} draggedTypes={this.props.draggedTypes} // ]TODO(macOS ISS#2323203) ref={this.props.hostRef} {...eventHandlersWithoutBlurAndFocus}> diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 5e3d8216eb79f6..cc8a6adcd0c4a0 100755 --- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -10,7 +10,9 @@ 'use strict'; -import Pressability from '../../Pressability/Pressability.js'; +import Pressability, { + type PressabilityConfig, +} from '../../Pressability/Pressability.js'; import {PressabilityDebugView} from '../../Pressability/PressabilityDebug.js'; import TVTouchable from './TVTouchable.js'; import type { @@ -24,6 +26,7 @@ import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType'; import type { BlurEvent, FocusEvent, + KeyEvent, LayoutEvent, PressEvent, MouseEvent, // TODO(macOS ISS#2323203) @@ -62,6 +65,10 @@ type Props = $ReadOnly<{| onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, onBlur?: ?(event: BlurEvent) => mixed, onFocus?: ?(event: FocusEvent) => mixed, + onKeyDown?: ?(event: KeyEvent) => mixed, + onKeyUp?: ?(event: KeyEvent) => mixed, + validKeysDown?: ?Array, + validKeysUp?: ?Array, onLayout?: ?(event: LayoutEvent) => mixed, onLongPress?: ?(event: PressEvent) => mixed, onPress?: ?(event: PressEvent) => mixed, @@ -103,6 +110,10 @@ const PASSTHROUGH_PROPS = [ 'onAccessibilityAction', 'onBlur', 'onFocus', + 'onKeyDown', + 'onKeyUp', + 'validKeysDown', + 'validKeysUp', 'onLayout', 'onMouseEnter', // [TODO(macOS ISS#2323203) 'onMouseLeave', @@ -242,4 +253,51 @@ class TouchableWithoutFeedback extends React.Component { } } +function createPressabilityConfig(props: Props): PressabilityConfig { + return { + onBlur: event => { + if (props.onBlur) { + props.onBlur(event); + } + }, + onFocus: event => { + if (props.onFocus) { + props.onFocus(event); + } + }, + onKeyDown: event => { + if (props.onKeyDown) { + props.onKeyDown(event); + } + }, + onKeyUp: event => { + if (props.onKeyUp) { + props.onKeyUp(event); + } + }, + validKeysDown: props.validKeysDown, + validKeysUp: props.validKeysUp, + onLongPress: event => { + if (props.onLongPress) { + props.onLongPress(event); + } + }, + onPress: event => { + if (props.onPress) { + props.onPress(event); + } + }, + onPressIn: event => { + if (props.onPressIn) { + props.onPressIn(event); + } + }, + onPressOut: event => { + if (props.onPressOut) { + props.onPressOut(event); + } + }, + }; +} + module.exports = TouchableWithoutFeedback; diff --git a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap index 8c85655c18ee97..07be2e9369f90b 100644 --- a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap +++ b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap @@ -7,6 +7,8 @@ exports[`TouchableHighlight renders correctly 1`] = ` enableFocusRing={true} focusable={false} onClick={[Function]} + onKeyDown={[Function]} + onKeyUp={[Function]} onResponderGrant={[Function]} onResponderMove={[Function]} onResponderRelease={[Function]} diff --git a/Libraries/Components/View/ReactNativeViewAttributes.js b/Libraries/Components/View/ReactNativeViewAttributes.js index bf264eabb4fb2a..434e7a5b8b82bd 100644 --- a/Libraries/Components/View/ReactNativeViewAttributes.js +++ b/Libraries/Components/View/ReactNativeViewAttributes.js @@ -41,6 +41,10 @@ const UIView = { onDragEnter: true, onDragLeave: true, onDrop: true, + onKeyDown: true, + onKeyUp: true, + validKeysDown: true, + validKeysUp: true, draggedTypes: true, // ]TODO(macOS ISS#2323203) style: ReactNativeStyleAttributes, }; diff --git a/Libraries/Components/View/ReactNativeViewViewConfig.js b/Libraries/Components/View/ReactNativeViewViewConfig.js index 1d17f3e3bac1a5..6ea394f72528c1 100644 --- a/Libraries/Components/View/ReactNativeViewViewConfig.js +++ b/Libraries/Components/View/ReactNativeViewViewConfig.js @@ -44,6 +44,18 @@ const ReactNativeViewConfig = { captured: 'onFocusCapture', }, }, + topKeyUp: { + phasedRegistrationNames: { + bubbled: 'onKeyUp', + captured: 'onKeyUpCapture', + }, + }, + topKeyDown: { + phasedRegistrationNames: { + bubbled: 'onKeyDown', + captured: 'onKeyDownCapture', + }, + }, topKeyPress: { phasedRegistrationNames: { bubbled: 'onKeyPress', @@ -338,6 +350,8 @@ const ReactNativeViewConfig = { transform: {diff: require('../../Utilities/differ/matricesDiffer')}, translateX: true, translateY: true, + validKeysDown: true, + validKeysUp: true, width: true, zIndex: true, }, diff --git a/Libraries/Components/View/ReactNativeViewViewConfigMacOS.js b/Libraries/Components/View/ReactNativeViewViewConfigMacOS.js index 4aa28a0a45939e..7e0c1964ec7fa5 100644 --- a/Libraries/Components/View/ReactNativeViewViewConfigMacOS.js +++ b/Libraries/Components/View/ReactNativeViewViewConfigMacOS.js @@ -46,6 +46,10 @@ const ReactNativeViewViewConfigMacOS = { onDragLeave: true, onDrop: true, onFocus: true, + onKeyDown: true, + onKeyUp: true, + validKeysDown: true, + validKeysUp: true, onMouseEnter: true, onMouseLeave: true, tooltip: true, diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index a481193fceb285..ff1e84f1822d6d 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -18,6 +18,7 @@ import type { Layout, LayoutEvent, ScrollEvent, // TODO(macOS ISS#2323203) + KeyEvent, } from '../../Types/CoreEventTypes'; import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType'; import type {Node} from 'react'; @@ -33,6 +34,8 @@ import type { // [TODO(macOS ISS#2323203) import type {DraggedTypesType} from '../View/DraggedType'; +//$FlowFixMe +import {array} from 'yargs'; // ]TODO(macOS ISS#2323203) export type ViewLayout = Layout; @@ -41,6 +44,8 @@ export type ViewLayoutEvent = LayoutEvent; type BubblingEventProps = $ReadOnly<{| onBlur?: ?(event: BlurEvent) => mixed, onFocus?: ?(event: FocusEvent) => mixed, + onKeyDown?: ?(event: KeyEvent) => mixed, + onKeyUp?: ?(event: KeyEvent) => mixed, |}>; type DirectEventProps = $ReadOnly<{| @@ -590,6 +595,18 @@ export type ViewProps = $ReadOnly<{| */ enableFocusRing?: ?boolean, // TODO(macOS ISS#2323203) + /* + * Array of keys to receive key down events for + * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow", + */ + validKeysDown?: ?array, + + /* + * Array of keys to receive key up events for + * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow", + */ + validKeysUp?: ?array, + /** * Enables Dran'n'Drop Support for certain types of dragged types * diff --git a/Libraries/Pressability/Pressability.js b/Libraries/Pressability/Pressability.js index 42ee68d23eca0f..1e62535944ddd9 100644 --- a/Libraries/Pressability/Pressability.js +++ b/Libraries/Pressability/Pressability.js @@ -17,6 +17,7 @@ import type {EdgeInsetsProp} from '../StyleSheet/EdgeInsetsPropType.js'; import type { BlurEvent, FocusEvent, + KeyEvent, PressEvent, MouseEvent, } from '../Types/CoreEventTypes.js'; @@ -77,6 +78,28 @@ export type PressabilityConfig = $ReadOnly<{| */ onFocus?: ?(event: FocusEvent) => void, + /* + * Called after a key down event is detected. + */ + onKeyDown?: ?(event: KeyEvent) => void, + + /* + * Called after a key up event is detected. + */ + onKeyUp?: ?(event: KeyEvent) => void, + + /* + * Array of keys to receive key down events for + * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow", + */ + validKeysDown?: ?Array, + + /* + * Array of keys to receive key up events for + * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow", + */ + validKeysUp?: ?Array, + /** * Called when the hover is activated to provide visual feedback. */ @@ -134,6 +157,8 @@ type EventHandlers = $ReadOnly<{| onBlur: (event: BlurEvent) => void, onClick: (event: PressEvent) => void, onFocus: (event: FocusEvent) => void, + onKeyDown: (event: KeyEvent) => void, + onKeyUp: (event: KeyEvent) => void, onMouseEnter?: (event: MouseEvent) => void, onMouseLeave?: (event: MouseEvent) => void, onResponderGrant: (event: PressEvent) => void, @@ -419,6 +444,21 @@ export default class Pressability { }, }; + const keyEventHandlers = { + onKeyDown: (event: KeyEvent): void => { + const {onKeyDown} = this._config; + if (onKeyDown != null) { + onKeyDown(event); + } + }, + onKeyUp: (event: KeyEvent): void => { + const {onKeyUp} = this._config; + if (onKeyUp != null) { + onKeyUp(event); + } + }, + }; + const responderEventHandlers = { onStartShouldSetResponder: () => { const {onStartShouldSetResponder} = this._config; @@ -563,6 +603,7 @@ export default class Pressability { ...focusEventHandlers, ...responderEventHandlers, ...mouseEventHandlers, + ...keyEventHandlers, }; } diff --git a/Libraries/Renderer/shims/ReactNativeTypes.js b/Libraries/Renderer/shims/ReactNativeTypes.js index cf20ce938c2760..62857539532441 100644 --- a/Libraries/Renderer/shims/ReactNativeTypes.js +++ b/Libraries/Renderer/shims/ReactNativeTypes.js @@ -105,6 +105,8 @@ export type _InternalReactNativeComponentClass = Class< export type NativeMethods = { blur(): void, focus(): void, + onKeyDown(): void, + onKeyUp(): void, measure(callback: MeasureOnSuccessCallback): void, measureInWindow(callback: MeasureInWindowOnSuccessCallback): void, measureLayout( diff --git a/Libraries/Types/CoreEventTypes.js b/Libraries/Types/CoreEventTypes.js index 065657395ef739..11c1b7100a5d3c 100644 --- a/Libraries/Types/CoreEventTypes.js +++ b/Libraries/Types/CoreEventTypes.js @@ -152,6 +152,26 @@ export type FocusEvent = SyntheticEvent< |}>, >; +export type KeyEvent = SyntheticEvent< + $ReadOnly<{| + // Modifier keys + capsLockKey: boolean, + shiftKey: boolean, + controlKey: boolean, + optionKey: boolean, + commandKey: boolean, + numericPadKey: boolean, + helpKey: boolean, + functionKey: boolean, + // Key options + leftArrowKey: boolean, + rightArrowKey: boolean, + upArrowKey: boolean, + downArrowKey: boolean, + key: string, + |}>, +>; + export type MouseEvent = SyntheticEvent< $ReadOnly<{| clientX: number, diff --git a/RNTester/Podfile.lock b/RNTester/Podfile.lock index 480b0a7af20cca..cdf9e5b5a4a08a 100644 --- a/RNTester/Podfile.lock +++ b/RNTester/Podfile.lock @@ -3,14 +3,14 @@ PODS: - CocoaAsyncSocket (7.6.3) - CocoaLibEvent (1.0.0) - DoubleConversion (1.1.6) - - FBLazyVector (0.62.19) - - FBReactNativeSpec (0.62.19): - - RCT-Folly (= 2018.10.22.00) - - RCTRequired (= 0.62.19) - - RCTTypeSafety (= 0.62.19) - - React-Core (= 0.62.19) - - React-jsi (= 0.62.19) - - ReactCommon/turbomodule/core (= 0.62.19) + - FBLazyVector (0.62.20) + - FBReactNativeSpec (0.62.20): + - RCT-Folly (= 2018.10.22.00) + - RCTRequired (= 0.62.20) + - RCTTypeSafety (= 0.62.20) + - React-Core (= 0.62.20) + - React-jsi (= 0.62.20) + - ReactCommon/turbomodule/core (= 0.62.20) - Flipper (0.30.2): - Flipper-Folly (~> 2.1) - Flipper-RSocket (~> 1.0) @@ -81,272 +81,272 @@ PODS: - DoubleConversion - glog - libevent - - RCTRequired (0.62.19) - - RCTTypeSafety (0.62.19): - - FBLazyVector (= 0.62.19) - - RCT-Folly (= 2018.10.22.00) - - RCTRequired (= 0.62.19) - - React-Core (= 0.62.19) - - React (0.62.19): - - React-Core (= 0.62.19) - - React-Core/DevSupport (= 0.62.19) - - React-Core/RCTWebSocket (= 0.62.19) - - React-RCTActionSheet (= 0.62.19) - - React-RCTAnimation (= 0.62.19) - - React-RCTBlob (= 0.62.19) - - React-RCTImage (= 0.62.19) - - React-RCTLinking (= 0.62.19) - - React-RCTNetwork (= 0.62.19) - - React-RCTSettings (= 0.62.19) - - React-RCTText (= 0.62.19) - - React-RCTVibration (= 0.62.19) - - React-ART (0.62.19): - - React-Core/ARTHeaders (= 0.62.19) - - React-Core (0.62.19): + - RCTRequired (0.62.20) + - RCTTypeSafety (0.62.20): + - FBLazyVector (= 0.62.20) + - RCT-Folly (= 2018.10.22.00) + - RCTRequired (= 0.62.20) + - React-Core (= 0.62.20) + - React (0.62.20): + - React-Core (= 0.62.20) + - React-Core/DevSupport (= 0.62.20) + - React-Core/RCTWebSocket (= 0.62.20) + - React-RCTActionSheet (= 0.62.20) + - React-RCTAnimation (= 0.62.20) + - React-RCTBlob (= 0.62.20) + - React-RCTImage (= 0.62.20) + - React-RCTLinking (= 0.62.20) + - React-RCTNetwork (= 0.62.20) + - React-RCTSettings (= 0.62.20) + - React-RCTText (= 0.62.20) + - React-RCTVibration (= 0.62.20) + - React-ART (0.62.20): + - React-Core/ARTHeaders (= 0.62.20) + - React-Core (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - - React-Core/Default (= 0.62.19) - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-Core/Default (= 0.62.20) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/ARTHeaders (0.62.19): + - React-Core/ARTHeaders (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - React-Core/Default - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/CoreModulesHeaders (0.62.19): + - React-Core/CoreModulesHeaders (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - React-Core/Default - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/Default (0.62.19): + - React-Core/Default (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/DevSupport (0.62.19): + - React-Core/DevSupport (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - - React-Core/Default (= 0.62.19) - - React-Core/RCTWebSocket (= 0.62.19) - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) - - React-jsinspector (= 0.62.19) + - React-Core/Default (= 0.62.20) + - React-Core/RCTWebSocket (= 0.62.20) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) + - React-jsinspector (= 0.62.20) - Yoga - - React-Core/Hermes (0.62.19): + - React-Core/Hermes (0.62.20): - glog - hermes (~> 0.4.1) - RCT-Folly (= 2018.10.22.00) - RCT-Folly/Futures - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/RCTActionSheetHeaders (0.62.19): + - React-Core/RCTActionSheetHeaders (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - React-Core/Default - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/RCTAnimationHeaders (0.62.19): + - React-Core/RCTAnimationHeaders (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - React-Core/Default - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/RCTBlobHeaders (0.62.19): + - React-Core/RCTBlobHeaders (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - React-Core/Default - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/RCTImageHeaders (0.62.19): + - React-Core/RCTImageHeaders (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - React-Core/Default - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/RCTLinkingHeaders (0.62.19): + - React-Core/RCTLinkingHeaders (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - React-Core/Default - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/RCTNetworkHeaders (0.62.19): + - React-Core/RCTNetworkHeaders (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - React-Core/Default - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/RCTPushNotificationHeaders (0.62.19): + - React-Core/RCTPushNotificationHeaders (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - React-Core/Default - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/RCTSettingsHeaders (0.62.19): + - React-Core/RCTSettingsHeaders (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - React-Core/Default - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/RCTTextHeaders (0.62.19): + - React-Core/RCTTextHeaders (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - React-Core/Default - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/RCTVibrationHeaders (0.62.19): + - React-Core/RCTVibrationHeaders (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - React-Core/Default - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-Core/RCTWebSocket (0.62.19): + - React-Core/RCTWebSocket (0.62.20): - glog - RCT-Folly (= 2018.10.22.00) - - React-Core/Default (= 0.62.19) - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsiexecutor (= 0.62.19) + - React-Core/Default (= 0.62.20) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsiexecutor (= 0.62.20) - Yoga - - React-CoreModules (0.62.19): - - FBReactNativeSpec (= 0.62.19) - - RCT-Folly (= 2018.10.22.00) - - RCTTypeSafety (= 0.62.19) - - React-Core/CoreModulesHeaders (= 0.62.19) - - React-RCTImage (= 0.62.19) - - ReactCommon/turbomodule/core (= 0.62.19) - - React-cxxreact (0.62.19): + - React-CoreModules (0.62.20): + - FBReactNativeSpec (= 0.62.20) + - RCT-Folly (= 2018.10.22.00) + - RCTTypeSafety (= 0.62.20) + - React-Core/CoreModulesHeaders (= 0.62.20) + - React-RCTImage (= 0.62.20) + - ReactCommon/turbomodule/core (= 0.62.20) + - React-cxxreact (0.62.20): - boost-for-react-native (= 1.63.0) - DoubleConversion - glog - RCT-Folly (= 2018.10.22.00) - - React-jsinspector (= 0.62.19) - - React-jsi (0.62.19): + - React-jsinspector (= 0.62.20) + - React-jsi (0.62.20): - boost-for-react-native (= 1.63.0) - DoubleConversion - glog - RCT-Folly (= 2018.10.22.00) - - React-jsi/Default (= 0.62.19) - - React-jsi/Default (0.62.19): + - React-jsi/Default (= 0.62.20) + - React-jsi/Default (0.62.20): - boost-for-react-native (= 1.63.0) - DoubleConversion - glog - RCT-Folly (= 2018.10.22.00) - - React-jsiexecutor (0.62.19): + - React-jsiexecutor (0.62.20): - DoubleConversion - glog - RCT-Folly (= 2018.10.22.00) - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - React-jsinspector (0.62.19) - - React-RCTActionSheet (0.62.19): - - React-Core/RCTActionSheetHeaders (= 0.62.19) - - React-RCTAnimation (0.62.19): - - FBReactNativeSpec (= 0.62.19) - - RCT-Folly (= 2018.10.22.00) - - RCTTypeSafety (= 0.62.19) - - React-Core/RCTAnimationHeaders (= 0.62.19) - - ReactCommon/turbomodule/core (= 0.62.19) - - React-RCTBlob (0.62.19): - - FBReactNativeSpec (= 0.62.19) - - RCT-Folly (= 2018.10.22.00) - - React-Core/RCTBlobHeaders (= 0.62.19) - - React-Core/RCTWebSocket (= 0.62.19) - - React-jsi (= 0.62.19) - - React-RCTNetwork (= 0.62.19) - - ReactCommon/turbomodule/core (= 0.62.19) - - React-RCTImage (0.62.19): - - FBReactNativeSpec (= 0.62.19) - - RCT-Folly (= 2018.10.22.00) - - RCTTypeSafety (= 0.62.19) - - React-Core/RCTImageHeaders (= 0.62.19) - - React-RCTNetwork (= 0.62.19) - - ReactCommon/turbomodule/core (= 0.62.19) - - React-RCTLinking (0.62.19): - - FBReactNativeSpec (= 0.62.19) - - React-Core/RCTLinkingHeaders (= 0.62.19) - - ReactCommon/turbomodule/core (= 0.62.19) - - React-RCTNetwork (0.62.19): - - FBReactNativeSpec (= 0.62.19) - - RCT-Folly (= 2018.10.22.00) - - RCTTypeSafety (= 0.62.19) - - React-Core/RCTNetworkHeaders (= 0.62.19) - - ReactCommon/turbomodule/core (= 0.62.19) - - React-RCTPushNotification (0.62.19): - - FBReactNativeSpec (= 0.62.19) - - RCTTypeSafety (= 0.62.19) - - React-Core/RCTPushNotificationHeaders (= 0.62.19) - - ReactCommon/turbomodule/core (= 0.62.19) - - React-RCTSettings (0.62.19): - - FBReactNativeSpec (= 0.62.19) - - RCT-Folly (= 2018.10.22.00) - - RCTTypeSafety (= 0.62.19) - - React-Core/RCTSettingsHeaders (= 0.62.19) - - ReactCommon/turbomodule/core (= 0.62.19) - - React-RCTTest (0.62.19): - - React-Core (= 0.62.19) - - React-CoreModules (= 0.62.19) - - React-RCTText (0.62.19): - - React-Core/RCTTextHeaders (= 0.62.19) - - React-RCTVibration (0.62.19): - - FBReactNativeSpec (= 0.62.19) - - RCT-Folly (= 2018.10.22.00) - - React-Core/RCTVibrationHeaders (= 0.62.19) - - ReactCommon/turbomodule/core (= 0.62.19) - - ReactCommon/callinvoker (0.62.19): + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - React-jsinspector (0.62.20) + - React-RCTActionSheet (0.62.20): + - React-Core/RCTActionSheetHeaders (= 0.62.20) + - React-RCTAnimation (0.62.20): + - FBReactNativeSpec (= 0.62.20) + - RCT-Folly (= 2018.10.22.00) + - RCTTypeSafety (= 0.62.20) + - React-Core/RCTAnimationHeaders (= 0.62.20) + - ReactCommon/turbomodule/core (= 0.62.20) + - React-RCTBlob (0.62.20): + - FBReactNativeSpec (= 0.62.20) + - RCT-Folly (= 2018.10.22.00) + - React-Core/RCTBlobHeaders (= 0.62.20) + - React-Core/RCTWebSocket (= 0.62.20) + - React-jsi (= 0.62.20) + - React-RCTNetwork (= 0.62.20) + - ReactCommon/turbomodule/core (= 0.62.20) + - React-RCTImage (0.62.20): + - FBReactNativeSpec (= 0.62.20) + - RCT-Folly (= 2018.10.22.00) + - RCTTypeSafety (= 0.62.20) + - React-Core/RCTImageHeaders (= 0.62.20) + - React-RCTNetwork (= 0.62.20) + - ReactCommon/turbomodule/core (= 0.62.20) + - React-RCTLinking (0.62.20): + - FBReactNativeSpec (= 0.62.20) + - React-Core/RCTLinkingHeaders (= 0.62.20) + - ReactCommon/turbomodule/core (= 0.62.20) + - React-RCTNetwork (0.62.20): + - FBReactNativeSpec (= 0.62.20) + - RCT-Folly (= 2018.10.22.00) + - RCTTypeSafety (= 0.62.20) + - React-Core/RCTNetworkHeaders (= 0.62.20) + - ReactCommon/turbomodule/core (= 0.62.20) + - React-RCTPushNotification (0.62.20): + - FBReactNativeSpec (= 0.62.20) + - RCTTypeSafety (= 0.62.20) + - React-Core/RCTPushNotificationHeaders (= 0.62.20) + - ReactCommon/turbomodule/core (= 0.62.20) + - React-RCTSettings (0.62.20): + - FBReactNativeSpec (= 0.62.20) + - RCT-Folly (= 2018.10.22.00) + - RCTTypeSafety (= 0.62.20) + - React-Core/RCTSettingsHeaders (= 0.62.20) + - ReactCommon/turbomodule/core (= 0.62.20) + - React-RCTTest (0.62.20): + - React-Core (= 0.62.20) + - React-CoreModules (= 0.62.20) + - React-RCTText (0.62.20): + - React-Core/RCTTextHeaders (= 0.62.20) + - React-RCTVibration (0.62.20): + - FBReactNativeSpec (= 0.62.20) + - RCT-Folly (= 2018.10.22.00) + - React-Core/RCTVibrationHeaders (= 0.62.20) + - ReactCommon/turbomodule/core (= 0.62.20) + - ReactCommon/callinvoker (0.62.20): - DoubleConversion - glog - RCT-Folly (= 2018.10.22.00) - - React-cxxreact (= 0.62.19) - - ReactCommon/turbomodule/core (0.62.19): + - React-cxxreact (= 0.62.20) + - ReactCommon/turbomodule/core (0.62.20): - DoubleConversion - glog - RCT-Folly (= 2018.10.22.00) - - React-Core (= 0.62.19) - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - ReactCommon/callinvoker (= 0.62.19) - - ReactCommon/turbomodule/samples (0.62.19): + - React-Core (= 0.62.20) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - ReactCommon/callinvoker (= 0.62.20) + - ReactCommon/turbomodule/samples (0.62.20): - DoubleConversion - glog - RCT-Folly (= 2018.10.22.00) - - React-Core (= 0.62.19) - - React-cxxreact (= 0.62.19) - - React-jsi (= 0.62.19) - - ReactCommon/callinvoker (= 0.62.19) - - ReactCommon/turbomodule/core (= 0.62.19) + - React-Core (= 0.62.20) + - React-cxxreact (= 0.62.20) + - React-jsi (= 0.62.20) + - ReactCommon/callinvoker (= 0.62.20) + - ReactCommon/turbomodule/core (= 0.62.20) - Yoga (1.14.0) - YogaKit (1.18.1): - Yoga (~> 1.14) @@ -477,8 +477,8 @@ SPEC CHECKSUMS: CocoaAsyncSocket: eafaa68a7e0ec99ead0a7b35015e0bf25d2c8987 CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f DoubleConversion: 681b789128e5512811c81706e9b361209f40d21e - FBLazyVector: 2148067223fff0e0f8fbd80a6b0c934ffb7725a8 - FBReactNativeSpec: 4651ecfeba87402f1ddb06782d6be89628c9a156 + FBLazyVector: e2c29fbbf12aaafa0601a440ebe4ff512d12d73f + FBReactNativeSpec: fc7199f46d2d1c5f22135a197022342f8317ae1a Flipper: 10b225e352595f521be0e5badddd90e241336e89 Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41 Flipper-Folly: c12092ea368353b58e992843a990a3225d4533c3 @@ -491,29 +491,29 @@ SPEC CHECKSUMS: libevent: ee9265726a1fc599dea382964fa304378affaa5f OpenSSL-Universal: 8b48cc0d10c1b2923617dfe5c178aa9ed2689355 RCT-Folly: 71ece0166f9c96c1ec9279eeb0317baf533c020f - RCTRequired: 918911330763c153719cc97d230fd9d68fef4293 - RCTTypeSafety: 5c2458c8b7986d139316674c3d8574213fa8b03f - React: 14b21d89802f6deb3c58438b820a259f0ad19663 - React-ART: b011af588c64073177c77ebaaba8bed4540da3d7 - React-Core: b77665beecb3d2a4106f49e5689f40d1a9cdf48a - React-CoreModules: 65926e4c1f9db334435f7d8b2bc5b9c05393bfd2 - React-cxxreact: e96cd68b9b1113c1738aa43c667f9b958b946aae - React-jsi: 9d639b6e1b7358ebf5e5794a27599b20a1bd5848 - React-jsiexecutor: 9647f8a2e7a239ddbe28b358b33bcfff383c8898 - React-jsinspector: e33ea205855278ad8a4bdef517749ac97e9acfbc - React-RCTActionSheet: 5f8275f010e786a9e55fba6a28bf4210c9ade83c - React-RCTAnimation: 2bf688fb4c2c8c719098902783e31dbd8a023ed5 - React-RCTBlob: 5b88201c29e1dc93c5605c7f6056feae2ea25be7 - React-RCTImage: c032e6bb560d7107521ca7117a64ed3371a66aa1 - React-RCTLinking: fb9ba55af2995d8024c38a113a0f93fe4d29ed1a - React-RCTNetwork: 4000f11a6806f1863bfa7600d77ad623c55d7d9d - React-RCTPushNotification: 8461343c6c53d8614074ac2340780f5305b80fd8 - React-RCTSettings: 07c25b9a0e21ca6003639421c1502dc527a9f8f6 - React-RCTTest: 912ac34abccf794c640303ee8f27745b2d89277b - React-RCTText: 7785349fd7bd8486f314ae55869aedb0d0ecf43b - React-RCTVibration: 389fe18e19c8baff80d7243580398d37f50c18c4 - ReactCommon: c8428c9a8fdd14228f9f190883832aaeeba7911e - Yoga: fa1f25acd1b133b22869a154cacb2e690b166e2f + RCTRequired: 22769b03ec383eca62d6b1adfb64f149d38e2ae9 + RCTTypeSafety: 6d18d5a7e58177c9295e45e9f1050bc6c1cb7c77 + React: cc5ae593923355bcca3f0b352886e4fa0aaa4e13 + React-ART: 43c8c44dad8860f510bdf76b684c4ff6bbf06868 + React-Core: f72ba9f11364d5191c8689c2daf0e91c48b1f763 + React-CoreModules: 8b36477a6834cf0db74e7b62996b560c1ba64032 + React-cxxreact: 7be4dd7f666789314926c3e9a6ceceb8b3ca1c1c + React-jsi: f57927f6bc7c4fc69926b56e5c0d6f2ceba431f3 + React-jsiexecutor: 324bf409f7cf71347ff0ec86b484823e2c25e877 + React-jsinspector: 6ee973cb48f20211e0634a49f4e814d76a8342e6 + React-RCTActionSheet: ade02c7ffad1d35f7b7cfa4782f800442876340a + React-RCTAnimation: c20ceb935ff6ae141784709e29c510ed18e214fb + React-RCTBlob: bf7a3026635382092b0f47113290e5ac08babb0a + React-RCTImage: 71504b1cb2bf442eeea79ad7a3aefadab66f892a + React-RCTLinking: 8ddf5132814b989dda9bec2c240ca12cd785467d + React-RCTNetwork: d91d02d74d87e5d679c24c0620688c8e1c5cec20 + React-RCTPushNotification: 5d2217f1d73eb324efbaa2ba75aa639a8b60b278 + React-RCTSettings: 930456b8a9854fffc3828240047ff2400083b0c9 + React-RCTTest: 1bbca8b244bbeafc6ad96eb469113f922e8f3cb3 + React-RCTText: e698098962e2d34b1d85405dde9e69a3c1fc44c4 + React-RCTVibration: edf0855a2aee72ae4fddc8d28bdd30809c7d7d67 + ReactCommon: 0fa4c10b074bbde43d860eb552681f1fe2fbc5d0 + Yoga: 545f3256555feeb5304800d6377bfc0f10f980ab YogaKit: f782866e155069a2cca2517aafea43200b01fd5a PODFILE CHECKSUM: 8a50297c26ad9d948d1614b33e20d755094cb377 diff --git a/RNTester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js b/RNTester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js new file mode 100644 index 00000000000000..37ef668f616edf --- /dev/null +++ b/RNTester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js @@ -0,0 +1,87 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +'use strict'; // TODO(OSS Candidate ISS#2710739) + +const React = require('react'); +const ReactNative = require('react-native'); +import {Platform} from 'react-native'; +const {Button, Text, View} = ReactNative; + +import type {KeyEvent} from 'react-native/Libraries/Types/CoreEventTypes'; + +type State = { + eventStream: string, + characters: string, +}; + +class KeyEventExample extends React.Component<{}, State> { + state: State = { + eventStream: '', + characters: '', + }; + + onKeyDownEvent: (e: KeyEvent) => void = (e: KeyEvent) => { + console.log('received view key down event\n', e.nativeEvent.key); + this.setState({characters: e.nativeEvent.key}); + this.setState(prevState => ({ + eventStream: + prevState.eventStream + prevState.characters + '\nKey Down: ', + })); + }; + + onKeyUpEvent: (e: KeyEvent) => void = (e: KeyEvent) => { + console.log('received key up event\n', e.nativeEvent.key); + this.setState({characters: e.nativeEvent.key}); + this.setState(prevState => ({ + eventStream: prevState.eventStream + prevState.characters + '\nKey Up: ', + })); + }; + + render() { + return ( + + Key events are called when a component detects a key press. + + {Platform.OS === 'macos' ? ( + +