stream-chat-react-native-core 3.10.2 → 4.0.0-beta.1

package/lib/commonjs/components/Message/MessageSimple/ReactionList.js

@@ -9,12 +9,10 @@ exports.ReactionList = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 
 var _MessageContext = require("../../../contexts/messageContext/MessageContext");
@@ -60,36 +58,11 @@ var Icon = function Icon(_ref) {
   var ReactionIcon = ((_supportedReactions$f = supportedReactions.find(function (reaction) {
     return reaction.type === type;
   })) == null ? void 0 : _supportedReactions$f.Icon) || _Unknown.Unknown;
-  var scale = (0, _reactNativeReanimated.useSharedValue)(0);
-
-  var showReaction = function showReaction() {
-    'worklet';
-
-    scale.value = (0, _reactNativeReanimated.withSequence)((0, _reactNativeReanimated.withDelay)(250, (0, _reactNativeReanimated.withTiming)(0.5, {
-      duration: 100
-    })), (0, _reactNativeReanimated.withTiming)(1.5, {
-      duration: 400
-    }), (0, _reactNativeReanimated.withTiming)(1, {
-      duration: 500
-    }));
-  };
-
-  (0, _react.useEffect)(function () {
-    showReaction();
-  }, []);
-  var animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
-    return {
-      transform: [{
-        scale: scale.value
-      }]
-    };
-  }, []);
-  return _react["default"].createElement(_reactNativeReanimated["default"].View, {
-    style: animatedStyle,
+  return _react["default"].createElement(_reactNative.View, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 94,
+      lineNumber: 65,
       columnNumber: 5
     }
   }, _react["default"].createElement(ReactionIcon, {
@@ -100,7 +73,7 @@ var Icon = function Icon(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 95,
+      lineNumber: 66,
       columnNumber: 7
     }
   }));
@@ -109,6 +82,7 @@ var Icon = function Icon(_ref) {
 var ReactionListWithContext = function ReactionListWithContext(props) {
   var alignment = props.alignment,
       propFill = props.fill,
+      message = props.message,
       messageContentWidth = props.messageContentWidth,
       _onLongPress = props.onLongPress,
       _onPress = props.onPress,
@@ -120,7 +94,8 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
       showMessageOverlay = props.showMessageOverlay,
       propStroke = props.stroke,
       propStrokeSize = props.strokeSize,
-      supportedReactions = props.supportedReactions;
+      supportedReactions = props.supportedReactions,
+      targetedMessage = props.targetedMessage;
 
   var _useTheme = (0, _ThemeContext.useTheme)(),
       _useTheme$theme = _useTheme.theme,
@@ -129,7 +104,9 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
       grey = _useTheme$theme$color.grey,
       grey_gainsboro = _useTheme$theme$color.grey_gainsboro,
       grey_whisper = _useTheme$theme$color.grey_whisper,
+      targetedMessageBackground = _useTheme$theme$color.targetedMessageBackground,
       white = _useTheme$theme$color.white,
+      white_snow = _useTheme$theme$color.white_snow,
       _useTheme$theme$messa = _useTheme$theme.messageSimple,
       _useTheme$theme$messa2 = _useTheme$theme$messa.avatarWrapper,
       leftAlign = _useTheme$theme$messa2.leftAlign,
@@ -144,7 +121,6 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
       themeStrokeSize = _useTheme$theme$messa3.strokeSize,
       screenPadding = _useTheme$theme.screenPadding;
 
-  var opacity = (0, _reactNativeReanimated.useSharedValue)(0);
   var width = (0, _reactNative.useWindowDimensions)().width;
   var supportedReactionTypes = supportedReactions.map(function (supportedReaction) {
     return supportedReaction.type;
@@ -153,23 +129,6 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
     return supportedReactionTypes.includes(reaction.type);
   });
 
-  var showReactions = function showReactions(show) {
-    'worklet';
-
-    opacity.value = show ? (0, _reactNativeReanimated.withDelay)(250, (0, _reactNativeReanimated.withTiming)(1, {
-      duration: 500
-    })) : 0;
-  };
-
-  (0, _react.useEffect)(function () {
-    showReactions(hasSupportedReactions && messageContentWidth !== 0);
-  }, [hasSupportedReactions, messageContentWidth]);
-  var animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
-    return {
-      opacity: opacity.value
-    };
-  }, []);
-
   if (!hasSupportedReactions || messageContentWidth === 0) {
     return null;
   }
@@ -178,7 +137,8 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
   var fill = propFill || alignmentLeft ? grey_gainsboro : grey_whisper;
   var radius = propRadius || themeRadius;
   var reactionSize = propReactionSize || themeReactionSize;
-  var stroke = propStroke || white;
+  var highlighted = message.pinned || targetedMessage === message.id;
+  var stroke = propStroke || (highlighted ? targetedMessageBackground : white_snow);
   var strokeSize = propStrokeSize || themeStrokeSize;
   var x1 = alignmentLeft ? messageContentWidth + (Number(leftAlign.marginRight) || 0) + (Number(spacer.width) || 0) - radius * 0.5 : width - screenPadding * 2 - messageContentWidth;
   var x2 = x1 + radius * 2 * (alignmentLeft ? 1 : -1);
