Skip to content

Commit 569c01e

Browse files
coadofacebook-github-bot
coado
authored and
facebook-github-bot
committed
Add Text to buildTypes and align Flow with TS (facebook#49774)
Summary: Pull Request resolved: facebook#49774 Changelog: [Internal] - Added Text to buildTypes and aligned Flow with TS Reviewed By: huntie Differential Revision: D70324061 fbshipit-source-id: 2a032317acdc0a119f5d33da86a40461f8c60ab1
1 parent 2acb407 commit 569c01e

File tree

6 files changed

+165
-112
lines changed

6 files changed

+165
-112
lines changed

‎packages/react-native/Libraries/Text/Text.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ export interface TextProps
178178

179179
/**
180180
* This function is called on long press.
181-
* e.g., `onLongPress={this.increaseSize}>``
181+
* e.g., `onLongPress={this.increaseSize}>`
182182
*/
183183
onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
184184

‎packages/react-native/Libraries/Text/Text.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import {NativeText, NativeVirtualText} from './TextNativeComponent';
2424
import * as React from 'react';
2525
import {useContext, useMemo, useState} from 'react';
2626

27+
export type {TextProps} from './TextProps';
28+
2729
type TextForwardRef = React.ElementRef<
2830
typeof NativeText | typeof NativeVirtualText,
2931
>;
@@ -34,7 +36,7 @@ type TextForwardRef = React.ElementRef<
3436
* @see https://reactnative.dev/docs/text
3537
*/
3638
const Text: component(
37-
ref: React.RefSetter<TextForwardRef>,
39+
ref?: React.RefSetter<TextForwardRef>,
3840
...props: TextProps
3941
) = React.forwardRef(
4042
(

‎packages/react-native/Libraries/Text/TextProps.js‎

Lines changed: 123 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,90 @@ type PointerEventProps = $ReadOnly<{
3939
onPointerMove?: (event: PointerEvent) => void,
4040
}>;
4141

42-
/**
43-
* @see https://reactnative.dev/docs/text#reference
44-
*/
45-
export type TextProps = $ReadOnly<{
46-
...PointerEventProps,
42+
export type TextPropsIOS = {
43+
/**
44+
* Specifies whether font should be scaled down automatically to fit given style constraints.
45+
*
46+
* See https://reactnative.dev/docs/text#adjustsfontsizetofit
47+
*/
48+
adjustsFontSizeToFit?: ?boolean,
49+
50+
/**
51+
* The Dynamic Type scale ramp to apply to this element on iOS.
52+
*/
53+
dynamicTypeRamp?: ?(
54+
| 'caption2'
55+
| 'caption1'
56+
| 'footnote'
57+
| 'subheadline'
58+
| 'callout'
59+
| 'body'
60+
| 'headline'
61+
| 'title3'
62+
| 'title2'
63+
| 'title1'
64+
| 'largeTitle'
65+
),
66+
67+
/**
68+
* When `true`, no visual change is made when text is pressed down. By
69+
* default, a gray oval highlights the text on press down.
70+
*
71+
* See https://reactnative.dev/docs/text#supperhighlighting
72+
*/
73+
suppressHighlighting?: ?boolean,
74+
75+
/**
76+
* Set line break strategy on iOS.
77+
*
78+
* See https://reactnative.dev/docs/text.html#linebreakstrategyios
79+
*/
80+
lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
81+
};
82+
83+
export type TextPropsAndroid = {
84+
/**
85+
* Specifies the disabled state of the text view for testing purposes.
86+
*
87+
* See https://reactnative.dev/docs/text#disabled
88+
*/
89+
disabled?: ?boolean,
4790

91+
/**
92+
* The highlight color of the text.
93+
*
94+
* See https://reactnative.dev/docs/text#selectioncolor
95+
*/
96+
selectionColor?: ?ColorValue,
97+
98+
/**
99+
* Determines the types of data converted to clickable URLs in the text element.
100+
* By default no data types are detected.
101+
*/
102+
dataDetectorType?: ?('phoneNumber' | 'link' | 'email' | 'none' | 'all'),
103+
104+
/**
105+
* Set text break strategy on Android API Level 23+
106+
* default is `highQuality`.
107+
*
108+
* See https://reactnative.dev/docs/text#textbreakstrategy
109+
*/
110+
textBreakStrategy?: ?('balanced' | 'highQuality' | 'simple'),
111+
112+
/**
113+
* iOS Only
114+
*/
115+
adjustsFontSizeToFit?: ?boolean,
116+
117+
/**
118+
* Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
119+
*
120+
* See https://reactnative.dev/docs/text#minimumfontscale
121+
*/
122+
minimumFontScale?: ?number,
123+
};
124+
125+
type TextBaseProps = $ReadOnly<{
48126
/**
49127
* Indicates whether the view is an accessibility element.
50128
*
@@ -60,15 +138,9 @@ export type TextProps = $ReadOnly<{
60138
accessibilityState?: ?AccessibilityState,
61139
'aria-label'?: ?string,
62140

63-
/**
64-
* Whether font should be scaled down automatically.
65-
*
66-
* See https://reactnative.dev/docs/text#adjustsfontsizetofit
67-
*/
68-
adjustsFontSizeToFit?: ?boolean,
69-
70141
/**
71142
* Whether fonts should scale to respect Text Size accessibility settings.
143+
* The default is `true`.
72144
*
73145
* See https://reactnative.dev/docs/text#allowfontscaling
74146
*/
@@ -103,12 +175,28 @@ export type TextProps = $ReadOnly<{
103175
* When `numberOfLines` is set, this prop defines how text will be
104176
* truncated.
105177
*
178+
* This can be one of the following values:
179+
*
180+
* - `head` - The line is displayed so that the end fits in the container and the missing text
181+
* at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
182+
* - `middle` - The line is displayed so that the beginning and end fit in the container and the
183+
* missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
184+
* - `tail` - The line is displayed so that the beginning fits in the container and the
185+
* missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
186+
* - `clip` - Lines are not drawn past the edge of the text container.
187+
*
188+
* The default is `tail`.
189+
*
190+
* `numberOfLines` must be set in conjunction with this prop.
191+
*
192+
* > `clip` is working only for iOS
193+
*
106194
* See https://reactnative.dev/docs/text#ellipsizemode
107195
*/
108196
ellipsizeMode?: ?('clip' | 'head' | 'middle' | 'tail'),
109197

110198
/**
111-
* Used to locate this view from native code.
199+
* Used to reference react managed views from native code.
112200
*
113201
* See https://reactnative.dev/docs/text#nativeid
114202
*/
@@ -131,7 +219,11 @@ export type TextProps = $ReadOnly<{
131219
nativeID?: ?string,
132220

133221
/**
134-
* Used to truncate the text with an ellipsis.
222+
* Used to truncate the text with an ellipsis after computing the text
223+
* layout, including line wrapping, such that the total number of lines
224+
* does not exceed this number.
225+
*
226+
* This prop is commonly used with `ellipsizeMode`.
135227
*
136228
* See https://reactnative.dev/docs/text#numberoflines
137229
*/
@@ -140,19 +232,23 @@ export type TextProps = $ReadOnly<{
140232
/**
141233
* Invoked on mount and layout changes.
142234
*
235+
* {nativeEvent: { layout: {x, y, width, height}}}.
236+
*
143237
* See https://reactnative.dev/docs/text#onlayout
144238
*/
145239
onLayout?: ?(event: LayoutChangeEvent) => mixed,
146240

147241
/**
148242
* This function is called on long press.
243+
* e.g., `onLongPress={this.increaseSize}>`
149244
*
150245
* See https://reactnative.dev/docs/text#onlongpress
151246
*/
152247
onLongPress?: ?(event: GestureResponderEvent) => mixed,
153248

154249
/**
155250
* This function is called on press.
251+
* Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting).
156252
*
157253
* See https://reactnative.dev/docs/text#onpress
158254
*/
@@ -187,6 +283,10 @@ export type TextProps = $ReadOnly<{
187283
* See https://reactnative.dev/docs/text#selectable
188284
*/
189285
selectable?: ?boolean,
286+
287+
/**
288+
* @see https://reactnative.dev/docs/text#style
289+
*/
190290
style?: ?TextStyleProp,
191291

192292
/**
@@ -195,74 +295,14 @@ export type TextProps = $ReadOnly<{
195295
* See https://reactnative.dev/docs/text#testid
196296
*/
197297
testID?: ?string,
298+
}>;
198299

199-
/**
200-
* Android Only
201-
*/
202-
203-
/**
204-
* Specifies the disabled state of the text view for testing purposes.
205-
*
206-
* See https://reactnative.dev/docs/text#disabled
207-
*/
208-
disabled?: ?boolean,
209-
210-
/**
211-
* The highlight color of the text.
212-
*
213-
* See https://reactnative.dev/docs/text#selectioncolor
214-
*/
215-
selectionColor?: ?ColorValue,
216-
217-
dataDetectorType?: ?('phoneNumber' | 'link' | 'email' | 'none' | 'all'),
218-
219-
/**
220-
* Set text break strategy on Android.
221-
*
222-
* See https://reactnative.dev/docs/text#textbreakstrategy
223-
*/
224-
textBreakStrategy?: ?('balanced' | 'highQuality' | 'simple'),
225-
226-
/**
227-
* iOS Only
228-
*/
229-
adjustsFontSizeToFit?: ?boolean,
230-
231-
/**
232-
* The Dynamic Type scale ramp to apply to this element on iOS.
233-
*/
234-
dynamicTypeRamp?: ?(
235-
| 'caption2'
236-
| 'caption1'
237-
| 'footnote'
238-
| 'subheadline'
239-
| 'callout'
240-
| 'body'
241-
| 'headline'
242-
| 'title3'
243-
| 'title2'
244-
| 'title1'
245-
| 'largeTitle'
246-
),
247-
248-
/**
249-
* Smallest possible scale a font can reach.
250-
*
251-
* See https://reactnative.dev/docs/text#minimumfontscale
252-
*/
253-
minimumFontScale?: ?number,
254-
255-
/**
256-
* When `true`, no visual change is made when text is pressed down.
257-
*
258-
* See https://reactnative.dev/docs/text#supperhighlighting
259-
*/
260-
suppressHighlighting?: ?boolean,
261-
262-
/**
263-
* Set line break strategy on iOS.
264-
*
265-
* See https://reactnative.dev/docs/text.html#linebreakstrategyios
266-
*/
267-
lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
300+
/**
301+
* @see https://reactnative.dev/docs/text#reference
302+
*/
303+
export type TextProps = $ReadOnly<{
304+
...PointerEventProps,
305+
...TextPropsIOS,
306+
...TextPropsAndroid,
307+
...TextBaseProps,
268308
}>;

‎packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap‎

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7922,11 +7922,12 @@ exports[`public API should not change unintentionally Libraries/StyleSheet/split
79227922
`;
79237923

79247924
exports[`public API should not change unintentionally Libraries/Text/Text.js 1`] = `
7925-
"type TextForwardRef = React.ElementRef<
7925+
"export type { TextProps } from \\"./TextProps\\";
7926+
type TextForwardRef = React.ElementRef<
79267927
typeof NativeText | typeof NativeVirtualText,
79277928
>;
79287929
declare const Text: component(
7929-
ref: React.RefSetter<TextForwardRef>,
7930+
ref?: React.RefSetter<TextForwardRef>,
79307931
...props: TextProps
79317932
);
79327933
declare export default typeof Text;
@@ -7965,8 +7966,33 @@ type PointerEventProps = $ReadOnly<{
79657966
onPointerLeave?: (event: PointerEvent) => void,
79667967
onPointerMove?: (event: PointerEvent) => void,
79677968
}>;
7968-
export type TextProps = $ReadOnly<{
7969-
...PointerEventProps,
7969+
export type TextPropsIOS = {
7970+
adjustsFontSizeToFit?: ?boolean,
7971+
dynamicTypeRamp?: ?(
7972+
| \\"caption2\\"
7973+
| \\"caption1\\"
7974+
| \\"footnote\\"
7975+
| \\"subheadline\\"
7976+
| \\"callout\\"
7977+
| \\"body\\"
7978+
| \\"headline\\"
7979+
| \\"title3\\"
7980+
| \\"title2\\"
7981+
| \\"title1\\"
7982+
| \\"largeTitle\\"
7983+
),
7984+
suppressHighlighting?: ?boolean,
7985+
lineBreakStrategyIOS?: ?(\\"none\\" | \\"standard\\" | \\"hangul-word\\" | \\"push-out\\"),
7986+
};
7987+
export type TextPropsAndroid = {
7988+
disabled?: ?boolean,
7989+
selectionColor?: ?ColorValue,
7990+
dataDetectorType?: ?(\\"phoneNumber\\" | \\"link\\" | \\"email\\" | \\"none\\" | \\"all\\"),
7991+
textBreakStrategy?: ?(\\"balanced\\" | \\"highQuality\\" | \\"simple\\"),
7992+
adjustsFontSizeToFit?: ?boolean,
7993+
minimumFontScale?: ?number,
7994+
};
7995+
type TextBaseProps = $ReadOnly<{
79707996
accessible?: ?boolean,
79717997
accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
79727998
onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
@@ -7976,7 +8002,6 @@ export type TextProps = $ReadOnly<{
79768002
accessibilityRole?: ?AccessibilityRole,
79778003
accessibilityState?: ?AccessibilityState,
79788004
\\"aria-label\\"?: ?string,
7979-
adjustsFontSizeToFit?: ?boolean,
79808005
allowFontScaling?: ?boolean,
79818006
android_hyphenationFrequency?: ?(\\"normal\\" | \\"none\\" | \\"full\\"),
79828007
\\"aria-busy\\"?: ?boolean,
@@ -8009,27 +8034,12 @@ export type TextProps = $ReadOnly<{
80098034
selectable?: ?boolean,
80108035
style?: ?TextStyleProp,
80118036
testID?: ?string,
8012-
disabled?: ?boolean,
8013-
selectionColor?: ?ColorValue,
8014-
dataDetectorType?: ?(\\"phoneNumber\\" | \\"link\\" | \\"email\\" | \\"none\\" | \\"all\\"),
8015-
textBreakStrategy?: ?(\\"balanced\\" | \\"highQuality\\" | \\"simple\\"),
8016-
adjustsFontSizeToFit?: ?boolean,
8017-
dynamicTypeRamp?: ?(
8018-
| \\"caption2\\"
8019-
| \\"caption1\\"
8020-
| \\"footnote\\"
8021-
| \\"subheadline\\"
8022-
| \\"callout\\"
8023-
| \\"body\\"
8024-
| \\"headline\\"
8025-
| \\"title3\\"
8026-
| \\"title2\\"
8027-
| \\"title1\\"
8028-
| \\"largeTitle\\"
8029-
),
8030-
minimumFontScale?: ?number,
8031-
suppressHighlighting?: ?boolean,
8032-
lineBreakStrategyIOS?: ?(\\"none\\" | \\"standard\\" | \\"hangul-word\\" | \\"push-out\\"),
8037+
}>;
8038+
export type TextProps = $ReadOnly<{
8039+
...PointerEventProps,
8040+
...TextPropsIOS,
8041+
...TextPropsAndroid,
8042+
...TextBaseProps,
80338043
}>;
80348044
"
80358045
`;

0 commit comments

Comments
 (0)