zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-17 12:34:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] TextInput numberOfLines for text with line breaks

Browse Source 
Reverts the change made for #2058, which is considered an avoidable
edge-case.

Fix #2243
This commit is contained in:
Nicolas Gallagher
2022-03-01 13:19:06 -08:00
parent 9ffda21659
commit 8cc79ea8d0
3 changed files with 65 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/examples/pages/text/index.js
+63 -23
View File
@@ -283,10 +283,28 @@ function TextShadow() {
);
}
function LineExample({ description, children }) {
return (
<View style={{ marginTop: 20 }}>
<Text style={{ color: 'gray', marginBottom: 5 }}>{description}</Text>
<View
style={{
borderWidth: 2,
borderColor: 'black',
width: 200
}}
>
{children}
</View>
</View>
);
}
export default function TextPage() {
return (
<Example title="Text">
<View>
<View style={{ maxWidth: 500 }}>
<Text>
Text wraps across multiple lines by default. Text wraps across multiple lines by default.
Text wraps across multiple lines by default. Text wraps across multiple lines by default.
@@ -369,35 +387,57 @@ export default function TextPage() {
click-and-hold.
</Text>
<View style={{ maxWidth: 320 }}>
<View style={{ borderColor: '#cecece', borderWidth: 1, marginVertical: 20 }}>
<Text style={{ fontWeight: 700 }}>The next two lines should look identical:</Text>
<View style={{ paddingVertical: 20 }}>
<LineExample description="With no line breaks, text is limited to 2 lines.">
<Text numberOfLines={2}>
{
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
</Text>
</LineExample>
<LineExample description="With line breaks, text is limited to 2 lines.">
<Text numberOfLines={2}>
{
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
</Text>
</LineExample>
<LineExample description="With no line breaks, text is limited to 1 line.">
<Text numberOfLines={1}>
{
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
</Text>
</LineExample>
<LineExample description="With line breaks, text is limited to 1 line.">
<Text numberOfLines={1}>
{
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
</Text>
</LineExample>
<LineExample description="With very long word, text is limited to 1 line and long word is truncated.">
<Text numberOfLines={1}>goal aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Text>
</LineExample>
<LineExample description="With space characters within adjacent truncated lines">
<View style={{ display: 'flex', flexDirection: 'row' }}>
<Text numberOfLines={1}>Spaces </Text>
<Text numberOfLines={1}>between</Text>
<Text numberOfLines={1}> words</Text>
<Text numberOfLines={1}>
<Text>Spaces </Text>
<Text>between</Text>
<Text> words</Text>
</Text>
</View>
<View style={{ display: 'flex', flexDirection: 'row' }}>
<Text>Spaces </Text>
<Text>between</Text>
<Text> words</Text>
</View>
</View>
<Text numberOfLines={1} style={{ marginBottom: 20 }}>
Maximum of one line, no matter how much I write here. If I keep writing, it
{"'"}
ll just truncate after one line.
</Text>
<Text numberOfLines={2} style={{ marginBottom: 20 }}>
Maximum of two lines, no matter how much I write here. If I keep writing, it
{"'"}
ll just truncate after two lines.
</Text>
<Text style={{ marginBottom: 20 }}>
No maximum lines specified, no matter how much I write here. If I keep writing, it
{"'"}
ll just keep going and going.
</Text>
</LineExample>
</View>
<View>
packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
+1 -1
View File
@@ -159,7 +159,7 @@ exports[`components/Text prop "numberOfLines" value is set 1`] = `
exports[`components/Text prop "numberOfLines" value is set to one 1`] = `
<div
class="css-text-901oao css-textOneLine-nfaoni"
class="css-text-901oao css-textOneLine-1hf3ou5"
dir="auto"
/>
`;
packages/react-native-web/src/exports/Text/index.js
Vendored
+1 -1
View File
@@ -184,7 +184,7 @@ const classes = css.create({
maxWidth: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'pre',
whiteSpace: 'nowrap',
wordWrap: 'normal'
},
// See #13