CRNS-54: Adding some more typescript and prop types for message related components

Author: vishalnarkhede

src/components/Chat.js

@@ -28,7 +28,11 @@ export const Chat = themed(
     static propTypes = {
       /** The StreamChat client object */
       client: PropTypes.object.isRequired,
-      /** Theme object */
+      /**
+       * Theme object
+       *
+       * @ref https://getstream.io/chat/react-native-chat/tutorial/#custom-styles
+       * */
       style: PropTypes.object,
       logger: PropTypes.func,
     };

src/components/MessageSimple/MessageAvatar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from '@stream-io/styled-components';
 import { Avatar } from '../Avatar';
+import PropTypes from 'prop-types';
 
 const Container = styled.View`
   margin-right: ${({ alignment }) => (alignment === 'left' ? 8 : 0)};
@@ -33,3 +34,21 @@ export const MessageAvatar = ({ message, isMyMessage, groupStyles }) => {
     </Container>
   );
 };
+
+MessageAvatar.propTypes = {
+  /** Current [message object](https://getstream.io/chat/docs/#message_format) */
+  message: PropTypes.object,
+  /**
+   * Returns true if message (param) belongs to current user, else false
+   *
+   * @param message
+   * */
+  isMyMessage: PropTypes.func,
+  /**
+   * Position of message in group - top, bottom, middle, single.
+   *
+   * Message group is a group of consecutive messages from same user. groupStyles can be used to style message as per their position in message group
+   * e.g., user avatar (to which message belongs to) is only showed for last (bottom) message in group.
+   */
+  groupStyles: PropTypes.array,
+};

src/components/MessageSimple/MessageContent.js

@@ -169,13 +169,16 @@ export const MessageContent = themed(
        *      {...props}
        *      onPress={(thisArg, message, e) => {
        *        thisArg.openReactionSelector();
-       *        // Similarly, you can also call other methods available on MessageContent
-       *        // component such as handleEdit, handleDelete, showActionSheet
-       *        // Source - https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js
        *      }}
        *  )
        * }
        * ```
+       *
+       * Similarly, you can also call other methods available on MessageContent
+       * component such as handleEdit, handleDelete, showActionSheet etc.
+       *
+       * Source - [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js)
+       *
        * @param {Component} thisArg Reference to MessageContent component
        * @param message Message object which was pressed
        * @param e       Event object for onPress event
@@ -194,12 +197,16 @@ export const MessageContent = themed(
        *      {...props}
        *      onLongPress={(thisArg, message, e) => {
        *        thisArg.openReactionSelector();
-       *        // Similarly, you can also call other methods available on MessageContent
-       *        // component such as handleEdit, handleDelete, showActionSheet
-       *        // Source - https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js
        *      }}
        *  )
        * }
+       *
+       * Similarly, you can also call other methods available on MessageContent
+       * component such as handleEdit, handleDelete, showActionSheet etc.
+       *
+       * Source - [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js)
+       *
+       * By default we show action sheet with all the message actions on long press.
        * ```
        *
        * @param {Component} thisArg Reference to MessageContent component
@@ -222,6 +229,13 @@ export const MessageContent = themed(
       handleAction: PropTypes.func,
       /** Position of message. 'right' | 'left' */
       alignment: PropTypes.string,
+      /**
+       * Position of message in group - top, bottom, middle, single.
+       *
+       * Message group is a group of consecutive messages from same user. groupStyles can be used to style message as per their position in message group
+       * e.g., user avatar (to which message belongs to) is only showed for last (bottom) message in group.
+       */
+      groupStyles: PropTypes.array,
       /**
        * Style object for actionsheet (used to message actions).
        * Supported styles: https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js

src/components/MessageSimple/MessageReplies.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@stream-io/styled-components';
+import PropTypes from 'prop-types';
 
 import iconPath from '../../images/icons/icon_path.png';
 
@@ -40,3 +41,14 @@ export const MessageReplies = ({ message, isThreadList, openThread, pos }) => {
     </Container>
   );
 };
+
+MessageReplies.propTypes = {
+  /** Current [message object](https://getstream.io/chat/docs/#message_format) */
+  message: PropTypes.object,
+  /** Boolean if current message is part of thread */
+  isThreadList: PropTypes.bool,
+  /** @see See [Channel Context](https://getstream.github.io/stream-chat-react-native/#channelcontext) */
+  openThread: PropTypes.func,
+  /** right | left */
+  pos: PropTypes.string,
+};

src/components/MessageSimple/MessageStatus.js

@@ -3,6 +3,7 @@ import styled from '@stream-io/styled-components';
 import loadingGif from '../../images/loading.gif';
 import iconDeliveredUnseen from '../../images/icons/delivered_unseen.png';
 import { Avatar } from '../Avatar';
+import PropTypes from 'prop-types';
 
 const Spacer = styled.View`
   height: 10;
