@planningcenter/chat-react-native 4.4.0-rc.0 → 4.4.0-rc.1

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

@@ -8,7 +8,9 @@ interface MessageProps extends MessageResource {
     conversation_id: number;
     readByOthers?: boolean;
     inReplyScreen?: boolean;
+    highlighted?: boolean;
+    onHighlightShown?: () => void;
 }
-export declare const Message: React.MemoExoticComponent<({ canDeleteNonAuthoredMessages, conversation_id, readByOthers, inReplyScreen, ...message }: MessageProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Message: React.MemoExoticComponent<({ canDeleteNonAuthoredMessages, conversation_id, readByOthers, inReplyScreen, highlighted, onHighlightShown, ...message }: MessageProps) => import("react/jsx-runtime").JSX.Element>;
 export {};
 //# sourceMappingURL=message.d.ts.map

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,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,eAAO,MAAM,OAAO,yHAMjB,YAAY,6CA8Rb,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;AAkB7C;;GAEG;AACH,UAAU,YAAa,SAAQ,eAAe;IAC5C,4BAA4B,EAAE,OAAO,CAAA;IACrC,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,wJAQjB,YAAY,6CAqSb,CAAA"}

package/build/components/conversation/message.js

@@ -27,14 +27,17 @@ 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(68);
+  const $ = _c(73);
   const {
     canDeleteNonAuthoredMessages,
     conversation_id,
     readByOthers,
     inReplyScreen,
+    highlighted: t1,
+    onHighlightShown,
     ...message
   } = t0;
+  const highlighted = t1 === undefined ? false : t1;
   const {
     reactionCounts,
     pending,
@@ -60,6 +63,7 @@ export const Message = memo(function MessageRow(t0) {
   const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0);
   const {
     animatedBackgroundColor,
+    flash,
     handleMessagePressIn,
     handleMessagePressOut
   } = useAnimatedMessageBackgroundColor();
@@ -91,6 +95,27 @@ export const Message = memo(function MessageRow(t0) {
   const replyCountLabel = isReplyRootMessage ? replyCountText : "";
   const saveStatusLabel = error ? `Failed to ${isPersisted ? "edit" : "send"}` : pending ? messagePendingLabel : "";
   const accessibilityLabel = `${author?.name || ""} ${messageIsReplyLabel} ${attachmentLabel} ${messageText || ""} ${saveStatusLabel} ${timestamp} ${replyCountLabel}`;
+  let t2;
+  let t3;
+  if ($[0] !== flash || $[1] !== highlighted || $[2] !== onHighlightShown) {
+    t2 = () => {
+      if (!highlighted) {
+        return;
+      }
+      flash();
+      onHighlightShown?.();
+    };
+    t3 = [highlighted, flash, onHighlightShown];
+    $[0] = flash;
+    $[1] = highlighted;
+    $[2] = onHighlightShown;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t2 = $[3];
+    t3 = $[4];
+  }
+  useEffect(t2, t3);
   useEffect(() => {
     if (pending) {
       const timer = setTimeout(() => {
@@ -112,17 +137,17 @@ export const Message = memo(function MessageRow(t0) {
       });
     }
   };
-  let t1;
-  if ($[0] !== showMessageMetaToggle) {
-    t1 = () => {
+  let t4;
+  if ($[5] !== showMessageMetaToggle) {
+    t4 = () => {
       setShowMessageMetaToggle(!showMessageMetaToggle);
     };
-    $[0] = showMessageMetaToggle;
-    $[1] = t1;
+    $[5] = showMessageMetaToggle;
+    $[6] = t4;
   } else {
-    t1 = $[1];
+    t4 = $[6];
   }
-  const handleMessagePress = t1;
+  const handleMessagePress = t4;
   const handleMessageLongPress = () => {
     if (!isPersisted) {
       return;
@@ -162,56 +187,56 @@ export const Message = memo(function MessageRow(t0) {
       reply_root_author_name: author.name
     });
   };
-  let t2;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = [{
+  let t5;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = [{
       name: "navigateToReplies",
       label: "Navigate to replies"
     }];
-    $[2] = t2;
+    $[7] = t5;
   } else {
-    t2 = $[2];
+    t5 = $[7];
   }
-  const accessibilityActions = t2;
+  const accessibilityActions = t5;
   const handleAccessibilityAction = event => {
     if (event.nativeEvent.actionName === "navigateToReplies") {
       handleNavigateToReplyPress();
     }
   };
   const T0 = Pressable;
-  const t3 = `message-${message.id}`;
-  const t4 = isDeleting ? undefined : handleMessageLongPress;
-  const t5 = isDeleting ? undefined : handleMessagePress;
-  const t6 = isDeleting ? undefined : handleMessagePressIn;
-  const t7 = isDeleting ? undefined : handleMessagePressOut;
-  let t8;
-  if ($[3] !== colors.androidRippleNeutral) {
-    t8 = {
+  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 = {
       color: colors.androidRippleNeutral,
       borderless: false,
       foreground: true
     };
-    $[3] = colors.androidRippleNeutral;
-    $[4] = t8;
+    $[8] = colors.androidRippleNeutral;
+    $[9] = t11;
   } else {
-    t8 = $[4];
+    t11 = $[9];
   }
-  const t9 = "button";
-  const t10 = "Long press to view message actions like reacting and copying.";
-  const t11 = isReplyRootMessage ? accessibilityActions : undefined;
-  const t12 = isReplyRootMessage ? handleAccessibilityAction : undefined;
-  const t13 = isDeletedReplyRootMessage || isDeleting;
-  const t14 = Animated;
-  let t15;
-  if ($[5] !== animatedBackgroundColor || $[6] !== styles.message) {
-    t15 = [styles.message, animatedBackgroundColor];
-    $[5] = animatedBackgroundColor;
-    $[6] = styles.message;
-    $[7] = t15;
+  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;
   } else {
-    t15 = $[7];
+    t18 = $[12];
   }
-  const t16 = !message.mine && /*#__PURE__*/_jsxs(View, {
+  const t19 = !message.mine && /*#__PURE__*/_jsxs(View, {
     children: [renderAuthor ? /*#__PURE__*/_jsx(Avatar, {
       size: "md",
       sourceUri: author.avatar,
@@ -228,38 +253,38 @@ export const Message = memo(function MessageRow(t0) {
     })]
   });
   const T1 = View;
-  let t17;
-  if ($[8] !== messageBottomMargin) {
-    t17 = {
+  let t20;
+  if ($[13] !== messageBottomMargin) {
+    t20 = {
       marginBottom: messageBottomMargin
     };
-    $[8] = messageBottomMargin;
-    $[9] = t17;
+    $[13] = messageBottomMargin;
+    $[14] = t20;
   } else {
-    t17 = $[9];
+    t20 = $[14];
   }
-  let t18;
-  if ($[10] !== styles.messageContent || $[11] !== t17) {
-    t18 = [styles.messageContent, t17];
-    $[10] = styles.messageContent;
-    $[11] = t17;
-    $[12] = t18;
+  let t21;
+  if ($[15] !== styles.messageContent || $[16] !== t20) {
+    t21 = [styles.messageContent, t20];
+    $[15] = styles.messageContent;
+    $[16] = t20;
+    $[17] = t21;
   } else {
-    t18 = $[12];
+    t21 = $[17];
   }
-  const t19 = renderAuthor && !isDeletedReplyRootMessage && /*#__PURE__*/_jsx(Text, {
+  const t22 = renderAuthor && !isDeletedReplyRootMessage && /*#__PURE__*/_jsx(Text, {
     variant: "footnote",
     style: styles.authorName,
     children: author.name
   });
-  let t20;
-  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-    t20 = e => setMessageBubbleHeight(e.nativeEvent.layout.height);
-    $[13] = t20;
+  let t23;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t23 = e => setMessageBubbleHeight(e.nativeEvent.layout.height);
+    $[18] = t23;
   } else {
-    t20 = $[13];
+    t23 = $[18];
   }
-  const t21 = isDeletedReplyRootMessage ? /*#__PURE__*/_jsx(View, {
+  const t24 = isDeletedReplyRootMessage ? /*#__PURE__*/_jsx(View, {
     style: styles.messageText,
     children: /*#__PURE__*/_jsx(Text, {
       style: styles.replyRootDeletedText,
@@ -280,20 +305,20 @@ export const Message = memo(function MessageRow(t0) {
       })
     })]
   });
-  let t22;
-  if ($[14] !== styles.messageBubble || $[15] !== t21) {
-    t22 = /*#__PURE__*/_jsx(View, {
+  let t25;
+  if ($[19] !== styles.messageBubble || $[20] !== t24) {
+    t25 = /*#__PURE__*/_jsx(View, {
       style: styles.messageBubble,
-      onLayout: t20,
-      children: t21
+      onLayout: t23,
+      children: t24
     });
-    $[14] = styles.messageBubble;
-    $[15] = t21;
-    $[16] = t22;
+    $[19] = styles.messageBubble;
+    $[20] = t24;
+    $[21] = t25;
   } else {
-    t22 = $[16];
+    t25 = $[21];
   }
-  const t23 = showReplyCountButton && /*#__PURE__*/_jsx(TextButton, {
+  const t26 = showReplyCountButton && /*#__PURE__*/_jsx(TextButton, {
     variant: "footnote",
     onPress: handleNavigateToReplyPress,
     style: styles.messageReplyCount,
@@ -301,7 +326,7 @@ export const Message = memo(function MessageRow(t0) {
     accessibilityRole: "link",
     children: replyCountText
   });
-  const t24 = hasReactions && !isDeletedReplyRootMessage && /*#__PURE__*/_jsx(View, {
+  const t27 = hasReactions && !isDeletedReplyRootMessage && /*#__PURE__*/_jsx(View, {
     style: styles.messageReactions,
     children: reactionCounts.map(reaction_0 => /*#__PURE__*/_jsx(MessageReaction, {
       reaction: reaction_0,
@@ -310,9 +335,9 @@ export const Message = memo(function MessageRow(t0) {
       conversationId: conversation_id
     }, reaction_0.value))
   });
-  let t25;
-  if ($[17] !== colors.iconColorDefaultSecondary || $[18] !== error || $[19] !== handleRetry || $[20] !== isDeletedReplyRootMessage || $[21] !== isPersisted || $[22] !== messagePendingLabel || $[23] !== pending || $[24] !== readByOthers || $[25] !== retryFailedSaveMutation || $[26] !== showMessageMeta || $[27] !== showReadReceipts || $[28] !== styles.editedText || $[29] !== styles.errorContainer || $[30] !== styles.errorIcon || $[31] !== styles.errorText || $[32] !== styles.messageMeta || $[33] !== styles.pendingIndicatorContainer || $[34] !== temporarilyHidePendingState || $[35] !== timestamp || $[36] !== wasEdited) {
-    t25 = showMessageMeta && !isDeletedReplyRootMessage && /*#__PURE__*/_jsxs(View, {
+  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, {
       style: styles.messageMeta,
       children: [showReadReceipts && /*#__PURE__*/_jsx(MessageReadReceipts, {
         read: readByOthers
@@ -357,108 +382,108 @@ export const Message = memo(function MessageRow(t0) {
         })]
       })]
     });
-    $[17] = colors.iconColorDefaultSecondary;
-    $[18] = error;
-    $[19] = handleRetry;
-    $[20] = isDeletedReplyRootMessage;
-    $[21] = isPersisted;
-    $[22] = messagePendingLabel;
-    $[23] = pending;
-    $[24] = readByOthers;
-    $[25] = retryFailedSaveMutation;
-    $[26] = showMessageMeta;
-    $[27] = showReadReceipts;
-    $[28] = styles.editedText;
-    $[29] = styles.errorContainer;
-    $[30] = styles.errorIcon;
-    $[31] = styles.errorText;
-    $[32] = styles.messageMeta;
-    $[33] = styles.pendingIndicatorContainer;
-    $[34] = temporarilyHidePendingState;
-    $[35] = timestamp;
-    $[36] = wasEdited;
-    $[37] = t25;
+    $[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;
   } else {
-    t25 = $[37];
+    t28 = $[42];
   }
-  let t26;
-  if ($[38] !== T1 || $[39] !== t18 || $[40] !== t19 || $[41] !== t22 || $[42] !== t23 || $[43] !== t24 || $[44] !== t25) {
-    t26 = /*#__PURE__*/_jsxs(T1, {
-      style: t18,
-      children: [t19, t22, t23, t24, t25]
+  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]
     });
-    $[38] = T1;
-    $[39] = t18;
-    $[40] = t19;
-    $[41] = t22;
-    $[42] = t23;
-    $[43] = t24;
-    $[44] = t25;
-    $[45] = t26;
+    $[43] = T1;
+    $[44] = t21;
+    $[45] = t22;
+    $[46] = t25;
+    $[47] = t26;
+    $[48] = t27;
+    $[49] = t28;
+    $[50] = t29;
   } else {
-    t26 = $[45];
+    t29 = $[50];
   }
-  let t27;
-  if ($[46] !== message || $[47] !== messageBubbleHeight) {
-    t27 = message.mine && /*#__PURE__*/_jsx(MyReplyConnector, {
+  let t30;
+  if ($[51] !== message || $[52] !== messageBubbleHeight) {
+    t30 = message.mine && /*#__PURE__*/_jsx(MyReplyConnector, {
       message: message,
       messageBubbleHeight: messageBubbleHeight
     });
-    $[46] = message;
-    $[47] = messageBubbleHeight;
-    $[48] = t27;
+    $[51] = message;
+    $[52] = messageBubbleHeight;
+    $[53] = t30;
   } else {
-    t27 = $[48];
+    t30 = $[53];
   }
-  let t28;
-  if ($[49] !== t14.View || $[50] !== t15 || $[51] !== t16 || $[52] !== t26 || $[53] !== t27) {
-    t28 = /*#__PURE__*/_jsxs(t14.View, {
-      style: t15,
-      children: [t16, t26, t27]
+  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]
     });
-    $[49] = t14.View;
-    $[50] = t15;
-    $[51] = t16;
-    $[52] = t26;
-    $[53] = t27;
-    $[54] = t28;
+    $[54] = t17.View;
+    $[55] = t18;
+    $[56] = t19;
+    $[57] = t29;
+    $[58] = t30;
+    $[59] = t31;
   } else {
-    t28 = $[54];
+    t31 = $[59];
   }
-  let t29;
-  if ($[55] !== T0 || $[56] !== accessibilityLabel || $[57] !== t11 || $[58] !== t12 || $[59] !== t13 || $[60] !== t28 || $[61] !== t3 || $[62] !== t4 || $[63] !== t5 || $[64] !== t6 || $[65] !== t7 || $[66] !== t8) {
-    t29 = /*#__PURE__*/_jsx(T0, {
-      testID: t3,
-      onLongPress: t4,
-      onPress: t5,
-      onPressIn: t6,
-      onPressOut: t7,
-      android_ripple: t8,
-      accessibilityRole: t9,
+  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, {
+      testID: t6,
+      onLongPress: t7,
+      onPress: t8,
+      onPressIn: t9,
+      onPressOut: t10,
+      android_ripple: t11,
+      accessibilityRole: t12,
       accessibilityLabel: accessibilityLabel,
-      accessibilityHint: t10,
-      accessibilityActions: t11,
-      onAccessibilityAction: t12,
-      disabled: t13,
-      children: t28
+      accessibilityHint: t13,
+      accessibilityActions: t14,
+      onAccessibilityAction: t15,
+      disabled: t16,
+      children: t31
     });
-    $[55] = T0;
-    $[56] = accessibilityLabel;
-    $[57] = t11;
-    $[58] = t12;
-    $[59] = t13;
-    $[60] = t28;
-    $[61] = t3;
-    $[62] = t4;
-    $[63] = t5;
-    $[64] = t6;
-    $[65] = t7;
-    $[66] = t8;
-    $[67] = t29;
+    $[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;
   } else {
-    t29 = $[67];
+    t32 = $[72];
   }
-  return t29;
+  return t32;
 });
 const useMessageStyles = (mine, isDeleting) => {
   const $ = _c(8);