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

package/src/components/conversation/reply_shadow_message.tsx

@@ -24,11 +24,15 @@ import {
   CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
   MAX_FONT_SIZE_MULTIPLIER,
   MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+  MESSAGE_BACKGROUND_OUTSET,
   platformFontWeightMedium,
 } from '../../utils/styles'
 import { Avatar, Icon, IconProps, Image, Text } from '../display'
 import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
 
+const SPACE_BELOW_MESSAGE = 12
+const SPACE_BELOW_PRESSABLE = SPACE_BELOW_MESSAGE - MESSAGE_BACKGROUND_OUTSET
+
 interface ReplyShadowMessageProps extends MessageResource {
   messageId: string
   conversation_id: number
@@ -96,6 +100,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
 
   return (
     <Pressable
+      style={styles.pressable}
       android_ripple={{ color: colors.androidRippleNeutral }}
       onPress={handleNavigateToReplies}
       onPressIn={handleMessagePressIn}
@@ -104,7 +109,8 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
       accessibilityHint="Navigate to reply screen for this message"
       accessibilityRole="link"
     >
-      <Animated.View style={[styles.message, animatedBackgroundColor]}>
+      <Animated.View style={[StyleSheet.absoluteFill, animatedBackgroundColor]} />
+      <View style={[styles.message, { marginBottom: -SPACE_BELOW_PRESSABLE }]}>
         {!message.mine && (
           <View>
             <View style={[styles.avatarWrapper, !isDeleted && styles.avatarOpacity]}>
@@ -145,7 +151,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
         {message.mine && (
           <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
         )}
-      </Animated.View>
+      </View>
     </Pressable>
   )
 }
@@ -282,6 +288,11 @@ const useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}
   const tabletWidth = width >= 744 // Smallest iPad Mini's width
 
   return StyleSheet.create({
+    pressable: {
+      marginTop: -MESSAGE_BACKGROUND_OUTSET,
+      paddingTop: MESSAGE_BACKGROUND_OUTSET,
+      marginBottom: SPACE_BELOW_PRESSABLE,
+    },
     message: {
       gap: 8,
       flexDirection: mine ? 'row-reverse' : 'row',
@@ -290,7 +301,7 @@ const useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}
     messageContent: {
       flex: 1,
       gap: 4,
-      marginBottom: 12,
+      marginBottom: SPACE_BELOW_MESSAGE,
     },
     avatarWrapper: {
       width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,

package/src/components/display/filter_dropdown.tsx

@@ -35,6 +35,11 @@ export interface FilterDropdownProps {
   onMoreFilters: () => void
   triggerLabel: string
   showMoreFilters?: boolean
+  /**
+   * Widest the trigger may render, in points. Hosts that measure the trigger at its intrinsic
+   * width need this for the label to truncate.
+   */
+  maxWidth?: number
 }
 
 export function FilterDropdown({
@@ -44,6 +49,7 @@ export function FilterDropdown({
   onMoreFilters,
   triggerLabel,
   showMoreFilters = true,
+  maxWidth,
 }: FilterDropdownProps) {
   const styles = useStyles()
 
@@ -71,7 +77,7 @@ export function FilterDropdown({
   return (
     <Menu.View actions={actions} onPressAction={handlePressAction} style={styles.container}>
       <View
-        style={styles.trigger}
+        style={[styles.trigger, maxWidth !== undefined && { maxWidth }]}
         accessible
         accessibilityRole="button"
         accessibilityHint="Opens filter options"

package/src/screens/conversations/components/__tests__/filter_dropdown_list_header_component.test.tsx

@@ -21,6 +21,15 @@ const mockSearchEnabled = jest.fn()
 const mockCanBrowseArchived = jest.fn()
 const mockGroupsByGraphId: Record<string, { name: string }> = {}
 
+jest.mock('react-native', () => {
+  const actual = jest.requireActual('react-native')
+  return Object.defineProperty(actual, 'useWindowDimensions', {
+    value: jest.fn(() => ({ fontScale: 1 })),
+    configurable: true,
+  })
+})
+const mockUseWindowDimensions = jest.requireMock('react-native').useWindowDimensions
+
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({ setParams: mockSetParams, navigate: mockNavigate }),
@@ -121,10 +130,46 @@ describe('FilterDropdownListHeaderComponent', () => {
     mockSetParams.mockClear()
     mockSearchEnabled.mockReturnValue(true)
     mockCanBrowseArchived.mockReturnValue(false)
+    mockUseWindowDimensions.mockReturnValue({ fontScale: 1 })
     setCapabilities({ groups: true, teams: true })
     setRouteParams({})
   })
 
+  it('keeps the dropdown and actions on one line at the default font scale', () => {
+    mockUseWindowDimensions.mockReturnValue({ fontScale: 1 })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByTestId('conversations-filter-heading-row')).toHaveStyle({
+      flexDirection: 'row',
+    })
+  })
+
+  it('stacks the actions under the dropdown at the first font size above the default', () => {
+    mockUseWindowDimensions.mockReturnValue({ fontScale: 1.12 })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByTestId('conversations-filter-heading-row')).toHaveStyle({
+      flexDirection: 'column',
+    })
+  })
+
+  it('caps the trigger to the room beside the actions so a long label truncates', () => {
+    render(<FilterDropdownListHeaderComponent />)
+
+    fireEvent(screen.getByTestId('conversations-filter-heading-row'), 'layout', {
+      nativeEvent: { layout: { width: 360 } },
+    })
+    fireEvent(screen.getByTestId('conversations-filter-actions'), 'layout', {
+      nativeEvent: { layout: { width: 160 } },
+    })
+
+    expect(screen.getByRole('button', { name: 'All conversations' })).toHaveStyle({
+      maxWidth: 156,
+    })
+  })
+
   it('offers every filter the person can use, then More filters', () => {
     render(<FilterDropdownListHeaderComponent />)
 

package/src/screens/conversations/components/filter_dropdown_list_header_component.tsx

@@ -1,13 +1,13 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
-import React, { useCallback, useMemo } from 'react'
-import { Alert, StyleSheet, View } from 'react-native'
+import React, { useCallback, useMemo, useState } from 'react'
+import { Alert, LayoutChangeEvent, StyleSheet, View } from 'react-native'
 import { FilterDropdown, FilterDropdownOption, TextButton } from '../../../components'
 import {
-  useAtFontScaleBreakpoint,
   useCanBrowseArchivedConversations,
   useCanCreateConversations,
   useCurrentPersonCache,
   useDirectMessagesEligible,
+  useFontScale,
   useHasDirectMessages,
   useNewConversationEntry,
   useTheme,
@@ -25,6 +25,8 @@ import { ConversationsScreenProps } from '../conversations_screen'
 import { ListHeaderActionButton } from './list_header_action_button'
 
 const ROW_PADDING_HORIZONTAL = 16
+const HEADING_ROW_GAP = 12
+const DEFAULT_FONT_SCALE = 1
 const ALL_CONVERSATIONS_LABEL = 'All conversations'
 const ARCHIVED_LABEL = 'Archived'
 
@@ -205,11 +207,31 @@ export const FilterDropdownListHeaderComponent = () => {
 
   const showMoreFilters = canFilterByGroups || canFilterByTeams || canBrowseArchived
 
-  const styles = useStyles()
+  const stacked = useFontScale() > DEFAULT_FONT_SCALE
+  const styles = useStyles({ stacked })
+
+  // The Android menu host measures the trigger at its intrinsic width, so flex shrinking never
+  // truncates the label. Cap it to the room left beside the action buttons instead.
+  const [rowWidth, setRowWidth] = useState<number>()
+  const [actionsWidth, setActionsWidth] = useState<number>()
+  const handleRowLayout = useCallback((event: LayoutChangeEvent) => {
+    setRowWidth(event.nativeEvent.layout.width)
+  }, [])
+  const handleActionsLayout = useCallback((event: LayoutChangeEvent) => {
+    setActionsWidth(event.nativeEvent.layout.width)
+  }, [])
+  const triggerMaxWidth =
+    !stacked && rowWidth !== undefined && actionsWidth !== undefined
+      ? rowWidth - ROW_PADDING_HORIZONTAL * 2 - actionsWidth - HEADING_ROW_GAP
+      : undefined
 
   return (
     <View style={styles.listHeader}>
-      <View style={styles.headingRow}>
+      <View
+        style={styles.headingRow}
+        onLayout={handleRowLayout}
+        testID="conversations-filter-heading-row"
+      >
         <View style={styles.titleContainer}>
           <FilterDropdown
             options={options}
@@ -218,9 +240,14 @@ export const FilterDropdownListHeaderComponent = () => {
             onMoreFilters={handleOpenConversationFilters}
             showMoreFilters={showMoreFilters}
             triggerLabel={triggerLabel}
+            maxWidth={triggerMaxWidth}
           />
         </View>
-        <View style={styles.actionsContainer}>
+        <View
+          style={styles.actionsContainer}
+          onLayout={handleActionsLayout}
+          testID="conversations-filter-actions"
+        >
           <ListHeaderActionButton
             name="general.cog"
             onPress={handleChatSettings}
@@ -265,9 +292,8 @@ export const FilterDropdownListHeaderComponent = () => {
   )
 }
 
-const useStyles = () => {
+const useStyles = ({ stacked }: { stacked: boolean }) => {
   const theme = useTheme()
-  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
 
   return StyleSheet.create({
     listHeader: {
@@ -277,11 +303,11 @@ const useStyles = () => {
       gap: 8,
     },
     headingRow: {
-      gap: 12,
-      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
-      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
+      gap: HEADING_ROW_GAP,
+      flexDirection: stacked ? 'column' : 'row',
+      alignItems: stacked ? 'flex-start' : 'center',
       justifyContent: 'space-between',
-      paddingBottom: atFontScaleBreakpoint ? 4 : 0,
+      paddingBottom: stacked ? 4 : 0,
       paddingHorizontal: ROW_PADDING_HORIZONTAL,
     },
     titleContainer: {

package/src/utils/styles.ts

@@ -6,6 +6,7 @@ export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2 // Use in headers, footers,
 
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
 export const MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH = 32 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
+export const MESSAGE_BACKGROUND_OUTSET = 2
 
 export const platformFontWeightMedium = Platform.select({
   ios: tokens.fontWeightMedium,