@@ -111,3 +112,16 @@ export const MessageStatus = ({
 
   return <StatusContainer>{renderStatus()}</StatusContainer>;
 };
+
+MessageStatus.propTypes = {
+  /** @see See [Channel Context](https://getstream.github.io/stream-chat-react-native/#channelcontext) */
+  client: PropTypes.object,
+  /** A list of users who have read the message */
+  readBy: PropTypes.array,
+  /** Current [message object](https://getstream.io/chat/docs/#message_format) */
+  message: PropTypes.object,
+  /** Latest message id on current channel */
+  lastReceivedId: PropTypes.string,
+  /** Boolean if current message is part of thread */
+  isThreadList: PropTypes.bool,
+};

src/components/MessageSimple/index.js

@@ -65,13 +65,16 @@ export const MessageSimple = themed(
        *      {...props}
        *      onPress={(thisArg, message, e) => {
        *        thisArg.openReactionSelector();
-       *        // Similarly, you can also call other methods available on MessageContent
-       *        // component such as handleEdit, handleDelete, showActionSheet
-       *        // Source - https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js
        *      }}
        *  )
        * }
        * ```
+       *
+       * Similarly, you can also call other methods available on MessageContent
+       * component such as handleEdit, handleDelete, showActionSheet etc.
+       *
+       * Source - [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js)
+       *
        * @param {Component} thisArg Reference to MessageContent component
        * @param message Message object which was pressed
        * @param e       Event object for onPress event
@@ -90,14 +93,18 @@ export const MessageSimple = themed(
        *      {...props}
        *      onLongPress={(thisArg, message, e) => {
        *        thisArg.openReactionSelector();
-       *        // Similarly, you can also call other methods available on MessageContent
-       *        // component such as handleEdit, handleDelete, showActionSheet
-       *        // Source - https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js
        *      }}
        *  )
        * }
+       *
+       * Similarly, you can also call other methods available on MessageContent
+       * component such as handleEdit, handleDelete, showActionSheet etc.
+       *
+       * Source - [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js)
        * ```
        *
+       * By default we show action sheet with all the message actions on long press.
+       *
        * @param {Component} thisArg Reference to MessageContent component
        * @param message Message object which was long pressed
        * @param e       Event object for onLongPress event

types/index.d.ts

