Use ellipsizeMode tail for Board

robertying · May 4, 2019 · 1ce98d0 · 1ce98d0
1 parent b5d4ffc
commit 1ce98d0
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/src/components/AssignmentBoard.tsx b/src/components/AssignmentBoard.tsx
@@ -112,6 +112,7 @@ const AssignmentBoard: FunctionComponent<
                   getExtension(attachmentName)!
                 )
               }
+              ellipsizeMode="tail"
             >
               {attachmentName}
             </TextButton>
@@ -139,6 +140,7 @@ const AssignmentBoard: FunctionComponent<
                   getExtension(submittedAttachmentName)!
                 )
               }
+              ellipsizeMode="tail"
             >
               {submittedAttachmentName}
             </TextButton>

diff --git a/src/components/NoticeBoard.tsx b/src/components/NoticeBoard.tsx
@@ -102,6 +102,7 @@ const NoticeBoard: FunctionComponent<
                   getExtension(attachmentName)!
                 )
               }
+              ellipsizeMode="tail"
             >
               {attachmentName}
             </TextButton>

diff --git a/src/components/TextButton.tsx b/src/components/TextButton.tsx
@@ -11,11 +11,12 @@ import Colors from "../constants/Colors";
 export type ITextButtonProps = TouchableOpacityProps & {
   readonly textStyle?: TextProps["style"];
   readonly children: string;
+  readonly ellipsizeMode?: TextProps["ellipsizeMode"];
 };
 
 class TextButton extends React.Component<ITextButtonProps> {
   public render(): React.ReactElement {
-    const { textStyle, children } = this.props;
+    const { textStyle, children, ellipsizeMode } = this.props;
     return (
       <TouchableOpacity activeOpacity={Colors.activeOpacity} {...this.props}>
         <Text
@@ -24,7 +25,7 @@ class TextButton extends React.Component<ITextButtonProps> {
             textStyle
           ]}
           numberOfLines={1}
-          ellipsizeMode="clip"
+          ellipsizeMode={ellipsizeMode || "clip"}
         >
           {children}
         </Text>