CRNS-54: Adding props onPress and onLongPress in Message component

Author: vishalnarkhede

README.md

@@ -109,7 +109,7 @@ cd StreamChatExpoExample
 yarn add stream-chat-expo
 
 # If you are using stream-chat-expo <= 0.4.0 and expo <= 34, then you don't need to add @react-native-community/netinfo as dependency. Since previously we used use NetInfo from react-native package.
-yarn add @react-native-community/netinfo
+expo install @react-native-community/netinfo
 ```
 
 Please check [Example](https://github.com/GetStream/stream-chat-react-native/blob/master/examples/ExpoMessaging/App.js) to see usage of the components.

src/components/IconSquare.js

@@ -31,6 +31,6 @@ export const IconSquare = ({ icon, onPress }) => {
 };
 
 IconSquare.propTypes = {
-  icon: PropTypes.string,
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   onPress: PropTypes.func,
 };

src/components/MessageSimple/MessageContent.js

@@ -153,8 +153,58 @@ export const MessageContent = themed(
        * @param e       Event object for onPress event
        * @param message Message object which was pressed
        *
+       * @deprecated User onPress instead
        * */
       onMessageTouch: PropTypes.func,
+      /**
+       * Function that overrides default behaviour when message is pressed/touched
+       * e.g. if you would like to open reaction picker on message press:
+       *
+       * ```
+       * import { MessageSimple } from 'stream-chat-react-native' // or 'stream-chat-expo'
+       * ...
+       * const MessageUIComponent = (props) => {
+       *  return (
+       *    <MessageSimple
+       *      {...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
+       *      }}
+       *  )
+       * }
+       * ```
+       * @param {Component} thisArg Reference to MessageContent component
+       * @param message Message object which was pressed
+       * @param e       Event object for onPress event
+       * */
+      onPress: PropTypes.func,
+      /**
+       * Function that overrides default behaviour when message is long pressed
+       * e.g. if you would like to open reaction picker on message long press:
+       *
+       * ```
+       * import { MessageSimple } from 'stream-chat-react-native' // or 'stream-chat-expo'
+       * ...
+       * const MessageUIComponent = (props) => {
+       *  return (
+       *    <MessageSimple
+       *      {...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
+       *      }}
+       *  )
+       * }
+       * ```
+       *
+       * @param {Component} thisArg Reference to MessageContent component
+       * @param message Message object which was long pressed
+       * @param e       Event object for onLongPress event
+       * */
+      onLongPress: PropTypes.func,
       /**
        * Handler to delete a current message.
        */
@@ -358,11 +408,18 @@ export const MessageContent = themed(
           </DeletedContainer>
         );
 
+      const onLongPress = this.props.onLongPress;
       const contentProps = {
         alignment: pos,
         status: message.status,
-        onPress: this.props.onMessageTouch,
-        onLongPress: options.length > 1 ? this.showActionSheet : null,
+        onPress: this.props.onPress
+          ? this.props.onPress.bind(this, this, message)
+          : this.props.onMessageTouch,
+        onLongPress: onLongPress
+          ? onLongPress.bind(this, this, message)
+          : options.length > 1
+          ? this.showActionSheet
+          : null,
         activeOpacity: 0.7,
         disabled: readOnly,
         hasReactions,
@@ -372,7 +429,7 @@ export const MessageContent = themed(
         contentProps.onPress = retrySendMessage.bind(this, Immutable(message));
 
       const context = {
-        onLongPress: options.length > 1 ? this.showActionSheet : null,
+        onLongPress: contentProps.onLongPress,
       };
 
       return (

src/components/MessageSimple/index.js

@@ -49,8 +49,58 @@ export const MessageSimple = themed(
        * @param e       Event object for onPress event
        * @param message Message object which was pressed
        *
+       * @deprecated User onPress instead
        * */
       onMessageTouch: PropTypes.func,
+      /**
+       * Function that overrides default behaviour when message is pressed/touched
+       * e.g. if you would like to open reaction picker on message press:
+       *
+       * ```
+       * import { MessageSimple } from 'stream-chat-react-native' // or 'stream-chat-expo'
+       * ...
+       * const MessageUIComponent = (props) => {
+       *  return (
+       *    <MessageSimple
+       *      {...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
+       *      }}
+       *  )
+       * }
+       * ```
+       * @param {Component} thisArg Reference to MessageContent component
+       * @param message Message object which was pressed
+       * @param e       Event object for onPress event
+       * */
+      onPress: PropTypes.func,
+      /**
+       * Function that overrides default behaviour when message is long pressed
+       * e.g. if you would like to open reaction picker on message long press:
+       *
+       * ```
+       * import { MessageSimple } from 'stream-chat-react-native' // or 'stream-chat-expo'
+       * ...
+       * const MessageUIComponent = (props) => {
+       *  return (
+       *    <MessageSimple
+       *      {...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
+       *      }}
+       *  )
+       * }
+       * ```
+       *
+       * @param {Component} thisArg Reference to MessageContent component
+       * @param message Message object which was long pressed
+       * @param e       Event object for onLongPress event
+       * */
+      onLongPress: PropTypes.func,
       /**
        * Handler to delete a current message.
        */

src/components/SuggestionsProvider.js

@@ -60,7 +60,7 @@ export class SuggestionsProvider extends React.PureComponent {
       suggestionsViewActive: false,
       suggestionsBottomMargin: 0,
       suggestionsLeftMargin: 0,
-      suggestions: [],
+      suggestions: {},
       suggestionsWidth: 0,
       suggestionsBackdropHeight: 0,
       suggestionsTitle: '',
@@ -169,7 +169,7 @@ class SuggestionsView extends React.PureComponent {
     active: PropTypes.bool,
     marginLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    suggestions: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    suggestions: PropTypes.object,
     backdropHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     handleDismiss: PropTypes.func,
     suggestionsTitle: PropTypes.string,