@planningcenter/chat-react-native 4.5.0-rc.1 → 4.5.0-rc.3

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/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'
@@ -41,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/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/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()
-  })
-})