Merge pull request #125 from GetStream/vishal/CRNS-58

CRNS-58, 59: Adding support for custom message length in Channel preview

Author: vishalnarkhede

src/components/ChannelPreview.js

@@ -60,6 +60,7 @@ export class ChannelPreview extends PureComponent {
     const latestMessage = {
       text: '',
       created_at: '',
+      messageObject: { ...message },
     };
 
     if (!message) {
@@ -72,7 +73,7 @@ export class ChannelPreview extends PureComponent {
     }
 
     if (message.text) {
-      latestMessage.text = message.text.slice(0, 20);
+      latestMessage.text = message.text;
     } else {
       if (message.command) {
         latestMessage.text = '/' + message.command;

src/components/ChannelPreviewMessenger.js

@@ -75,6 +75,22 @@ export const ChannelPreviewMessenger = themed(
       latestMessage: PropTypes.object,
       /** Number of unread messages on channel */
       unread: PropTypes.number,
+      /** Length at which latest message should be truncated */
+      latestMessageLength: PropTypes.number,
+      /**
+       * Formatter function for date of latest message.
+       * @param date Message date
+       * @returns Formatted date string
+       *
+       * By default today's date is shown in 'HH:mm A' format and other dates
+       * are displayed in 'DD/MM/YY' format. props.latestMessage.created_at is the
+       * default formated date. This default logic is part of ChannelPreview component.
+       */
+      formatLatestMessageDate: PropTypes.func,
+    };
+
+    static defaultProps = {
+      latestMessageLength: 30,
     };
 
     onSelectChannel = () => {
@@ -109,7 +125,7 @@ export const ChannelPreviewMessenger = themed(
           .map((member) => member.user.name || member.user.id || 'Unnamed User')
           .join(', ');
       }
-
+      const formatLatestMessageDate = this.props.formatLatestMessageDate;
       return (
         <Container onPress={this.onSelectChannel}>
           {this.renderAvatar(otherMembers)}
@@ -118,17 +134,22 @@ export const ChannelPreviewMessenger = themed(
               <Title ellipsizeMode="tail" numberOfLines={1}>
                 {name}
               </Title>
-              <Date>{this.props.latestMessage.created_at}</Date>
+              <Date>
+                {formatLatestMessageDate
+                  ? formatLatestMessageDate(
+                      this.props.latestMessage.messageObject.created_at,
+                    )
+                  : this.props.latestMessage.created_at}
+              </Date>
             </DetailsTop>
             <Message
               unread={this.props.unread > 0 ? this.props.unread : undefined}
             >
               {!this.props.latestMessage
                 ? 'Nothing yet...'
-                : truncate(
-                    this.props.latestMessage.text.replace(/\n/g, ' '),
-                    14,
-                  )}
+                : truncate(this.props.latestMessage.text.replace(/\n/g, ' '), {
+                    length: this.props.latestMessageLength,
+                  })}
             </Message>
           </Details>
         </Container>

src/components/MessageSimple/MessageContent.js

@@ -249,6 +249,7 @@ export const MessageContent = themed(
         PropTypes.node,
         PropTypes.elementType,
       ]),
+      formatDate: PropTypes.func,
     };
 
     static defaultProps = {
@@ -534,7 +535,9 @@ export const MessageContent = themed(
             {!MessageFooter && showTime ? (
               <MetaContainer>
                 <MetaText alignment={pos}>
-                  {moment(message.created_at).format('h:mmA')}
+                  {this.props.formatDate
+                    ? this.props.formatDate(message.created_at)
+                    : moment(message.created_at).format('h:mmA')}
                 </MetaText>
               </MetaContainer>
             ) : null}

src/components/MessageSimple/index.js

@@ -169,6 +169,7 @@ export const MessageSimple = themed(
         PropTypes.node,
         PropTypes.elementType,
       ]),
+      formatDate: PropTypes.func,
     };
 
     static defaultProps = {

types/index.d.ts

@@ -324,7 +324,10 @@ export interface ChannelPreviewUIComponentProps
   latestMessage: {
     text: string;
     created_at: string;
+    messageObject: Client.MessageResponse;
   };
+  /** Length at which latest message should be truncated */
+  latestMessageLength: number;
 }
 
 export interface MessageListProps extends ChannelContextValue {
@@ -458,6 +461,7 @@ export interface MessageUIComponentProps
   /** https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js */
   actionSheetStyles?: object;
   AttachmentFileIcon?: React.ElementType<FileIconUIComponentProps>;
+  formatDate(date: string): string;
 }
 
 export interface MessageRepliesUIComponentProps {