add custom system message component

Author: Dan Carbonell

src/components/MessageList/MessageList.js

@@ -6,7 +6,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 import DefaultDateSeparator from './DateSeparator';
 import MessageNotification from './MessageNotification';
-import MessageSystem from './MessageSystem';
+import DefaultMessageSystem from './MessageSystem';
 import DefaultTypingIndicator from './TypingIndicator';
 import TypingIndicatorContainer from './TypingIndicatorContainer';
 
@@ -67,6 +67,7 @@ const MessageList = (props) => {
     disableWhileEditing = true,
     HeaderComponent,
     Message: MessageFromProps,
+    MessageSystem = DefaultMessageSystem,
     messageActions,
     noGroupByUser,
     onThreadSelect,
@@ -310,6 +311,11 @@ MessageList.propTypes = {
    * */
   Message: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
   messageActions: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
+  /**
+   * Custom UI component to display a system message
+   * Default component (accepts the same props): [MessageSystem](https://getstream.github.io/stream-chat-react-native/#messagesystem)
+   */
+  MessageSystem: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
   /**
    * Boolean weather current message list is a thread.
    */

src/components/MessageList/MessageSystem.js

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import styled from '@stream-io/styled-components';
+import PropTypes from 'prop-types';
 
 import { TranslationContext } from '../../context';
 
@@ -63,4 +64,9 @@ const MessageSystem = ({ message }) => {
   );
 };
 
+MessageSystem.propTypes = {
+  /** Current [message object](https://getstream.io/chat/docs/#message_format) */
+  message: PropTypes.object.isRequired,
+};
+
 export default MessageSystem;

styleguide.config.js

@@ -65,6 +65,7 @@ module.exports = {
         'src/components/MessageList/EventIndicator.js',
         'src/components/MessageList/MessageList.js',
         'src/components/MessageList/MessageNotification.js',
+        'src/components/MessageList/MessageSystem.js',
         'src/components/MessageList/TypingIndicator.js',
       ],
       exampleMode: 'collapse',
@@ -104,7 +105,7 @@ module.exports = {
         'src/components/MessageInput/UploadProgressIndicator.js',
       ],
       exampleMode: 'collapse',
-      name: 'Message Input',
+      name: 'MessageInput Components',
       usageMode: 'expand',
     },
     {
@@ -193,7 +194,7 @@ module.exports = {
     },
     {
       exampleMode: 'collapse',
-      name: 'Custom UI component props',
+      name: 'Custom UI Component Props',
       sections: [
         {
           content: 'src/components/docs/AttachmentProps.md',