Skip to content

Add TextInput to buildTypes and align Flow with TS types #49720

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
coado wants to merge 1 commit into from
Closed

Add TextInput to buildTypes and align Flow with TS types #49720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 36 additions & 3 deletions packages/react-native/Libraries/Components/TextInput/TextInput.flow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,12 +88,30 @@ export type TextInputKeyPressEventData = $ReadOnly<{
export type TextInputKeyPressEvent =
NativeSyntheticEvent<TextInputKeyPressEventData>;

/**
* @see TextInputProps.onEndEditing
*/
export type TextInputEndEditingEventData = $ReadOnly<{
...TargetEvent,
eventCount: number,
text: string,
}>;

export type TextInputEndEditingEvent =
NativeSyntheticEvent<TextInputEndEditingEventData>;

/**
* @see TextInputProps.onSubmitEditing
*/
export type TextInputSubmitEditingEventData = $ReadOnly<{
...TargetEvent,
eventCount: number,
text: string,
}>;

export type TextInputSubmitEditingEvent =
NativeSyntheticEvent<TextInputSubmitEditingEventData>;

export type TextInputEditingEvent =
NativeSyntheticEvent<TextInputEndEditingEventData>;

Expand Down Expand Up @@ -389,6 +407,21 @@ export type TextInputAndroidProps = $ReadOnly<{
*/
disableFullscreenUI?: ?boolean,

/**
* Determines whether the individual fields in your app should be included in a
* view structure for autofill purposes on Android API Level 26+. Defaults to auto.
* To disable auto complete, use `off`.
*
* *Android Only*
*
* The following values work on Android only:
*
* - `auto` - let Android decide
* - `no` - not important for autofill
* - `noExcludeDescendants` - this view and its children aren't important for autofill
* - `yes` - is important for autofill
* - `yesExcludeDescendants` - this view is important for autofill but its children aren't
*/
importantForAutofill?: ?(
| 'auto'
| 'no'
Expand Down Expand Up @@ -783,7 +816,7 @@ export type TextInputProps = $ReadOnly<{
/**
* Callback that is called when text input ends.
*/
onEndEditing?: ?(e: TextInputEditingEvent) => mixed,
onEndEditing?: ?(e: TextInputEndEditingEvent) => mixed,

/**
* Callback that is called when the text input is focused.
Expand Down Expand Up @@ -840,7 +873,7 @@ export type TextInputProps = $ReadOnly<{
* Callback that is called when the text input's submit button is pressed.
* Invalid if `multiline={true}` is specified.
*/
onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed,
onSubmitEditing?: ?(e: TextInputSubmitEditingEvent) => mixed,

/**
* Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
Expand Down Expand Up @@ -1109,7 +1142,7 @@ export interface TextInputInstance extends HostInstance {
*
*/
type InternalTextInput = component(
ref: React.RefSetter<TextInputInstance>,
ref?: React.RefSetter<TextInputInstance>,
...TextInputProps
);

Expand Down
116 changes: 100 additions & 16 deletions packages/react-native/Libraries/Components/TextInput/TextInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,9 @@ if (Platform.OS === 'android') {
require('./RCTMultilineTextInputNativeComponent').Commands;
}

/**
* @see TextInputProps.onChange
*/
export type TextInputChangeEventData = $ReadOnly<{
eventCount: number,
target: number,
Expand All @@ -80,6 +83,9 @@ export type TextInputEvent = NativeSyntheticEvent<
}>,
>;

/**
* @see TextInputProps.onContentSizeChange
*/
export type TextInputContentSizeChangeEventData = $ReadOnly<{
target: number,
contentSize: $ReadOnly<{
Expand All @@ -95,16 +101,29 @@ export type TargetEvent = $ReadOnly<{
target: number,
}>;

/**
* @see TextInputProps.onFocus
*/
export type TextInputFocusEventData = TargetEvent;

export type TextInputBlurEvent = NativeSyntheticEvent<TextInputFocusEventData>;
export type TextInputFocusEvent = NativeSyntheticEvent<TextInputFocusEventData>;

/**
* @see TextInputProps.onScroll
*/
export type TextInputScrollEventData = {
contentOffset: {x: number, y: number},
};

type Selection = $ReadOnly<{
start: number,
end: number,
}>;

/**
* @see TextInputProps.onSelectionChange
*/
export type TextInputSelectionChangeEventData = $ReadOnly<{
...TargetEvent,
selection: Selection,
Expand All @@ -113,7 +132,10 @@ export type TextInputSelectionChangeEventData = $ReadOnly<{
export type TextInputSelectionChangeEvent =
NativeSyntheticEvent<TextInputSelectionChangeEventData>;

type TextInputKeyPressEventData = $ReadOnly<{
/**
* @see TextInputProps.onKeyPress
*/
export type TextInputKeyPressEventData = $ReadOnly<{
...TargetEvent,
key: string,
target?: ?number,
Expand All @@ -123,12 +145,30 @@ type TextInputKeyPressEventData = $ReadOnly<{
export type TextInputKeyPressEvent =
NativeSyntheticEvent<TextInputKeyPressEventData>;

/**
* @see TextInputProps.onEndEditing
*/
export type TextInputEndEditingEventData = $ReadOnly<{
...TargetEvent,
eventCount: number,
text: string,
}>;

export type TextInputEndEditingEvent =
NativeSyntheticEvent<TextInputEndEditingEventData>;

/**
* @see TextInputProps.onSubmitEditing
*/
export type TextInputSubmitEditingEventData = $ReadOnly<{
...TargetEvent,
eventCount: number,
text: string,
}>;

export type TextInputSubmitEditingEvent =
NativeSyntheticEvent<TextInputSubmitEditingEventData>;

export type TextInputEditingEvent =
NativeSyntheticEvent<TextInputEndEditingEventData>;

Expand Down Expand Up @@ -419,6 +459,21 @@ export type TextInputAndroidProps = $ReadOnly<{
*/
disableFullscreenUI?: ?boolean,

/**
* Determines whether the individual fields in your app should be included in a
* view structure for autofill purposes on Android API Level 26+. Defaults to auto.
* To disable auto complete, use `off`.
*
* *Android Only*
*
* The following values work on Android only:
*
* - `auto` - let Android decide
* - `no` - not important for autofill
* - `noExcludeDescendants` - this view and its children aren't important for autofill
* - `yes` - is important for autofill
* - `yesExcludeDescendants` - this view is important for autofill but its children aren't
*/
importantForAutofill?: ?(
| 'auto'
| 'no'
Expand Down Expand Up @@ -486,11 +541,7 @@ export type TextInputAndroidProps = $ReadOnly<{
underlineColorAndroid?: ?ColorValue,
}>;

export type TextInputProps = $ReadOnly<{
...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
...TextInputIOSProps,
...TextInputAndroidProps,

type TextInputBaseProps = $ReadOnly<{
/**
* Can tell `TextInput` to automatically capitalize certain characters.
*
Expand Down Expand Up @@ -792,7 +843,7 @@ export type TextInputProps = $ReadOnly<{
/**
* Callback that is called when text input ends.
*/
onEndEditing?: ?(e: TextInputEditingEvent) => mixed,
onEndEditing?: ?(e: TextInputEndEditingEvent) => mixed,

/**
* Callback that is called when the text input is focused.
Expand Down Expand Up @@ -834,7 +885,7 @@ export type TextInputProps = $ReadOnly<{
* Callback that is called when the text input's submit button is pressed.
* Invalid if `multiline={true}` is specified.
*/
onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed,
onSubmitEditing?: ?(e: TextInputSubmitEditingEvent) => mixed,

/**
* Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
Expand Down Expand Up @@ -915,7 +966,9 @@ export type TextInputProps = $ReadOnly<{
selectionColor?: ?ColorValue,

/**
* The text selection handle color.
* When provided it will set the color of the selection handles when highlighting text.
* Unlike the behavior of `selectionColor` the handle color will be set independently
* from the color of the text selection box.
* @platform android
*/
selectionHandleColor?: ?ColorValue,
Expand Down Expand Up @@ -990,6 +1043,42 @@ export type TextInputProps = $ReadOnly<{
value?: ?Stringish,
}>;

export type TextInputProps = $ReadOnly<{
...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
...TextInputIOSProps,
...TextInputAndroidProps,
...TextInputBaseProps,
}>;

type TextInputStateType = $ReadOnly<{
/**
* @deprecated Use currentlyFocusedInput
* Returns the ID of the currently focused text field, if one exists
* If no text field is focused it returns null
*/
currentlyFocusedField: () => ?number,

/**
* Returns the ref of the currently focused text field, if one exists
* If no text field is focused it returns null
*/
currentlyFocusedInput: () => ?HostInstance,

/**
* @param textField ref of the text field to focus
* Focuses the specified text field
* noop if the text field was already focused
*/
focusTextInput: (textField: ?HostInstance) => void,

/**
* @param textField ref of the text field to focus
* Unfocuses the specified text field
* noop if it wasn't focused
*/
blurTextInput: (textField: ?HostInstance) => void,
}>;

type ViewCommands = $NonMaybeType<
| typeof AndroidTextInputCommands
| typeof RCTMultilineTextInputNativeCommands
Expand Down Expand Up @@ -1806,7 +1895,7 @@ const autoCompleteWebToTextContentTypeMap = {
};

const ExportedForwardRef: component(
ref: React.RefSetter<TextInputInstance>,
ref?: React.RefSetter<TextInputInstance>,
...props: React.ElementConfig<typeof InternalTextInput>
) = React.forwardRef(function TextInput(
{
Expand Down Expand Up @@ -1878,12 +1967,7 @@ ExportedForwardRef.State = {
};

export type TextInputComponentStatics = $ReadOnly<{
State: $ReadOnly<{
currentlyFocusedInput: typeof TextInputState.currentlyFocusedInput,
currentlyFocusedField: typeof TextInputState.currentlyFocusedField,
focusTextInput: typeof TextInputState.focusTextInput,
blurTextInput: typeof TextInputState.blurTextInput,
}>,
State: TextInputStateType,
}>;

const styles = StyleSheet.create({
Expand Down
Loading