From 65eb0ec68edafa648f3cea7c323ef8b51f5d607d Mon Sep 17 00:00:00 2001 From: Thomas BARRAS Date: Mon, 12 Nov 2018 20:18:11 -0500 Subject: [PATCH 1/2] UPDATE: first draft textinput type defs --- Libraries/Components/TextInput/TextInput.js | 115 ++++++++++++++++---- RNTester/js/TextInputExample.android.js | 5 +- RNTester/js/TextInputExample.ios.js | 2 +- RNTester/js/XHRExampleFetch.js | 2 +- 4 files changed, 98 insertions(+), 26 deletions(-) diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index cd71083cc08ebf..d071991e94aef0 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -34,6 +34,8 @@ 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 {PressEvent} from 'CoreEventTypes'; let AndroidTextInput; let RCTMultilineTextInputView; @@ -55,11 +57,80 @@ const onlyMultiline = { children: true, }; -type Event = Object; -type Selection = { +type Selection = {| start: number, end?: number, -}; +|}; +type ContentSize = {| + width: number, + height: number, +|}; +type ContentOffset = {| + x: number, + y: number, +|}; +type OnChangeEvent = SyntheticEvent< + $ReadOnly<{ + target: number, + eventCount: number, + text: string, + }>, +>; +type OnTextInputEvent = SyntheticEvent< + $ReadOnly<{ + previousText: string, + range: { + start: number, + end: number, + }, + target: number, + text: string, + }>, +>; +type OnContentSizeChangeEvent = SyntheticEvent< + $ReadOnly<{ + target: number, + contentSize: ContentSize, + }>, +>; +type OnScrollEvent = SyntheticEvent< + $ReadOnly<{ + target: number, + contentOffset: ContentOffset, + }>, +>; +type OnFocusEvent = SyntheticEvent< + $ReadOnly<{ + target: number, + }>, +>; +type OnBlurEvent = SyntheticEvent< + $ReadOnly<{ + target: number, + }>, +>; +type OnSelectionChangeEvent = SyntheticEvent< + $ReadOnly<{ + selection: Selection, + }>, +>; +type OnKeyPressEvent = SyntheticEvent< + $ReadOnly<{ + key: string, + }>, +>; +type OnSubmitEditingEvent = SyntheticEvent< + $ReadOnly<{ + text: string, + target: number, + }>, +>; +type OnEndEditingEvent = SyntheticEvent< + $ReadOnly<{ + text: string, + target: number, + }>, +>; const DataDetectorTypes = [ 'phoneNumber', @@ -184,17 +255,17 @@ type Props = $ReadOnly<{| returnKeyType?: ?ReturnKeyType, maxLength?: ?number, multiline?: ?boolean, - onBlur?: ?Function, - onFocus?: ?Function, - onChange?: ?Function, - onChangeText?: ?Function, - onContentSizeChange?: ?Function, - onTextInput?: ?Function, - onEndEditing?: ?Function, - onSelectionChange?: ?Function, - onSubmitEditing?: ?Function, - onKeyPress?: ?Function, - onScroll?: ?Function, + onBlur?: ?(e: OnBlurEvent) => void, + onFocus?: ?(e: OnFocusEvent) => void, + onChange?: ?(e: OnChangeEvent) => void, + onChangeText?: ?(text: string) => void, + onContentSizeChange?: ?(e: OnContentSizeChangeEvent) => void, + onTextInput?: ?(e: OnTextInputEvent) => void, + onEndEditing?: ?(e: OnEndEditingEvent) => void, + onSelectionChange?: ?(e: OnSelectionChangeEvent) => void, + onSubmitEditing?: ?(e: OnSubmitEditingEvent) => void, + onKeyPress?: ?(e: OnKeyPressEvent) => void, + onScroll?: ?(e: OnScrollEvent) => void, placeholder?: ?Stringish, placeholderTextColor?: ?ColorValue, secureTextEntry?: ?boolean, @@ -792,7 +863,7 @@ const TextInput = createReactClass({ 'oneTimeCode', ]), }, - getDefaultProps(): Object { + getDefaultProps() { return { allowFontScaling: true, underlineColorAndroid: 'transparent', @@ -1108,7 +1179,7 @@ const TextInput = createReactClass({ ); }, - _onFocus: function(event: Event) { + _onFocus: function(event: OnFocusEvent) { if (this.props.onFocus) { this.props.onFocus(event); } @@ -1118,13 +1189,13 @@ const TextInput = createReactClass({ } }, - _onPress: function(event: Event) { + _onPress: function(event: PressEvent) { if (this.props.editable || this.props.editable === undefined) { this.focus(); } }, - _onChange: function(event: Event) { + _onChange: function(event: OnChangeEvent) { // Make sure to fire the mostRecentEventCount first so it is already set on // native when the text value is set. if (this._inputRef) { @@ -1147,7 +1218,7 @@ const TextInput = createReactClass({ this.forceUpdate(); }, - _onSelectionChange: function(event: Event) { + _onSelectionChange: function(event: OnSelectionChangeEvent) { this.props.onSelectionChange && this.props.onSelectionChange(event); if (!this._inputRef) { @@ -1197,7 +1268,7 @@ const TextInput = createReactClass({ } }, - _onBlur: function(event: Event) { + _onBlur: function(event: OnBlurEvent) { this.blur(); if (this.props.onBlur) { this.props.onBlur(event); @@ -1208,11 +1279,11 @@ const TextInput = createReactClass({ } }, - _onTextInput: function(event: Event) { + _onTextInput: function(event: OnTextInputEvent) { this.props.onTextInput && this.props.onTextInput(event); }, - _onScroll: function(event: Event) { + _onScroll: function(event: OnScrollEvent) { this.props.onScroll && this.props.onScroll(event); }, }); diff --git a/RNTester/js/TextInputExample.android.js b/RNTester/js/TextInputExample.android.js index 6fc88f62583191..9525aab427c12d 100644 --- a/RNTester/js/TextInputExample.android.js +++ b/RNTester/js/TextInputExample.android.js @@ -48,7 +48,8 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> { } onContentSizeChange={event => this.updateText( - 'onContentSizeChange size: ' + event.nativeEvent.contentSize, + 'onContentSizeChange size: ' + + JSON.stringify(event.nativeEvent.contentSize), ) } onEndEditing={event => @@ -255,7 +256,7 @@ class ToggleDefaultPaddingExample extends React.Component< type SelectionExampleState = { selection: { start: number, - end: number, + end?: number, }, value: string, }; diff --git a/RNTester/js/TextInputExample.ios.js b/RNTester/js/TextInputExample.ios.js index 1240ba2d2893fa..c0e70211f640d5 100644 --- a/RNTester/js/TextInputExample.ios.js +++ b/RNTester/js/TextInputExample.ios.js @@ -71,7 +71,7 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> { 'onSelectionChange range: ' + event.nativeEvent.selection.start + ',' + - event.nativeEvent.selection.end, + (event.nativeEvent.selection.end || ''), ) } onKeyPress={event => { diff --git a/RNTester/js/XHRExampleFetch.js b/RNTester/js/XHRExampleFetch.js index cae80aa41d1ab4..1377f18c34a58d 100644 --- a/RNTester/js/XHRExampleFetch.js +++ b/RNTester/js/XHRExampleFetch.js @@ -27,7 +27,7 @@ class XHRExampleFetch extends React.Component { this.responseHeaders = null; } - submit(uri: String) { + submit(uri: string) { fetch(uri) .then(response => { this.responseURL = response.url; From a5cca04a77d00f850e328815d6c0ed7239d5f0b4 Mon Sep 17 00:00:00 2001 From: Thomas BARRAS Date: Wed, 14 Nov 2018 06:54:59 -0500 Subject: [PATCH 2/2] UPDATE: Exact types + rename --- Libraries/Components/TextInput/TextInput.js | 112 +++++++++----------- RNTester/js/TextInputExample.android.js | 4 +- RNTester/js/TextInputExample.ios.js | 4 +- 3 files changed, 55 insertions(+), 65 deletions(-) diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index d071991e94aef0..6d25c78db1d8ef 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -57,79 +57,69 @@ const onlyMultiline = { children: true, }; -type Selection = {| +type Range = $ReadOnly<{| + start: number, + end: number, +|}>; +type Selection = $ReadOnly<{| start: number, end?: number, -|}; -type ContentSize = {| +|}>; +type ContentSize = $ReadOnly<{| width: number, height: number, -|}; -type ContentOffset = {| +|}>; +type ContentOffset = $ReadOnly<{| x: number, y: number, -|}; -type OnChangeEvent = SyntheticEvent< - $ReadOnly<{ +|}>; +type ChangeEvent = SyntheticEvent< + $ReadOnly<{| target: number, eventCount: number, text: string, - }>, + |}>, >; -type OnTextInputEvent = SyntheticEvent< - $ReadOnly<{ +type TextInputEvent = SyntheticEvent< + $ReadOnly<{| previousText: string, - range: { - start: number, - end: number, - }, + range: Range, target: number, text: string, - }>, + |}>, >; -type OnContentSizeChangeEvent = SyntheticEvent< - $ReadOnly<{ +type ContentSizeChangeEvent = SyntheticEvent< + $ReadOnly<{| target: number, contentSize: ContentSize, - }>, + |}>, >; -type OnScrollEvent = SyntheticEvent< - $ReadOnly<{ +type ScrollEvent = SyntheticEvent< + $ReadOnly<{| target: number, contentOffset: ContentOffset, - }>, ->; -type OnFocusEvent = SyntheticEvent< - $ReadOnly<{ - target: number, - }>, + |}>, >; -type OnBlurEvent = SyntheticEvent< - $ReadOnly<{ +type TargetEvent = SyntheticEvent< + $ReadOnly<{| target: number, - }>, + |}>, >; -type OnSelectionChangeEvent = SyntheticEvent< - $ReadOnly<{ +type SelectionChangeEvent = SyntheticEvent< + $ReadOnly<{| selection: Selection, - }>, + |}>, >; -type OnKeyPressEvent = SyntheticEvent< - $ReadOnly<{ +type KeyPressEvent = SyntheticEvent< + $ReadOnly<{| key: string, - }>, ->; -type OnSubmitEditingEvent = SyntheticEvent< - $ReadOnly<{ - text: string, - target: number, - }>, + |}>, >; -type OnEndEditingEvent = SyntheticEvent< - $ReadOnly<{ +type EditingEvent = SyntheticEvent< + $ReadOnly<{| text: string, target: number, - }>, + |}>, >; const DataDetectorTypes = [ @@ -255,17 +245,17 @@ type Props = $ReadOnly<{| returnKeyType?: ?ReturnKeyType, maxLength?: ?number, multiline?: ?boolean, - onBlur?: ?(e: OnBlurEvent) => void, - onFocus?: ?(e: OnFocusEvent) => void, - onChange?: ?(e: OnChangeEvent) => void, + onBlur?: ?(e: TargetEvent) => void, + onFocus?: ?(e: TargetEvent) => void, + onChange?: ?(e: ChangeEvent) => void, onChangeText?: ?(text: string) => void, - onContentSizeChange?: ?(e: OnContentSizeChangeEvent) => void, - onTextInput?: ?(e: OnTextInputEvent) => void, - onEndEditing?: ?(e: OnEndEditingEvent) => void, - onSelectionChange?: ?(e: OnSelectionChangeEvent) => void, - onSubmitEditing?: ?(e: OnSubmitEditingEvent) => void, - onKeyPress?: ?(e: OnKeyPressEvent) => void, - onScroll?: ?(e: OnScrollEvent) => void, + onContentSizeChange?: ?(e: ContentSizeChangeEvent) => void, + onTextInput?: ?(e: TextInputEvent) => void, + onEndEditing?: ?(e: EditingEvent) => void, + onSelectionChange?: ?(e: SelectionChangeEvent) => void, + onSubmitEditing?: ?(e: EditingEvent) => void, + onKeyPress?: ?(e: KeyPressEvent) => void, + onScroll?: ?(e: ScrollEvent) => void, placeholder?: ?Stringish, placeholderTextColor?: ?ColorValue, secureTextEntry?: ?boolean, @@ -1179,7 +1169,7 @@ const TextInput = createReactClass({ ); }, - _onFocus: function(event: OnFocusEvent) { + _onFocus: function(event: TargetEvent) { if (this.props.onFocus) { this.props.onFocus(event); } @@ -1195,7 +1185,7 @@ const TextInput = createReactClass({ } }, - _onChange: function(event: OnChangeEvent) { + _onChange: function(event: ChangeEvent) { // Make sure to fire the mostRecentEventCount first so it is already set on // native when the text value is set. if (this._inputRef) { @@ -1218,7 +1208,7 @@ const TextInput = createReactClass({ this.forceUpdate(); }, - _onSelectionChange: function(event: OnSelectionChangeEvent) { + _onSelectionChange: function(event: SelectionChangeEvent) { this.props.onSelectionChange && this.props.onSelectionChange(event); if (!this._inputRef) { @@ -1268,7 +1258,7 @@ const TextInput = createReactClass({ } }, - _onBlur: function(event: OnBlurEvent) { + _onBlur: function(event: TargetEvent) { this.blur(); if (this.props.onBlur) { this.props.onBlur(event); @@ -1279,11 +1269,11 @@ const TextInput = createReactClass({ } }, - _onTextInput: function(event: OnTextInputEvent) { + _onTextInput: function(event: TextInputEvent) { this.props.onTextInput && this.props.onTextInput(event); }, - _onScroll: function(event: OnScrollEvent) { + _onScroll: function(event: ScrollEvent) { this.props.onScroll && this.props.onScroll(event); }, }); diff --git a/RNTester/js/TextInputExample.android.js b/RNTester/js/TextInputExample.android.js index 9525aab427c12d..7bed8d83f37a4e 100644 --- a/RNTester/js/TextInputExample.android.js +++ b/RNTester/js/TextInputExample.android.js @@ -254,10 +254,10 @@ class ToggleDefaultPaddingExample extends React.Component< } type SelectionExampleState = { - selection: { + selection: $ReadOnly<{| start: number, end?: number, - }, + |}>, value: string, }; diff --git a/RNTester/js/TextInputExample.ios.js b/RNTester/js/TextInputExample.ios.js index c0e70211f640d5..a55e7ac270f89c 100644 --- a/RNTester/js/TextInputExample.ios.js +++ b/RNTester/js/TextInputExample.ios.js @@ -348,10 +348,10 @@ class BlurOnSubmitExample extends React.Component<{}> { } type SelectionExampleState = { - selection: {| + selection: $ReadOnly<{| start: number, end?: number, - |}, + |}>, value: string, };