stream-chat-react-native-core 5.18.0 → 5.18.1-beta.1

package/lib/commonjs/components/MessageOverlay/MessageOverlay.js

@@ -65,7 +65,7 @@ var screenHeight = (0, _utils.vh)(100);
 var halfScreenHeight = (0, _utils.vh)(50);
 var DefaultMessageTextNumberOfLines = 5;
 var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
-  var _message$user, _message$own_reaction, _messagesContext$mess;
+  var _message$user;
   var alignment = props.alignment,
     ownCapabilities = props.ownCapabilities,
     clientId = props.clientId,
@@ -116,6 +116,10 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     myMessageThemeString = _useState2[0],
     setMyMessageThemeString = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    reactionListHeight = _useState4[0],
+    setReactionListHeight = _useState4[1];
   (0, _react.useEffect)(function () {
     if (myMessageTheme) {
       setMyMessageThemeString(JSON.stringify(myMessageTheme));
@@ -233,12 +237,226 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     Gallery = _ref2.Gallery,
     MessageAvatar = _ref2.MessageAvatar,
     Reply = _ref2.Reply;
+  var renderContent = function renderContent(messageTextNumberOfLines) {
+    var _message$own_reaction, _messagesContext$mess;
+    return _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
+      maxDist: 32,
+      onHandlerStateChange: function onHandlerStateChange(_ref3) {
+        var state = _ref3.nativeEvent.state;
+        if (state === _reactNativeGestureHandler.State.END) {
+          setOverlay('none');
+        }
+      },
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 308,
+        columnNumber: 5
+      }
+    }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
+      style: [styles.flex, panStyle],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 316,
+        columnNumber: 7
+      }
+    }, message && _react["default"].createElement(_reactNative.View, {
+      style: [styles.center, styles.overlayPadding, {
+        padding: overlayPadding
+      }, alignment === 'left' ? styles.alignStart : styles.alignEnd],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 318,
+        columnNumber: 11
+      }
+    }, handleReaction && ownCapabilities != null && ownCapabilities.sendReaction ? _react["default"].createElement(OverlayReactionList, {
+      messageLayout: messageLayout,
+      ownReactionTypes: (message == null ? void 0 : (_message$own_reaction = message.own_reactions) == null ? void 0 : _message$own_reaction.map(function (reaction) {
+        return reaction.type;
+      })) || [],
+      setReactionListHeight: setReactionListHeight,
+      showScreen: showScreen,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 327,
+        columnNumber: 15
+      }
+    }) : null, _react["default"].createElement(_reactNativeReanimated["default"].View, {
+      onLayout: function onLayout(_ref4) {
+        var _ref4$nativeEvent$lay = _ref4.nativeEvent.layout,
+          layoutHeight = _ref4$nativeEvent$lay.height,
+          layoutWidth = _ref4$nativeEvent$lay.width,
+          x = _ref4$nativeEvent$lay.x,
+          y = _ref4$nativeEvent$lay.y;
+        messageLayout.value = {
+          x: alignment === 'left' ? x + layoutWidth : x,
+          y: y
+        };
+        messageWidth.value = layoutWidth;
+        messageHeight.value = layoutHeight;
+      },
+      style: [styles.alignEnd, styles.row, showScreenStyle],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 334,
+        columnNumber: 13
+      }
+    }, alignment === 'left' && MessageAvatar && _react["default"].createElement(MessageAvatar, {
+      alignment: alignment,
+      message: message,
+      showAvatar: true,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 350,
+        columnNumber: 17
+      }
+    }), _react["default"].createElement(_reactNative.View, {
+      pointerEvents: "none",
+      style: [styles.containerInner, {
+        backgroundColor: onlyEmojis && !message.quoted_message ? transparent : otherAttachments != null && otherAttachments.length ? otherAttachments[0].type === 'giphy' ? !message.quoted_message ? transparent : grey_gainsboro : blue_alice : alignment === 'left' ? white_smoke : grey_gainsboro,
+        borderBottomLeftRadius: (groupStyle === 'left_bottom' || groupStyle === 'left_single') && (!hasThreadReplies || threadList) ? borderRadiusS : borderRadiusL,
+        borderBottomRightRadius: (groupStyle === 'right_bottom' || groupStyle === 'right_single') && (!hasThreadReplies || threadList) ? borderRadiusS : borderRadiusL,
+        borderColor: grey_whisper
+      }, onlyEmojis && !message.quoted_message || otherAttachments != null && otherAttachments.length ? {
+        borderWidth: 0
+      } : {}, containerInner],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 352,
+        columnNumber: 15
+      }
+    }, messagesContext == null ? void 0 : (_messagesContext$mess = messagesContext.messageContentOrder) == null ? void 0 : _messagesContext$mess.map(function (messageContentType, messageContentOrderIndex) {
+      switch (messageContentType) {
+        case 'quoted_reply':
+          return message.quoted_message && Reply && _react["default"].createElement(_reactNative.View, {
+            key: "quoted_reply_" + messageContentOrderIndex,
+            style: [styles.replyContainer, replyContainer],
+            __self: _this,
+            __source: {
+              fileName: _jsxFileName,
+              lineNumber: 394,
+              columnNumber: 29
+            }
+          }, _react["default"].createElement(Reply, {
+            quotedMessage: message.quoted_message,
+            styles: {
+              messageContainer: {
+                maxWidth: (0, _utils.vw)(60)
+              }
+            },
+            __self: _this,
+            __source: {
+              fileName: _jsxFileName,
+              lineNumber: 398,
+              columnNumber: 31
+            }
+          }));
+        case 'attachments':
+          return otherAttachments == null ? void 0 : otherAttachments.map(function (attachment, attachmentIndex) {
+            return Attachment && _react["default"].createElement(Attachment, {
+              attachment: attachment,
+              key: message.id + "-" + attachmentIndex,
+              __self: _this,
+              __source: {
+                fileName: _jsxFileName,
+                lineNumber: 415,
+                columnNumber: 31
+              }
+            });
+          });
+        case 'files':
+          return FileAttachmentGroup && _react["default"].createElement(FileAttachmentGroup, {
+            files: files,
+            key: "file_attachment_group_" + messageContentOrderIndex,
+            messageId: message.id,
+            __self: _this,
+            __source: {
+              fileName: _jsxFileName,
+              lineNumber: 424,
+              columnNumber: 29
+            }
+          });
+        case 'gallery':
+          return Gallery && _react["default"].createElement(Gallery, {
+            alignment: alignment,
+            groupStyles: groupStyles,
+            hasThreadReplies: !!(message != null && message.reply_count),
+            images: images,
+            key: "gallery_" + messageContentOrderIndex,
+            message: message,
+            threadList: threadList,
+            videos: videos,
+            __self: _this,
+            __source: {
+              fileName: _jsxFileName,
+              lineNumber: 434,
+              columnNumber: 29
+            }
+          });
+        case 'text':
+        default:
+          return otherAttachments != null && otherAttachments.length && otherAttachments[0].actions ? null : _react["default"].createElement(_MessageTextContainer.MessageTextContainer, {
+            key: "message_text_container_" + messageContentOrderIndex,
+            message: message,
+            messageOverlay: true,
+            messageTextNumberOfLines: messageTextNumberOfLines,
+            onlyEmojis: onlyEmojis,
+            __self: _this,
+            __source: {
+              fileName: _jsxFileName,
+              lineNumber: 449,
+              columnNumber: 27
+            }
+          });
+      }
+    }))), messageActions && _react["default"].createElement(MessageActionList, (0, _extends2["default"])({
+      MessageActionListItem: MessageActionListItem,
+      showScreen: showScreen
+    }, messageActionProps, {
+      message: message,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 463,
+        columnNumber: 15
+      }
+    })), !!messageReactionTitle && message.latest_reactions && message.latest_reactions.length > 0 ? _react["default"].createElement(OverlayReactions, {
+      alignment: alignment,
+      OverlayReactionsAvatar: OverlayReactionsAvatar,
+      reactions: message.latest_reactions.map(function (reaction) {
+        var _reaction$user, _reaction$user2, _reaction$user3, _reaction$user4;
+        return {
+          alignment: clientId && clientId === ((_reaction$user = reaction.user) == null ? void 0 : _reaction$user.id) ? 'right' : 'left',
+          id: (reaction == null ? void 0 : (_reaction$user2 = reaction.user) == null ? void 0 : _reaction$user2.id) || '',
+          image: reaction == null ? void 0 : (_reaction$user3 = reaction.user) == null ? void 0 : _reaction$user3.image,
+          name: (reaction == null ? void 0 : (_reaction$user4 = reaction.user) == null ? void 0 : _reaction$user4.name) || reaction.user_id || '',
+          type: reaction.type
+        };
+      }),
+      showScreen: showScreen,
+      supportedReactions: messagesContext == null ? void 0 : messagesContext.supportedReactions,
+      title: messageReactionTitle,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 473,
+        columnNumber: 15
+      }
+    }) : null)));
+  };
+  var isScrollEnabled = !!messageActions && overlay === 'message';
   return _react["default"].createElement(_ChatContext.ChatProvider, {
     value: chatContext,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 306,
+      lineNumber: 502,
       columnNumber: 5
     }
   }, _react["default"].createElement(_MessagesContext.MessagesProvider, {
@@ -246,7 +464,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 307,
+      lineNumber: 503,
       columnNumber: 7
     }
   }, _react["default"].createElement(_MessageContext.MessageProvider, {
@@ -254,7 +472,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 308,
+      lineNumber: 504,
       columnNumber: 9
     }
   }, _react["default"].createElement(_ThemeContext.ThemeProvider, {
@@ -262,7 +480,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 309,
+      lineNumber: 505,
       columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -271,7 +489,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 310,
+      lineNumber: 506,
       columnNumber: 13
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PanGestureHandler, {
@@ -282,7 +500,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 314,
+      lineNumber: 510,
       columnNumber: 15
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -290,7 +508,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 320,
+      lineNumber: 516,
       columnNumber: 17
     }
   }, _react["default"].createElement(_reactNative.SafeAreaView, {
@@ -298,218 +516,23 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 321,
+      lineNumber: 517,
       columnNumber: 19
     }
-  }, _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
-    maxDist: 32,
-    onHandlerStateChange: function onHandlerStateChange(_ref3) {
-      var state = _ref3.nativeEvent.state;
-      if (state === _reactNativeGestureHandler.State.END) {
-        setOverlay('none');
-      }
-    },
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 322,
-      columnNumber: 21
-    }
-  }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
-    style: [styles.flex, panStyle],
+  }, isScrollEnabled ? _react["default"].createElement(_reactNativeGestureHandler.ScrollView, {
+    alwaysBounceVertical: false,
+    contentContainerStyle: [styles.center, {
+      paddingTop: reactionListHeight
+    }],
+    showsVerticalScrollIndicator: false,
+    style: [styles.flex, styles.scrollView],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 330,
+      lineNumber: 519,
       columnNumber: 23
     }
-  }, message && _react["default"].createElement(_reactNative.View, {
-    style: [styles.center, styles.overlayPadding, {
-      padding: overlayPadding
-    }, alignment === 'left' ? styles.alignStart : styles.alignEnd],
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 332,
-      columnNumber: 27
-    }
-  }, handleReaction && ownCapabilities != null && ownCapabilities.sendReaction ? _react["default"].createElement(OverlayReactionList, {
-    messageLayout: messageLayout,
-    ownReactionTypes: (message == null ? void 0 : (_message$own_reaction = message.own_reactions) == null ? void 0 : _message$own_reaction.map(function (reaction) {
-      return reaction.type;
-    })) || [],
-    showScreen: showScreen,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 341,
-      columnNumber: 31
-    }
-  }) : null, _react["default"].createElement(_reactNativeReanimated["default"].View, {
-    onLayout: function onLayout(_ref4) {
-      var _ref4$nativeEvent$lay = _ref4.nativeEvent.layout,
-        layoutHeight = _ref4$nativeEvent$lay.height,
-        layoutWidth = _ref4$nativeEvent$lay.width,
-        x = _ref4$nativeEvent$lay.x,
-        y = _ref4$nativeEvent$lay.y;
-      messageLayout.value = {
-        x: alignment === 'left' ? x + layoutWidth : x,
-        y: y
-      };
-      messageWidth.value = layoutWidth;
-      messageHeight.value = layoutHeight;
-    },
-    style: [styles.alignEnd, styles.row, showScreenStyle],
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 349,
-      columnNumber: 29
-    }
-  }, alignment === 'left' && MessageAvatar && _react["default"].createElement(MessageAvatar, {
-    alignment: alignment,
-    message: message,
-    showAvatar: true,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 365,
-      columnNumber: 33
-    }
-  }), _react["default"].createElement(_reactNative.View, {
-    pointerEvents: "none",
-    style: [styles.containerInner, {
-      backgroundColor: onlyEmojis && !message.quoted_message ? transparent : otherAttachments != null && otherAttachments.length ? otherAttachments[0].type === 'giphy' ? !message.quoted_message ? transparent : grey_gainsboro : blue_alice : alignment === 'left' ? white_smoke : grey_gainsboro,
-      borderBottomLeftRadius: (groupStyle === 'left_bottom' || groupStyle === 'left_single') && (!hasThreadReplies || threadList) ? borderRadiusS : borderRadiusL,
-      borderBottomRightRadius: (groupStyle === 'right_bottom' || groupStyle === 'right_single') && (!hasThreadReplies || threadList) ? borderRadiusS : borderRadiusL,
-      borderColor: grey_whisper
-    }, onlyEmojis && !message.quoted_message || otherAttachments != null && otherAttachments.length ? {
-      borderWidth: 0
-    } : {}, containerInner],
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 367,
-      columnNumber: 31
-    }
-  }, messagesContext == null ? void 0 : (_messagesContext$mess = messagesContext.messageContentOrder) == null ? void 0 : _messagesContext$mess.map(function (messageContentType, messageContentOrderIndex) {
-    switch (messageContentType) {
-      case 'quoted_reply':
-        return message.quoted_message && Reply && _react["default"].createElement(_reactNative.View, {
-          key: "quoted_reply_" + messageContentOrderIndex,
-          style: [styles.replyContainer, replyContainer],
-          __self: _this,
-          __source: {
-            fileName: _jsxFileName,
-            lineNumber: 412,
-            columnNumber: 45
-          }
-        }, _react["default"].createElement(Reply, {
-          quotedMessage: message.quoted_message,
-          styles: {
-            messageContainer: {
-              maxWidth: (0, _utils.vw)(60)
-            }
-          },
-          __self: _this,
-          __source: {
-            fileName: _jsxFileName,
-            lineNumber: 416,
-            columnNumber: 47
-          }
-        }));
-      case 'attachments':
-        return otherAttachments == null ? void 0 : otherAttachments.map(function (attachment, attachmentIndex) {
-          return Attachment && _react["default"].createElement(Attachment, {
-            attachment: attachment,
-            key: message.id + "-" + attachmentIndex,
-            __self: _this,
-            __source: {
-              fileName: _jsxFileName,
-              lineNumber: 433,
-              columnNumber: 47
-            }
-          });
-        });
-      case 'files':
-        return FileAttachmentGroup && _react["default"].createElement(FileAttachmentGroup, {
-          files: files,
-          key: "file_attachment_group_" + messageContentOrderIndex,
-          messageId: message.id,
-          __self: _this,
-          __source: {
-            fileName: _jsxFileName,
-            lineNumber: 442,
-            columnNumber: 45
-          }
-        });
-      case 'gallery':
-        return Gallery && _react["default"].createElement(Gallery, {
-          alignment: alignment,
-          groupStyles: groupStyles,
-          hasThreadReplies: !!(message != null && message.reply_count),
-          images: images,
-          key: "gallery_" + messageContentOrderIndex,
-          message: message,
-          threadList: threadList,
-          videos: videos,
-          __self: _this,
-          __source: {
-            fileName: _jsxFileName,
-            lineNumber: 452,
-            columnNumber: 45
-          }
-        });
-      case 'text':
-      default:
-        return otherAttachments != null && otherAttachments.length && otherAttachments[0].actions ? null : _react["default"].createElement(_MessageTextContainer.MessageTextContainer, {
-          key: "message_text_container_" + messageContentOrderIndex,
-          message: message,
-          messageOverlay: true,
-          messageTextNumberOfLines: messageTextNumberOfLines,
-          onlyEmojis: onlyEmojis,
-          __self: _this,
-          __source: {
-            fileName: _jsxFileName,
-            lineNumber: 468,
-            columnNumber: 43
-          }
-        });
-    }
-  }))), messageActions && _react["default"].createElement(MessageActionList, (0, _extends2["default"])({
-    MessageActionListItem: MessageActionListItem,
-    showScreen: showScreen
-  }, messageActionProps, {
-    message: message,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 482,
-      columnNumber: 31
-    }
-  })), !!messageReactionTitle && message.latest_reactions && message.latest_reactions.length > 0 ? _react["default"].createElement(OverlayReactions, {
-    alignment: alignment,
-    OverlayReactionsAvatar: OverlayReactionsAvatar,
-    reactions: message.latest_reactions.map(function (reaction) {
-      var _reaction$user, _reaction$user2, _reaction$user3, _reaction$user4;
-      return {
-        alignment: clientId && clientId === ((_reaction$user = reaction.user) == null ? void 0 : _reaction$user.id) ? 'right' : 'left',
-        id: (reaction == null ? void 0 : (_reaction$user2 = reaction.user) == null ? void 0 : _reaction$user2.id) || '',
-        image: reaction == null ? void 0 : (_reaction$user3 = reaction.user) == null ? void 0 : _reaction$user3.image,
-        name: (reaction == null ? void 0 : (_reaction$user4 = reaction.user) == null ? void 0 : _reaction$user4.name) || reaction.user_id || '',
-        type: reaction.type
-      };
-    }),
-    showScreen: showScreen,
-    supportedReactions: messagesContext == null ? void 0 : messagesContext.supportedReactions,
-    title: messageReactionTitle,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 492,
-      columnNumber: 31
-    }
-  }) : null)))))))))));
+  }, renderContent()) : renderContent(messageTextNumberOfLines)))))))));
 };
 var areEqual = function areEqual(prevProps, nextProps) {
   var prevAlignment = prevProps.alignment,
@@ -556,7 +579,7 @@ var MessageOverlay = function MessageOverlay(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 600,
+      lineNumber: 621,
       columnNumber: 5
     }
   }));