@planningcenter/chat-react-native 3.14.0-rc.5 → 3.15.0-rc.0

package/src/screens/bug_report_screen.tsx

@@ -20,8 +20,8 @@ import { useUploadClient } from '../hooks/use_upload_client'
 import { ImagePicker, ImagePickerResult, platformFontWeightBold } from '../utils'
 import { useReportBugAction } from '../hooks/use_report_bug_action'
 import {
-  HeaderCancelButton,
-  HeaderSubmitButton,
+  HeaderDismissButton,
+  HeaderTextButton,
 } from '../components/display/platform_modal_header_buttons'
 import { DefaultLoading } from '../components/page/loading'
 import { startsWith } from 'lodash'
@@ -46,7 +46,7 @@ export const BugReportScreenOptions = ({
 }: NativeStackScreenProps<any>): NativeStackNavigationOptions => ({
   presentation: 'modal',
   title: 'Report a bug',
-  headerLeft: () => <HeaderCancelButton title="Cancel" onPress={() => navigation.goBack()} />,
+  headerLeft: () => <HeaderDismissButton title="Cancel" onPress={() => navigation.goBack()} />,
 })
 
 interface Attachment {
@@ -150,7 +150,7 @@ ${stepsToResolve}`
     navigation.setOptions({
       // eslint-disable-next-line react/no-unstable-nested-components
       headerRight: () => (
-        <HeaderSubmitButton title="Submit" onPress={handleSubmit} disabled={!formValid} />
+        <HeaderTextButton title="Submit" onPress={handleSubmit} disabled={!formValid} />
       ),
     })
   }, [formValid, handleSubmit, navigation])
@@ -237,7 +237,7 @@ ${stepsToResolve}`
         >
           <View style={styles.modalContainer}>
             <View style={styles.modalHeader}>
-              <HeaderCancelButton title="Cancel" onPress={() => setShowBugTypePicker(false)} />
+              <HeaderDismissButton title="Cancel" onPress={() => setShowBugTypePicker(false)} />
               <Text style={styles.modalTitle}>Select Bug Type</Text>
               <View style={styles.modalHeaderSpacer} />
             </View>

package/src/screens/conversation_details_screen.tsx

@@ -12,7 +12,6 @@ import {
   StyleSheet,
   TextInput,
   View,
-  type TextStyle,
   type ViewStyle,
   type ViewProps,
   Pressable,
@@ -20,7 +19,17 @@ import {
   Platform,
 } from 'react-native'
 import { HeaderTitle as ElementsHeaderTitle, HeaderTitleProps } from '@react-navigation/elements'
-import { Badge, ChildNotice, Heading, Icon, Person, Switch, Text, TextButton } from '../components'
+import {
+  Badge,
+  ChildNotice,
+  Heading,
+  Icon,
+  Person,
+  Switch,
+  Text,
+  TextButton,
+  type TextStyle,
+} from '../components'
 import { useSuspensePaginator, useTheme } from '../hooks'
 import {
   useConversation,
@@ -30,7 +39,7 @@ import {
   useConversationUpdate,
 } from '../hooks/use_conversation'
 import { MemberResource, isDefined } from '../types'
-import { HeaderSubmitButton } from '../components/display/platform_modal_header_buttons'
+import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { FlashList } from '@shopify/flash-list'
 import { tokens } from '../vendor/tapestry/tokens'
 import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
@@ -192,7 +201,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
 
   const HeaderRight = useCallback(() => {
     return (
-      <HeaderSubmitButton
+      <HeaderTextButton
         onPress={() => {
           saveTitle({ title: trimmedTitle || conversation.title })
           navigation.goBack()

package/src/screens/conversation_new/components/filter_by_plan.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { StyleSheet, View, FlatList, Platform } from 'react-native'
 import { Header, PlatformPressable } from '@react-navigation/elements'
 import { Banner, Icon, Spinner, Text, Heading } from '../../../components'
-import { HeaderCancelButton } from '../../../components/display/platform_modal_header_buttons'
+import { HeaderDismissButton } from '../../../components/display/platform_modal_header_buttons'
 import { useTeamPlans } from '../../../hooks/services/use_team_plans'
 import { useTheme } from '../../../hooks'
 import { tokens } from '../../../vendor/tapestry/tokens'
@@ -192,7 +192,7 @@ export function FilterByPlanModal({
 // ==========================================
 
 const createStableHeaderRight = (onClose: () => void) => () => (
-  <HeaderCancelButton onPress={onClose} title="Cancel" />
+  <HeaderDismissButton onPress={onClose} title="Cancel" />
 )
 
 function OptionItem({ plan, isSelected, onPress }: OptionItemProps) {

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

@@ -2,12 +2,13 @@ import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import React, { useCallback, useMemo } from 'react'
 import { Alert, ScrollView, StyleSheet, View } from 'react-native'
 import { Heading, TextButton, ToggleButton } from '../../../components'
-import { useCurrentPersonCache, useTheme } from '../../../hooks'
+import { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../../../hooks'
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
 import { useCanDisplayGroups } from '../../../hooks/use_groups'
 import { ConversationsScreenProps } from '../conversations_screen'
 import { ChatGroupBadge } from './chat_group_badge'
 import { Haptic } from '../../../utils/native_adapters'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
 
 const ROW_PADDING_HORIZONTAL = 16
 
@@ -63,7 +64,11 @@ export const ListHeaderComponent = () => {
         <Heading numberOfLines={1} variant="h2">
           Conversations
         </Heading>
-        <TextButton onPress={alertMarkAllRead} disabled={isPending}>
+        <TextButton
+          onPress={alertMarkAllRead}
+          disabled={isPending}
+          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+        >
           Mark all read
         </TextButton>
       </View>
@@ -131,6 +136,8 @@ export const ListHeaderComponent = () => {
 
 const useStyles = () => {
   const theme = useTheme()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+
   return StyleSheet.create({
     listHeader: {
       borderBottomWidth: 1,
@@ -139,9 +146,14 @@ const useStyles = () => {
       gap: 12,
     },
     titleRow: {
-      flexDirection: 'row',
+      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
       justifyContent: 'space-between',
+      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
+      flexWrap: 'wrap',
+      rowGap: 8,
+      columnGap: 16,
       paddingTop: 8,
+      paddingBottom: atFontScaleBreakpoint ? 8 : 0,
       paddingHorizontal: ROW_PADDING_HORIZONTAL,
     },
     filterRow: {

package/src/screens/conversations/conversations_screen.tsx

@@ -6,7 +6,7 @@ import { ActionButton } from '../../components/display/action_button'
 import { ConversationsContextProvider } from '../../contexts/conversations_context'
 import { useCanCreateConversations } from '../../hooks'
 import { GraphId } from '../../types/resources/group_resource'
-import { destructureChatGroupGraphId } from '../../utils'
+import { destructureChatGroupGraphId, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 import { ListHeaderComponent } from './components/list_header_component'
 import { AppName } from '../../types/resources/app_name'
 
@@ -69,7 +69,11 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
         onPress={handleNewConversationNavigation}
         buttonIconNameLeft="churchCenter.signups"
         secondaryButton={
-          <TextButton variant="tertiary" onPress={reportABug}>
+          <TextButton
+            variant="tertiary"
+            onPress={reportABug}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          >
             Report a bug
           </TextButton>
         }

package/src/utils/styles.ts

@@ -2,6 +2,7 @@ import { Platform } from 'react-native'
 import { tokens } from '../vendor/tapestry/tokens'
 
 export const MAX_FONT_SIZE_MULTIPLIER = 1.5
+export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.3 // Use in headers, footers, toolbars, etc.
 
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
 

package/build/navigation/header.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { HeaderButtonProps } from '@react-navigation/elements';
-import { TextProps, TextStyle } from 'react-native';
-type HeaderRightButtonProps = HeaderButtonProps & {
-    children: TextProps['children'];
-    textStyle?: TextStyle;
-};
-export declare const HeaderRightButton: (props: HeaderRightButtonProps) => React.JSX.Element;
-export {};
-//# sourceMappingURL=header.d.ts.map

package/build/navigation/header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/navigation/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAgB,iBAAiB,EAAQ,MAAM,4BAA4B,CAAA;AAClF,OAAO,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE/D,KAAK,sBAAsB,GAAG,iBAAiB,GAAG;IAChD,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAA;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,sBAc9D,CAAA"}

package/build/navigation/header.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { HeaderButton, Text } from '@react-navigation/elements';
-import { StyleSheet } from 'react-native';
-export const HeaderRightButton = (props) => {
-    const styles = StyleSheet.create({
-        text: {
-            fontSize: 16,
-        },
-    });
-    return (<HeaderButton {...props} style={props.style}>
-      <Text style={[styles.text, props.textStyle]} numberOfLines={1}>
-        {props.children}
-      </Text>
-    </HeaderButton>);
-};
-//# sourceMappingURL=header.js.map

package/build/navigation/header.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/navigation/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAqB,IAAI,EAAE,MAAM,4BAA4B,CAAA;AAClF,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAO/D,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IACjE,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,IAAI,EAAE;YACJ,QAAQ,EAAE,EAAE;SACb;KACF,CAAC,CAAA;IAEF,OAAO,CACL,CAAC,YAAY,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAC1C;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAC5D;QAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,YAAY,CAAC,CAChB,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { HeaderButton, HeaderButtonProps, Text } from '@react-navigation/elements'\nimport { StyleSheet, TextProps, TextStyle } from 'react-native'\n\ntype HeaderRightButtonProps = HeaderButtonProps & {\n  children: TextProps['children']\n  textStyle?: TextStyle\n}\n\nexport const HeaderRightButton = (props: HeaderRightButtonProps) => {\n  const styles = StyleSheet.create({\n    text: {\n      fontSize: 16,\n    },\n  })\n\n  return (\n    <HeaderButton {...props} style={props.style}>\n      <Text style={[styles.text, props.textStyle]} numberOfLines={1}>\n        {props.children}\n      </Text>\n    </HeaderButton>\n  )\n}\n"]}

package/src/navigation/header.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { HeaderButton, HeaderButtonProps, Text } from '@react-navigation/elements'
-import { StyleSheet, TextProps, TextStyle } from 'react-native'
-
-type HeaderRightButtonProps = HeaderButtonProps & {
-  children: TextProps['children']
-  textStyle?: TextStyle
-}
-
-export const HeaderRightButton = (props: HeaderRightButtonProps) => {
-  const styles = StyleSheet.create({
-    text: {
-      fontSize: 16,
-    },
-  })
-
-  return (
-    <HeaderButton {...props} style={props.style}>
-      <Text style={[styles.text, props.textStyle]} numberOfLines={1}>
-        {props.children}
-      </Text>
-    </HeaderButton>
-  )
-}