this repo has no description
[Web] Fix clipped text when using `numberOfLines={1}` (#10105)
authored by
Samuel Newman
and committed by
GitHub
854ae60e
cc4a436e
+33
-11
+33
-11
src/components/Typography.tsx
+33
-11
src/components/Typography.tsx
···
1
1
import {UITextView} from 'react-native-uitextview'
2
2
3
3
import {logger} from '#/logger'
4
-
import {atoms, useAlf, useTheme, web} from '#/alf'
4
+
import {atoms as a, type TextStyleProp, useAlf, useTheme, web} from '#/alf'
5
5
import {
6
6
childHasEmoji,
7
7
normalizeTextStyles,
···
22
22
selectable,
23
23
title,
24
24
dataSet,
25
+
numberOfLines,
25
26
...rest
26
27
}: TextProps) {
27
28
const {fonts, flags} = useAlf()
28
29
const t = useTheme()
29
-
const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, style], {
30
-
fontScale: fonts.scaleMultiplier,
31
-
fontFamily: fonts.family,
32
-
flags,
33
-
})
30
+
const s = normalizeTextStyles(
31
+
[
32
+
a.text_sm,
33
+
t.atoms.text,
34
+
web(numberOfLines === 1 && numberOfLinesClippingFix),
35
+
style,
36
+
],
37
+
{
38
+
fontScale: fonts.scaleMultiplier,
39
+
fontFamily: fonts.family,
40
+
flags,
41
+
},
42
+
)
34
43
35
44
if (__DEV__) {
36
45
if (!emoji && childHasEmoji(children)) {
···
44
53
const shared = {
45
54
uiTextView: true,
46
55
selectable,
56
+
numberOfLines,
47
57
style: s,
48
58
dataSet: Object.assign({tooltip: title}, dataSet || {}),
49
59
...rest,
···
82
92
role: 'paragraph',
83
93
}) || {}
84
94
return (
85
-
<Text
86
-
{...attr}
87
-
{...rest}
88
-
style={[atoms.text_md, atoms.leading_relaxed, style]}
89
-
/>
95
+
<Text {...attr} {...rest} style={[a.text_md, a.leading_relaxed, style]} />
90
96
)
91
97
}
98
+
99
+
/**
100
+
* HACKFIX: React Native Web applies `overflow: hidden` to
101
+
* text when using the `numberOfLines` prop, which causes it to clip
102
+
* ascenders/descenders. It only needs to be doing this for the X axis,
103
+
* so override the style with `overflowX: 'hidden'`.
104
+
* Note this only works for `numberOfLines={1}` -sfn
105
+
*
106
+
* @see https://github.com/necolas/react-native-web/pull/2836
107
+
*/
108
+
const numberOfLinesClippingFix = {
109
+
overflowY: 'visible',
110
+
overflowX: 'clip',
111
+
// this is neater and supports vertical writing modes, but it's only baseline newly available
112
+
// overflowInline: 'clip',
113
+
} satisfies React.CSSProperties as TextStyleProp