@planningcenter/chat-react-native 4.5.0-rc.0 → 4.5.0-rc.2

package/build/components/conversation/message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAoB9C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAkB7C;;GAEG;AACH,UAAU,YAAa,SAAQ,eAAe;IAC5C,4BAA4B,EAAE,OAAO,CAAA;IACrC,oBAAoB,EAAE,OAAO,CAAA;IAC7B,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,eAAO,MAAM,OAAO,8KASjB,YAAY,6CAsSb,CAAA"}
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAoB9C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAmB7C;;GAEG;AACH,UAAU,YAAa,SAAQ,eAAe;IAC5C,4BAA4B,EAAE,OAAO,CAAA;IACrC,oBAAoB,EAAE,OAAO,CAAA;IAC7B,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,eAAO,MAAM,OAAO,8KASjB,YAAY,6CAySb,CAAA"}

package/build/components/conversation/message.js

@@ -15,7 +15,7 @@ import { pluralize } from '../../utils';
 import { isNewMessage } from '../../utils/cache/messages_cache';
 import { stripEmptyTextCharacters } from '../../utils/message_text';
 import { Haptic } from '../../utils/native_adapters';
-import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL, MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH, platformFontWeightMedium } from '../../utils/styles';
+import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL, MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH, MESSAGE_BACKGROUND_OUTSET, platformFontWeightMedium } from '../../utils/styles';
 import { ComponentErrorBoundary } from '../page/component_error_boundary';
 import { MessageAttachments } from './message_attachments';
 import { MessageMarkdown } from './message_markdown';
