Merge branch 'master' of github.com:GetStream/stream-chat-react-native into vishal/CRNS-61

# Conflicts:
#	types/index.d.ts

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/LoadingIndicator.js

@@ -1,18 +1,25 @@
 import React from 'react';
-import { View } from 'react-native';
 import styled from '@stream-io/styled-components';
 import PropTypes from 'prop-types';
 import { Spinner } from './Spinner';
 
+const Container = styled.View`
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  ${({ theme }) => theme.loadingIndicator.container.css}
+`;
 const LoadingText = styled.Text`
   margin-top: 20px;
   font-size: 14px;
   font-weight: 600;
+  ${({ theme }) => theme.loadingIndicator.loadingText.css}
 `;
 
 export class LoadingIndicator extends React.PureComponent {
   static propTypes = {
     listType: PropTypes.oneOf(['channel', 'message', 'default']),
+    loadingText: PropTypes.string,
   };
 
   static defaultProps = {
@@ -23,31 +30,35 @@ export class LoadingIndicator extends React.PureComponent {
     switch (this.props.listType) {
       case 'channel':
         return (
-          <View
-            style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
-          >
+          <Container>
             <Spinner />
-            <LoadingText>Loading channels ...</LoadingText>
-          </View>
+            <LoadingText>
+              {this.props.loadingText
+                ? this.props.loadingText
+                : 'Loading channels ...'}
+            </LoadingText>
+          </Container>
         );
       case 'message':
         return (
-          <View
-            style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
-          >
+          <Container>
             <Spinner />
-            <LoadingText>Loading messages ...</LoadingText>
-          </View>
+            <LoadingText>
+              {this.props.loadingText
+                ? this.props.loadingText
+                : 'Loading messages ...'}
+            </LoadingText>
+          </Container>
         );
       case 'default':
       default:
         return (
-          <View
-            style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
-          >
+          <Container>
             <Spinner />
-            <LoadingText>Loading ...</LoadingText>
-          </View>
+            <LoadingText>
+              {this.props.loadingText ? this.props.loadingText : 'Loading ...'}
+            </LoadingText>
+          </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 = {

src/components/MessageSystem.js

@@ -51,11 +51,11 @@ const MessageSystem = ({ message }) => (
     <TextContainer>
       <Text>{message.text.toUpperCase()}</Text>
       <DateText>
-        {Moment(message.received_at)
+        {Moment(message.created_at)
           .format('dddd')
           .toUpperCase()}{' '}
         at{' '}
-        {Moment(message.received_at)
+        {Moment(message.created_at)
           .format('hh:mm A')
           .toUpperCase()}
       </DateText>

src/styles/theme.js

@@ -161,7 +161,10 @@ export const defaultTheme = {
       cancelButtonText: {},
     },
   },
-
+  loadingIndicator: {
+    container: {},
+    loadingText: {},
+  },
   messageInput: {
     container: {
       conditionalPadding: 20,

types/index.d.ts

@@ -218,6 +218,7 @@ export interface MessageInputProps
   actionSheetStyles?: object;
   AttachmentFileIcon?: React.ElementType<FileIconUIComponentProps>;
   AttachButton?: React.ElementType<AttachButtonProps>;
+  SendButton: React.ElementType<SendButtonProps>;
 }
 
 export interface AttachmentProps extends MessageContentContextValue {
@@ -325,7 +326,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 {
@@ -459,6 +463,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 {
@@ -639,6 +644,7 @@ export interface LoadingErrorIndicatorProps {
 }
 export interface LoadingIndicatorProps {
   listType?: listType;
+  loadingText?: string;
 }
 export interface MentionsItemProps {
   item: {
@@ -720,6 +726,12 @@ export interface AttachButtonProps {
   handleOnPress(): void;
 }
 
+export interface SendButtonProps {
+  title: string;
+  editing: Client.MessageResponse | boolean;
+  sendMessage(): void;
+}
+
 //================================================================================================
 //================================================================================================
 //
@@ -816,6 +828,7 @@ export class TypingIndicator extends React.PureComponent<
 export class MessageInput extends React.PureComponent<MessageInputProps, any> {}
 
 export class AttachButton extends React.PureComponent<AttachButtonProps, any> {}
+export class SendButton extends React.PureComponent<SendButtonProps> {}
 export class MessageSimple extends React.PureComponent<
   MessageUIComponentProps,
   any