@planningcenter/chat-react-native 4.4.1-qa-staging.25 → 4.4.1-qa-staging.27

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'
 
@@ -33,6 +35,7 @@ enum FilterTypes {
   Groups = 'Groups',
   Teams = 'Teams',
   DMs = 'DMs',
+  Unread = 'Unread',
   More = 'More',
 }
 
@@ -41,6 +44,7 @@ const FILTER_PARAMS: Record<Exclude<FilterTypes, FilterTypes.More>, Conversation
   [FilterTypes.Groups]: { group_source_app_name: 'Groups' },
   [FilterTypes.Teams]: { group_source_app_name: 'Services' },
   [FilterTypes.DMs]: { show_direct_messages: true },
+  [FilterTypes.Unread]: { show_unread: true },
 }
 
 export const FilterDropdownListHeaderComponent = () => {
@@ -59,6 +63,7 @@ export const FilterDropdownListHeaderComponent = () => {
     group_source_app_name = '',
     show_direct_messages,
     show_archived,
+    show_unread,
   } = route.params || {}
   const currentPersonCache = useCurrentPersonCache()
   const { markAllRead, isPending } = useMarkAllRead()
@@ -81,10 +86,12 @@ export const FilterDropdownListHeaderComponent = () => {
       return FilterTypes.Teams
     } else if (show_direct_messages) {
       return FilterTypes.DMs
+    } else if (show_unread) {
+      return FilterTypes.Unread
     }
 
     return FilterTypes.All
-  }, [chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived, show_unread])
 
   const options: FilterDropdownOption[] = useMemo(
     () => [
@@ -92,6 +99,7 @@ export const FilterDropdownListHeaderComponent = () => {
       ...(canFilterByGroups ? [{ id: FilterTypes.Groups, label: FilterTypes.Groups }] : []),
       ...(canFilterByTeams ? [{ id: FilterTypes.Teams, label: FilterTypes.Teams }] : []),
       ...(canFilterByDMs ? [{ id: FilterTypes.DMs, label: FilterTypes.DMs }] : []),
+      { id: FilterTypes.Unread, label: FilterTypes.Unread },
     ],
     [canFilterByGroups, canFilterByTeams, canFilterByDMs]
   )
@@ -142,6 +150,7 @@ export const FilterDropdownListHeaderComponent = () => {
         group_source_app_name: undefined,
         show_direct_messages: undefined,
         show_archived: undefined,
+        show_unread: undefined,
         ...params,
       })
     },
@@ -170,8 +179,16 @@ export const FilterDropdownListHeaderComponent = () => {
       group_source_app_name,
       show_direct_messages,
       show_archived,
+      show_unread,
     })
-  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
+  }, [
+    navigation,
+    chat_group_graph_id,
+    group_source_app_name,
+    show_direct_messages,
+    show_archived,
+    show_unread,
+  ])
 
   const handleMarkAllRead = useCallback(() => {
     currentPersonCache.update({ unreadCount: 0 })
@@ -190,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} testID="conversations-filter-heading-row">
+      <View
+        style={styles.headingRow}
+        onLayout={handleRowLayout}
+        testID="conversations-filter-heading-row"
+      >
         <View style={styles.titleContainer}>
           <FilterDropdown
             options={options}
@@ -203,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}
@@ -250,9 +292,8 @@ export const FilterDropdownListHeaderComponent = () => {
   )
 }
 
