Skip to content

Commit e815fda

Browse files
j-piaseckifacebook-github-bot
authored andcommitted
Align TextInput event types with TypeScript (#48971)
Summary: Pull Request resolved: #48971 Changelog: [Internal] Mosltly align event types of TextInput components with TypeScript definitions. Reviewed By: mellyeliu, thatmichael85 Differential Revision: D68713180 fbshipit-source-id: d8e9c0458466ef492fecf516fd58bc5459b35e26
1 parent 21541b5 commit e815fda

File tree

5 files changed

+222
-212
lines changed

5 files changed

+222
-212
lines changed

packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ import * as React from 'react';
7676
* For an example, look at InputAccessoryViewExample.js in RNTester.
7777
*/
7878

79-
type Props = $ReadOnly<{
79+
export type InputAccessoryViewProps = $ReadOnly<{
8080
+children: React.Node,
8181
/**
8282
* An ID which is used to associate this `InputAccessoryView` to
@@ -87,7 +87,9 @@ type Props = $ReadOnly<{
8787
backgroundColor?: ?ColorValue,
8888
}>;
8989

90-
const InputAccessoryView: React.ComponentType<Props> = (props: Props) => {
90+
const InputAccessoryView: React.ComponentType<InputAccessoryViewProps> = (
91+
props: InputAccessoryViewProps,
92+
) => {
9193
const {width} = useWindowDimensions();
9294

9395
if (Platform.OS === 'ios') {

packages/react-native/Libraries/Components/TextInput/TextInput.flow.js

Lines changed: 56 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@ import * as React from 'react';
2525

2626
type ReactRefSetter<T> = {current: null | T, ...} | ((ref: null | T) => mixed);
2727

28-
export type ChangeEvent = SyntheticEvent<
29-
$ReadOnly<{
30-
eventCount: number,
31-
target: number,
32-
text: string,
33-
}>,
34-
>;
28+
export type TextInputChangeEventData = $ReadOnly<{
29+
eventCount: number,
30+
target: number,
31+
text: string,
32+
}>;
33+
34+
export type TextInputChangeEvent = SyntheticEvent<TextInputChangeEventData>;
3535

3636
export type TextInputEvent = SyntheticEvent<
3737
$ReadOnly<{
@@ -46,52 +46,56 @@ export type TextInputEvent = SyntheticEvent<
4646
}>,
4747
>;
4848

49-
export type ContentSizeChangeEvent = SyntheticEvent<
50-
$ReadOnly<{
51-
target: number,
52-
contentSize: $ReadOnly<{
53-
width: number,
54-
height: number,
55-
}>,
49+
export type TextInputContentSizeChangeEventData = $ReadOnly<{
50+
target: number,
51+
contentSize: $ReadOnly<{
52+
width: number,
53+
height: number,
5654
}>,
57-
>;
55+
}>;
5856

59-
type TargetEvent = SyntheticEvent<
60-
$ReadOnly<{
61-
target: number,
62-
}>,
63-
>;
57+
export type TextInputContentSizeChangeEvent =
58+
SyntheticEvent<TextInputContentSizeChangeEventData>;
59+
60+
export type TargetEvent = $ReadOnly<{
61+
target: number,
62+
}>;
63+
64+
export type TextInputFocusEventData = TargetEvent;
6465

65-
export type BlurEvent = TargetEvent;
66-
export type FocusEvent = TargetEvent;
66+
export type TextInputBlurEvent = SyntheticEvent<TextInputFocusEventData>;
67+
export type TextInputFocusEvent = SyntheticEvent<TextInputFocusEventData>;
6768

6869
type Selection = $ReadOnly<{
6970
start: number,
7071
end: number,
7172
}>;
7273

73-
export type SelectionChangeEvent = SyntheticEvent<
74-
$ReadOnly<{
75-
selection: Selection,
76-
target: number,
77-
}>,
78-
>;
74+
export type TextInputSelectionChangeEventData = $ReadOnly<{
75+
...TargetEvent,
76+
selection: Selection,
77+
}>;
7978

80-
export type KeyPressEvent = SyntheticEvent<
81-
$ReadOnly<{
82-
key: string,
83-
target?: ?number,
84-
eventCount?: ?number,
85-
}>,
86-
>;
79+
export type TextInputSelectionChangeEvent =
80+
SyntheticEvent<TextInputSelectionChangeEventData>;
8781

88-
export type EditingEvent = SyntheticEvent<
89-
$ReadOnly<{
90-
eventCount: number,
91-
text: string,
92-
target: number,
93-
}>,
94-
>;
82+
export type TextInputKeyPressEventData = $ReadOnly<{
83+
...TargetEvent,
84+
key: string,
85+
target?: ?number,
86+
eventCount: number,
87+
}>;
88+
89+
export type TextInputKeyPressEvent = SyntheticEvent<TextInputKeyPressEventData>;
90+
91+
export type TextInputEndEditingEventData = $ReadOnly<{
92+
...TargetEvent,
93+
eventCount: number,
94+
text: string,
95+
}>;
96+
97+
export type TextInputEditingEvent =
98+
SyntheticEvent<TextInputEndEditingEventData>;
9599

96100
type DataDetectorTypesType =
97101
| 'phoneNumber'
@@ -727,12 +731,12 @@ export type Props = $ReadOnly<{
727731
/**
728732
* Callback that is called when the text input is blurred.
729733
*/
730-
onBlur?: ?(e: BlurEvent) => mixed,
734+
onBlur?: ?(e: TextInputBlurEvent) => mixed,
731735

732736
/**
733737
* Callback that is called when the text input's text changes.
734738
*/
735-
onChange?: ?(e: ChangeEvent) => mixed,
739+
onChange?: ?(e: TextInputChangeEvent) => mixed,
736740

737741
/**
738742
* DANGER: this API is not stable and will change in the future.
@@ -742,7 +746,7 @@ export type Props = $ReadOnly<{
742746
*
743747
* @platform ios
744748
*/
745-
unstable_onChangeSync?: ?(e: ChangeEvent) => mixed,
749+
unstable_onChangeSync?: ?(e: TextInputChangeEvent) => mixed,
746750

747751
/**
748752
* Callback that is called when the text input's text changes.
@@ -768,17 +772,17 @@ export type Props = $ReadOnly<{
768772
*
769773
* Only called for multiline text inputs.
770774
*/
771-
onContentSizeChange?: ?(e: ContentSizeChangeEvent) => mixed,
775+
onContentSizeChange?: ?(e: TextInputContentSizeChangeEvent) => mixed,
772776

773777
/**
774778
* Callback that is called when text input ends.
775779
*/
776-
onEndEditing?: ?(e: EditingEvent) => mixed,
780+
onEndEditing?: ?(e: TextInputEditingEvent) => mixed,
777781

778782
/**
779783
* Callback that is called when the text input is focused.
780784
*/
781-
onFocus?: ?(e: FocusEvent) => mixed,
785+
onFocus?: ?(e: TextInputFocusEvent) => mixed,
782786

783787
/**
784788
* Callback that is called when a key is pressed.
@@ -787,7 +791,7 @@ export type Props = $ReadOnly<{
787791
* the typed-in character otherwise including `' '` for space.
788792
* Fires before `onChange` callbacks.
789793
*/
790-
onKeyPress?: ?(e: KeyPressEvent) => mixed,
794+
onKeyPress?: ?(e: TextInputKeyPressEvent) => mixed,
791795

792796
/**
793797
* DANGER: this API is not stable and will change in the future.
@@ -802,7 +806,7 @@ export type Props = $ReadOnly<{
802806
*
803807
* @platform ios
804808
*/
805-
unstable_onKeyPressSync?: ?(e: KeyPressEvent) => mixed,
809+
unstable_onKeyPressSync?: ?(e: TextInputKeyPressEvent) => mixed,
806810

807811
/**
808812
* Called when a single tap gesture is detected.
@@ -824,13 +828,13 @@ export type Props = $ReadOnly<{
824828
* This will be called with
825829
* `{ nativeEvent: { selection: { start, end } } }`.
826830
*/
827-
onSelectionChange?: ?(e: SelectionChangeEvent) => mixed,
831+
onSelectionChange?: ?(e: TextInputSelectionChangeEvent) => mixed,
828832

829833
/**
830834
* Callback that is called when the text input's submit button is pressed.
831835
* Invalid if `multiline={true}` is specified.
832836
*/
833-
onSubmitEditing?: ?(e: EditingEvent) => mixed,
837+
onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed,
834838

835839
/**
836840
* Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.

0 commit comments

Comments
 (0)