Merge pull request #30202 from software-mansion-labs/ts-migration/Tex…

…tWithEllipsis [TS migration] Migrate TextWithEllipsis
Expensify · Nov 7, 2023 · ea55e63 · ea55e63
2 parents 1ac950b + d934a6c
commit ea55e63
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 54 deletions.
diff --git a/src/components/TextWithEllipsis/index.js b/src/components/TextWithEllipsis/index.js
diff --git a/src/components/TextWithEllipsis/index.tsx b/src/components/TextWithEllipsis/index.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
+import Text from '@components/Text';
+import styles from '@styles/styles';
+
+type TextWithEllipsisProps = {
+    /** Leading text before the ellipsis */
+    leadingText: string;
+
+    /** Text after the ellipsis */
+    trailingText: string;
+
+    /** Styles for leading and trailing text */
+    textStyle?: StyleProp<TextStyle>;
+
+    /** Styles for leading text View */
+    leadingTextParentStyle?: StyleProp<ViewStyle>;
+
+    /** Styles for parent View */
+    wrapperStyle?: StyleProp<ViewStyle>;
+};
+
+function TextWithEllipsis({leadingText, trailingText, textStyle, leadingTextParentStyle, wrapperStyle}: TextWithEllipsisProps) {
+    return (
+        <View style={[styles.flexRow, wrapperStyle]}>
+            <View style={[styles.flexShrink1, leadingTextParentStyle]}>
+                <Text
+                    style={textStyle}
+                    numberOfLines={1}
+                >
+                    {leadingText}
+                </Text>
+            </View>
+            <View style={styles.flexShrink0}>
+                <Text style={textStyle}>{trailingText}</Text>
+            </View>
+        </View>
+    );
+}
+
+TextWithEllipsis.displayName = 'TextWithEllipsis';
+
+export default TextWithEllipsis;