@@ -227,22 +187,22 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 235,
+      lineNumber: 201,
       columnNumber: 5
     }
-  }, reactions.length ? _react["default"].createElement(_reactNativeReanimated["default"].View, {
-    style: [_reactNative.StyleSheet.absoluteFill, animatedStyle],
+  }, reactions.length ? _react["default"].createElement(_reactNative.View, {
+    style: [_reactNative.StyleSheet.absoluteFill],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 274,
+      lineNumber: 240,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNativeSvg["default"], {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 275,
+      lineNumber: 241,
       columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeSvg.Circle, {
@@ -253,7 +213,7 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 276,
+      lineNumber: 242,
       columnNumber: 13
     }
   }), _react["default"].createElement(_reactNativeSvg.Circle, {
@@ -264,7 +224,7 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 277,
+      lineNumber: 243,
       columnNumber: 13
     }
   }), _react["default"].createElement(_reactNativeSvg.Circle, {
@@ -275,7 +235,7 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 278,
+      lineNumber: 244,
       columnNumber: 13
     }
   }), _react["default"].createElement(_reactNativeSvg.Circle, {
@@ -286,34 +246,34 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 279,
+      lineNumber: 245,
       columnNumber: 13
     }
   }), _react["default"].createElement(_reactNativeSvg.Circle, {
     cx: x1,
     cy: y1,
-    fill: alignmentLeft ? fill : stroke,
+    fill: alignmentLeft ? fill : white,
     r: radius,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 280,
+      lineNumber: 246,
       columnNumber: 13
     }
   }), _react["default"].createElement(_reactNativeSvg.Circle, {
     cx: x2,
     cy: y2,
-    fill: alignmentLeft ? fill : stroke,
+    fill: alignmentLeft ? fill : white,
     r: radius * 2,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 281,
+      lineNumber: 247,
       columnNumber: 13
     }
   })), _react["default"].createElement(_reactNative.View, {
     style: [styles.reactionBubbleBackground, {
-      backgroundColor: alignmentLeft ? fill : stroke,
+      backgroundColor: alignmentLeft ? fill : white,
       borderColor: fill,
       borderRadius: reactionSize,
       borderWidth: strokeSize,
@@ -324,7 +284,7 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 283,
+      lineNumber: 249,
       columnNumber: 11
     }
   }), _react["default"].createElement(_reactNative.View, {
@@ -332,30 +292,30 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 298,
+      lineNumber: 264,
       columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeSvg["default"], {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 299,
+      lineNumber: 265,
       columnNumber: 13
     }
   }, _react["default"].createElement(_reactNativeSvg.Circle, {
     cx: x2,
     cy: y2,
-    fill: alignmentLeft ? fill : stroke,
+    fill: alignmentLeft ? fill : white,
     r: radius * 2,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 300,
+      lineNumber: 266,
       columnNumber: 15
     }
   }))), _react["default"].createElement(_reactNative.View, {
     style: [styles.reactionBubble, {
-      backgroundColor: alignmentLeft ? fill : stroke,
+      backgroundColor: alignmentLeft ? fill : white,
       borderRadius: reactionSize - strokeSize * 2,
       height: reactionSize - strokeSize * 2,
       left: left + strokeSize,
@@ -365,7 +325,7 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 303,
+      lineNumber: 269,
       columnNumber: 11
     }
   }, reactions.map(function (reaction) {
@@ -379,7 +339,7 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 318,
+        lineNumber: 284,
         columnNumber: 15
       }
     });
@@ -387,12 +347,20 @@ var ReactionListWithContext = function ReactionListWithContext(props) {
 };
 
 var areEqual = function areEqual(prevProps, nextProps) {
-  var prevMessageContentWidth = prevProps.messageContentWidth,
-      prevReactions = prevProps.reactions;
-  var nextMessageContentWidth = nextProps.messageContentWidth,
-      nextReactions = nextProps.reactions;
+  var prevMessage = prevProps.message,
+      prevMessageContentWidth = prevProps.messageContentWidth,
+      prevReactions = prevProps.reactions,
+      prevTargetedMessage = prevProps.targetedMessage;
+  var nextMessage = nextProps.message,
+      nextMessageContentWidth = nextProps.messageContentWidth,
+      nextReactions = nextProps.reactions,
+      nextTargetedMessage = nextProps.targetedMessage;
   var messageContentWidthEqual = prevMessageContentWidth === nextMessageContentWidth;
   if (!messageContentWidthEqual) return false;
+  var messagePinnedEqual = prevMessage.pinned === nextMessage.pinned;
+  if (!messagePinnedEqual) return false;
+  var targetedMessageEqual = prevTargetedMessage === nextTargetedMessage;
+  if (!targetedMessageEqual) return false;
   var reactionsEqual = prevReactions.length === nextReactions.length && prevReactions.every(function (latestReaction, index) {
     return nextReactions[index].own === latestReaction.own && nextReactions[index].type === latestReaction.type;
   });
@@ -405,6 +373,7 @@ var MemoizedReactionList = _react["default"].memo(ReactionListWithContext, areEq
 var ReactionList = function ReactionList(props) {
   var _useMessageContext = (0, _MessageContext.useMessageContext)(),
       alignment = _useMessageContext.alignment,
+      message = _useMessageContext.message,
       onLongPress = _useMessageContext.onLongPress,
       onPress = _useMessageContext.onPress,
       onPressIn = _useMessageContext.onPressIn,
@@ -413,22 +382,25 @@ var ReactionList = function ReactionList(props) {
       showMessageOverlay = _useMessageContext.showMessageOverlay;
 
   var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
-      supportedReactions = _useMessagesContext.supportedReactions;
+      supportedReactions = _useMessagesContext.supportedReactions,
+      targetedMessage = _useMessagesContext.targetedMessage;
 
   return _react["default"].createElement(MemoizedReactionList, (0, _extends2["default"])({
     alignment: alignment,
+    message: message,
     onLongPress: onLongPress,
     onPress: onPress,
     onPressIn: onPressIn,
     preventPress: preventPress,
     reactions: reactions,
     showMessageOverlay: showMessageOverlay,
-    supportedReactions: supportedReactions
+    supportedReactions: supportedReactions,
+    targetedMessage: targetedMessage
   }, props, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 406,
+      lineNumber: 391,
       columnNumber: 5
     }
   }));

package/lib/commonjs/components/Message/MessageSimple/ReactionList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReactionList.tsx"],"names":["styles","StyleSheet","create","container","left","position","top","reactionBubble","alignItems","flexDirection","justifyContent","reactionBubbleBackground","Icon","pathFill","size","style","supportedReactions","type","ReactionIcon","find","reaction","Unknown","scale","showReaction","value","duration","animatedStyle","transform","ReactionListWithContext","props","alignment","propFill","fill","messageContentWidth","onLongPress","onPress","onPressIn","preventPress","propRadius","radius","reactions","propReactionSize","reactionSize","showMessageOverlay","propStroke","stroke","propStrokeSize","strokeSize","theme","colors","accent_blue","grey","grey_gainsboro","grey_whisper","white","messageSimple","avatarWrapper","leftAlign","spacer","reactionList","middleIcon","themeRadius","themeReactionSize","themeStrokeSize","screenPadding","opacity","width","supportedReactionTypes","map","supportedReaction","hasSupportedReactions","some","includes","showReactions","show","alignmentLeft","x1","Number","marginRight","x2","y1","y2","insideLeftBound","length","insideRightBound","event","emitter","defaultHandler","height","absoluteFill","backgroundColor","borderColor","borderRadius","borderWidth","own","areEqual","prevProps","nextProps","prevMessageContentWidth","prevReactions","nextMessageContentWidth","nextReactions","messageContentWidthEqual","reactionsEqual","every","latestReaction","index","MemoizedReactionList","React","memo","ReactionList"],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react';\nimport { StyleSheet, TouchableOpacity, useWindowDimensions, View, ViewStyle } from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withDelay,\n  withSequence,\n  withTiming,\n} from 'react-native-reanimated';\nimport Svg, { Circle } from 'react-native-svg';\n\nimport {\n  MessageContextValue,\n  Reactions,\n  useMessageContext,\n} from '../../../contexts/messageContext/MessageContext';\nimport { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\n\nimport { Unknown } from '../../../icons/Unknown';\n\nimport type { IconProps } from '../../../icons/utils/base';\nimport type {\n  DefaultAttachmentType,\n  DefaultChannelType,\n  DefaultCommandType,\n  DefaultEventType,\n  DefaultMessageType,\n  DefaultReactionType,\n  DefaultUserType,\n  UnknownType,\n} from '../../../types/types';\nimport type { ReactionData } from '../../../utils/utils';\n\nconst styles = StyleSheet.create({\n  container: {\n    left: 0,\n    position: 'absolute',\n    top: 0,\n  },\n  reactionBubble: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'space-evenly',\n    position: 'absolute',\n  },\n  reactionBubbleBackground: {\n    position: 'absolute',\n  },\n});\n\nexport type MessageReactions = {\n  reactions: Reactions;\n  supportedReactions?: ReactionData[];\n};\n\nconst Icon: React.FC<\n  Pick<IconProps, 'pathFill' | 'style'> & {\n    size: number;\n    supportedReactions: ReactionData[];\n    type: string;\n  }\n> = ({ pathFill, size, style, supportedReactions, type }) => {\n  const ReactionIcon =\n    supportedReactions.find((reaction) => reaction.type === type)?.Icon || Unknown;\n\n  const scale = useSharedValue(0);\n\n  const showReaction = () => {\n    'worklet';\n    scale.value = withSequence(\n      withDelay(250, withTiming(0.5, { duration: 100 })),\n      withTiming(1.5, { duration: 400 }),\n      withTiming(1, { duration: 500 }),\n    );\n  };\n\n  useEffect(() => {\n    showReaction();\n  }, []);\n\n  const animatedStyle = useAnimatedStyle<ViewStyle>(\n    () => ({\n      transform: [\n        {\n          scale: scale.value,\n        },\n      ],\n    }),\n    [],\n  );\n\n  return (\n    <Animated.View style={animatedStyle}>\n      <ReactionIcon height={size} pathFill={pathFill} style={style} width={size} />\n    </Animated.View>\n  );\n};\n\nexport type ReactionListPropsWithContext<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n> = Pick<\n  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,\n  | 'alignment'\n  | 'onLongPress'\n  | 'onPress'\n  | 'onPressIn'\n  | 'preventPress'\n  | 'reactions'\n  | 'showMessageOverlay'\n> & {\n  messageContentWidth: number;\n  supportedReactions: ReactionData[];\n  fill?: string;\n  radius?: number; // not recommended to change this\n  reactionSize?: number;\n  stroke?: string;\n  strokeSize?: number; // not recommended to change this\n};\n\nconst ReactionListWithContext = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>(\n  props: ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const {\n    alignment,\n    fill: propFill,\n    messageContentWidth,\n    onLongPress,\n    onPress,\n    onPressIn,\n    preventPress,\n    radius: propRadius,\n    reactions,\n    reactionSize: propReactionSize,\n    showMessageOverlay,\n    stroke: propStroke,\n    strokeSize: propStrokeSize,\n    supportedReactions,\n  } = props;\n\n  const {\n    theme: {\n      colors: { accent_blue, grey, grey_gainsboro, grey_whisper, white },\n      messageSimple: {\n        avatarWrapper: { leftAlign, spacer },\n        reactionList: {\n          container,\n          middleIcon,\n          radius: themeRadius,\n          reactionBubble,\n          reactionBubbleBackground,\n          reactionSize: themeReactionSize,\n          strokeSize: themeStrokeSize,\n        },\n      },\n      screenPadding,\n    },\n  } = useTheme();\n\n  const opacity = useSharedValue(0);\n\n  const width = useWindowDimensions().width;\n\n  const supportedReactionTypes = supportedReactions.map(\n    (supportedReaction) => supportedReaction.type,\n  );\n  const hasSupportedReactions = reactions.some((reaction) =>\n    supportedReactionTypes.includes(reaction.type),\n  );\n\n  const showReactions = (show: boolean) => {\n    'worklet';\n    opacity.value = show ? withDelay(250, withTiming(1, { duration: 500 })) : 0;\n  };\n\n  useEffect(() => {\n    showReactions(hasSupportedReactions && messageContentWidth !== 0);\n  }, [hasSupportedReactions, messageContentWidth]);\n\n  const animatedStyle = useAnimatedStyle<ViewStyle>(\n    () => ({\n      opacity: opacity.value,\n    }),\n    [],\n  );\n\n  if (!hasSupportedReactions || messageContentWidth === 0) {\n    return null;\n  }\n\n  const alignmentLeft = alignment === 'left';\n  const fill = propFill || alignmentLeft ? grey_gainsboro : grey_whisper;\n  const radius = propRadius || themeRadius;\n  const reactionSize = propReactionSize || themeReactionSize;\n  const stroke = propStroke || white;\n  const strokeSize = propStrokeSize || themeStrokeSize;\n\n  const x1 = alignmentLeft\n    ? messageContentWidth +\n      (Number(leftAlign.marginRight) || 0) +\n      (Number(spacer.width) || 0) -\n      radius * 0.5\n    : width - screenPadding * 2 - messageContentWidth;\n  const x2 = x1 + radius * 2 * (alignmentLeft ? 1 : -1);\n  const y1 = reactionSize + radius * 2;\n  const y2 = reactionSize - radius;\n\n  const insideLeftBound = x2 - (reactionSize * reactions.length) / 2 > screenPadding;\n  const insideRightBound =\n    x2 + strokeSize + (reactionSize * reactions.length) / 2 < width - screenPadding * 2;\n  const left =\n    reactions.length === 1\n      ? x1 + (alignmentLeft ? -radius : radius - reactionSize)\n      : !insideLeftBound\n      ? screenPadding\n      : !insideRightBound\n      ? width - screenPadding * 2 - reactionSize * reactions.length - strokeSize\n      : x2 - (reactionSize * reactions.length) / 2 - strokeSize;\n\n  return (\n    <TouchableOpacity\n      disabled={preventPress}\n      onLongPress={(event) => {\n        if (onLongPress) {\n          onLongPress({\n            emitter: 'reactionList',\n            event,\n          });\n        }\n      }}\n      onPress={(event) => {\n        if (onPress) {\n          onPress({\n            defaultHandler: () => showMessageOverlay(true),\n            emitter: 'reactionList',\n            event,\n          });\n        }\n      }}\n      onPressIn={(event) => {\n        if (onPressIn) {\n          onPressIn({\n            defaultHandler: () => showMessageOverlay(true),\n            emitter: 'reactionList',\n            event,\n          });\n        }\n      }}\n      style={[\n        styles.container,\n        {\n          height: reactionSize + radius * 5,\n          width,\n        },\n        container,\n      ]}\n      testID='reaction-list'\n    >\n      {reactions.length ? (\n        <Animated.View style={[StyleSheet.absoluteFill, animatedStyle]}>\n          <Svg>\n            <Circle cx={x1} cy={y1} fill={stroke} r={radius + strokeSize * 3} />\n            <Circle cx={x2} cy={y2} fill={stroke} r={radius * 2 + strokeSize * 3} />\n            <Circle cx={x1} cy={y1} fill={fill} r={radius + strokeSize} />\n            <Circle cx={x2} cy={y2} fill={fill} r={radius * 2 + strokeSize} />\n            <Circle cx={x1} cy={y1} fill={alignmentLeft ? fill : stroke} r={radius} />\n            <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : stroke} r={radius * 2} />\n          </Svg>\n          <View\n            style={[\n              styles.reactionBubbleBackground,\n              {\n                backgroundColor: alignmentLeft ? fill : stroke,\n                borderColor: fill,\n                borderRadius: reactionSize,\n                borderWidth: strokeSize,\n                height: reactionSize,\n                left,\n                width: reactionSize * reactions.length,\n              },\n              reactionBubbleBackground,\n            ]}\n          />\n          <View style={[StyleSheet.absoluteFill]}>\n            <Svg>\n              <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : stroke} r={radius * 2} />\n            </Svg>\n          </View>\n          <View\n            style={[\n              styles.reactionBubble,\n              {\n                backgroundColor: alignmentLeft ? fill : stroke,\n                borderRadius: reactionSize - strokeSize * 2,\n                height: reactionSize - strokeSize * 2,\n                left: left + strokeSize,\n                top: strokeSize,\n                width: reactionSize * reactions.length - strokeSize * 2,\n              },\n              reactionBubble,\n            ]}\n          >\n            {reactions.map((reaction) => (\n              <Icon\n                key={reaction.type}\n                pathFill={reaction.own ? accent_blue : grey}\n                size={reactionSize / 2}\n                style={middleIcon}\n                supportedReactions={supportedReactions}\n                type={reaction.type}\n              />\n            ))}\n          </View>\n        </Animated.View>\n      ) : null}\n    </TouchableOpacity>\n  );\n};\n\nconst areEqual = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>(\n  prevProps: ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n  nextProps: ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const { messageContentWidth: prevMessageContentWidth, reactions: prevReactions } = prevProps;\n  const { messageContentWidth: nextMessageContentWidth, reactions: nextReactions } = nextProps;\n\n  const messageContentWidthEqual = prevMessageContentWidth === nextMessageContentWidth;\n  if (!messageContentWidthEqual) return false;\n\n  const reactionsEqual =\n    prevReactions.length === nextReactions.length &&\n    prevReactions.every(\n      (latestReaction, index) =>\n        nextReactions[index].own === latestReaction.own &&\n        nextReactions[index].type === latestReaction.type,\n    );\n  if (!reactionsEqual) return false;\n\n  return true;\n};\n\nconst MemoizedReactionList = React.memo(\n  ReactionListWithContext,\n  areEqual,\n) as typeof ReactionListWithContext;\n\nexport type ReactionListProps<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n> = Partial<Omit<ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'messageContentWidth'>> &\n  Pick<ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'messageContentWidth'>;\n\n/**\n * ReactionList - A high level component which implements all the logic required for a message reaction list\n */\nexport const ReactionList = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>(\n  props: ReactionListProps<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const {\n    alignment,\n    onLongPress,\n    onPress,\n    onPressIn,\n    preventPress,\n    reactions,\n    showMessageOverlay,\n  } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();\n  const { supportedReactions } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();\n\n  return (\n    <MemoizedReactionList\n      {...{\n        alignment,\n        onLongPress,\n        onPress,\n        onPressIn,\n        preventPress,\n        reactions,\n        showMessageOverlay,\n        supportedReactions,\n      }}\n      {...props}\n    />\n  );\n};\n"]}
+{"version":3,"sources":["ReactionList.tsx"],"names":["styles","StyleSheet","create","container","left","position","top","reactionBubble","alignItems","flexDirection","justifyContent","reactionBubbleBackground","Icon","pathFill","size","style","supportedReactions","type","ReactionIcon","find","reaction","Unknown","ReactionListWithContext","props","alignment","propFill","fill","message","messageContentWidth","onLongPress","onPress","onPressIn","preventPress","propRadius","radius","reactions","propReactionSize","reactionSize","showMessageOverlay","propStroke","stroke","propStrokeSize","strokeSize","targetedMessage","theme","colors","accent_blue","grey","grey_gainsboro","grey_whisper","targetedMessageBackground","white","white_snow","messageSimple","avatarWrapper","leftAlign","spacer","reactionList","middleIcon","themeRadius","themeReactionSize","themeStrokeSize","screenPadding","width","supportedReactionTypes","map","supportedReaction","hasSupportedReactions","some","includes","alignmentLeft","highlighted","pinned","id","x1","Number","marginRight","x2","y1","y2","insideLeftBound","length","insideRightBound","event","emitter","defaultHandler","height","absoluteFill","backgroundColor","borderColor","borderRadius","borderWidth","own","areEqual","prevProps","nextProps","prevMessage","prevMessageContentWidth","prevReactions","prevTargetedMessage","nextMessage","nextMessageContentWidth","nextReactions","nextTargetedMessage","messageContentWidthEqual","messagePinnedEqual","targetedMessageEqual","reactionsEqual","every","latestReaction","index","MemoizedReactionList","React","memo","ReactionList"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet, TouchableOpacity, useWindowDimensions, View } from 'react-native';\n\nimport Svg, { Circle } from 'react-native-svg';\n\nimport {\n  MessageContextValue,\n  Reactions,\n  useMessageContext,\n} from '../../../contexts/messageContext/MessageContext';\nimport {\n  MessagesContextValue,\n  useMessagesContext,\n} from '../../../contexts/messagesContext/MessagesContext';\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\n\nimport { Unknown } from '../../../icons/Unknown';\n\nimport type { IconProps } from '../../../icons/utils/base';\nimport type {\n  DefaultAttachmentType,\n  DefaultChannelType,\n  DefaultCommandType,\n  DefaultEventType,\n  DefaultMessageType,\n  DefaultReactionType,\n  DefaultUserType,\n  UnknownType,\n} from '../../../types/types';\nimport type { ReactionData } from '../../../utils/utils';\n\nconst styles = StyleSheet.create({\n  container: {\n    left: 0,\n    position: 'absolute',\n    top: 0,\n  },\n  reactionBubble: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'space-evenly',\n    position: 'absolute',\n  },\n  reactionBubbleBackground: {\n    position: 'absolute',\n  },\n});\n\nexport type MessageReactions = {\n  reactions: Reactions;\n  supportedReactions?: ReactionData[];\n};\n\nconst Icon: React.FC<\n  Pick<IconProps, 'pathFill' | 'style'> & {\n    size: number;\n    supportedReactions: ReactionData[];\n    type: string;\n  }\n> = ({ pathFill, size, style, supportedReactions, type }) => {\n  const ReactionIcon =\n    supportedReactions.find((reaction) => reaction.type === type)?.Icon || Unknown;\n\n  return (\n    <View>\n      <ReactionIcon height={size} pathFill={pathFill} style={style} width={size} />\n    </View>\n  );\n};\n\nexport type ReactionListPropsWithContext<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n> = Pick<\n  MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,\n  | 'alignment'\n  | 'message'\n  | 'onLongPress'\n  | 'onPress'\n  | 'onPressIn'\n  | 'preventPress'\n  | 'reactions'\n  | 'showMessageOverlay'\n> &\n  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'targetedMessage'> & {\n    messageContentWidth: number;\n    supportedReactions: ReactionData[];\n    fill?: string;\n    radius?: number; // not recommended to change this\n    reactionSize?: number;\n    stroke?: string;\n    strokeSize?: number; // not recommended to change this\n  };\n\nconst ReactionListWithContext = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>(\n  props: ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const {\n    alignment,\n    fill: propFill,\n    message,\n    messageContentWidth,\n    onLongPress,\n    onPress,\n    onPressIn,\n    preventPress,\n    radius: propRadius,\n    reactions,\n    reactionSize: propReactionSize,\n    showMessageOverlay,\n    stroke: propStroke,\n    strokeSize: propStrokeSize,\n    supportedReactions,\n    targetedMessage,\n  } = props;\n\n  const {\n    theme: {\n      colors: {\n        accent_blue,\n        grey,\n        grey_gainsboro,\n        grey_whisper,\n        targetedMessageBackground,\n        white,\n        white_snow,\n      },\n      messageSimple: {\n        avatarWrapper: { leftAlign, spacer },\n        reactionList: {\n          container,\n          middleIcon,\n          radius: themeRadius,\n          reactionBubble,\n          reactionBubbleBackground,\n          reactionSize: themeReactionSize,\n          strokeSize: themeStrokeSize,\n        },\n      },\n      screenPadding,\n    },\n  } = useTheme();\n\n  const width = useWindowDimensions().width;\n\n  const supportedReactionTypes = supportedReactions.map(\n    (supportedReaction) => supportedReaction.type,\n  );\n  const hasSupportedReactions = reactions.some((reaction) =>\n    supportedReactionTypes.includes(reaction.type),\n  );\n\n  if (!hasSupportedReactions || messageContentWidth === 0) {\n    return null;\n  }\n\n  const alignmentLeft = alignment === 'left';\n  const fill = propFill || alignmentLeft ? grey_gainsboro : grey_whisper;\n  const radius = propRadius || themeRadius;\n  const reactionSize = propReactionSize || themeReactionSize;\n  const highlighted = message.pinned || targetedMessage === message.id;\n  const stroke = propStroke || (highlighted ? targetedMessageBackground : white_snow);\n  const strokeSize = propStrokeSize || themeStrokeSize;\n\n  const x1 = alignmentLeft\n    ? messageContentWidth +\n      (Number(leftAlign.marginRight) || 0) +\n      (Number(spacer.width) || 0) -\n      radius * 0.5\n    : width - screenPadding * 2 - messageContentWidth;\n  const x2 = x1 + radius * 2 * (alignmentLeft ? 1 : -1);\n  const y1 = reactionSize + radius * 2;\n  const y2 = reactionSize - radius;\n\n  const insideLeftBound = x2 - (reactionSize * reactions.length) / 2 > screenPadding;\n  const insideRightBound =\n    x2 + strokeSize + (reactionSize * reactions.length) / 2 < width - screenPadding * 2;\n  const left =\n    reactions.length === 1\n      ? x1 + (alignmentLeft ? -radius : radius - reactionSize)\n      : !insideLeftBound\n      ? screenPadding\n      : !insideRightBound\n      ? width - screenPadding * 2 - reactionSize * reactions.length - strokeSize\n      : x2 - (reactionSize * reactions.length) / 2 - strokeSize;\n\n  return (\n    <TouchableOpacity\n      disabled={preventPress}\n      onLongPress={(event) => {\n        if (onLongPress) {\n          onLongPress({\n            emitter: 'reactionList',\n            event,\n          });\n        }\n      }}\n      onPress={(event) => {\n        if (onPress) {\n          onPress({\n            defaultHandler: () => showMessageOverlay(true),\n            emitter: 'reactionList',\n            event,\n          });\n        }\n      }}\n      onPressIn={(event) => {\n        if (onPressIn) {\n          onPressIn({\n            defaultHandler: () => showMessageOverlay(true),\n            emitter: 'reactionList',\n            event,\n          });\n        }\n      }}\n      style={[\n        styles.container,\n        {\n          height: reactionSize + radius * 5,\n          width,\n        },\n        container,\n      ]}\n      testID='reaction-list'\n    >\n      {reactions.length ? (\n        <View style={[StyleSheet.absoluteFill]}>\n          <Svg>\n            <Circle cx={x1} cy={y1} fill={stroke} r={radius + strokeSize * 3} />\n            <Circle cx={x2} cy={y2} fill={stroke} r={radius * 2 + strokeSize * 3} />\n            <Circle cx={x1} cy={y1} fill={fill} r={radius + strokeSize} />\n            <Circle cx={x2} cy={y2} fill={fill} r={radius * 2 + strokeSize} />\n            <Circle cx={x1} cy={y1} fill={alignmentLeft ? fill : white} r={radius} />\n            <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />\n          </Svg>\n          <View\n            style={[\n              styles.reactionBubbleBackground,\n              {\n                backgroundColor: alignmentLeft ? fill : white,\n                borderColor: fill,\n                borderRadius: reactionSize,\n                borderWidth: strokeSize,\n                height: reactionSize,\n                left,\n                width: reactionSize * reactions.length,\n              },\n              reactionBubbleBackground,\n            ]}\n          />\n          <View style={[StyleSheet.absoluteFill]}>\n            <Svg>\n              <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />\n            </Svg>\n          </View>\n          <View\n            style={[\n              styles.reactionBubble,\n              {\n                backgroundColor: alignmentLeft ? fill : white,\n                borderRadius: reactionSize - strokeSize * 2,\n                height: reactionSize - strokeSize * 2,\n                left: left + strokeSize,\n                top: strokeSize,\n                width: reactionSize * reactions.length - strokeSize * 2,\n              },\n              reactionBubble,\n            ]}\n          >\n            {reactions.map((reaction) => (\n              <Icon\n                key={reaction.type}\n                pathFill={reaction.own ? accent_blue : grey}\n                size={reactionSize / 2}\n                style={middleIcon}\n                supportedReactions={supportedReactions}\n                type={reaction.type}\n              />\n            ))}\n          </View>\n        </View>\n      ) : null}\n    </TouchableOpacity>\n  );\n};\n\nconst areEqual = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>(\n  prevProps: ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n  nextProps: ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const {\n    message: prevMessage,\n    messageContentWidth: prevMessageContentWidth,\n    reactions: prevReactions,\n    targetedMessage: prevTargetedMessage,\n  } = prevProps;\n  const {\n    message: nextMessage,\n    messageContentWidth: nextMessageContentWidth,\n    reactions: nextReactions,\n    targetedMessage: nextTargetedMessage,\n  } = nextProps;\n\n  const messageContentWidthEqual = prevMessageContentWidth === nextMessageContentWidth;\n  if (!messageContentWidthEqual) return false;\n\n  const messagePinnedEqual = prevMessage.pinned === nextMessage.pinned;\n\n  if (!messagePinnedEqual) return false;\n\n  const targetedMessageEqual = prevTargetedMessage === nextTargetedMessage;\n\n  if (!targetedMessageEqual) return false;\n\n  const reactionsEqual =\n    prevReactions.length === nextReactions.length &&\n    prevReactions.every(\n      (latestReaction, index) =>\n        nextReactions[index].own === latestReaction.own &&\n        nextReactions[index].type === latestReaction.type,\n    );\n  if (!reactionsEqual) return false;\n\n  return true;\n};\n\nconst MemoizedReactionList = React.memo(\n  ReactionListWithContext,\n  areEqual,\n) as typeof ReactionListWithContext;\n\nexport type ReactionListProps<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n> = Partial<Omit<ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'messageContentWidth'>> &\n  Pick<ReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'messageContentWidth'>;\n\n/**\n * ReactionList - A high level component which implements all the logic required for a message reaction list\n */\nexport const ReactionList = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>(\n  props: ReactionListProps<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const {\n    alignment,\n    message,\n    onLongPress,\n    onPress,\n    onPressIn,\n    preventPress,\n    reactions,\n    showMessageOverlay,\n  } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();\n  const { supportedReactions, targetedMessage } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();\n\n  return (\n    <MemoizedReactionList\n      {...{\n        alignment,\n        message,\n        onLongPress,\n        onPress,\n        onPressIn,\n        preventPress,\n        reactions,\n        showMessageOverlay,\n        supportedReactions,\n        targetedMessage,\n      }}\n      {...props}\n    />\n  );\n};\n"]}

package/lib/commonjs/components/Message/MessageSimple/utils/renderText.js

@@ -76,6 +76,7 @@ var renderText = function renderText(params) {
       markdownStyles = params.markdownStyles,
       message = params.message,
       messageOverlay = params.messageOverlay,
+      messageTextNumberOfLines = params.messageTextNumberOfLines,
       onLinkParams = params.onLink,
       onLongPressParam = params.onLongPress,
       onlyEmojis = params.onlyEmojis,
@@ -159,7 +160,7 @@ var renderText = function renderText(params) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 193,
+        lineNumber: 196,
         columnNumber: 7
       }
     }, output(node.content, (0, _extends2["default"])({}, state, {
@@ -167,6 +168,21 @@ var renderText = function renderText(params) {
     })));
   };
 
