From da0b139b56123bc1bb9d41399cefe8a33a820a82 Mon Sep 17 00:00:00 2001 From: Ramanpreet Nara Date: Wed, 21 Nov 2018 14:31:31 -0800 Subject: [PATCH] Improve Flow types Summary: Some of the flow types were incomplete. So, I referenced the code in `~/fbsource/xplat/js/react-native-github/ReactAndroid/src/main/java/com/facebook/react/views/textinput/` and in `~/fbsource/xplat/js/react-native-github/Libraries/Text/TextInput/` to make the flow types more specific. I also fixed internal breakages. To avoid having to sprinkle `$FlowFixMe`s everywhere, I had to refactor some types, and some code. Reviewed By: TheSavior Differential Revision: D13121871 fbshipit-source-id: 9796aafc861544baf52d7ade823ab1be2d3f12d1 --- Libraries/Components/TextInput/TextInput.js | 75 +++++++++++---------- 1 file changed, 39 insertions(+), 36 deletions(-) diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index 96c0236435b..d1f4bd9cb94 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -34,7 +34,7 @@ const warning = require('fbjs/lib/warning'); import type {TextStyleProp, ViewStyleProp} from 'StyleSheet'; import type {ColorValue} from 'StyleSheetTypes'; import type {ViewProps} from 'ViewPropTypes'; -import type {SyntheticEvent} from 'CoreEventTypes'; +import type {SyntheticEvent, ScrollEvent} from 'CoreEventTypes'; import type {PressEvent} from 'CoreEventTypes'; let AndroidTextInput; @@ -57,66 +57,69 @@ const onlyMultiline = { children: true, }; -type Range = $ReadOnly<{| - start: number, - end: number, -|}>; -type Selection = $ReadOnly<{| - start: number, - end?: number, -|}>; -type ContentSize = $ReadOnly<{| - width: number, - height: number, -|}>; -type ContentOffset = $ReadOnly<{| - x: number, - y: number, -|}>; -type ChangeEvent = SyntheticEvent< +export type ChangeEvent = SyntheticEvent< $ReadOnly<{| - target: number, eventCount: number, + target: number, text: string, |}>, >; -type TextInputEvent = SyntheticEvent< + +export type TextInputEvent = SyntheticEvent< $ReadOnly<{| + eventCount: number, previousText: string, - range: Range, + range: $ReadOnly<{| + start: number, + end: number, + |}>, target: number, text: string, |}>, >; -type ContentSizeChangeEvent = SyntheticEvent< + +export type ContentSizeChangeEvent = SyntheticEvent< $ReadOnly<{| target: number, - contentSize: ContentSize, - |}>, ->; -type ScrollEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - contentOffset: ContentOffset, + contentSize: $ReadOnly<{| + width: number, + height: number, + |}>, |}>, >; + type TargetEvent = SyntheticEvent< $ReadOnly<{| target: number, |}>, >; -type SelectionChangeEvent = SyntheticEvent< + +export type BlurEvent = TargetEvent; +export type FocusEvent = TargetEvent; + +type Selection = $ReadOnly<{| + start: number, + end: number, +|}>; + +export type SelectionChangeEvent = SyntheticEvent< $ReadOnly<{| selection: Selection, + target: number, |}>, >; -type KeyPressEvent = SyntheticEvent< + +export type KeyPressEvent = SyntheticEvent< $ReadOnly<{| key: string, + target?: ?number, + eventCount?: ?number, |}>, >; -type EditingEvent = SyntheticEvent< + +export type EditingEvent = SyntheticEvent< $ReadOnly<{| + eventCount: number, text: string, target: number, |}>, @@ -245,8 +248,8 @@ type Props = $ReadOnly<{| returnKeyType?: ?ReturnKeyType, maxLength?: ?number, multiline?: ?boolean, - onBlur?: ?(e: TargetEvent) => void, - onFocus?: ?(e: TargetEvent) => void, + onBlur?: ?(e: BlurEvent) => void, + onFocus?: ?(e: FocusEvent) => void, onChange?: ?(e: ChangeEvent) => void, onChangeText?: ?(text: string) => void, onContentSizeChange?: ?(e: ContentSizeChangeEvent) => void, @@ -1169,7 +1172,7 @@ const TextInput = createReactClass({ ); }, - _onFocus: function(event: TargetEvent) { + _onFocus: function(event: FocusEvent) { if (this.props.onFocus) { this.props.onFocus(event); } @@ -1262,7 +1265,7 @@ const TextInput = createReactClass({ } }, - _onBlur: function(event: TargetEvent) { + _onBlur: function(event: BlurEvent) { if (this.props.onBlur) { this.props.onBlur(event); }