-const useStyles = () => {
+const useStyles = ({ stacked }: { stacked: boolean }) => {
   const theme = useTheme()
-  const atFontScaleBreakpoint = useAtFontScaleBreakpoint(MAX_FONT_SIZE_MULTIPLIER_LANDMARK)
 
   return StyleSheet.create({
     listHeader: {
@@ -262,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/screens/conversations/conversations_screen.tsx

@@ -8,7 +8,6 @@ import { analyticsEvents, usePublishProductAnalyticsEvent } from '../../hooks/us
 import { useSearchEnabled } from '../../hooks/use_search_enabled'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
-import { Menu } from '../../utils/native_adapters'
 import { FilterDropdownListHeaderComponent } from './components/filter_dropdown_list_header_component'
 import { ListHeaderComponent } from './components/list_header_component'
 import { SearchListHeaderComponent } from './components/search_list_header_component'
@@ -19,6 +18,7 @@ export type ConversationsScreenProps = StaticScreenProps<{
   group_source_app_name?: AppName
   show_direct_messages?: boolean
   show_archived?: boolean
+  show_unread?: boolean
 }>
 
 export function ConversationsScreen({ route }: ConversationsScreenProps) {
@@ -40,7 +40,7 @@ const useListHeaderComponent = () => {
   const filterDropdownEnabled = useFilterDropdownEnabled()
   const searchEnabled = useSearchEnabled()
 
-  if (filterDropdownEnabled && Menu.isConfigured) return FilterDropdownListHeaderComponent
+  if (filterDropdownEnabled) return FilterDropdownListHeaderComponent
   if (searchEnabled) return SearchListHeaderComponent
 
   return ListHeaderComponent

package/src/screens/design_system_screen.tsx

@@ -20,6 +20,7 @@ import {
   IconButton,
   Image,
   Person,
+  PopoverMenuView,
   Spinner,
   Switch,
   Text,
@@ -223,6 +224,7 @@ function PressablesSection({ isLast }: SectionProps) {
   const styles = useStyles()
   const [filterSelected, setFilterSelected] = useState('Groups')
   const [dropdownSelected, setDropdownSelected] = useState('all')
+  const [popoverSelected, setPopoverSelected] = useState('all')
 
   return (
     <CollapsableSection title="Pressables" isLast={isLast}>
@@ -400,7 +402,7 @@ function PressablesSection({ isLast }: SectionProps) {
       </Group>
       <Group
         title="FilterDropdown"
-        description="Trigger that opens the host's native menu of filter options plus a More filters action. Needs a menu adapter."
+        description="Trigger that opens the host's native menu of filter options plus a More filters action. Falls back to PopoverMenuView when the host configures no menu adapter."
       >
         <Row style={styles.alignRowLeft}>
           <FilterDropdown
@@ -414,6 +416,37 @@ function PressablesSection({ isLast }: SectionProps) {
           />
         </Row>
       </Group>
+      <Group
+        title="PopoverMenuView"
+        description="The JS-only menu FilterDropdown falls back to when the host configures no menu adapter. Opens under the trigger, or above it when the trigger is in the lower half of the screen."
+      >
+        <Row style={styles.alignRowLeft}>
+          <PopoverMenuView
+            actions={[
+              ...filterDropdownOptions.map(option => ({
+                id: option.id,
+                title: option.label,
+                state: option.id === popoverSelected ? ('on' as const) : ('off' as const),
+              })),
+              {
+                id: 'more',
+                title: '',
+                displayInline: true,
+                subactions: [{ id: 'more_filters', title: 'More filters' }],
+              },
+            ]}
+            onPressAction={({ nativeEvent }) =>
+              nativeEvent.event === 'more_filters'
+                ? Alert.alert('More filters')
+                : setPopoverSelected(nativeEvent.event)
+            }
+          >
+            <Text>
+              {filterDropdownOptions.find(option => option.id === popoverSelected)?.label} ▾
+            </Text>
+          </PopoverMenuView>
+        </Row>
+      </Group>
       <Group
         title="IconButton"
         description="Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers."

package/src/utils/__tests__/conversation.test.ts

@@ -13,6 +13,7 @@ describe('getConversationsRequestArgs', () => {
     ['chat_group_graph_id', { chat_group_graph_id: groupId }, 'mine_or_not_empty,group'],
     ['show_direct_messages', { show_direct_messages: true }, 'mine_or_not_empty,direct_message'],
     ['show_archived', { show_archived: true }, 'mine_or_not_empty,archived'],
+    ['show_unread', { show_unread: true }, 'mine_or_not_empty,unread'],
   ])('%s uses filter: %s', (_label, args, expectedFilter) => {
     expect(getConversationsRequestArgs(args).data.filter).toBe(expectedFilter)
   })

package/src/utils/native_adapters/menu.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import { StyleProp, View, ViewStyle } from 'react-native'
+import React from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
 
 // =================================
 // ====== Types ====================
@@ -47,24 +47,10 @@ export type MenuView = React.ComponentType<MenuViewProps>
 // ====== Adapter ==================
 // =================================
 
-function UnconfiguredMenuView({ children, style, testID }: MenuViewProps) {
-  useEffect(() => {
-    console.warn('ChatAdapters.configure() must include a menu adapter before rendering a menu')
-  }, [])
-
-  return (
-    <View style={style} testID={testID}>
-      {children}
-    </View>
-  )
-}
-
 export class MenuAdapter {
-  View: MenuView
-  isConfigured: boolean
+  View?: MenuView
 
   constructor(methods?: { View: MenuView }) {
-    this.View = methods?.View ?? UnconfiguredMenuView
-    this.isConfigured = !!methods?.View
+    this.View = methods?.View
   }
 }

package/src/utils/request/conversation.ts

@@ -7,6 +7,7 @@ export interface ConversationRequestArgs {
   group_source_app_name?: string
   show_direct_messages?: boolean
   show_archived?: boolean
+  show_unread?: boolean
 }
 
 export const getConversationsRequestArgs = ({
@@ -15,12 +16,15 @@ export const getConversationsRequestArgs = ({
   group_source_app_name,
   show_direct_messages,
   show_archived,
+  show_unread,
 }: Partial<ConversationRequestArgs> = {}): GetRequest => {
   let filter: string
   if (chat_group_graph_id) {
     filter = 'mine_or_not_empty,group'
   } else if (show_archived) {
     filter = 'mine_or_not_empty,archived'
+  } else if (show_unread) {
+    filter = 'mine_or_not_empty,unread'
   } else if (show_direct_messages) {
     filter = 'mine_or_not_empty,direct_message'
   } else if (group_source_app_name) {

package/src/utils/native_adapters/__tests__/menu.test.tsx

@@ -1,46 +0,0 @@
-import { render, screen } from '@testing-library/react-native'
-import React from 'react'
-import { Text } from 'react-native'
-import { MenuAdapter, MenuViewProps } from '../menu'
-
-const actions = [{ id: 'all', title: 'All' }]
-
-describe('MenuAdapter', () => {
-  it('renders the trigger and warns when the host configured no menu', () => {
-    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {})
-    const { View, isConfigured } = new MenuAdapter()
-
-    expect(isConfigured).toBe(false)
-
-    render(
-      <View actions={actions}>
-        <Text>Trigger</Text>
-      </View>
-    )
-
-    expect(screen.getByText('Trigger')).toBeTruthy()
-    expect(warn).toHaveBeenCalledTimes(1)
-    warn.mockRestore()
-  })
-
-  it('renders through the view the host supplies', () => {
-    const HostMenuView = ({ actions: hostActions, children }: MenuViewProps) => (
-      <>
-        {children}
-        <Text>{hostActions.map(action => action.title).join(',')}</Text>
-      </>
-    )
-    const { View, isConfigured } = new MenuAdapter({ View: HostMenuView })
-
-    expect(isConfigured).toBe(true)
-
-    render(
-      <View actions={actions}>
-        <Text>Trigger</Text>
-      </View>
-    )
-
-    expect(screen.getByText('Trigger')).toBeTruthy()
-    expect(screen.getByText('All')).toBeTruthy()
-  })
-})