feat: add ellipsize props to ListItem (#944)

callstack · Mar 22, 2019 · 00457a9 · 00457a9
1 parent e899c55
commit 00457a9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/components/List/ListItem.js b/src/components/List/ListItem.js
@@ -49,6 +49,14 @@ type Props = $RemoveChildren<typeof TouchableRipple> & {|
    * Style that is passed to Description element.
    */
   descriptionStyle?: TextStyleProp,
+  /**
+   * Ellipsize Mode for the Title
+   */
+  titleEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip',
+  /**
+   * Ellipsize Mode for the Description
+   */
+  descriptionEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip',
 |};
 
 /**
@@ -90,6 +98,8 @@ class ListItem extends React.Component<Props> {
       style,
       titleStyle,
       descriptionStyle,
+      titleEllipsizeMode,
+      descriptionEllipsizeMode,
       ...rest
     } = this.props;
     const titleColor = color(theme.colors.text)
@@ -111,13 +121,15 @@ class ListItem extends React.Component<Props> {
           {left ? left({ color: descriptionColor }) : null}
           <View style={[styles.item, styles.content]} pointerEvents="none">
             <Text
+              ellipsizeMode={titleEllipsizeMode}
               numberOfLines={1}
               style={[styles.title, { color: titleColor }, titleStyle]}
             >
               {title}
             </Text>
             {description ? (
               <Text
+                ellipsizeMode={descriptionEllipsizeMode}
                 numberOfLines={2}
                 style={[
                   styles.description,

diff --git a/typings/components/List.d.ts b/typings/components/List.d.ts
@@ -37,6 +37,8 @@ export interface ItemProps extends TouchableRipplePropsWithoutChildren {
   right?: (props: { color: string }) => React.ReactNode;
   titleStyle?: StyleProp<TextStyle>;
   descriptionStyle?: StyleProp<TextStyle>;
+  titleEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  descriptionEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
 }
 
 export declare class Item extends React.Component<ItemProps> {}