Skip to content

Commit c3ea606

Browse files
j-piaseckifacebook-github-bot
j-piasecki
authored and
facebook-github-bot
committed
Align TextInput types with TypeScript (facebook#48972)
Summary: Pull Request resolved: facebook#48972 Changelog: [Internal] Align TextInput types with TypeScript definitions. Reviewed By: huntie Differential Revision: D68713179 fbshipit-source-id: bb36d9333e45f2a30db91a17b8698b34cd792eb6
1 parent e815fda commit c3ea606

File tree

4 files changed

+154
-139
lines changed

4 files changed

+154
-139
lines changed

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

Lines changed: 42 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -109,26 +109,31 @@ type DataDetectorTypesType =
109109
| 'all';
110110

111111
export type KeyboardType =
112-
// Cross Platform
113112
| 'default'
114113
| 'email-address'
115114
| 'numeric'
116115
| 'phone-pad'
117116
| 'number-pad'
118117
| 'decimal-pad'
119-
| 'url'
120-
// iOS-only
118+
| 'url';
119+
120+
export type KeyboardTypeIOS =
121121
| 'ascii-capable'
122122
| 'numbers-and-punctuation'
123123
| 'name-phone-pad'
124124
| 'twitter'
125125
| 'web-search'
126126
// iOS 10+ only
127-
| 'ascii-capable-number-pad'
128-
// Android-only
129-
| 'visible-password';
127+
| 'ascii-capable-number-pad';
128+
129+
export type KeyboardTypeAndroid = 'visible-password';
130+
131+
export type KeyboardTypeOptions =
132+
| KeyboardType
133+
| KeyboardTypeIOS
134+
| KeyboardTypeAndroid;
130135

131-
export type InputMode =
136+
export type InputModeOptions =
132137
| 'none'
133138
| 'text'
134139
| 'decimal'
@@ -138,24 +143,23 @@ export type InputMode =
138143
| 'email'
139144
| 'url';
140145

141-
export type ReturnKeyType =
142-
// Cross Platform
143-
| 'done'
144-
| 'go'
145-
| 'next'
146-
| 'search'
147-
| 'send'
148-
// Android-only
149-
| 'none'
150-
| 'previous'
151-
// iOS-only
146+
export type ReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send';
147+
148+
export type ReturnKeyTypeIOS =
152149
| 'default'
153150
| 'emergency-call'
154151
| 'google'
155152
| 'join'
156153
| 'route'
157154
| 'yahoo';
158155

156+
export type ReturnKeyTypeAndroid = 'none' | 'previous';
157+
158+
export type ReturnKeyTypeOptions =
159+
| ReturnKeyType
160+
| ReturnKeyTypeIOS
161+
| ReturnKeyTypeAndroid;
162+
159163
export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
160164

161165
export type AutoCapitalize = 'none' | 'sentences' | 'words' | 'characters';
@@ -208,18 +212,20 @@ export type TextContentType =
208212
| 'flightNumber'
209213
| 'shipmentTrackingNumber';
210214

211-
export type enterKeyHintType =
212-
| 'enter'
213-
| 'done'
214-
| 'go'
215-
| 'next'
216-
| 'previous'
217-
| 'search'
218-
| 'send';
215+
export type EnterKeyHintTypeAndroid = 'previous';
216+
217+
export type EnterKeyHintTypeIOS = 'enter';
218+
219+
export type EnterKeyHintType = 'done' | 'go' | 'next' | 'search' | 'send';
220+
221+
export type EnterKeyHintTypeOptions =
222+
| EnterKeyHintType
223+
| EnterKeyHintTypeAndroid
224+
| EnterKeyHintTypeIOS;
219225

220226
type PasswordRules = string;
221227

222-
type IOSProps = $ReadOnly<{
228+
export type TextInputIOSProps = $ReadOnly<{
223229
/**
224230
* If true, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is false.
225231
* @platform ios
@@ -356,7 +362,7 @@ type IOSProps = $ReadOnly<{
356362
smartInsertDelete?: ?boolean,
357363
}>;
358364

359-
type AndroidProps = $ReadOnly<{
365+
export type TextInputAndroidProps = $ReadOnly<{
360366
/**
361367
* When provided it will set the color of the cursor (or "caret") in the component.
362368
* Unlike the behavior of `selectionColor` the cursor color will be set independently
@@ -450,10 +456,10 @@ type AndroidProps = $ReadOnly<{
450456
underlineColorAndroid?: ?ColorValue,
451457
}>;
452458

453-
export type Props = $ReadOnly<{
459+
export type TextInputProps = $ReadOnly<{
454460
...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
455-
...IOSProps,
456-
...AndroidProps,
461+
...TextInputIOSProps,
462+
...TextInputAndroidProps,
457463

458464
/**
459465
* Can tell `TextInput` to automatically capitalize certain characters.
@@ -656,7 +662,7 @@ export type Props = $ReadOnly<{
656662
* - `search`
657663
* - `send`
658664
*/
659-
enterKeyHint?: ?enterKeyHintType,
665+
enterKeyHint?: ?EnterKeyHintTypeOptions,
660666

661667
/**
662668
* `inputMode` works like the `inputmode` attribute in HTML, it determines which
@@ -673,7 +679,7 @@ export type Props = $ReadOnly<{
673679
* - `email`
674680
* - `url`
675681
*/
676-
inputMode?: ?InputMode,
682+
inputMode?: ?InputModeOptions,
677683

678684
/**
679685
* Determines which keyboard to open, e.g.`numeric`.
@@ -705,7 +711,7 @@ export type Props = $ReadOnly<{
705711
* - `visible-password`
706712
*
707713
*/
708-
keyboardType?: ?KeyboardType,
714+
keyboardType?: ?KeyboardTypeOptions,
709715

710716
/**
711717
* Specifies largest possible scale a font can reach when `allowFontScaling` is enabled.
@@ -892,7 +898,7 @@ export type Props = $ReadOnly<{
892898
* - `route`
893899
* - `yahoo`
894900
*/
895-
returnKeyType?: ?ReturnKeyType,
901+
returnKeyType?: ?ReturnKeyTypeOptions,
896902

897903
/**
898904
* If `true`, the text input obscures the text entered so that sensitive text
@@ -1104,7 +1110,7 @@ type ImperativeMethods = $ReadOnly<{
11041110
*/
11051111
type InternalTextInput = component(
11061112
ref: React.RefSetter<$ReadOnly<{...HostInstance, ...ImperativeMethods}>>,
1107-
...Props
1113+
...TextInputProps
11081114
);
11091115

11101116
export type TextInputComponentStatics = $ReadOnly<{

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

Lines changed: 44 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -150,26 +150,31 @@ type DataDetectorTypesType =
150150
| 'all';
151151

152152
export type KeyboardType =
153-
// Cross Platform
154153
| 'default'
155154
| 'email-address'
156155
| 'numeric'
157156
| 'phone-pad'
158157
| 'number-pad'
159158
| 'decimal-pad'
160-
| 'url'
161-
// iOS-only
159+
| 'url';
160+
161+
export type KeyboardTypeIOS =
162162
| 'ascii-capable'
163163
| 'numbers-and-punctuation'
164164
| 'name-phone-pad'
165165
| 'twitter'
166166
| 'web-search'
167167
// iOS 10+ only
168-
| 'ascii-capable-number-pad'
169-
// Android-only
170-
| 'visible-password';
168+
| 'ascii-capable-number-pad';
169+
170+
export type KeyboardTypeAndroid = 'visible-password';
171+
172+
export type KeyboardTypeOptions =
173+
| KeyboardType
174+
| KeyboardTypeIOS
175+
| KeyboardTypeAndroid;
171176

172-
export type InputMode =
177+
export type InputModeOptions =
173178
| 'none'
174179
| 'text'
175180
| 'decimal'
@@ -179,24 +184,23 @@ export type InputMode =
179184
| 'email'
180185
| 'url';
181186

182-
export type ReturnKeyType =
183-
// Cross Platform
184-
| 'done'
185-
| 'go'
186-
| 'next'
187-
| 'search'
188-
| 'send'
189-
// Android-only
190-
| 'none'
191-
| 'previous'
192-
// iOS-only
187+
export type ReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send';
188+
189+
export type ReturnKeyTypeIOS =
193190
| 'default'
194191
| 'emergency-call'
195192
| 'google'
196193
| 'join'
197194
| 'route'
198195
| 'yahoo';
199196

197+
export type ReturnKeyTypeAndroid = 'none' | 'previous';
198+
199+
export type ReturnKeyTypeOptions =
200+
| ReturnKeyType
201+
| ReturnKeyTypeIOS
202+
| ReturnKeyTypeAndroid;
203+
200204
export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
201205

202206
export type AutoCapitalize = 'none' | 'sentences' | 'words' | 'characters';
@@ -249,21 +253,20 @@ export type TextContentType =
249253
| 'flightNumber'
250254
| 'shipmentTrackingNumber';
251255

252-
export type enterKeyHintType =
253-
// Cross Platform
254-
| 'done'
255-
| 'go'
256-
| 'next'
257-
| 'search'
258-
| 'send'
259-
// Android-only
260-
| 'previous'
261-
// iOS-only
262-
| 'enter';
256+
export type EnterKeyHintTypeAndroid = 'previous';
257+
258+
export type EnterKeyHintTypeIOS = 'enter';
259+
260+
export type EnterKeyHintType = 'done' | 'go' | 'next' | 'search' | 'send';
261+
262+
export type EnterKeyHintTypeOptions =
263+
| EnterKeyHintType
264+
| EnterKeyHintTypeAndroid
265+
| EnterKeyHintTypeIOS;
263266

264267
type PasswordRules = string;
265268

266-
type IOSProps = $ReadOnly<{
269+
export type TextInputIOSProps = $ReadOnly<{
267270
/**
268271
* If true, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is false.
269272
* @platform ios
@@ -403,7 +406,7 @@ type IOSProps = $ReadOnly<{
403406
smartInsertDelete?: ?boolean,
404407
}>;
405408

406-
type AndroidProps = $ReadOnly<{
409+
export type TextInputAndroidProps = $ReadOnly<{
407410
/**
408411
* When provided it will set the color of the cursor (or "caret") in the component.
409412
* Unlike the behavior of `selectionColor` the cursor color will be set independently
@@ -489,10 +492,10 @@ type AndroidProps = $ReadOnly<{
489492
underlineColorAndroid?: ?ColorValue,
490493
}>;
491494

492-
export type Props = $ReadOnly<{
495+
export type TextInputProps = $ReadOnly<{
493496
...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
494-
...IOSProps,
495-
...AndroidProps,
497+
...TextInputIOSProps,
498+
...TextInputAndroidProps,
496499

497500
/**
498501
* Can tell `TextInput` to automatically capitalize certain characters.
@@ -695,7 +698,7 @@ export type Props = $ReadOnly<{
695698
* - `search`
696699
* - `send`
697700
*/
698-
enterKeyHint?: ?enterKeyHintType,
701+
enterKeyHint?: ?EnterKeyHintTypeOptions,
699702

700703
/**
701704
* `inputMode` works like the `inputmode` attribute in HTML, it determines which
@@ -712,7 +715,7 @@ export type Props = $ReadOnly<{
712715
* - `email`
713716
* - `url`
714717
*/
715-
inputMode?: ?InputMode,
718+
inputMode?: ?InputModeOptions,
716719

717720
/**
718721
* Determines which keyboard to open, e.g.`numeric`.
@@ -744,7 +747,7 @@ export type Props = $ReadOnly<{
744747
* - `visible-password`
745748
*
746749
*/
747-
keyboardType?: ?KeyboardType,
750+
keyboardType?: ?KeyboardTypeOptions,
748751

749752
/**
750753
* Specifies largest possible scale a font can reach when `allowFontScaling` is enabled.
@@ -895,7 +898,7 @@ export type Props = $ReadOnly<{
895898
* - `route`
896899
* - `yahoo`
897900
*/
898-
returnKeyType?: ?ReturnKeyType,
901+
returnKeyType?: ?ReturnKeyTypeOptions,
899902

900903
/**
901904
* If `true`, the text input obscures the text entered so that sensitive text
@@ -1019,7 +1022,7 @@ function useTextInputStateSynchronization_STATE({
10191022
text,
10201023
viewCommands,
10211024
}: {
1022-
props: Props,
1025+
props: TextInputProps,
10231026
mostRecentEventCount: number,
10241027
selection: ?Selection,
10251028
inputRef: React.RefObject<null | HostInstance>,
@@ -1100,7 +1103,7 @@ function useTextInputStateSynchronization_REFS({
11001103
text,
11011104
viewCommands,
11021105
}: {
1103-
props: Props,
1106+
props: TextInputProps,
11041107
mostRecentEventCount: number,
11051108
selection: ?Selection,
11061109
inputRef: React.RefObject<null | HostInstance>,
@@ -1286,7 +1289,7 @@ function useTextInputStateSynchronization_REFS({
12861289
* or control this param programmatically with native code.
12871290
*
12881291
*/
1289-
function InternalTextInput(props: Props): React.Node {
1292+
function InternalTextInput(props: TextInputProps): React.Node {
12901293
const {
12911294
'aria-busy': ariaBusy,
12921295
'aria-checked': ariaChecked,

0 commit comments

Comments
 (0)