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

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