CRNS-54: Adding props for MessageTextContainer

Author: vishalnarkhede

src/components/DateSeparator.js

@@ -48,6 +48,12 @@ export const DateSeparator = themed(
   class DateSeparator extends React.PureComponent {
     static propTypes = {
       message: PropTypes.object.isRequired,
+      /**
+       * Formatter function for date object.
+       *
+       * @param date Date object of message
+       * @returns string
+       */
       formatDate: PropTypes.func,
     };
 

src/components/MessageSimple/MessageTextContainer.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled, { withTheme } from '@stream-io/styled-components';
 
 import { renderText, capitalize } from '../../utils';
+import PropTypes from 'prop-types';
 
 const TextContainer = styled.View`
   border-bottom-left-radius: ${({ theme, groupStyle }) =>
@@ -76,3 +77,25 @@ export const MessageTextContainer = withTheme((props) => {
     </React.Fragment>
   );
 });
+
+MessageTextContainer.propTypes = {
+  /** Current [message object](https://getstream.io/chat/docs/#message_format) */
+  message: PropTypes.object,
+  /**
+   * 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,
+  /**
+   * Returns true if message (param) belongs to current user, else false
+   *
+   * @param message
+   * */
+  isMyMessage: PropTypes.func,
+  /** Custom UI component for message text */
+  MessageText: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
+  /** Complete theme object. Its a [defaultTheme](https://github.com/GetStream/stream-chat-react-native/blob/master/src/styles/theme.js#L22) merged with customized theme provided as prop to Chat component */
+  theme: PropTypes.object,
+};

src/index.js

@@ -9,6 +9,8 @@ export {
   withSuggestionsContext,
   KeyboardContext,
   withKeyboardContext,
+  MessageContentContext,
+  withMessageContentContext,
 } from './context.js';
 
 export { MESSAGE_ACTIONS, renderText } from './utils';

types/index.d.ts

@@ -110,6 +110,12 @@ export interface KeyboardContextValue {
   dismissKeyboard?(): void;
 }
 
+export interface MessageContentContext
+  extends React.Context<MessageContentContextValue> {}
+export interface MessageContentContextValue {
+  onLongPress?: (event: GestureResponderEvent) => void;
+}
+
 //================================================================================================
 //================================================================================================
 //
@@ -202,7 +208,7 @@ export interface MessageInputProps
   AttachmentFileIcon?: React.ElementType<FileIconUIComponentProps>;
 }
 
-export interface AttachmentProps {
+export interface AttachmentProps extends MessageContentContextValue {
   /** The attachment to render */
   attachment: Client.Attachment;
   /**
@@ -436,6 +442,7 @@ export interface MessageUIComponentProps
    * */
   forceAlign: string | boolean;
   showMessageStatus: boolean;
+  /** Custom UI component for message text */
   MessageText?: React.ElementType<MessageTextProps>;
   /** https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js */
   actionSheetStyles?: object;
@@ -489,6 +496,28 @@ export interface MessageContentUIComponentProps
   alignment: string;
 }
 
+export interface MessageTextContainerUIComponentProps {
+  /** Current [message object](https://getstream.io/chat/docs/#message_format) */
+  message: Client.MessageResponse;
+  /**
+   * 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: [];
+  /**
+   * Returns true if message (param) belongs to current user, else false
+   *
+   * @param message
+   * */
+  isMyMessage?(message: Client.MessageResponse): boolean;
+  /** Custom UI component for message text */
+  MessageText?: React.ElementType<MessageTextProps>;
+  /** Complete theme object. Its a [defaultTheme](https://github.com/GetStream/stream-chat-react-native/blob/master/src/styles/theme.js#L22) merged with customized theme provided as prop to Chat component */
+  theme?: object;
+}
+
 export interface MessageTextProps {
   message: Client.MessageResponse;
 }
@@ -791,6 +820,11 @@ export class MessageAvatar extends React.PureComponent<
   any
 > {}
 
+export class MessageTextContainer extends React.PureComponent<
+  MessageTextContainerUIComponentProps,
+  any
+> {}
+
 export class ChannelList extends React.PureComponent<ChannelListProps, any> {}
 
 export class Thread extends React.PureComponent<ThreadProps, any> {}