[fix] numberOfLines=1 on Safari

Safari requires use of `white-space:nowrap` if not using the multi-line technique. This patch uses the multi-lines styles to truncate single-lines. Fix necolas#2111 Close necolas#2113
Expensify · Sep 28, 2021 · 562db69 · 562db69
1 parent ea3975d
commit 562db69
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 10 deletions.
diff --git a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
@@ -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-vcwn7f"
+  class="css-text-901oao css-textMultiLine-cens5h"
   dir="auto"
 />
 `;

diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js
@@ -73,12 +73,11 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
     const classList = [
       classes.text,
       hasTextAncestor === true && classes.textHasAncestor,
-      numberOfLines === 1 && classes.textOneLine,
-      numberOfLines != null && numberOfLines > 1 && classes.textMultiLine
+      numberOfLines != null && classes.textMultiLine
     ];
     const style = [
       props.style,
-      numberOfLines != null && numberOfLines > 1 && { WebkitLineClamp: numberOfLines },
+      numberOfLines != null && { WebkitLineClamp: numberOfLines },
       selectable === true && styles.selectable,
       selectable === false && styles.notSelectable,
       onPress && styles.pressable
@@ -180,12 +179,6 @@ const classes = css.create({
     font: 'inherit',
     whiteSpace: 'inherit'
   },
-  textOneLine: {
-    maxWidth: '100%',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'pre'
-  },
   // See #13
   textMultiLine: {
     display: '-webkit-box',