+  var paragraphText = function paragraphText(node, output, _ref2) {
+    var state = (0, _extends2["default"])({}, _ref2);
+    return _react["default"].createElement(_reactNative.Text, {
+      key: state.key,
+      numberOfLines: messageTextNumberOfLines,
+      style: styles.paragraph,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 209,
+        columnNumber: 5
+      }
+    }, output(node.content, state));
+  };
+
   var mentionedUsers = Array.isArray(mentioned_users) ? mentioned_users.reduce(function (acc, cur) {
     var userName = cur.name || cur.id || '';
 
@@ -182,8 +198,8 @@ var renderText = function renderText(params) {
     return regEx.exec(source);
   };
 
-  var mentionsReact = function mentionsReact(node, output, _ref2) {
-    var state = (0, _extends2["default"])({}, _ref2);
+  var mentionsReact = function mentionsReact(node, output, _ref3) {
+    var state = (0, _extends2["default"])({}, _ref3);
 
     var onPress = function onPress(event) {
       if (!preventPress && onPressParam) {
@@ -211,7 +227,7 @@ var renderText = function renderText(params) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 238,
+        lineNumber: 247,
         columnNumber: 7
       }
     }, Array.isArray(node.content) ? node.content[0].content || '' : output(node.content, state));
@@ -223,8 +239,8 @@ var renderText = function renderText(params) {
   };
 
   var customListAtLevel = function customListAtLevel(level) {
-    return function (node, output, _ref3) {
-      var state = (0, _extends2["default"])({}, _ref3);
+    return function (node, output, _ref4) {
+      var state = (0, _extends2["default"])({}, _ref4);
       var items = node.items.map(function (item, index) {
         var withinList = item.length > 1 && item[1].type === 'list';
         var content = output(item, (0, _extends2["default"])({}, state, {
@@ -237,7 +253,7 @@ var renderText = function renderText(params) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 267,
+            lineNumber: 276,
             columnNumber: 11
           }
         }, _react["default"].createElement(_reactNative.Text, {
@@ -245,7 +261,7 @@ var renderText = function renderText(params) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 268,
+            lineNumber: 277,
             columnNumber: 13
           }
         }, node.ordered ? node.start + index + ". " : "\u2022"), _react["default"].createElement(_reactNative.Text, {
@@ -255,7 +271,7 @@ var renderText = function renderText(params) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 271,
+            lineNumber: 280,
             columnNumber: 13
           }
         }, content));
@@ -267,7 +283,7 @@ var renderText = function renderText(params) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 280,
+          lineNumber: 289,
           columnNumber: 9
         }
       }, items);
@@ -281,6 +297,9 @@ var renderText = function renderText(params) {
     list: {
       react: customListAtLevel('top')
     },
+    paragraph: messageTextNumberOfLines ? {
+      react: paragraphText
+    } : {},
     reflink: {
       match: function match() {
         return null;
@@ -305,7 +324,7 @@ var renderText = function renderText(params) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 305,
+      lineNumber: 316,
       columnNumber: 5
     }
   }, newText);