Merge pull request #140 from fbartho/fb/message-simple-configurability

[Feature] MessageSimple: Add Formal Override Points to provide Alternate Components

Author: vishalnarkhede

src/components/MessageSimple/index.js

@@ -2,10 +2,10 @@ import React from 'react';
 import styled from '@stream-io/styled-components';
 import { themed } from '../../styles/theme';
 
-import { MessageStatus } from './MessageStatus';
-import { MessageContent } from './MessageContent';
-import { MessageAvatar } from './MessageAvatar';
-import { MessageSystem } from '../MessageSystem';
+import { MessageAvatar as DefaultMessageAvatar } from './MessageAvatar';
+import { MessageContent as DefaultMessageContent } from './MessageContent';
+import { MessageStatus as DefaultMessageStatus } from './MessageStatus';
+import { MessageSystem as DefaultMessageSystem } from '../MessageSystem';
 
 import PropTypes from 'prop-types';
 
@@ -31,6 +31,26 @@ const Container = styled.View`
 export const MessageSimple = themed(
   class MessageSimple extends React.PureComponent {
     static propTypes = {
+      /** Custom UI component for the avatar next to a message */
+      MessageAvatar: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.elementType,
+      ]),
+      /** Custom UI component for message content */
+      MessageContent: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.elementType,
+      ]),
+      /** Custom UI component for message status (delivered/read) */
+      MessageStatus: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.elementType,
+      ]),
+      /** Custom UI component for Messages of type "system" */
+      MessageSystem: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.elementType,
+      ]),
       /** Custom UI component for message text */
       MessageText: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
       /** enabled reactions, this is usually set by the parent component based on channel configs */
@@ -177,6 +197,10 @@ export const MessageSimple = themed(
       repliesEnabled: true,
       forceAlign: false,
       showMessageStatus: true,
+      MessageAvatar: DefaultMessageAvatar,
+      MessageContent: DefaultMessageContent,
+      MessageStatus: DefaultMessageStatus,
+      MessageSystem: DefaultMessageSystem,
     };
 
     static themePath = 'message';
@@ -188,6 +212,10 @@ export const MessageSimple = themed(
         groupStyles,
         forceAlign,
         showMessageStatus,
+        MessageAvatar,
+        MessageContent,
+        MessageStatus,
+        MessageSystem,
       } = this.props;
 
       let pos;

types/index.d.ts

@@ -488,6 +488,14 @@ export interface MessageUIComponentProps
    * */
   forceAlign: string | boolean;
   showMessageStatus: boolean;
+  /** Custom UI component for the avatar next to a message */
+  MessageAvatar?: React.ElementType<MessageAvatarUIComponentProps>;
+  /** Custom UI component for message content */
+  MessageContent?: React.ElementType<MessageContentUIComponentProps>;
+  /** Custom UI component for message status (delivered/read) */
+  MessageStatus?: React.ElementType<MessageStatusUIComponentProps>;
+  /** Custom UI component for Messages of type "system" */
+  MessageSystem?: React.ElementType<MessageSystemProps>;
   /** Custom UI component for message text */
   MessageText?: React.ElementType<MessageTextProps>;
   /** https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js */