@@ -27,7 +27,7 @@ import { TheirReplyConnector, MyReplyConnector, AVATAR_CONNECTOR_SPACING } from
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const Message = memo(function MessageRow(t0) {
-  const $ = _c(73);
+  const $ = _c(84);
   const {
     canDeleteNonAuthoredMessages,
     conversationDisabled,
@@ -91,6 +91,7 @@ export const Message = memo(function MessageRow(t0) {
   const replyRootAuthorName = replyToReplyRootMessage ? replyRoot?.author.name : author.name;
   const messageText = isDeletedReplyRootMessage ? "Message deleted" : text;
   const messageBottomMargin = message.lastInGroup || message.nextIsReplyShadowMessage ? 16 : hasReactions || showMessageMeta || showReplyCountButton ? 8 : 4;
+  const spaceBelowPressable = messageBottomMargin - MESSAGE_BACKGROUND_OUTSET;
   const messageIsReplyLabel = replyToReplyRootMessage ? "Reply" : "";
   const attachmentLabel = some(attachments) ? pluralize(attachments.length, "attachment") : "";
   const replyCountLabel = isReplyRootMessage ? replyCountText : "";
@@ -206,38 +207,78 @@ export const Message = memo(function MessageRow(t0) {
   };
   const T0 = Pressable;
   const t6 = `message-${message.id}`;
-  const t7 = isDeleting ? undefined : handleMessageLongPress;
-  const t8 = isDeleting ? undefined : handleMessagePress;
-  const t9 = isDeleting ? undefined : handleMessagePressIn;
-  const t10 = isDeleting ? undefined : handleMessagePressOut;
-  let t11;
-  if ($[8] !== colors.androidRippleNeutral) {
-    t11 = {
+  let t7;
+  if ($[8] !== spaceBelowPressable) {
+    t7 = {
+      marginBottom: spaceBelowPressable
+    };
+    $[8] = spaceBelowPressable;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  let t8;
+  if ($[10] !== styles.pressable || $[11] !== t7) {
+    t8 = [styles.pressable, t7];
+    $[10] = styles.pressable;
+    $[11] = t7;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  const t9 = isDeleting ? undefined : handleMessageLongPress;
+  const t10 = isDeleting ? undefined : handleMessagePress;
+  const t11 = isDeleting ? undefined : handleMessagePressIn;
+  const t12 = isDeleting ? undefined : handleMessagePressOut;
+  let t13;
+  if ($[13] !== colors.androidRippleNeutral) {
+    t13 = {
       color: colors.androidRippleNeutral,
       borderless: false,
       foreground: true
     };
-    $[8] = colors.androidRippleNeutral;
-    $[9] = t11;
+    $[13] = colors.androidRippleNeutral;
+    $[14] = t13;
+  } else {
+    t13 = $[14];
+  }
+  const t14 = "button";
+  const t15 = "Long press to view message actions like reacting and copying.";
+  const t16 = isReplyRootMessage ? accessibilityActions : undefined;
+  const t17 = isReplyRootMessage ? handleAccessibilityAction : undefined;
+  const t18 = isDeletedReplyRootMessage || isDeleting;
+  let t19;
+  if ($[15] !== animatedBackgroundColor) {
+    t19 = /*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, animatedBackgroundColor]
+    });
+    $[15] = animatedBackgroundColor;
+    $[16] = t19;
+  } else {
+    t19 = $[16];
+  }
+  const T1 = View;
+  const t20 = -spaceBelowPressable;
+  let t21;
+  if ($[17] !== t20) {
+    t21 = {
+      marginBottom: t20
+    };
+    $[17] = t20;
+    $[18] = t21;
   } else {
-    t11 = $[9];
+    t21 = $[18];
   }
-  const t12 = "button";
-  const t13 = "Long press to view message actions like reacting and copying.";
-  const t14 = isReplyRootMessage ? accessibilityActions : undefined;
-  const t15 = isReplyRootMessage ? handleAccessibilityAction : undefined;
-  const t16 = isDeletedReplyRootMessage || isDeleting;
-  const t17 = Animated;
-  let t18;
-  if ($[10] !== animatedBackgroundColor || $[11] !== styles.message) {
-    t18 = [styles.message, animatedBackgroundColor];
-    $[10] = animatedBackgroundColor;
-    $[11] = styles.message;
-    $[12] = t18;
+  let t22;
+  if ($[19] !== styles.message || $[20] !== t21) {
+    t22 = [styles.message, t21];
+    $[19] = styles.message;
+    $[20] = t21;
+    $[21] = t22;
   } else {
-    t18 = $[12];
+    t22 = $[21];
   }
-  const t19 = !message.mine && /*#__PURE__*/_jsxs(View, {
+  const t23 = !message.mine && /*#__PURE__*/_jsxs(View, {
     children: [renderAuthor ? /*#__PURE__*/_jsx(Avatar, {
       size: "md",
       sourceUri: author.avatar,
@@ -253,39 +294,39 @@ export const Message = memo(function MessageRow(t0) {
       messageBubbleHeight: messageBubbleHeight
     })]
   });
-  const T1 = View;
-  let t20;
-  if ($[13] !== messageBottomMargin) {
-    t20 = {
+  const T2 = View;
+  let t24;
+  if ($[22] !== messageBottomMargin) {
+    t24 = {
       marginBottom: messageBottomMargin
     };
-    $[13] = messageBottomMargin;
-    $[14] = t20;
+    $[22] = messageBottomMargin;
+    $[23] = t24;
   } else {
-    t20 = $[14];
+    t24 = $[23];
   }
-  let t21;
-  if ($[15] !== styles.messageContent || $[16] !== t20) {
-    t21 = [styles.messageContent, t20];
-    $[15] = styles.messageContent;
-    $[16] = t20;
-    $[17] = t21;
+  let t25;
+  if ($[24] !== styles.messageContent || $[25] !== t24) {
+    t25 = [styles.messageContent, t24];
+    $[24] = styles.messageContent;
+    $[25] = t24;
+    $[26] = t25;
   } else {
-    t21 = $[17];
+    t25 = $[26];
   }
-  const t22 = renderAuthor && !isDeletedReplyRootMessage && /*#__PURE__*/_jsx(Text, {
+  const t26 = renderAuthor && !isDeletedReplyRootMessage && /*#__PURE__*/_jsx(Text, {
     variant: "footnote",
     style: styles.authorName,
     children: author.name
   });
-  let t23;
-  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-    t23 = e => setMessageBubbleHeight(e.nativeEvent.layout.height);
-    $[18] = t23;
+  let t27;
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+    t27 = e => setMessageBubbleHeight(e.nativeEvent.layout.height);
+    $[27] = t27;
   } else {
-    t23 = $[18];
+    t27 = $[27];
   }
-  const t24 = isDeletedReplyRootMessage ? /*#__PURE__*/_jsx(View, {
+  const t28 = isDeletedReplyRootMessage ? /*#__PURE__*/_jsx(View, {
     style: styles.messageText,
     children: /*#__PURE__*/_jsx(Text, {
       style: styles.replyRootDeletedText,
@@ -306,20 +347,20 @@ export const Message = memo(function MessageRow(t0) {
       })
     })]
   });
-  let t25;
-  if ($[19] !== styles.messageBubble || $[20] !== t24) {
-    t25 = /*#__PURE__*/_jsx(View, {
+  let t29;
+  if ($[28] !== styles.messageBubble || $[29] !== t28) {
+    t29 = /*#__PURE__*/_jsx(View, {
       style: styles.messageBubble,
-      onLayout: t23,
-      children: t24
+      onLayout: t27,
+      children: t28
     });
-    $[19] = styles.messageBubble;
-    $[20] = t24;
-    $[21] = t25;
+    $[28] = styles.messageBubble;
+    $[29] = t28;
+    $[30] = t29;
   } else {
-    t25 = $[21];
+    t29 = $[30];
   }
-  const t26 = showReplyCountButton && /*#__PURE__*/_jsx(TextButton, {
+  const t30 = showReplyCountButton && /*#__PURE__*/_jsx(TextButton, {
     variant: "footnote",
     onPress: handleNavigateToReplyPress,
     style: styles.messageReplyCount,
@@ -327,7 +368,7 @@ export const Message = memo(function MessageRow(t0) {
     accessibilityRole: "link",
     children: replyCountText
   });
-  const t27 = hasReactions && !isDeletedReplyRootMessage && /*#__PURE__*/_jsx(View, {
+  const t31 = hasReactions && !isDeletedReplyRootMessage && /*#__PURE__*/_jsx(View, {
     style: styles.messageReactions,
     children: reactionCounts.map(reaction_0 => /*#__PURE__*/_jsx(MessageReaction, {
       reaction: reaction_0,
@@ -337,9 +378,9 @@ export const Message = memo(function MessageRow(t0) {
       disabled: conversationDisabled
     }, reaction_0.value))
   });
-  let t28;
-  if ($[22] !== colors.iconColorDefaultSecondary || $[23] !== error || $[24] !== handleRetry || $[25] !== isDeletedReplyRootMessage || $[26] !== isPersisted || $[27] !== messagePendingLabel || $[28] !== pending || $[29] !== readByOthers || $[30] !== retryFailedSaveMutation || $[31] !== showMessageMeta || $[32] !== showReadReceipts || $[33] !== styles.editedText || $[34] !== styles.errorContainer || $[35] !== styles.errorIcon || $[36] !== styles.errorText || $[37] !== styles.messageMeta || $[38] !== styles.pendingIndicatorContainer || $[39] !== temporarilyHidePendingState || $[40] !== timestamp || $[41] !== wasEdited) {
-    t28 = showMessageMeta && !isDeletedReplyRootMessage && /*#__PURE__*/_jsxs(View, {
+  let t32;
+  if ($[31] !== colors.iconColorDefaultSecondary || $[32] !== error || $[33] !== handleRetry || $[34] !== isDeletedReplyRootMessage || $[35] !== isPersisted || $[36] !== messagePendingLabel || $[37] !== pending || $[38] !== readByOthers || $[39] !== retryFailedSaveMutation || $[40] !== showMessageMeta || $[41] !== showReadReceipts || $[42] !== styles.editedText || $[43] !== styles.errorContainer || $[44] !== styles.errorIcon || $[45] !== styles.errorText || $[46] !== styles.messageMeta || $[47] !== styles.pendingIndicatorContainer || $[48] !== temporarilyHidePendingState || $[49] !== timestamp || $[50] !== wasEdited) {
+    t32 = showMessageMeta && !isDeletedReplyRootMessage && /*#__PURE__*/_jsxs(View, {
       style: styles.messageMeta,
       children: [showReadReceipts && /*#__PURE__*/_jsx(MessageReadReceipts, {
         read: readByOthers
@@ -384,108 +425,111 @@ export const Message = memo(function MessageRow(t0) {
         })]
       })]
     });
-    $[22] = colors.iconColorDefaultSecondary;
-    $[23] = error;
-    $[24] = handleRetry;
-    $[25] = isDeletedReplyRootMessage;
-    $[26] = isPersisted;
-    $[27] = messagePendingLabel;
-    $[28] = pending;
-    $[29] = readByOthers;
-    $[30] = retryFailedSaveMutation;
-    $[31] = showMessageMeta;
-    $[32] = showReadReceipts;
-    $[33] = styles.editedText;
-    $[34] = styles.errorContainer;
-    $[35] = styles.errorIcon;
-    $[36] = styles.errorText;
-    $[37] = styles.messageMeta;
-    $[38] = styles.pendingIndicatorContainer;
-    $[39] = temporarilyHidePendingState;
-    $[40] = timestamp;
-    $[41] = wasEdited;
-    $[42] = t28;
+    $[31] = colors.iconColorDefaultSecondary;
+    $[32] = error;
+    $[33] = handleRetry;
+    $[34] = isDeletedReplyRootMessage;
+    $[35] = isPersisted;
+    $[36] = messagePendingLabel;
+    $[37] = pending;
+    $[38] = readByOthers;
+    $[39] = retryFailedSaveMutation;
+    $[40] = showMessageMeta;
+    $[41] = showReadReceipts;
+    $[42] = styles.editedText;
+    $[43] = styles.errorContainer;
+    $[44] = styles.errorIcon;
+    $[45] = styles.errorText;
+    $[46] = styles.messageMeta;
+    $[47] = styles.pendingIndicatorContainer;
+    $[48] = temporarilyHidePendingState;
+    $[49] = timestamp;
+    $[50] = wasEdited;
+    $[51] = t32;
   } else {
-    t28 = $[42];
+    t32 = $[51];
   }
-  let t29;
-  if ($[43] !== T1 || $[44] !== t21 || $[45] !== t22 || $[46] !== t25 || $[47] !== t26 || $[48] !== t27 || $[49] !== t28) {
-    t29 = /*#__PURE__*/_jsxs(T1, {
-      style: t21,
-      children: [t22, t25, t26, t27, t28]
+  let t33;
+  if ($[52] !== T2 || $[53] !== t25 || $[54] !== t26 || $[55] !== t29 || $[56] !== t30 || $[57] !== t31 || $[58] !== t32) {
+    t33 = /*#__PURE__*/_jsxs(T2, {
+      style: t25,
+      children: [t26, t29, t30, t31, t32]
     });
-    $[43] = T1;
-    $[44] = t21;
-    $[45] = t22;
-    $[46] = t25;
-    $[47] = t26;
-    $[48] = t27;
-    $[49] = t28;
-    $[50] = t29;
+    $[52] = T2;
+    $[53] = t25;
+    $[54] = t26;
+    $[55] = t29;
+    $[56] = t30;
+    $[57] = t31;
+    $[58] = t32;
+    $[59] = t33;
   } else {
-    t29 = $[50];
+    t33 = $[59];
   }
-  let t30;
-  if ($[51] !== message || $[52] !== messageBubbleHeight) {
-    t30 = message.mine && /*#__PURE__*/_jsx(MyReplyConnector, {
+  let t34;
+  if ($[60] !== message || $[61] !== messageBubbleHeight) {
+    t34 = message.mine && /*#__PURE__*/_jsx(MyReplyConnector, {
       message: message,
       messageBubbleHeight: messageBubbleHeight
     });
-    $[51] = message;
-    $[52] = messageBubbleHeight;
-    $[53] = t30;
+    $[60] = message;
+    $[61] = messageBubbleHeight;
+    $[62] = t34;
   } else {
-    t30 = $[53];
+    t34 = $[62];
   }
-  let t31;
-  if ($[54] !== t17.View || $[55] !== t18 || $[56] !== t19 || $[57] !== t29 || $[58] !== t30) {
-    t31 = /*#__PURE__*/_jsxs(t17.View, {
-      style: t18,
-      children: [t19, t29, t30]
+  let t35;
+  if ($[63] !== T1 || $[64] !== t22 || $[65] !== t23 || $[66] !== t33 || $[67] !== t34) {
+    t35 = /*#__PURE__*/_jsxs(T1, {
+      style: t22,
+      children: [t23, t33, t34]
     });
-    $[54] = t17.View;
-    $[55] = t18;
-    $[56] = t19;
-    $[57] = t29;
-    $[58] = t30;
-    $[59] = t31;
+    $[63] = T1;
+    $[64] = t22;
+    $[65] = t23;
+    $[66] = t33;
+    $[67] = t34;
+    $[68] = t35;
   } else {
-    t31 = $[59];
+    t35 = $[68];
   }
-  let t32;
-  if ($[60] !== T0 || $[61] !== accessibilityLabel || $[62] !== t10 || $[63] !== t11 || $[64] !== t14 || $[65] !== t15 || $[66] !== t16 || $[67] !== t31 || $[68] !== t6 || $[69] !== t7 || $[70] !== t8 || $[71] !== t9) {
-    t32 = /*#__PURE__*/_jsx(T0, {
+  let t36;
+  if ($[69] !== T0 || $[70] !== accessibilityLabel || $[71] !== t10 || $[72] !== t11 || $[73] !== t12 || $[74] !== t13 || $[75] !== t16 || $[76] !== t17 || $[77] !== t18 || $[78] !== t19 || $[79] !== t35 || $[80] !== t6 || $[81] !== t8 || $[82] !== t9) {
+    t36 = /*#__PURE__*/_jsxs(T0, {
       testID: t6,
-      onLongPress: t7,
-      onPress: t8,
-      onPressIn: t9,
-      onPressOut: t10,
-      android_ripple: t11,
-      accessibilityRole: t12,
+      style: t8,
+      onLongPress: t9,
+      onPress: t10,
+      onPressIn: t11,
+      onPressOut: t12,
+      android_ripple: t13,
+      accessibilityRole: t14,
       accessibilityLabel: accessibilityLabel,
-      accessibilityHint: t13,
-      accessibilityActions: t14,
-      onAccessibilityAction: t15,
-      disabled: t16,
-      children: t31
+      accessibilityHint: t15,
+      accessibilityActions: t16,
+      onAccessibilityAction: t17,
+      disabled: t18,
+      children: [t19, t35]
     });
-    $[60] = T0;
-    $[61] = accessibilityLabel;
-    $[62] = t10;
-    $[63] = t11;
-    $[64] = t14;
-    $[65] = t15;
-    $[66] = t16;
-    $[67] = t31;
-    $[68] = t6;
-    $[69] = t7;
-    $[70] = t8;
-    $[71] = t9;
-    $[72] = t32;
+    $[69] = T0;
+    $[70] = accessibilityLabel;
+    $[71] = t10;
+    $[72] = t11;
+    $[73] = t12;
+    $[74] = t13;
+    $[75] = t16;
+    $[76] = t17;
+    $[77] = t18;
+    $[78] = t19;
+    $[79] = t35;
+    $[80] = t6;
+    $[81] = t8;
+    $[82] = t9;
+    $[83] = t36;
   } else {
-    t32 = $[72];
+    t36 = $[83];
   }
-  return t32;
+  return t36;
 });
 const useMessageStyles = (mine, isDeleting) => {
   const $ = _c(8);
@@ -501,6 +545,10 @@ const useMessageStyles = (mine, isDeleting) => {
   let t0;
   if ($[0] !== colors.statusErrorIcon || $[1] !== colors.statusErrorText || $[2] !== colors.textColorDefaultSecondary || $[3] !== isDeleting || $[4] !== messageBubbleBackgroundColor || $[5] !== mine || $[6] !== tabletWidth) {
     t0 = StyleSheet.create({
+      pressable: {
+        marginTop: -MESSAGE_BACKGROUND_OUTSET,
+        paddingTop: MESSAGE_BACKGROUND_OUTSET
+      },
       message: {
         gap: 8,
         flexDirection: mine ? "row-reverse" : "row",