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

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

@@ -1,13 +1,17 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import React, { useCallback, useMemo, useState } from 'react'
 import { Alert, LayoutChangeEvent, StyleSheet, View } from 'react-native'
-import { FilterDropdown, FilterDropdownOption, TextButton } from '../../../components'
+import {
+  FilterDropdown,
+  FilterDropdownOption,
+  FilterDropdownTrigger,
+  TextButton,
+} from '../../../components'
 import {
   useCanBrowseArchivedConversations,
   useCanCreateConversations,
   useCurrentPersonCache,
   useDirectMessagesEligible,
-  useFontScale,
   useHasDirectMessages,
   useNewConversationEntry,
   useTheme,
@@ -26,7 +30,6 @@ 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'
 
@@ -207,31 +210,43 @@ export const FilterDropdownListHeaderComponent = () => {
 
   const showMoreFilters = canFilterByGroups || canFilterByTeams || canBrowseArchived
 
-  const stacked = useFontScale() > DEFAULT_FONT_SCALE
-  const styles = useStyles({ stacked })
+  const styles = useStyles()
 
-  // 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.
+  // Cap the trigger beside the actions while the widest fixed label fits there, so only longer
+  // labels truncate; past that, cap it to the row and let the actions wrap.
   const [rowWidth, setRowWidth] = useState<number>()
   const [actionsWidth, setActionsWidth] = useState<number>()
+  const [widestFixedLabelWidth, setWidestFixedLabelWidth] = 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
+  const handleWidestFixedLabelLayout = useCallback((event: LayoutChangeEvent) => {
+    setWidestFixedLabelWidth(event.nativeEvent.layout.width)
+  }, [])
+  const triggerMaxWidth = useMemo(() => {
+    if (rowWidth === undefined) return undefined
+
+    const rowContentWidth = rowWidth - ROW_PADDING_HORIZONTAL * 2
+    if (actionsWidth === undefined || widestFixedLabelWidth === undefined) return rowContentWidth
+
+    const roomBesideActions = rowContentWidth - actionsWidth - HEADING_ROW_GAP
+    return roomBesideActions >= widestFixedLabelWidth ? roomBesideActions : rowContentWidth
+  }, [rowWidth, actionsWidth, widestFixedLabelWidth])
 
   return (
     <View style={styles.listHeader}>
-      <View
-        style={styles.headingRow}
-        onLayout={handleRowLayout}
-        testID="conversations-filter-heading-row"
-      >
+      <View style={styles.widestFixedLabel} pointerEvents="none">
+        <FilterDropdownTrigger
+          label={ALL_CONVERSATIONS_LABEL}
+          onLayout={handleWidestFixedLabelLayout}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        />
+      </View>
+      <View style={styles.headingRow} onLayout={handleRowLayout}>
         <View style={styles.titleContainer}>
           <FilterDropdown
             options={options}
@@ -243,11 +258,7 @@ export const FilterDropdownListHeaderComponent = () => {
             maxWidth={triggerMaxWidth}
           />
         </View>
-        <View
-          style={styles.actionsContainer}
-          onLayout={handleActionsLayout}
-          testID="conversations-filter-actions"
-        >
+        <View style={styles.actionsContainer} onLayout={handleActionsLayout}>
           <ListHeaderActionButton
             name="general.cog"
             onPress={handleChatSettings}
@@ -292,7 +303,7 @@ export const FilterDropdownListHeaderComponent = () => {
   )
 }
 
-const useStyles = ({ stacked }: { stacked: boolean }) => {
+const useStyles = () => {
   const theme = useTheme()
 
   return StyleSheet.create({
@@ -304,15 +315,18 @@ const useStyles = ({ stacked }: { stacked: boolean }) => {
     },
     headingRow: {
       gap: HEADING_ROW_GAP,
-      flexDirection: stacked ? 'column' : 'row',
-      alignItems: stacked ? 'flex-start' : 'center',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
       justifyContent: 'space-between',
-      paddingBottom: stacked ? 4 : 0,
       paddingHorizontal: ROW_PADDING_HORIZONTAL,
     },
     titleContainer: {
-      flexShrink: 1,
-      minWidth: 0,
+      flexShrink: 0,
+    },
+    widestFixedLabel: {
+      position: 'absolute',
+      opacity: 0,
     },
     actionsContainer: {
       flexDirection: 'row',

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()
-  })
-})