CRNS-61: Adding prop for AttachButton to MessageInput

Resolves #119

Author: vishalnarkhede

src/components/AttachButton.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from '@stream-io/styled-components';
+import iconAddAttachment from '../images/icons/plus-outline.png';
+import { themed } from '../styles/theme';
+import PropTypes from 'prop-types';
+
+const Container = styled.TouchableOpacity`
+  margin-right: 8;
+  ${({ theme }) => theme.messageInput.attachButton.css}
+`;
+
+const AttachButtonIcon = styled.Image`
+  width: 15;
+  height: 15;
+  ${({ theme }) => theme.messageInput.attachButtonIcon.css}
+`;
+
+/**
+ * UI Component for attach button in MessageInput component.
+ *
+ * @extends PureComponent
+ * @example ./docs/AttachButton.md
+ */
+export const AttachButton = themed(
+  class AttachButton extends React.PureComponent {
+    static themePath = 'messageInput';
+    static propTypes = {
+      handleOnPress: PropTypes.func,
+    };
+
+    render() {
+      const { handleOnPress } = this.props;
+      return (
+        <Container onPress={handleOnPress}>
+          <AttachButtonIcon source={iconAddAttachment} />
+        </Container>
+      );
+    }
+  },
+);

src/components/MessageInput.js

@@ -18,11 +18,11 @@ import uniq from 'lodash/uniq';
 import styled from '@stream-io/styled-components';
 import { themed } from '../styles/theme';
 import { SendButton } from './SendButton';
+import { AttachButton } from './AttachButton';
 
 import { ActionSheetCustom as ActionSheet } from 'react-native-actionsheet';
 // import iconMedia from '../images/icons/icon_attach-media.png';
 
-import iconAddAttachment from '../images/icons/plus-outline.png';
 import iconGallery from '../images/icons/icon_attach-media.png';
 import iconFolder from '../images/icons/icon_folder.png';
 import iconClose from '../images/icons/icon_close.png';
@@ -61,17 +61,6 @@ const InputBoxContainer = styled.View`
   ${({ theme }) => theme.messageInput.inputBoxContainer.css}
 `;
 
-const AttachButton = styled.TouchableOpacity`
-  margin-right: 8;
-  ${({ theme }) => theme.messageInput.attachButton.css}
-`;
-
-const AttachButtonIcon = styled.Image`
-  width: 15;
-  height: 15;
-  ${({ theme }) => theme.messageInput.attachButtonIcon.css}
-`;
-
 const ActionSheetTitleContainer = styled.View`
   flex-direction: row;
   justify-content: space-between;
@@ -180,6 +169,15 @@ const MessageInput = withKeyboardContext(
               PropTypes.node,
               PropTypes.elementType,
             ]),
+            /**
+             * Custom UI component for attach button.
+             *
+             * Defaults to and accepts same props as: [AttachButton](https://getstream.github.io/stream-chat-react-native/#attachbutton)
+             * */
+            AttachButton: PropTypes.oneOfType([
+              PropTypes.node,
+              PropTypes.elementType,
+            ]),
             /**
              * Additional props for underlying TextInput component. These props will be forwarded as it is to TextInput component.
              *
@@ -205,6 +203,7 @@ const MessageInput = withKeyboardContext(
             hasImagePicker: true,
             hasFilePicker: true,
             SendButton,
+            AttachButton,
           };
 
           getMessageDetailsForState = (message) => {
@@ -690,7 +689,12 @@ const MessageInput = withKeyboardContext(
             this.attachActionSheet.hide();
           };
           render() {
-            const { hasImagePicker, hasFilePicker, SendButton } = this.props;
+            const {
+              hasImagePicker,
+              hasFilePicker,
+              SendButton,
+              AttachButton,
+            } = this.props;
             let editingBoxStyles = {};
             if (this.props.editing) {
               editingBoxStyles = {
@@ -749,7 +753,7 @@ const MessageInput = withKeyboardContext(
                     )}
                     <InputBoxContainer ref={this.props.setInputBoxContainerRef}>
                       <AttachButton
-                        onPress={async () => {
+                        handleOnPress={async () => {
                           if (hasImagePicker && hasFilePicker) {
                             await this.props.dismissKeyboard();
                             this.attachActionSheet.show();
@@ -758,9 +762,7 @@ const MessageInput = withKeyboardContext(
                           else if (!hasImagePicker && hasFilePicker)
                             this._pickFile();
                         }}
-                      >
-                        <AttachButtonIcon source={iconAddAttachment} />
-                      </AttachButton>
+                      />
                       {/**
                     TODO: Use custom action sheet to show icon with titles of button. But it doesn't
                     work well with async onPress operations. So find a solution.

src/components/docs/AttachButton.md

@@ -0,0 +1,15 @@
+Attach button
+
+```js
+<div className="str-chat">
+  <AttachButton />
+</div>
+```
+
+Send edited message button
+
+```js
+<div className="str-chat">
+  <AttachButton />
+</div>
+```

styleguide.config.js

@@ -91,6 +91,7 @@ module.exports = {
         'src/components/LoadingIndicator.js',
         'src/components/Image.js',
         'src/components/SendButton.js',
+        'src/components/AttachButton.js',
         'src/components/DateSeparator.js',
         'src/components/Window.js',
         'src/components/ChannelListMessenger.js',

types/index.d.ts

@@ -217,6 +217,7 @@ export interface MessageInputProps
   /** https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js */
   actionSheetStyles?: object;
   AttachmentFileIcon?: React.ElementType<FileIconUIComponentProps>;
+  AttachButton?: React.ElementType<AttachButtonProps>;
 }
 
 export interface AttachmentProps extends MessageContentContextValue {
@@ -715,6 +716,10 @@ export interface AttachmentActionsProps {
   actionHandler?(name: string, value: string): any;
 }
 
+export interface AttachButtonProps {
+  handleOnPress(): void;
+}
+
 //================================================================================================
 //================================================================================================
 //
@@ -810,6 +815,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 MessageSimple extends React.PureComponent<
   MessageUIComponentProps,
   any