@@ -118,7 +118,13 @@ export interface KeyboardContextValue {
 //================================================================================================
 //================================================================================================
 export interface ChatProps {
+  /** The StreamChat client object */
   client: Client.StreamChat;
+  /**
+   * Theme object
+   *
+   * @ref https://getstream.io/chat/react-native-chat/tutorial/#custom-styles
+   * */
   style?: object;
 }
 
@@ -131,16 +137,17 @@ export interface ChannelProps extends ChatContextValue {
   Attachment?: React.ElementType<AttachmentProps>;
 }
 
-export interface EmptyStateIndicatorProps {
-  listType?: 'channel' | 'message' | 'default';
-}
+export type listType = 'channel' | 'message' | 'default';
 
 export interface LoadingErrorIndicatorProps {
-  listType?: 'channel' | 'message' | 'default';
+  listType?: listType;
+}
+export interface EmptyStateIndicatorProps {
+  listType?: listType;
 }
 
 export interface LoadingIndicatorProps {
-  listType: 'channel' | 'message' | 'default';
+  listType?: listType;
 }
 export interface DateSeparatorProps {
   message: Client.MessageResponse;
@@ -435,9 +442,57 @@ export interface MessageUIComponentProps
   AttachmentFileIcon?: React.ElementType<FileIconUIComponentProps>;
 }
 
+export interface MessageRepliesUIComponentProps {
+  /** Current [message object](https://getstream.io/chat/docs/#message_format) */
+  message: Client.MessageResponse;
+  /** Boolean if current message is part of thread */
+  isThreadList: boolean;
+  /** @see See [Channel Context](https://getstream.github.io/stream-chat-react-native/#channelcontext) */
+  openThread?(message: Client.Message, event: React.SyntheticEvent): void;
+  /** right | left */
+  pos: string;
+}
+
+export interface MessageStatusUIComponentProps {
+  /** @see See [Channel Context](https://getstream.github.io/stream-chat-react-native/#channelcontext) */
+  client: Client.StreamChat;
+  /** A list of users who have read the message */
+  readBy: Array<Client.UserResponse>;
+  /** Current [message object](https://getstream.io/chat/docs/#message_format) */
+  message: Client.MessageResponse;
+  /** Latest message id on current channel */
+  lastReceivedId: string;
+  /** Boolean if current message is part of thread */
+  isThreadList: boolean;
+}
+
+export interface MessageAvatarUIComponentProps {
+  /** Current [message object](https://getstream.io/chat/docs/#message_format) */
+  message: Client.MessageResponse;
+  /**
+   * Returns true if message (param) belongs to current user, else false
+   *
+   * @param message
+   * */
+  isMyMessage?(message: Client.MessageResponse): boolean;
+  /**
+   * Position of message in group - top, bottom, middle, single.
+   *
+   * Message group is a group of consecutive messages from same user. groupStyles can be used to style message as per their position in message group
+   * e.g., user avatar (to which message belongs to) is only showed for last (bottom) message in group.
+   */
+  groupStyles: [];
+}
+
+export interface MessageContentUIComponentProps
+  extends MessageUIComponentProps {
+  alignment: string;
+}
+
 export interface MessageTextProps {
   message: Client.MessageResponse;
 }
+
 export interface ThreadProps extends ChannelContextValue {
   /** the thread (the parent message object) */
   thread: SeamlessImmutable.Immutable<Client.MessageResponse>;
@@ -462,7 +517,7 @@ export interface FileIconUIComponentProps {
 
 export interface AutoCompleteInputProps {
   value: string;
-  openSuggestions?(title: string, component: React.ElementType<any, any>): void;
+  openSuggestions?(title: string, component: React.ElementType<any>): void;
   closeSuggestions?(): void;
   updateSuggestions?(param: object): void;
   triggerSettings: object;
@@ -493,24 +548,18 @@ export interface DateSeparatorProps {
   message: Client.MessageResponse;
   formatDate?(date: Date): string;
 }
-export interface EmptyStateIndicatorProps {
-  listType?: 'string';
-}
-export interface EventIndicatorProps {
-  event: Client.Event;
-}
 export interface FileAttachmentGroupProps {
   messageId: string;
   files: [];
   handleAction?(): void;
   alignment: 'right' | 'left';
-  AttachmentFileIcon: React.ElementType<any, any>;
+  AttachmentFileIcon: React.ElementType<any>;
 }
 export interface FileUploadPreviewProps {
   fileUploads: [];
   removeFile?(id: string): void;
   retryUpload?(id: string): Promise<any>;
-  AttachmentFileIcon: React.ElementType<any, any>;
+  AttachmentFileIcon: React.ElementType<any>;
 }
 export interface GalleryProps {
   images: Client.Attachment[];
@@ -533,11 +582,22 @@ export interface ImageUploadPreviewProps {
   retryUpload?(id: string): Promise<any>;
 }
 export interface KeyboardCompatibleViewProps {}
+
+export interface EmptyStateIndicatorProps {
+  listType?: listType;
+}
+export interface EventIndicatorProps {
+  event:
+    | Client.Event<Client.MemberAddedEvent>
+    | Client.Event<Client.MemberRemovedEvent>
+    | null;
+}
+
 export interface LoadingErrorIndicatorProps {
-  listType: string;
+  listType?: listType;
 }
 export interface LoadingIndicatorProps {
-  listType: 'channel' | 'message' | 'default';
+  listType?: listType;
 }
 export interface MentionsItemProps {
   item: {
@@ -714,6 +774,23 @@ export class MessageSimple extends React.PureComponent<
   MessageUIComponentProps,
   any
 > {}
+export class MessageContent extends React.PureComponent<
+  MessageContentUIComponentProps,
+  any
+> {}
+export class MessageReplies extends React.PureComponent<
+  MessageRepliesUIComponentProps,
+  any
+> {}
+export class MessageStatus extends React.PureComponent<
+  MessageStatusUIComponentProps,
+  any
+> {}
+export class MessageAvatar extends React.PureComponent<
+  MessageAvatarUIComponentProps,
+  any
+> {}
+
 export class ChannelList extends React.PureComponent<ChannelListProps, any> {}
 
 export class Thread extends React.PureComponent<ThreadProps, any> {}