@planningcenter/chat-react-native 3.44.1-qa-875.0 → 3.44.1-qa-876.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/conversation/message.d.ts.map +1 -1
- package/build/components/conversation/message.js +8 -1
- package/build/components/conversation/message.js.map +1 -1
- package/build/components/conversation/message_form.d.ts.map +1 -1
- package/build/components/conversation/message_form.js +7 -1
- package/build/components/conversation/message_form.js.map +1 -1
- package/build/components/conversation/reply_shadow_message.d.ts.map +1 -1
- package/build/components/conversation/reply_shadow_message.js +8 -1
- package/build/components/conversation/reply_shadow_message.js.map +1 -1
- package/build/components/display/badge.d.ts.map +1 -1
- package/build/components/display/badge.js +15 -4
- package/build/components/display/badge.js.map +1 -1
- package/build/hooks/use_conversation_layout_diagnostics.d.ts +21 -0
- package/build/hooks/use_conversation_layout_diagnostics.d.ts.map +1 -0
- package/build/hooks/use_conversation_layout_diagnostics.js +99 -0
- package/build/hooks/use_conversation_layout_diagnostics.js.map +1 -0
- package/build/screens/conversation_screen.d.ts.map +1 -1
- package/build/screens/conversation_screen.js +16 -6
- package/build/screens/conversation_screen.js.map +1 -1
- package/build/screens/message_report_screen.d.ts.map +1 -1
- package/build/screens/message_report_screen.js +2 -4
- package/build/screens/message_report_screen.js.map +1 -1
- package/build/utils/aspect_ratio.d.ts.map +1 -1
- package/build/utils/aspect_ratio.js +4 -3
- package/build/utils/aspect_ratio.js.map +1 -1
- package/package.json +3 -3
- package/src/__tests__/hooks/use_conversation_layout_diagnostics.test.tsx +142 -0
- package/src/components/conversation/message.tsx +8 -1
- package/src/components/conversation/message_form.tsx +14 -2
- package/src/components/conversation/reply_shadow_message.tsx +8 -1
- package/src/components/display/badge.tsx +19 -3
- package/src/hooks/use_conversation_layout_diagnostics.ts +123 -0
- package/src/screens/conversation_screen.tsx +19 -5
- package/src/screens/message_report_screen.tsx +6 -4
- package/src/utils/aspect_ratio.ts +4 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reply_shadow_message.js","sourceRoot":"","sources":["../../../src/components/conversation/reply_shadow_message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { some } from 'lodash'\nimport React from 'react'\nimport { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport {\n useAnimatedMessageBackgroundColor,\n useFontScale,\n useScalableNumberOfLines,\n useTheme,\n} from '../../hooks'\nimport { useConversationMessage } from '../../hooks/use_conversation_message'\nimport { useLiveRelativeTime } from '../../hooks/use_live_relative_time'\nimport { MessageResource } from '../../types'\nimport {\n DenormalizedAttachmentResource,\n DenormalizedGiphyAttachmentResource,\n DenormalizedExpandedLinkAttachmentResource,\n DenormalizedMessageAttachmentResource,\n} from '../../types/resources/denormalized_attachment_resource'\nimport { assertKeysAreNumbers, pluralize, safeAspectRatio } from '../../utils'\nimport {\n CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n MAX_FONT_SIZE_MULTIPLIER,\n MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n platformFontWeightMedium,\n} from '../../utils/styles'\nimport { Avatar, Icon, IconProps, Image, Text } from '../display'\nimport { TheirReplyConnector, MyReplyConnector } from './reply_connectors'\n\ninterface ReplyShadowMessageProps extends MessageResource {\n messageId: string\n conversation_id: number\n inReplyScreen?: boolean\n isReplyShadowMessage: boolean\n nextRendersAuthor: boolean\n}\n\nexport function ReplyShadowMessage({\n conversation_id,\n inReplyScreen,\n messageId,\n isReplyShadowMessage,\n nextRendersAuthor,\n}: ReplyShadowMessageProps) {\n const { message, isError, isLoading } = useConversationMessage({ conversation_id, messageId })\n\n if (inReplyScreen) return null\n if (isLoading) return <ShadowMessageFallback text=\"Loading...\" />\n if (isError || !message) return <ShadowMessageFallback text=\"Message deleted\" />\n\n const enrichedMessage = {\n ...message,\n isReplyShadowMessage,\n nextRendersAuthor,\n }\n\n return <ShadowMessageContent conversation_id={conversation_id} {...enrichedMessage} />\n}\n\ninterface ShadowMessageContentProps extends MessageResource {\n conversation_id: number\n}\n\nfunction ShadowMessageContent({ conversation_id, ...message }: ShadowMessageContentProps) {\n const { text, deletedAt, author, attachments } = message\n const styles = useStyles(message)\n const { colors } = useTheme()\n const navigation = useNavigation()\n const timestamp = useLiveRelativeTime(message.createdAt)\n\n const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)\n const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =\n useAnimatedMessageBackgroundColor()\n const scalableNumberOfLines = useScalableNumberOfLines(2)\n const replyCountText = pluralize(message.replyCount, 'reply')\n const isDeleted = !!deletedAt\n const messageText = isDeleted ? 'Message deleted' : text\n\n const handleNavigateToReplies = () => {\n navigation.navigate('ConversationReply', {\n conversation_id,\n reply_root_id: message.replyRootId,\n reply_root_author_name: message.author.name,\n })\n }\n\n const attachmentLabel = some(attachments) ? pluralize(attachments.length, 'attachment') : ''\n const accessibilityLabel = `${author?.name || ''} Reply Preview ${attachmentLabel} ${\n messageText || ''\n } ${timestamp} ${replyCountText}`\n\n return (\n <Pressable\n android_ripple={{ color: colors.androidRippleNeutral }}\n onPress={handleNavigateToReplies}\n onPressIn={handleMessagePressIn}\n onPressOut={handleMessagePressOut}\n accessibilityLabel={accessibilityLabel}\n accessibilityHint=\"Navigate to reply screen for this message\"\n accessibilityRole=\"link\"\n >\n <Animated.View style={[styles.message, animatedBackgroundColor]}>\n {!message.mine && (\n <View>\n <View style={[styles.avatarWrapper, !isDeleted && styles.avatarOpacity]}>\n <Avatar\n size=\"xs\"\n sourceUri={message.author.avatar}\n style={styles.avatar}\n maxFontSizeMultiplier={1}\n fallbackIconName={isDeleted ? 'publishing.trash' : 'general.person'}\n showFallback={isDeleted}\n />\n </View>\n <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n </View>\n )}\n <View style={styles.messageContent}>\n <View\n style={styles.messageBubble}\n onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}\n >\n <MessageAttachmentImagery attachments={attachments} />\n {text && (\n <Text\n variant=\"footnote\"\n style={styles.messageText}\n numberOfLines={scalableNumberOfLines}\n >\n {messageText}\n </Text>\n )}\n </View>\n <View style={styles.messageMeta}>\n <Text variant=\"footnote\" style={styles.replyCountText}>\n {replyCountText}\n </Text>\n </View>\n </View>\n {message.mine && (\n <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n )}\n </Animated.View>\n </Pressable>\n )\n}\n\nfunction MessageAttachmentImagery({\n attachments,\n}: {\n attachments: DenormalizedAttachmentResource[]\n}) {\n if (!attachments || attachments.length === 0) return null\n\n const attachment = attachments[0]\n\n if (attachment.type === 'giphy') {\n return <GiphyImage attachment={attachment} />\n }\n if (attachment.type === 'ExpandedLink') {\n return <ExpandedLinkImage attachment={attachment} />\n }\n if (attachment.type === 'MessageAttachment') {\n const contentType = attachment.attributes?.contentType\n const basicType = contentType?.split('/')[0]\n\n switch (basicType) {\n case 'image':\n return <MessageAttachmentImage attachment={attachment} />\n case 'video':\n return <MessageAttachmentIcon iconName=\"general.outlinedVideoFile\" />\n case 'audio':\n return <MessageAttachmentIcon iconName=\"general.outlinedMusicFile\" />\n case 'application':\n return <MessageAttachmentIcon iconName=\"general.outlinedGenericFile\" />\n default:\n return null\n }\n }\n\n return null\n}\n\nfunction GiphyImage({ attachment }: { attachment: DenormalizedGiphyAttachmentResource }) {\n const { title, giphy } = attachment\n const { url } = giphy.fixedWidth\n const { width, height } = assertKeysAreNumbers(giphy.fixedWidth)\n const styles = useStyles({ imageWidth: width, imageHeight: height })\n\n return (\n <Image\n source={{ uri: url }}\n wrapperStyle={styles.imageWrapper}\n style={styles.image}\n alt={title}\n loaderSize={16}\n />\n )\n}\n\nfunction ExpandedLinkImage({\n attachment,\n}: {\n attachment: DenormalizedExpandedLinkAttachmentResource\n}) {\n const { title = '', imageUrl, imageHeight, imageWidth } = attachment.attributes\n const styles = useStyles({ imageWidth, imageHeight })\n\n return (\n <Image\n source={{ uri: imageUrl }}\n wrapperStyle={styles.imageWrapper}\n style={styles.image}\n alt={title}\n loaderSize={16}\n />\n )\n}\n\nfunction MessageAttachmentImage({\n attachment,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n}) {\n const { url, urlMedium, filename, metadata = {} } = attachment.attributes\n const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })\n\n return (\n <Image\n source={{ uri: urlMedium || url }}\n style={styles.image}\n wrapperStyle={styles.imageWrapper}\n alt={filename}\n loaderSize={16}\n />\n )\n}\n\nfunction MessageAttachmentIcon({ iconName }: { iconName: IconProps['name'] }) {\n const styles = useStyles()\n return (\n <Icon\n name={iconName}\n style={styles.attachmentIcon}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n />\n )\n}\n\n// TODO: The mine prop is not used yet, but in the future we will be adding a way to find the `mine` value for this fallback.\nfunction ShadowMessageFallback({ text, mine }: { text: string; mine?: boolean }) {\n const styles = useStyles({ mine })\n\n return (\n <View style={styles.message}>\n <View style={styles.messageContent}>\n <View style={styles.messageBubble}>\n <Text variant=\"footnote\" style={styles.messageText}>\n {text}\n </Text>\n </View>\n </View>\n </View>\n )\n}\n\ninterface StylesProps {\n imageWidth?: number\n imageHeight?: number\n mine?: boolean\n}\n\nconst useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })\n const { width } = useWindowDimensions()\n const tabletWidth = width >= 744 // Smallest iPad Mini's width\n\n return StyleSheet.create({\n message: {\n gap: 8,\n flexDirection: mine ? 'row-reverse' : 'row',\n paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n },\n messageContent: {\n flex: 1,\n gap: 4,\n marginBottom: 12,\n },\n avatarWrapper: {\n width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n alignItems: 'center',\n },\n avatar: {\n marginBottom: 8,\n },\n avatarOpacity: {\n opacity: 0.5,\n },\n messageBubble: {\n flexDirection: 'row',\n alignSelf: mine ? 'flex-end' : 'flex-start',\n alignItems: 'center',\n gap: 8,\n borderColor: colors.borderColorDefaultBase,\n borderWidth: 1,\n borderRadius: 8,\n maxWidth: tabletWidth ? 360 : '80%',\n paddingVertical: 6,\n paddingHorizontal: 8,\n },\n messageText: {\n color: colors.textColorDefaultPlaceholder,\n flexShrink: 1,\n },\n messageMeta: {\n flexDirection: 'row',\n justifyContent: mine ? 'flex-end' : 'flex-start',\n },\n replyCountText: {\n color: colors.interaction,\n fontWeight: platformFontWeightMedium,\n },\n imageWrapper: {\n width: 32 * fontScale,\n aspectRatio: safeAspectRatio(imageWidth, imageHeight),\n opacity: 0.5,\n },\n image: {\n borderRadius: 4,\n },\n attachmentIcon: {\n color: colors.iconColorDefaultDim,\n fontSize: 16,\n },\n })\n}\n"]}
|
|
1
|
+
{"version":3,"file":"reply_shadow_message.js","sourceRoot":"","sources":["../../../src/components/conversation/reply_shadow_message.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,mBAAmB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/E,OAAO,QAAQ,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EACL,iCAAiC,EACjC,YAAY,EACZ,wBAAwB,EACxB,QAAQ,GACT,MAAM,aAAa,CAAA;AACpB,4EAA4E;AAC5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,iDAAiD,CAAA;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AAQxE,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC9E,OAAO,EACL,4CAA4C,EAC5C,wBAAwB,EACxB,kCAAkC,EAClC,wBAAwB,GACzB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAa,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjE,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAU1E,MAAM,UAAU,kBAAkB,CAAC,EACjC,eAAe,EACf,aAAa,EACb,SAAS,EACT,oBAAoB,EACpB,iBAAiB,GACO;IACxB,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,sBAAsB,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,CAAA;IAE9F,IAAI,aAAa;QAAE,OAAO,IAAI,CAAA;IAC9B,IAAI,SAAS;QAAE,OAAO,KAAC,qBAAqB,IAAC,IAAI,EAAC,YAAY,GAAG,CAAA;IACjE,IAAI,OAAO,IAAI,CAAC,OAAO;QAAE,OAAO,KAAC,qBAAqB,IAAC,IAAI,EAAC,iBAAiB,GAAG,CAAA;IAEhF,MAAM,eAAe,GAAG;QACtB,GAAG,OAAO;QACV,oBAAoB;QACpB,iBAAiB;KAClB,CAAA;IAED,OAAO,KAAC,oBAAoB,IAAC,eAAe,EAAE,eAAe,KAAM,eAAe,GAAI,CAAA;AACxF,CAAC;AAMD,SAAS,oBAAoB,CAAC,EAAE,eAAe,EAAE,GAAG,OAAO,EAA6B;IACtF,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,OAAO,CAAA;IACxD,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,CAAA;IACjC,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,SAAS,GAAG,mBAAmB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;IAExD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IACvE,4EAA4E;IAC5E,MAAM,qBAAqB,GAAG,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAA;IAC3E,MAAM,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,GAC5E,iCAAiC,EAAE,CAAA;IACrC,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAA;IACzD,MAAM,cAAc,GAAG,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;IAC7D,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,CAAA;IAC7B,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAA;IAExD,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACnC,UAAU,CAAC,QAAQ,CAAC,mBAAmB,EAAE;YACvC,eAAe;YACf,aAAa,EAAE,OAAO,CAAC,WAAW;YAClC,sBAAsB,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;SAC5C,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC5F,MAAM,kBAAkB,GAAG,GAAG,MAAM,EAAE,IAAI,IAAI,EAAE,kBAAkB,eAAe,IAC/E,WAAW,IAAI,EACjB,IAAI,SAAS,IAAI,cAAc,EAAE,CAAA;IAEjC,OAAO,CACL,KAAC,SAAS,IACR,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,oBAAoB,EAAE,EACtD,OAAO,EAAE,uBAAuB,EAChC,SAAS,EAAE,oBAAoB,EAC/B,UAAU,EAAE,qBAAqB,EACjC,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAC,2CAA2C,EAC7D,iBAAiB,EAAC,MAAM,YAExB,MAAC,QAAQ,CAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,uBAAuB,CAAC,aAC5D,CAAC,OAAO,CAAC,IAAI,IAAI,CAChB,MAAC,IAAI,eACH,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,SAAS,IAAI,MAAM,CAAC,aAAa,CAAC,YACrE,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAChC,KAAK,EAAE,MAAM,CAAC,MAAM,EACpB,qBAAqB,EAAE,CAAC,EACxB,gBAAgB,EAAE,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,EACnE,YAAY,EAAE,SAAS,GACvB,GACG,EACP,KAAC,mBAAmB,IAAC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,GAAI,IAC9E,CACR,EACD,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,cAAc,aAChC,MAAC,IAAI,IACH,KAAK,EAAE,MAAM,CAAC,aAAa,EAC3B,QAAQ,EAAE,CAAC,CAAC,EAAE;gCACZ,sBAAsB,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;gCACnD,qBAAqB,EAAE,CAAC,CAAC,CAAC,CAAA;4BAC5B,CAAC,aAED,KAAC,wBAAwB,IAAC,WAAW,EAAE,WAAW,GAAI,EACrD,IAAI,IAAI,CACP,KAAC,IAAI,IACH,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,MAAM,CAAC,WAAW,EACzB,aAAa,EAAE,qBAAqB,YAEnC,WAAW,GACP,CACR,IACI,EACP,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,WAAW,YAC7B,KAAC,IAAI,IAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,MAAM,CAAC,cAAc,YAClD,cAAc,GACV,GACF,IACF,EACN,OAAO,CAAC,IAAI,IAAI,CACf,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,GAAI,CACjF,IACa,GACN,CACb,CAAA;AACH,CAAC;AAED,SAAS,wBAAwB,CAAC,EAChC,WAAW,GAGZ;IACC,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAEzD,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;IAEjC,IAAI,UAAU,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAChC,OAAO,KAAC,UAAU,IAAC,UAAU,EAAE,UAAU,GAAI,CAAA;IAC/C,CAAC;IACD,IAAI,UAAU,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;QACvC,OAAO,KAAC,iBAAiB,IAAC,UAAU,EAAE,UAAU,GAAI,CAAA;IACtD,CAAC;IACD,IAAI,UAAU,CAAC,IAAI,KAAK,mBAAmB,EAAE,CAAC;QAC5C,MAAM,WAAW,GAAG,UAAU,CAAC,UAAU,EAAE,WAAW,CAAA;QACtD,MAAM,SAAS,GAAG,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;QAE5C,QAAQ,SAAS,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,KAAC,sBAAsB,IAAC,UAAU,EAAE,UAAU,GAAI,CAAA;YAC3D,KAAK,OAAO;gBACV,OAAO,KAAC,qBAAqB,IAAC,QAAQ,EAAC,2BAA2B,GAAG,CAAA;YACvE,KAAK,OAAO;gBACV,OAAO,KAAC,qBAAqB,IAAC,QAAQ,EAAC,2BAA2B,GAAG,CAAA;YACvE,KAAK,aAAa;gBAChB,OAAO,KAAC,qBAAqB,IAAC,QAAQ,EAAC,6BAA6B,GAAG,CAAA;YACzE;gBACE,OAAO,IAAI,CAAA;QACf,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,UAAU,EAAuD;IACrF,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,UAAU,CAAA;IACnC,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,UAAU,CAAA;IAChC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,oBAAoB,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;IAChE,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAA;IAEpE,OAAO,CACL,KAAC,KAAK,IACJ,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EACpB,YAAY,EAAE,MAAM,CAAC,YAAY,EACjC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,EAAE,GACd,CACH,CAAA;AACH,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,UAAU,GAGX;IACC,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,UAAU,CAAA;IAC/E,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAA;IAErD,OAAO,CACL,KAAC,KAAK,IACJ,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EACzB,YAAY,EAAE,MAAM,CAAC,YAAY,EACjC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,EAAE,GACd,CACH,CAAA;AACH,CAAC;AAED,SAAS,sBAAsB,CAAC,EAC9B,UAAU,GAGX;IACC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,UAAU,CAAC,UAAU,CAAA;IACzE,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAA;IAEtF,OAAO,CACL,KAAC,KAAK,IACJ,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,IAAI,GAAG,EAAE,EACjC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,YAAY,EAAE,MAAM,CAAC,YAAY,EACjC,GAAG,EAAE,QAAQ,EACb,UAAU,EAAE,EAAE,GACd,CACH,CAAA;AACH,CAAC;AAED,SAAS,qBAAqB,CAAC,EAAE,QAAQ,EAAmC;IAC1E,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,MAAM,CAAC,cAAc,EAC5B,qBAAqB,EAAE,wBAAwB,GAC/C,CACH,CAAA;AACH,CAAC;AAED,6HAA6H;AAC7H,SAAS,qBAAqB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAoC;IAC7E,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;IAElC,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,YACzB,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,cAAc,YAChC,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,aAAa,YAC/B,KAAC,IAAI,IAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,MAAM,CAAC,WAAW,YAC/C,IAAI,GACA,GACF,GACF,GACF,CACR,CAAA;AACH,CAAC;AAQD,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,UAAU,GAAG,EAAE,EAAE,WAAW,GAAG,EAAE,KAAkB,EAAE,EAAE,EAAE;IAClF,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,CAAC,CAAA;IACnF,MAAM,EAAE,KAAK,EAAE,GAAG,mBAAmB,EAAE,CAAA;IACvC,MAAM,WAAW,GAAG,KAAK,IAAI,GAAG,CAAA,CAAC,6BAA6B;IAE9D,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,OAAO,EAAE;YACP,GAAG,EAAE,CAAC;YACN,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK;YAC3C,iBAAiB,EAAE,4CAA4C;SAChE;QACD,cAAc,EAAE;YACd,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,YAAY,EAAE,EAAE;SACjB;QACD,aAAa,EAAE;YACb,KAAK,EAAE,kCAAkC;YACzC,UAAU,EAAE,QAAQ;SACrB;QACD,MAAM,EAAE;YACN,YAAY,EAAE,CAAC;SAChB;QACD,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;SACb;QACD,aAAa,EAAE;YACb,aAAa,EAAE,KAAK;YACpB,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;YAC3C,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,WAAW,EAAE,MAAM,CAAC,sBAAsB;YAC1C,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;YACf,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK;YACnC,eAAe,EAAE,CAAC;YAClB,iBAAiB,EAAE,CAAC;SACrB;QACD,WAAW,EAAE;YACX,KAAK,EAAE,MAAM,CAAC,2BAA2B;YACzC,UAAU,EAAE,CAAC;SACd;QACD,WAAW,EAAE;YACX,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;SACjD;QACD,cAAc,EAAE;YACd,KAAK,EAAE,MAAM,CAAC,WAAW;YACzB,UAAU,EAAE,wBAAwB;SACrC;QACD,YAAY,EAAE;YACZ,KAAK,EAAE,EAAE,GAAG,SAAS;YACrB,WAAW,EAAE,eAAe,CAAC,UAAU,EAAE,WAAW,CAAC;YACrD,OAAO,EAAE,GAAG;SACb;QACD,KAAK,EAAE;YACL,YAAY,EAAE,CAAC;SAChB;QACD,cAAc,EAAE;YACd,KAAK,EAAE,MAAM,CAAC,mBAAmB;YACjC,QAAQ,EAAE,EAAE;SACb;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { some } from 'lodash'\nimport React from 'react'\nimport { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport {\n useAnimatedMessageBackgroundColor,\n useFontScale,\n useScalableNumberOfLines,\n useTheme,\n} from '../../hooks'\n// CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts\nimport { useLayoutWidthProbe } from '../../hooks/use_conversation_layout_diagnostics'\nimport { useConversationMessage } from '../../hooks/use_conversation_message'\nimport { useLiveRelativeTime } from '../../hooks/use_live_relative_time'\nimport { MessageResource } from '../../types'\nimport {\n DenormalizedAttachmentResource,\n DenormalizedGiphyAttachmentResource,\n DenormalizedExpandedLinkAttachmentResource,\n DenormalizedMessageAttachmentResource,\n} from '../../types/resources/denormalized_attachment_resource'\nimport { assertKeysAreNumbers, pluralize, safeAspectRatio } from '../../utils'\nimport {\n CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n MAX_FONT_SIZE_MULTIPLIER,\n MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n platformFontWeightMedium,\n} from '../../utils/styles'\nimport { Avatar, Icon, IconProps, Image, Text } from '../display'\nimport { TheirReplyConnector, MyReplyConnector } from './reply_connectors'\n\ninterface ReplyShadowMessageProps extends MessageResource {\n messageId: string\n conversation_id: number\n inReplyScreen?: boolean\n isReplyShadowMessage: boolean\n nextRendersAuthor: boolean\n}\n\nexport function ReplyShadowMessage({\n conversation_id,\n inReplyScreen,\n messageId,\n isReplyShadowMessage,\n nextRendersAuthor,\n}: ReplyShadowMessageProps) {\n const { message, isError, isLoading } = useConversationMessage({ conversation_id, messageId })\n\n if (inReplyScreen) return null\n if (isLoading) return <ShadowMessageFallback text=\"Loading...\" />\n if (isError || !message) return <ShadowMessageFallback text=\"Message deleted\" />\n\n const enrichedMessage = {\n ...message,\n isReplyShadowMessage,\n nextRendersAuthor,\n }\n\n return <ShadowMessageContent conversation_id={conversation_id} {...enrichedMessage} />\n}\n\ninterface ShadowMessageContentProps extends MessageResource {\n conversation_id: number\n}\n\nfunction ShadowMessageContent({ conversation_id, ...message }: ShadowMessageContentProps) {\n const { text, deletedAt, author, attachments } = message\n const styles = useStyles(message)\n const { colors } = useTheme()\n const navigation = useNavigation()\n const timestamp = useLiveRelativeTime(message.createdAt)\n\n const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)\n // CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts\n const onMessageBubbleLayout = useLayoutWidthProbe('replyShadow.bubble', 18)\n const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =\n useAnimatedMessageBackgroundColor()\n const scalableNumberOfLines = useScalableNumberOfLines(2)\n const replyCountText = pluralize(message.replyCount, 'reply')\n const isDeleted = !!deletedAt\n const messageText = isDeleted ? 'Message deleted' : text\n\n const handleNavigateToReplies = () => {\n navigation.navigate('ConversationReply', {\n conversation_id,\n reply_root_id: message.replyRootId,\n reply_root_author_name: message.author.name,\n })\n }\n\n const attachmentLabel = some(attachments) ? pluralize(attachments.length, 'attachment') : ''\n const accessibilityLabel = `${author?.name || ''} Reply Preview ${attachmentLabel} ${\n messageText || ''\n } ${timestamp} ${replyCountText}`\n\n return (\n <Pressable\n android_ripple={{ color: colors.androidRippleNeutral }}\n onPress={handleNavigateToReplies}\n onPressIn={handleMessagePressIn}\n onPressOut={handleMessagePressOut}\n accessibilityLabel={accessibilityLabel}\n accessibilityHint=\"Navigate to reply screen for this message\"\n accessibilityRole=\"link\"\n >\n <Animated.View style={[styles.message, animatedBackgroundColor]}>\n {!message.mine && (\n <View>\n <View style={[styles.avatarWrapper, !isDeleted && styles.avatarOpacity]}>\n <Avatar\n size=\"xs\"\n sourceUri={message.author.avatar}\n style={styles.avatar}\n maxFontSizeMultiplier={1}\n fallbackIconName={isDeleted ? 'publishing.trash' : 'general.person'}\n showFallback={isDeleted}\n />\n </View>\n <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n </View>\n )}\n <View style={styles.messageContent}>\n <View\n style={styles.messageBubble}\n onLayout={e => {\n setMessageBubbleHeight(e.nativeEvent.layout.height)\n onMessageBubbleLayout?.(e)\n }}\n >\n <MessageAttachmentImagery attachments={attachments} />\n {text && (\n <Text\n variant=\"footnote\"\n style={styles.messageText}\n numberOfLines={scalableNumberOfLines}\n >\n {messageText}\n </Text>\n )}\n </View>\n <View style={styles.messageMeta}>\n <Text variant=\"footnote\" style={styles.replyCountText}>\n {replyCountText}\n </Text>\n </View>\n </View>\n {message.mine && (\n <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n )}\n </Animated.View>\n </Pressable>\n )\n}\n\nfunction MessageAttachmentImagery({\n attachments,\n}: {\n attachments: DenormalizedAttachmentResource[]\n}) {\n if (!attachments || attachments.length === 0) return null\n\n const attachment = attachments[0]\n\n if (attachment.type === 'giphy') {\n return <GiphyImage attachment={attachment} />\n }\n if (attachment.type === 'ExpandedLink') {\n return <ExpandedLinkImage attachment={attachment} />\n }\n if (attachment.type === 'MessageAttachment') {\n const contentType = attachment.attributes?.contentType\n const basicType = contentType?.split('/')[0]\n\n switch (basicType) {\n case 'image':\n return <MessageAttachmentImage attachment={attachment} />\n case 'video':\n return <MessageAttachmentIcon iconName=\"general.outlinedVideoFile\" />\n case 'audio':\n return <MessageAttachmentIcon iconName=\"general.outlinedMusicFile\" />\n case 'application':\n return <MessageAttachmentIcon iconName=\"general.outlinedGenericFile\" />\n default:\n return null\n }\n }\n\n return null\n}\n\nfunction GiphyImage({ attachment }: { attachment: DenormalizedGiphyAttachmentResource }) {\n const { title, giphy } = attachment\n const { url } = giphy.fixedWidth\n const { width, height } = assertKeysAreNumbers(giphy.fixedWidth)\n const styles = useStyles({ imageWidth: width, imageHeight: height })\n\n return (\n <Image\n source={{ uri: url }}\n wrapperStyle={styles.imageWrapper}\n style={styles.image}\n alt={title}\n loaderSize={16}\n />\n )\n}\n\nfunction ExpandedLinkImage({\n attachment,\n}: {\n attachment: DenormalizedExpandedLinkAttachmentResource\n}) {\n const { title = '', imageUrl, imageHeight, imageWidth } = attachment.attributes\n const styles = useStyles({ imageWidth, imageHeight })\n\n return (\n <Image\n source={{ uri: imageUrl }}\n wrapperStyle={styles.imageWrapper}\n style={styles.image}\n alt={title}\n loaderSize={16}\n />\n )\n}\n\nfunction MessageAttachmentImage({\n attachment,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n}) {\n const { url, urlMedium, filename, metadata = {} } = attachment.attributes\n const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })\n\n return (\n <Image\n source={{ uri: urlMedium || url }}\n style={styles.image}\n wrapperStyle={styles.imageWrapper}\n alt={filename}\n loaderSize={16}\n />\n )\n}\n\nfunction MessageAttachmentIcon({ iconName }: { iconName: IconProps['name'] }) {\n const styles = useStyles()\n return (\n <Icon\n name={iconName}\n style={styles.attachmentIcon}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n />\n )\n}\n\n// TODO: The mine prop is not used yet, but in the future we will be adding a way to find the `mine` value for this fallback.\nfunction ShadowMessageFallback({ text, mine }: { text: string; mine?: boolean }) {\n const styles = useStyles({ mine })\n\n return (\n <View style={styles.message}>\n <View style={styles.messageContent}>\n <View style={styles.messageBubble}>\n <Text variant=\"footnote\" style={styles.messageText}>\n {text}\n </Text>\n </View>\n </View>\n </View>\n )\n}\n\ninterface StylesProps {\n imageWidth?: number\n imageHeight?: number\n mine?: boolean\n}\n\nconst useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })\n const { width } = useWindowDimensions()\n const tabletWidth = width >= 744 // Smallest iPad Mini's width\n\n return StyleSheet.create({\n message: {\n gap: 8,\n flexDirection: mine ? 'row-reverse' : 'row',\n paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n },\n messageContent: {\n flex: 1,\n gap: 4,\n marginBottom: 12,\n },\n avatarWrapper: {\n width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n alignItems: 'center',\n },\n avatar: {\n marginBottom: 8,\n },\n avatarOpacity: {\n opacity: 0.5,\n },\n messageBubble: {\n flexDirection: 'row',\n alignSelf: mine ? 'flex-end' : 'flex-start',\n alignItems: 'center',\n gap: 8,\n borderColor: colors.borderColorDefaultBase,\n borderWidth: 1,\n borderRadius: 8,\n maxWidth: tabletWidth ? 360 : '80%',\n paddingVertical: 6,\n paddingHorizontal: 8,\n },\n messageText: {\n color: colors.textColorDefaultPlaceholder,\n flexShrink: 1,\n },\n messageMeta: {\n flexDirection: 'row',\n justifyContent: mine ? 'flex-end' : 'flex-start',\n },\n replyCountText: {\n color: colors.interaction,\n fontWeight: platformFontWeightMedium,\n },\n imageWrapper: {\n width: 32 * fontScale,\n aspectRatio: safeAspectRatio(imageWidth, imageHeight),\n opacity: 0.5,\n },\n image: {\n borderRadius: 4,\n },\n attachmentIcon: {\n color: colors.iconColorDefaultDim,\n fontSize: 16,\n },\n })\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,SAAS,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,SAAS,EAAE,MAAM,cAAc,CAAA;AAQnE,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;AAEzC,OAAO,EAA+B,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAM/F,KAAK,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,CAAA;AAiBrD,KAAK,eAAe,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAA;AACpE,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AActC,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAA;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,eAAe,CAAA;IACnD;;OAEG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC;AAED,wBAAgB,KAAK,CAAC,EACpB,UAAsB,EACtB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAmB,EACnB,qBAAqB,EACrB,sBAA0B,EAC1B,OAAO,GACR,EAAE,UAAU,2CAkDZ"}
|
|
@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Pressable, StyleSheet, View } from 'react-native';
|
|
3
3
|
import Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg';
|
|
4
4
|
import { useFontScale, useTheme } from '../../hooks';
|
|
5
|
+
// CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
|
|
6
|
+
import { useLayoutWidthProbe } from '../../hooks/use_conversation_layout_diagnostics';
|
|
5
7
|
import { platformFontWeightMedium } from '../../utils';
|
|
6
8
|
import { tokens } from '../../vendor/tapestry/tokens';
|
|
7
9
|
import { Icon } from './icon';
|
|
@@ -16,13 +18,18 @@ const PRODUCT_LOGO_COMPONENT_MAP = {
|
|
|
16
18
|
export function Badge({ appearance = 'neutral', metaLabel, style, iconName, iconNameRight, label, productLogoName, variant = 'default', maxFontSizeMultiplier, numberOfLinesMetaLabel = 1, onPress, }) {
|
|
17
19
|
const styles = useStyles({ appearance, maxFontSizeMultiplier, variant });
|
|
18
20
|
const { showBadgeProductLogo } = useTheme();
|
|
21
|
+
// CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
|
|
22
|
+
// Inset is metaLabel's remaining contentInset now that its left offset is
|
|
23
|
+
// a margin, not padding - see the CHAT-476 candidate fix on this style.
|
|
24
|
+
const onLabelLayout = useLayoutWidthProbe('badge.label', 0);
|
|
25
|
+
const onMetaLabelLayout = useLayoutWidthProbe('badge.metaLabel', styles.metaLabel.paddingHorizontal * 2);
|
|
19
26
|
const isMetaSubtle = variant === 'metaSubtle';
|
|
20
27
|
const hasMetaLabel = Boolean(metaLabel);
|
|
21
28
|
const showLogo = showBadgeProductLogo && productLogoName;
|
|
22
29
|
const isChatLogo = productLogoName?.toLowerCase() === 'chat';
|
|
23
30
|
const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName];
|
|
24
31
|
const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label;
|
|
25
|
-
return (_jsxs(BadgeWrapper, { style: [styles.badgeWrapper, style], onPress: onPress, accessibilityRole: "button", children: [_jsxs(View, { style: styles.badge, children: [showLogo && ProductLogoSvg && _jsx(ProductLogoSvg, { logoSize: styles.logo.fontSize }), showLogo && isChatLogo && _jsx(Icon, { name: "general.textMessage", style: styles.icon }), iconName && _jsx(Icon, { name: iconName, style: styles.icon }), _jsx(Text, { variant: "footnote", style: styles.label, numberOfLines: 1, maxFontSizeMultiplier: maxFontSizeMultiplier, children: badgeLabel }), iconNameRight && _jsx(Icon, { name: iconNameRight, style: styles.iconRight })] }), hasMetaLabel && (_jsx(Text, { variant: "footnote", style: styles.metaLabel, numberOfLines: numberOfLinesMetaLabel, maxFontSizeMultiplier: maxFontSizeMultiplier, children: metaLabel }))] }));
|
|
32
|
+
return (_jsxs(BadgeWrapper, { style: [styles.badgeWrapper, style], onPress: onPress, accessibilityRole: "button", children: [_jsxs(View, { style: styles.badge, children: [showLogo && ProductLogoSvg && _jsx(ProductLogoSvg, { logoSize: styles.logo.fontSize }), showLogo && isChatLogo && _jsx(Icon, { name: "general.textMessage", style: styles.icon }), iconName && _jsx(Icon, { name: iconName, style: styles.icon }), _jsx(Text, { variant: "footnote", style: styles.label, numberOfLines: 1, maxFontSizeMultiplier: maxFontSizeMultiplier, onLayout: onLabelLayout, children: badgeLabel }), iconNameRight && _jsx(Icon, { name: iconNameRight, style: styles.iconRight })] }), hasMetaLabel && (_jsx(Text, { variant: "footnote", style: styles.metaLabel, numberOfLines: numberOfLinesMetaLabel, maxFontSizeMultiplier: maxFontSizeMultiplier, onLayout: onMetaLabelLayout, children: metaLabel }))] }));
|
|
26
33
|
}
|
|
27
34
|
const BadgeWrapper = ({ children, onPress, accessibilityRole, ...restProps }) => {
|
|
28
35
|
if (onPress) {
|
|
@@ -92,8 +99,9 @@ const useStyles = ({ appearance = 'neutral', maxFontSizeMultiplier, variant = 'd
|
|
|
92
99
|
paddingVertical: variantStylesMap[variant].paddingVertical,
|
|
93
100
|
paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
|
|
94
101
|
backgroundColor: variantStylesMap[variant].backgroundColor,
|
|
95
|
-
// metaSubtle's borderRadius is 0, so this
|
|
96
|
-
//
|
|
102
|
+
// metaSubtle's borderRadius is 0, so this would otherwise resolve to -2.
|
|
103
|
+
// Neither platform clamps a negative radius; Android's BackgroundDrawable
|
|
104
|
+
// reads it as "no rounded borders" and skips the rounded path entirely.
|
|
97
105
|
borderRadius: Math.max(0, variantStylesMap[variant].borderRadius - 2),
|
|
98
106
|
},
|
|
99
107
|
icon: {
|
|
@@ -118,7 +126,10 @@ const useStyles = ({ appearance = 'neutral', maxFontSizeMultiplier, variant = 'd
|
|
|
118
126
|
fontSize: badgeFontSize,
|
|
119
127
|
alignSelf: 'center',
|
|
120
128
|
flexShrink: 1,
|
|
121
|
-
|
|
129
|
+
// CHAT-476 candidate fix: margin (not padding) so this offset sits
|
|
130
|
+
// outside contentInsets - a shrunk Text can never see it as part of
|
|
131
|
+
// its own measured content width, so it can't go negative from this.
|
|
132
|
+
marginLeft: variantStylesMap[variant].metaLabelPaddingLeft,
|
|
122
133
|
},
|
|
123
134
|
});
|
|
124
135
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { JSX } from 'react'\nimport type { TextStyle, ViewProps, ViewStyle } from 'react-native'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { platformFontWeightMedium } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Icon, IconString } from './icon'\nimport { Text } from './text'\nimport { useStatusColorAppearanceMap, type StatusAppearanceUnion } from './utils/status_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\ntype VariantUnion = 'default' | 'meta' | 'metaSubtle'\n\ntype VariantStyles = Record<\n VariantUnion,\n {\n backgroundColor: string\n paddingHorizontal: number\n paddingVertical: number\n borderWidth: number\n borderRadius: number\n textColor: string\n gap: number\n metaLabelPaddingLeft: number\n fontWeight: TextStyle['fontWeight']\n }\n>\n\ntype ProductLogoName = 'Groups' | 'Services' | 'groups' | 'services'\ntype ProductIconName = 'Chat' | 'chat'\ntype ProductLogoComponent = ({ logoSize }: { logoSize: number }) => JSX.Element\n\nconst PRODUCT_LOGO_COMPONENT_MAP: Record<ProductLogoName, ProductLogoComponent> = {\n Groups: GroupsLogo,\n groups: GroupsLogo,\n services: ServicesIcon,\n Services: ServicesIcon,\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface BadgeProps {\n /**\n * Renders the main text.\n */\n label: string\n /**\n * Renders secondary meta text to the right of the label.\n */\n metaLabel?: string\n /**\n * Changes the status color for the badge and icon.\n */\n appearance?: StatusAppearanceUnion\n /**\n * Changes form of the logo to support a meta label and badge\n */\n variant?: VariantUnion\n /**\n * Adds a product logo to the left of the text.\n */\n productLogoName?: ProductLogoName | ProductIconName\n /**\n * Shows an icon of the user choice to the left of the text.\n */\n iconName?: IconString\n /**\n * Shows an icon of the user choice to the right of the text.\n */\n iconNameRight?: IconString\n /**\n * Styles badge wrapper.\n */\n style?: ViewStyle\n /**\n * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n */\n maxFontSizeMultiplier?: number\n /**\n * Callback function when the badge is pressed.\n */\n onPress?: () => void\n /**\n * Specifies the number of lines for the meta label before truncating.\n */\n numberOfLinesMetaLabel?: number\n}\n\nexport function Badge({\n appearance = 'neutral',\n metaLabel,\n style,\n iconName,\n iconNameRight,\n label,\n productLogoName,\n variant = 'default',\n maxFontSizeMultiplier,\n numberOfLinesMetaLabel = 1,\n onPress,\n}: BadgeProps) {\n const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })\n const { showBadgeProductLogo } = useTheme()\n\n const isMetaSubtle = variant === 'metaSubtle'\n const hasMetaLabel = Boolean(metaLabel)\n\n const showLogo = showBadgeProductLogo && productLogoName\n const isChatLogo = productLogoName?.toLowerCase() === 'chat'\n const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName as ProductLogoName]\n const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label\n\n return (\n <BadgeWrapper style={[styles.badgeWrapper, style]} onPress={onPress} accessibilityRole=\"button\">\n <View style={styles.badge}>\n {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}\n {showLogo && isChatLogo && <Icon name=\"general.textMessage\" style={styles.icon} />}\n {iconName && <Icon name={iconName} style={styles.icon} />}\n <Text\n variant=\"footnote\"\n style={styles.label}\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n >\n {badgeLabel}\n </Text>\n {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight} />}\n </View>\n {hasMetaLabel && (\n <Text\n variant=\"footnote\"\n style={styles.metaLabel}\n numberOfLines={numberOfLinesMetaLabel}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n >\n {metaLabel}\n </Text>\n )}\n </BadgeWrapper>\n )\n}\n\nconst BadgeWrapper = ({\n children,\n onPress,\n accessibilityRole,\n ...restProps\n}: ViewProps & Pick<BadgeProps, 'onPress'>) => {\n if (onPress) {\n return (\n <Pressable accessibilityRole={accessibilityRole} onPress={onPress} {...restProps}>\n {children}\n </Pressable>\n )\n }\n\n return <View {...restProps}>{children}</View>\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n appearance = 'neutral',\n maxFontSizeMultiplier,\n variant = 'default',\n}: Partial<BadgeProps>) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n const statusColorMap = useStatusColorAppearanceMap()\n\n const badgeGap = 4 * fontScale\n const badgePaddingHorizontal = 8\n const badgePaddingVertical = 4\n const badgeFontSize = 12\n\n const variantStylesMap: VariantStyles = {\n default: {\n gap: badgeGap,\n backgroundColor: statusColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd * fontScale,\n textColor: statusColorMap[appearance].text,\n fontWeight: 'normal',\n },\n meta: {\n gap: badgeGap,\n backgroundColor: statusColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd * fontScale,\n textColor: statusColorMap[appearance].text,\n fontWeight: platformFontWeightMedium,\n },\n metaSubtle: {\n gap: badgeGap,\n backgroundColor: 'transparent',\n metaLabelPaddingLeft: badgeGap,\n paddingHorizontal: 0,\n paddingVertical: 0,\n borderWidth: 0,\n borderRadius: 0,\n textColor: colors.textColorDefaultSecondary,\n fontWeight: platformFontWeightMedium,\n },\n }\n\n return StyleSheet.create({\n badgeWrapper: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignSelf: 'flex-start',\n borderRadius: variantStylesMap[variant].borderRadius,\n borderWidth: variantStylesMap[variant].borderWidth,\n borderColor: statusColorMap[appearance].background,\n },\n badge: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: variantStylesMap[variant].gap,\n paddingVertical: variantStylesMap[variant].paddingVertical,\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n backgroundColor: variantStylesMap[variant].backgroundColor,\n // metaSubtle's borderRadius is 0, so this can't go below 0 - Android\n // hard-throws on a negative borderRadius during layout.\n borderRadius: Math.max(0, variantStylesMap[variant].borderRadius - 2),\n },\n icon: {\n color: statusColorMap[appearance].icon,\n fontSize: badgeFontSize,\n },\n iconRight: {\n color: statusColorMap[appearance].icon,\n fontSize: badgeFontSize - 2,\n },\n logo: {\n fontSize: badgeFontSize * fontScale,\n },\n label: {\n color: variantStylesMap[variant].textColor,\n fontWeight: variantStylesMap[variant].fontWeight,\n fontSize: badgeFontSize,\n flexShrink: 1,\n },\n metaLabel: {\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n fontSize: badgeFontSize,\n alignSelf: 'center',\n flexShrink: 1,\n paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,\n },\n })\n}\n\n// =================================\n// ====== Product Logos ============\n// =================================\n\ninterface ProductLogoProps {\n logoSize: number\n}\n\nfunction GroupsLogo({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n d=\"M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z\"\n fill=\"url(#paint0_linear_2632_26363)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_26363\"\n x1={-5.6338}\n y1={5.6338}\n x2={5.6338}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#FF962D\" />\n <Stop offset={1} stopColor=\"#FC7638\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n\nfunction ServicesIcon({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z\"\n fill=\"url(#paint0_linear_2632_56586)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_56586\"\n x1={-5.51759}\n y1={5.6338}\n x2={5.75001}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#6BB23D\" />\n <Stop offset={1} stopColor=\"#659630\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n"]}
|
|
1
|
+
{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { JSX } from 'react'\nimport type { TextStyle, ViewProps, ViewStyle } from 'react-native'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\n// CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts\nimport { useLayoutWidthProbe } from '../../hooks/use_conversation_layout_diagnostics'\nimport { platformFontWeightMedium } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { Icon, IconString } from './icon'\nimport { Text } from './text'\nimport { useStatusColorAppearanceMap, type StatusAppearanceUnion } from './utils/status_colors'\n\n// =================================\n// ====== Constants ================\n// =================================\n\ntype VariantUnion = 'default' | 'meta' | 'metaSubtle'\n\ntype VariantStyles = Record<\n VariantUnion,\n {\n backgroundColor: string\n paddingHorizontal: number\n paddingVertical: number\n borderWidth: number\n borderRadius: number\n textColor: string\n gap: number\n metaLabelPaddingLeft: number\n fontWeight: TextStyle['fontWeight']\n }\n>\n\ntype ProductLogoName = 'Groups' | 'Services' | 'groups' | 'services'\ntype ProductIconName = 'Chat' | 'chat'\ntype ProductLogoComponent = ({ logoSize }: { logoSize: number }) => JSX.Element\n\nconst PRODUCT_LOGO_COMPONENT_MAP: Record<ProductLogoName, ProductLogoComponent> = {\n Groups: GroupsLogo,\n groups: GroupsLogo,\n services: ServicesIcon,\n Services: ServicesIcon,\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport interface BadgeProps {\n /**\n * Renders the main text.\n */\n label: string\n /**\n * Renders secondary meta text to the right of the label.\n */\n metaLabel?: string\n /**\n * Changes the status color for the badge and icon.\n */\n appearance?: StatusAppearanceUnion\n /**\n * Changes form of the logo to support a meta label and badge\n */\n variant?: VariantUnion\n /**\n * Adds a product logo to the left of the text.\n */\n productLogoName?: ProductLogoName | ProductIconName\n /**\n * Shows an icon of the user choice to the left of the text.\n */\n iconName?: IconString\n /**\n * Shows an icon of the user choice to the right of the text.\n */\n iconNameRight?: IconString\n /**\n * Styles badge wrapper.\n */\n style?: ViewStyle\n /**\n * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n */\n maxFontSizeMultiplier?: number\n /**\n * Callback function when the badge is pressed.\n */\n onPress?: () => void\n /**\n * Specifies the number of lines for the meta label before truncating.\n */\n numberOfLinesMetaLabel?: number\n}\n\nexport function Badge({\n appearance = 'neutral',\n metaLabel,\n style,\n iconName,\n iconNameRight,\n label,\n productLogoName,\n variant = 'default',\n maxFontSizeMultiplier,\n numberOfLinesMetaLabel = 1,\n onPress,\n}: BadgeProps) {\n const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })\n const { showBadgeProductLogo } = useTheme()\n // CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts\n // Inset is metaLabel's remaining contentInset now that its left offset is\n // a margin, not padding - see the CHAT-476 candidate fix on this style.\n const onLabelLayout = useLayoutWidthProbe('badge.label', 0)\n const onMetaLabelLayout = useLayoutWidthProbe(\n 'badge.metaLabel',\n styles.metaLabel.paddingHorizontal * 2\n )\n\n const isMetaSubtle = variant === 'metaSubtle'\n const hasMetaLabel = Boolean(metaLabel)\n\n const showLogo = showBadgeProductLogo && productLogoName\n const isChatLogo = productLogoName?.toLowerCase() === 'chat'\n const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName as ProductLogoName]\n const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label\n\n return (\n <BadgeWrapper style={[styles.badgeWrapper, style]} onPress={onPress} accessibilityRole=\"button\">\n <View style={styles.badge}>\n {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}\n {showLogo && isChatLogo && <Icon name=\"general.textMessage\" style={styles.icon} />}\n {iconName && <Icon name={iconName} style={styles.icon} />}\n <Text\n variant=\"footnote\"\n style={styles.label}\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n onLayout={onLabelLayout}\n >\n {badgeLabel}\n </Text>\n {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight} />}\n </View>\n {hasMetaLabel && (\n <Text\n variant=\"footnote\"\n style={styles.metaLabel}\n numberOfLines={numberOfLinesMetaLabel}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n onLayout={onMetaLabelLayout}\n >\n {metaLabel}\n </Text>\n )}\n </BadgeWrapper>\n )\n}\n\nconst BadgeWrapper = ({\n children,\n onPress,\n accessibilityRole,\n ...restProps\n}: ViewProps & Pick<BadgeProps, 'onPress'>) => {\n if (onPress) {\n return (\n <Pressable accessibilityRole={accessibilityRole} onPress={onPress} {...restProps}>\n {children}\n </Pressable>\n )\n }\n\n return <View {...restProps}>{children}</View>\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n appearance = 'neutral',\n maxFontSizeMultiplier,\n variant = 'default',\n}: Partial<BadgeProps>) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n const statusColorMap = useStatusColorAppearanceMap()\n\n const badgeGap = 4 * fontScale\n const badgePaddingHorizontal = 8\n const badgePaddingVertical = 4\n const badgeFontSize = 12\n\n const variantStylesMap: VariantStyles = {\n default: {\n gap: badgeGap,\n backgroundColor: statusColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd * fontScale,\n textColor: statusColorMap[appearance].text,\n fontWeight: 'normal',\n },\n meta: {\n gap: badgeGap,\n backgroundColor: statusColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd * fontScale,\n textColor: statusColorMap[appearance].text,\n fontWeight: platformFontWeightMedium,\n },\n metaSubtle: {\n gap: badgeGap,\n backgroundColor: 'transparent',\n metaLabelPaddingLeft: badgeGap,\n paddingHorizontal: 0,\n paddingVertical: 0,\n borderWidth: 0,\n borderRadius: 0,\n textColor: colors.textColorDefaultSecondary,\n fontWeight: platformFontWeightMedium,\n },\n }\n\n return StyleSheet.create({\n badgeWrapper: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignSelf: 'flex-start',\n borderRadius: variantStylesMap[variant].borderRadius,\n borderWidth: variantStylesMap[variant].borderWidth,\n borderColor: statusColorMap[appearance].background,\n },\n badge: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: variantStylesMap[variant].gap,\n paddingVertical: variantStylesMap[variant].paddingVertical,\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n backgroundColor: variantStylesMap[variant].backgroundColor,\n // metaSubtle's borderRadius is 0, so this would otherwise resolve to -2.\n // Neither platform clamps a negative radius; Android's BackgroundDrawable\n // reads it as \"no rounded borders\" and skips the rounded path entirely.\n borderRadius: Math.max(0, variantStylesMap[variant].borderRadius - 2),\n },\n icon: {\n color: statusColorMap[appearance].icon,\n fontSize: badgeFontSize,\n },\n iconRight: {\n color: statusColorMap[appearance].icon,\n fontSize: badgeFontSize - 2,\n },\n logo: {\n fontSize: badgeFontSize * fontScale,\n },\n label: {\n color: variantStylesMap[variant].textColor,\n fontWeight: variantStylesMap[variant].fontWeight,\n fontSize: badgeFontSize,\n flexShrink: 1,\n },\n metaLabel: {\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n fontSize: badgeFontSize,\n alignSelf: 'center',\n flexShrink: 1,\n // CHAT-476 candidate fix: margin (not padding) so this offset sits\n // outside contentInsets - a shrunk Text can never see it as part of\n // its own measured content width, so it can't go negative from this.\n marginLeft: variantStylesMap[variant].metaLabelPaddingLeft,\n },\n })\n}\n\n// =================================\n// ====== Product Logos ============\n// =================================\n\ninterface ProductLogoProps {\n logoSize: number\n}\n\nfunction GroupsLogo({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n d=\"M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z\"\n fill=\"url(#paint0_linear_2632_26363)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_26363\"\n x1={-5.6338}\n y1={5.6338}\n x2={5.6338}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#FF962D\" />\n <Stop offset={1} stopColor=\"#FC7638\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n\nfunction ServicesIcon({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z\"\n fill=\"url(#paint0_linear_2632_56586)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_56586\"\n x1={-5.51759}\n y1={5.6338}\n x2={5.75001}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#6BB23D\" />\n <Stop offset={1} stopColor=\"#659630\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { LayoutChangeEvent } from 'react-native';
|
|
2
|
+
export declare const __resetLayoutDiagnosticsForTests: () => void;
|
|
3
|
+
/**
|
|
4
|
+
* Attaches to a suspect Text/TextInput/View's onLayout and reports through
|
|
5
|
+
* Log.reportError the first time its resolved width drops to at or below
|
|
6
|
+
* its own horizontal inset (padding/border) — the shape that Android's
|
|
7
|
+
* unclamped text-measure path can turn into a negative width. Returns
|
|
8
|
+
* undefined on non-Android platforms so it's a no-op there.
|
|
9
|
+
*/
|
|
10
|
+
export declare const useLayoutWidthProbe: (label: string, inset?: number) => ((event: LayoutChangeEvent) => void) | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* Mount once per conversation screen. Periodically flushes every probed
|
|
13
|
+
* label's latest known width as a single breadcrumb, so there's a timeline
|
|
14
|
+
* leading up to the crash even if no individual probe crosses the
|
|
15
|
+
* suspicious threshold. Capped at MAX_BREADCRUMB_FLUSHES per mount.
|
|
16
|
+
*/
|
|
17
|
+
export declare const useConversationLayoutDiagnostics: ({ conversationId, replyRootId, }: {
|
|
18
|
+
conversationId: number;
|
|
19
|
+
replyRootId?: string | null;
|
|
20
|
+
}) => void;
|
|
21
|
+
//# sourceMappingURL=use_conversation_layout_diagnostics.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_conversation_layout_diagnostics.d.ts","sourceRoot":"","sources":["../../src/hooks/use_conversation_layout_diagnostics.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAA6C,MAAM,cAAc,CAAA;AAsB3F,eAAO,MAAM,gCAAgC,YAG5C,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,MAAM,EAAE,cAAS,cAIhD,iBAAiB,sBAiC5B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,gCAAgC,GAAI,kCAG9C;IACD,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,SAoCA,CAAA"}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
2
|
+
import { PixelRatio, Platform, useWindowDimensions } from 'react-native';
|
|
3
|
+
import { Log } from '../utils';
|
|
4
|
+
const BREADCRUMB_INTERVAL_MS = 500;
|
|
5
|
+
const MAX_BREADCRUMB_FLUSHES = 6;
|
|
6
|
+
const SUSPICIOUS_MARGIN = 1;
|
|
7
|
+
// Temporary instrumentation for CHAT-476 (Android-only `Layout: -2 < 0`
|
|
8
|
+
// conversation crash). Android's text layout hard-throws when a Text or
|
|
9
|
+
// TextInput resolves to a non-positive content width; this attaches to
|
|
10
|
+
// onLayout on suspect nodes and reports their resolved width through the
|
|
11
|
+
// host error reporter, so a QA repro surfaces which node it is before the
|
|
12
|
+
// native crash tears down the surface. Remove once CHAT-476 is resolved —
|
|
13
|
+
// this hook and every call site are tagged CHAT-476 for that reason.
|
|
14
|
+
const samplesByLabel = new Map();
|
|
15
|
+
const reportedSuspiciousLabels = new Set();
|
|
16
|
+
// Test-only: the maps above are module-scope so useConversationLayoutDiagnostics
|
|
17
|
+
// can flush every probe's latest sample in one breadcrumb. Reset between tests.
|
|
18
|
+
export const __resetLayoutDiagnosticsForTests = () => {
|
|
19
|
+
samplesByLabel.clear();
|
|
20
|
+
reportedSuspiciousLabels.clear();
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Attaches to a suspect Text/TextInput/View's onLayout and reports through
|
|
24
|
+
* Log.reportError the first time its resolved width drops to at or below
|
|
25
|
+
* its own horizontal inset (padding/border) — the shape that Android's
|
|
26
|
+
* unclamped text-measure path can turn into a negative width. Returns
|
|
27
|
+
* undefined on non-Android platforms so it's a no-op there.
|
|
28
|
+
*/
|
|
29
|
+
export const useLayoutWidthProbe = (label, inset = 0) => {
|
|
30
|
+
const mountedAtRef = useRef(Date.now());
|
|
31
|
+
const handleLayout = useCallback((event) => {
|
|
32
|
+
const { width, height, x } = event.nativeEvent.layout;
|
|
33
|
+
const previous = samplesByLabel.get(label);
|
|
34
|
+
if (previous && previous.width === width && previous.height === height && previous.x === x) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
samplesByLabel.set(label, { width, height, x });
|
|
38
|
+
const isSuspicious = width <= inset + SUSPICIOUS_MARGIN;
|
|
39
|
+
if (!isSuspicious || reportedSuspiciousLabels.has(label))
|
|
40
|
+
return;
|
|
41
|
+
reportedSuspiciousLabels.add(label);
|
|
42
|
+
Log.reportError(new Error(`CHAT-476: ${label} measured at or below its horizontal inset`), {
|
|
43
|
+
scope: 'component',
|
|
44
|
+
tags: { team: 'chat', chat476: 'near-zero-width' },
|
|
45
|
+
extra: {
|
|
46
|
+
label,
|
|
47
|
+
width,
|
|
48
|
+
height,
|
|
49
|
+
x,
|
|
50
|
+
inset,
|
|
51
|
+
msSinceMount: Date.now() - mountedAtRef.current,
|
|
52
|
+
pixelRatio: PixelRatio.get(),
|
|
53
|
+
fontScale: PixelRatio.getFontScale(),
|
|
54
|
+
},
|
|
55
|
+
});
|
|
56
|
+
}, [label, inset]);
|
|
57
|
+
if (Platform.OS !== 'android')
|
|
58
|
+
return undefined;
|
|
59
|
+
return handleLayout;
|
|
60
|
+
};
|
|
61
|
+
/**
|
|
62
|
+
* Mount once per conversation screen. Periodically flushes every probed
|
|
63
|
+
* label's latest known width as a single breadcrumb, so there's a timeline
|
|
64
|
+
* leading up to the crash even if no individual probe crosses the
|
|
65
|
+
* suspicious threshold. Capped at MAX_BREADCRUMB_FLUSHES per mount.
|
|
66
|
+
*/
|
|
67
|
+
export const useConversationLayoutDiagnostics = ({ conversationId, replyRootId, }) => {
|
|
68
|
+
const { width: windowWidth } = useWindowDimensions();
|
|
69
|
+
const mountedAtRef = useRef(Date.now());
|
|
70
|
+
const flushCountRef = useRef(0);
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
if (Platform.OS !== 'android')
|
|
73
|
+
return;
|
|
74
|
+
samplesByLabel.clear();
|
|
75
|
+
reportedSuspiciousLabels.clear();
|
|
76
|
+
mountedAtRef.current = Date.now();
|
|
77
|
+
flushCountRef.current = 0;
|
|
78
|
+
const interval = setInterval(() => {
|
|
79
|
+
if (flushCountRef.current >= MAX_BREADCRUMB_FLUSHES || samplesByLabel.size === 0)
|
|
80
|
+
return;
|
|
81
|
+
flushCountRef.current += 1;
|
|
82
|
+
Log.reportError(new Error('CHAT-476: layout breadcrumb'), {
|
|
83
|
+
scope: 'component',
|
|
84
|
+
tags: { team: 'chat', chat476: 'breadcrumb' },
|
|
85
|
+
extra: {
|
|
86
|
+
conversationId,
|
|
87
|
+
replyRootId,
|
|
88
|
+
msSinceMount: Date.now() - mountedAtRef.current,
|
|
89
|
+
windowWidth,
|
|
90
|
+
pixelRatio: PixelRatio.get(),
|
|
91
|
+
fontScale: PixelRatio.getFontScale(),
|
|
92
|
+
samples: [...samplesByLabel.entries()].map(([label, { width, height, x }]) => `${label}|w=${width}|h=${height}|x=${x}`),
|
|
93
|
+
},
|
|
94
|
+
});
|
|
95
|
+
}, BREADCRUMB_INTERVAL_MS);
|
|
96
|
+
return () => clearInterval(interval);
|
|
97
|
+
}, [conversationId, replyRootId, windowWidth]);
|
|
98
|
+
};
|
|
99
|
+
//# sourceMappingURL=use_conversation_layout_diagnostics.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_conversation_layout_diagnostics.js","sourceRoot":"","sources":["../../src/hooks/use_conversation_layout_diagnostics.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef } from 'react'\nimport { LayoutChangeEvent, PixelRatio, Platform, useWindowDimensions } from 'react-native'\nimport { Log } from '../utils'\n\nconst BREADCRUMB_INTERVAL_MS = 500\nconst MAX_BREADCRUMB_FLUSHES = 6\nconst SUSPICIOUS_MARGIN = 1\n\ntype LayoutSample = { width: number; height: number; x: number }\n\n// Temporary instrumentation for CHAT-476 (Android-only `Layout: -2 < 0`\n// conversation crash). Android's text layout hard-throws when a Text or\n// TextInput resolves to a non-positive content width; this attaches to\n// onLayout on suspect nodes and reports their resolved width through the\n// host error reporter, so a QA repro surfaces which node it is before the\n// native crash tears down the surface. Remove once CHAT-476 is resolved —\n// this hook and every call site are tagged CHAT-476 for that reason.\n\nconst samplesByLabel = new Map<string, LayoutSample>()\nconst reportedSuspiciousLabels = new Set<string>()\n\n// Test-only: the maps above are module-scope so useConversationLayoutDiagnostics\n// can flush every probe's latest sample in one breadcrumb. Reset between tests.\nexport const __resetLayoutDiagnosticsForTests = () => {\n samplesByLabel.clear()\n reportedSuspiciousLabels.clear()\n}\n\n/**\n * Attaches to a suspect Text/TextInput/View's onLayout and reports through\n * Log.reportError the first time its resolved width drops to at or below\n * its own horizontal inset (padding/border) — the shape that Android's\n * unclamped text-measure path can turn into a negative width. Returns\n * undefined on non-Android platforms so it's a no-op there.\n */\nexport const useLayoutWidthProbe = (label: string, inset = 0) => {\n const mountedAtRef = useRef(Date.now())\n\n const handleLayout = useCallback(\n (event: LayoutChangeEvent) => {\n const { width, height, x } = event.nativeEvent.layout\n const previous = samplesByLabel.get(label)\n if (previous && previous.width === width && previous.height === height && previous.x === x) {\n return\n }\n samplesByLabel.set(label, { width, height, x })\n\n const isSuspicious = width <= inset + SUSPICIOUS_MARGIN\n if (!isSuspicious || reportedSuspiciousLabels.has(label)) return\n\n reportedSuspiciousLabels.add(label)\n Log.reportError(new Error(`CHAT-476: ${label} measured at or below its horizontal inset`), {\n scope: 'component',\n tags: { team: 'chat', chat476: 'near-zero-width' },\n extra: {\n label,\n width,\n height,\n x,\n inset,\n msSinceMount: Date.now() - mountedAtRef.current,\n pixelRatio: PixelRatio.get(),\n fontScale: PixelRatio.getFontScale(),\n },\n })\n },\n [label, inset]\n )\n\n if (Platform.OS !== 'android') return undefined\n\n return handleLayout\n}\n\n/**\n * Mount once per conversation screen. Periodically flushes every probed\n * label's latest known width as a single breadcrumb, so there's a timeline\n * leading up to the crash even if no individual probe crosses the\n * suspicious threshold. Capped at MAX_BREADCRUMB_FLUSHES per mount.\n */\nexport const useConversationLayoutDiagnostics = ({\n conversationId,\n replyRootId,\n}: {\n conversationId: number\n replyRootId?: string | null\n}) => {\n const { width: windowWidth } = useWindowDimensions()\n const mountedAtRef = useRef(Date.now())\n const flushCountRef = useRef(0)\n\n useEffect(() => {\n if (Platform.OS !== 'android') return\n\n samplesByLabel.clear()\n reportedSuspiciousLabels.clear()\n mountedAtRef.current = Date.now()\n flushCountRef.current = 0\n\n const interval = setInterval(() => {\n if (flushCountRef.current >= MAX_BREADCRUMB_FLUSHES || samplesByLabel.size === 0) return\n\n flushCountRef.current += 1\n Log.reportError(new Error('CHAT-476: layout breadcrumb'), {\n scope: 'component',\n tags: { team: 'chat', chat476: 'breadcrumb' },\n extra: {\n conversationId,\n replyRootId,\n msSinceMount: Date.now() - mountedAtRef.current,\n windowWidth,\n pixelRatio: PixelRatio.get(),\n fontScale: PixelRatio.getFontScale(),\n samples: [...samplesByLabel.entries()].map(\n ([label, { width, height, x }]) => `${label}|w=${width}|h=${height}|x=${x}`\n ),\n },\n })\n }, BREADCRUMB_INTERVAL_MS)\n\n return () => clearInterval(interval)\n }, [conversationId, replyRootId, windowWidth])\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"conversation_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,gBAAgB,EAAqB,MAAM,4BAA4B,CAAA;AAC7F,OAAO,EAGL,iBAAiB,EAIlB,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"conversation_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,gBAAgB,EAAqB,MAAM,4BAA4B,CAAA;AAC7F,OAAO,EAGL,iBAAiB,EAIlB,MAAM,0BAA0B,CAAA;AAwCjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAA;AAOjF,MAAM,MAAM,sBAAsB,GAAG;IACnC,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,yBAAyB,CAAA;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,sBAAsB,CAAC,CAAA;AAE/E,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE,uBAAuB,2CAkBpE;AAuPD,UAAU,4BAA6B,SAAQ,gBAAgB;IAC7D,eAAe,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,yBAAyB,CAAA;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,eAAO,MAAM,uBAAuB,GAAI,8DAOrC,4BAA4B,4CAuC9B,CAAA"}
|
|
@@ -22,6 +22,8 @@ import { useTheme } from '../hooks';
|
|
|
22
22
|
import { useMessageAvailableMembersAction } from '../hooks/direct_messages/use_message_available_members_action';
|
|
23
23
|
import { useConversation } from '../hooks/use_conversation';
|
|
24
24
|
import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events';
|
|
25
|
+
// CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
|
|
26
|
+
import { useConversationLayoutDiagnostics, useLayoutWidthProbe, } from '../hooks/use_conversation_layout_diagnostics';
|
|
25
27
|
import { useConversationMessages } from '../hooks/use_conversation_messages';
|
|
26
28
|
import { useConversationMessagesJoltEvents } from '../hooks/use_conversation_messages_jolt_events';
|
|
27
29
|
import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read';
|
|
@@ -51,6 +53,8 @@ function ConversationScreenContent({ route }) {
|
|
|
51
53
|
});
|
|
52
54
|
useConversationJoltEvents({ conversationId: conversation_id });
|
|
53
55
|
useConversationMessagesJoltEvents({ conversationId: conversation_id });
|
|
56
|
+
// CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
|
|
57
|
+
useConversationLayoutDiagnostics({ conversationId: conversation_id, replyRootId: reply_root_id });
|
|
54
58
|
const { markHandledByMessageForm } = useVideoModerationJoltEvents();
|
|
55
59
|
useEnsureConversationsRouteExists();
|
|
56
60
|
useMarkLatestMessageRead({ conversation, messages });
|
|
@@ -111,8 +115,8 @@ function ConversationScreenContent({ route }) {
|
|
|
111
115
|
}
|
|
112
116
|
return (_jsx(Message, { ...item, canDeleteNonAuthoredMessages: canDeleteNonAuthoredMessages, conversation_id: conversation_id, latestReadMessageSortKey: conversation?.latestReadMessageSortKey, inReplyScreen: !!reply_root_id }));
|
|
113
117
|
}, onEndReached: () => {
|
|
114
|
-
//
|
|
115
|
-
//
|
|
118
|
+
// VirtualizedList dedupes onEndReached per content length, not
|
|
119
|
+
// per fetch, so it can refire while a page is already in flight.
|
|
116
120
|
if (hasNextPage && !isFetchingNextPage)
|
|
117
121
|
fetchNextPage();
|
|
118
122
|
}, ListHeaderComponent: _jsx(View, { style: styles.listHeader }) })), _jsx(JumpToBottomButton, { onPress: handleReturnToBottom, visible: showJumpToBottomButton }), !noMessages && _jsx(TypingIndicator, {}), showLeaderDisabledReplyBanner && _jsx(LeaderMessagesDisabledBanner, {}), _jsx(ConversationBottomBar, { conversation: conversation, canReply: canReply, replyRootAuthorFirstName: replyRootAuthorFirstName, replyRootId: reply_root_id, currentlyEditingMessage: currentlyEditingMessage, onFlaggedInMessageForm: markHandledByMessageForm })] }) }));
|
|
@@ -132,7 +136,9 @@ function InlineDateSeparator({ date }) {
|
|
|
132
136
|
const { isThisYear } = getRelativeDateStatus(date);
|
|
133
137
|
const showYear = !isThisYear;
|
|
134
138
|
const dateStamp = formatDate(date, { style: 'long', year: showYear });
|
|
135
|
-
|
|
139
|
+
// CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
|
|
140
|
+
const onDateTextLayout = useLayoutWidthProbe('dateSeparator.text', 16);
|
|
141
|
+
return (_jsxs(View, { style: styles.container, children: [_jsx(View, { style: styles.separator }), _jsx(Text, { variant: "footnote", style: styles.dateText, onLayout: onDateTextLayout, children: dateStamp }), _jsx(View, { style: styles.separator })] }));
|
|
136
142
|
}
|
|
137
143
|
const useDateSeparatorStyles = () => {
|
|
138
144
|
const theme = useTheme();
|
|
@@ -160,7 +166,9 @@ export const ConversationScreenTitle = ({ conversation_id, badge, children, styl
|
|
|
160
166
|
const resourceType = badge?.pcoResourceType || '';
|
|
161
167
|
const productName = badge?.appName;
|
|
162
168
|
const name = badge?.text || undefined;
|
|
163
|
-
|
|
169
|
+
// CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
|
|
170
|
+
const onHeaderContainerLayout = useLayoutWidthProbe('header.container', 0);
|
|
171
|
+
return (_jsxs(PlatformPressable, { accessibilityHint: "Opens details about members and settings", style: styles.container, onLayout: onHeaderContainerLayout, onPress: () => {
|
|
164
172
|
if (deleted)
|
|
165
173
|
return;
|
|
166
174
|
navigation.navigate('ConversationDetails', { conversation_id });
|
|
@@ -169,8 +177,10 @@ export const ConversationScreenTitle = ({ conversation_id, badge, children, styl
|
|
|
169
177
|
const usePressableHeaderStyle = () => {
|
|
170
178
|
const { width } = useWindowDimensions();
|
|
171
179
|
const slotReserve = useHeaderSlotReserve();
|
|
172
|
-
// Guards split-screen
|
|
173
|
-
// available width
|
|
180
|
+
// Guards narrow windows (split-screen, freeform, DeX) where slotReserve * 2
|
|
181
|
+
// exceeds the available width. A negative maxWidth can hand a descendant
|
|
182
|
+
// <Text> a negative measure width, and android.text.Layout hard-throws on
|
|
183
|
+
// that (`Layout: -2 < 0`) rather than clamping the way iOS does.
|
|
174
184
|
const headerContainerStyle = { maxWidth: Math.max(0, width - slotReserve * 2) };
|
|
175
185
|
return StyleSheet.create({
|
|
176
186
|
container: {
|