@planningcenter/chat-react-native 3.7.0-rc.8 → 3.7.0

package/src/components/display/button.tsx

@@ -64,13 +64,13 @@ export interface ButtonProps extends PressableProps {
    */
   appearance?: ButtonAppearanceUnion
   /**
-   * Styles the inner View that wraps the button's content
+   * Styles the outer LinearGradient that gives the button its background and outline color
    */
-  buttonInnerStyles?: ViewStyle
+  colorWrapperStyles?: ViewStyle
   /**
-   * Styles the outer LinearGradient that gives the button it's backgrounnd and outline color
+   * Styles the inner View that wraps the button's content
    */
-  buttonOuterStyles?: ViewStyle
+  contentWrapperStyles?: ViewStyle
   /**
    * Generates an icon to the left of the button text
    */
@@ -109,8 +109,8 @@ export function Button({
   adjustsFontSizeToFit = false,
   allowFontScaling = true,
   appearance = 'interaction',
-  buttonInnerStyles,
-  buttonOuterStyles,
+  contentWrapperStyles,
+  colorWrapperStyles,
   disabled = false,
   iconNameLeft,
   iconNameRight,
@@ -120,12 +120,14 @@ export function Button({
   size = 'md',
   title,
   variant = 'fill',
+  style,
   ...props
 }: ButtonProps) {
   const styles = useStyles({ appearance, disabled, loading, maxFontSizeMultiplier, size, variant })
   const gradientOptionsMap = useGradientColorMap()
   const colorKey = getColorKey({ disabled, loading, appearance })
 
+  const overrideStyles = StyleSheet.flatten(style)
   const textStyles = [styles.text, disabled && styles.textDisabled, loading && styles.iconLoading]
   const iconStyles = [styles.icon, disabled && styles.iconDisabled, loading && styles.textLoading]
 
@@ -133,7 +135,11 @@ export function Button({
 
   return (
     <Pressable
-      style={({ pressed }) => [styles.pressable, pressed && platformPressedOpacityStyle]}
+      style={({ pressed }) => ({
+        ...styles.pressable,
+        ...(pressed && platformPressedOpacityStyle),
+        ...overrideStyles,
+      })}
       accessibilityRole="button"
       disabled={disabled || loading}
       accessibilityState={{ busy: loading }}
@@ -144,7 +150,7 @@ export function Button({
         start={{ x: 0.1, y: 0.1 }}
         end={{ x: 0.9, y: 0.9 }}
         colors={gradientOptionsMap[colorKey]}
-        style={[styles.colorWrapper, buttonOuterStyles]}
+        style={[styles.colorWrapper, colorWrapperStyles]}
       >
         {loading && (
           <Spinner
@@ -152,7 +158,7 @@ export function Button({
             maxFontSizeMultiplier={maxFontSizeMultiplier || 0}
           />
         )}
-        <View style={[styles.innerWrapper, buttonInnerStyles]}>
+        <View style={[styles.innerWrapper, contentWrapperStyles]}>
           {iconNameLeft && (
             <Icon
               name={iconNameLeft}

package/src/components/display/icon.tsx

@@ -5,6 +5,8 @@ import { SvgXml } from 'react-native-svg'
 import type { XmlProps } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
 
+// @ts-ignore
+import * as accounts from '@planningcenter/icons/paths/accounts'
 // @ts-ignore
 import * as api from '@planningcenter/icons/paths/api'
 // @ts-ignore
@@ -33,6 +35,7 @@ import * as publishing from '@planningcenter/icons/paths/publishing'
 const FALLBACK_SIZE = 12
 
 const ICONS = {
+  accounts,
   api,
   brand,
   calendar,

package/src/components/primitive/form_sheet.tsx

@@ -1,10 +1,16 @@
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import React, { ReactNode } from 'react'
-import { AccessibilityRole, Platform, StyleSheet, View } from 'react-native'
+import {
+  Platform,
+  StyleSheet,
+  View,
+  useWindowDimensions,
+  type AccessibilityRole,
+} from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
-import { PlatformPressable } from '@react-navigation/elements'
-import { Icon, IconString, Text } from '../display'
+import { PlatformPressable, useHeaderHeight } from '@react-navigation/elements'
+import { Heading, Icon, IconString, Text } from '../display'
 
 // =================================
 // ====== Exports ==================
@@ -34,15 +40,17 @@ export const getFormSheetScreenOptions = ({
 const FormSheet = {
   Root: FormSheetRoot,
   Action: FormSheetAction,
+  Header: FormSheetHeader,
 } as const
 
 type FormSheetComponents = {
   Root: React.FC<FormSheetRootProps>
   Action: React.FC<FormSheetActionProps>
+  Header: React.FC<FormSheetHeaderProps>
 }
 
 export default FormSheet as FormSheetComponents
-export type { FormSheetRootProps, FormSheetActionProps }
+export type { FormSheetRootProps, FormSheetActionProps, FormSheetHeaderProps }
 
 // ====================================
 // ====== ActionsFormSheetRoot ========
@@ -56,7 +64,7 @@ export function FormSheetRoot({ children }: FormSheetRootProps) {
   const styles = useStyles()
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} collapsable={false}>
       <AndroidSheetGrabber />
       <View style={styles.content}>{children}</View>
     </View>
@@ -78,6 +86,36 @@ function AndroidSheetGrabber() {
   })
 }
 
+// ====================================
+// ====== FormSheetHeader =============
+// ====================================
+
+interface FormSheetHeaderProps {
+  title: string
+  secondaryButton?: ReactNode
+  primaryButton?: ReactNode
+}
+function FormSheetHeader({ title, secondaryButton, primaryButton }: FormSheetHeaderProps) {
+  const styles = useStyles()
+  const hasActions = Boolean(secondaryButton) || Boolean(primaryButton)
+
+  return (
+    <View style={styles.header}>
+      <Heading variant="h3" style={styles.headerTitle}>
+        {title}
+      </Heading>
+      {hasActions && (
+        <View style={styles.headerActions}>
+          {secondaryButton}
+          {primaryButton}
+        </View>
+      )}
+    </View>
+  )
+}
+
+FormSheetHeader.displayName = 'FormSheet.Header'
+
 // ====================================
 // ====== ActionsFormSheetAction ======
 // ====================================
@@ -98,6 +136,7 @@ interface FormSheetActionProps {
   accessibilityHint?: string
   accessibilityRole?: AccessibilityRole
   appearance?: FormSheetActionAppearanceUnion
+  disabled?: boolean
 }
 
 function FormSheetAction({
@@ -108,6 +147,7 @@ function FormSheetAction({
   accessibilityHint,
   accessibilityRole = 'button',
   appearance = 'neutral',
+  disabled = false,
 }: FormSheetActionProps) {
   const styles = useStyles({ appearance })
 
@@ -118,6 +158,7 @@ function FormSheetAction({
       accessibilityHint={accessibilityHint}
       accessibilityRole={accessibilityRole}
       style={styles.actionPressable}
+      disabled={disabled}
     >
       <Icon name={iconName} size={16} accessibilityElementsHidden style={styles.actionIcon} />
       <Text style={styles.actionTitle}>{title}</Text>
@@ -137,7 +178,14 @@ interface Styles {
 
 const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
   const { colors } = useTheme()
-  const { bottom } = useSafeAreaInsets()
+  const { height } = useWindowDimensions()
+  const { bottom, top } = useSafeAreaInsets()
+  const headerHeight = useHeaderHeight()
+
+  const containerHeight = Platform.select({
+    ios: height - top - headerHeight,
+    default: null,
+  })
 
   const appearanceColorsMap = {
     neutral: {
@@ -157,6 +205,7 @@ const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
       paddingBottom: bottom,
       width: '100%',
       backgroundColor: colors.fillColorNeutral100Inverted,
+      height: containerHeight,
     },
     androidSheetGrabber: {
       marginTop: 5,
@@ -169,6 +218,25 @@ const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
     content: {
       paddingTop: Platform.select({ android: 16, ios: 20 }),
     },
+    header: {
+      backgroundColor: colors.fillColorNeutral100Inverted,
+      paddingHorizontal: 16,
+      paddingBottom: 16,
+      gap: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.borderColorDefaultBase,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    headerTitle: {
+      textAlign: 'left',
+    },
+    headerActions: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 16,
+    },
     actionPressable: {
       flexDirection: 'row',
       alignItems: 'center',

package/src/screens/attachment_actions/attachment_actions_screen.tsx

@@ -1,6 +1,6 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import React from 'react'
-import { Linking } from 'react-native'
+import React, { useCallback } from 'react'
+import { Alert, Linking } from 'react-native'
 import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'
 import { useDeleteAttachment } from './hooks/useDeleteAttachment'
 
@@ -37,6 +37,17 @@ export function AttachmentActionsScreen({ route }: AttachmentActionsScreenProps)
     attachmentName,
   })
 
+  const handleDeleteConfirm = useCallback(() => {
+    Alert.alert(
+      `Delete ${attachmentName}`,
+      'Are you sure you want to permanently delete this attachment?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'Delete', style: 'destructive', onPress: () => handleDeleteAttachment() },
+      ]
+    )
+  }, [attachmentName, handleDeleteAttachment])
+
   const handleOpenInBrowser = () => {
     Linking.openURL(attachmentUrl)
     navigation.goBack()
@@ -57,7 +68,7 @@ export function AttachmentActionsScreen({ route }: AttachmentActionsScreenProps)
           appearance="danger"
           iconName="publishing.trash"
           title={`Delete ${attachmentName}`}
-          onPress={handleDeleteAttachment}
+          onPress={handleDeleteConfirm}
         />
       )}
     </FormSheet.Root>

package/src/screens/conversation/message_read_receipts_screen.tsx

@@ -1,26 +1,21 @@
-import { useHeaderHeight } from '@react-navigation/elements'
-import { StaticScreenProps } from '@react-navigation/native'
-import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React, { memo } from 'react'
-import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Avatar, Heading, Text } from '../../components'
-import { useTheme } from '../../hooks'
+import { Avatar, Text, TextButton } from '../../components'
 import { useReadReceipts } from '../../hooks/use_read_receipts'
 import { FlatList } from 'react-native-gesture-handler'
 import { ReadReceiptResource } from '../../types/resources/read_receipt'
+import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'
+import { useTheme } from '../../hooks'
 
-export const MessageReadReceiptsScreenOptions: NativeStackNavigationOptions = {
-  presentation: 'formSheet',
+export const MessageReadReceiptsScreenOptions = getFormSheetScreenOptions({
   sheetAllowedDetents: Platform.select({
-    android: [0.25, 0.94], // Going straight to full 0.94 preserves height of screen on Android
-    default: [0.25, 0.5, 1],
+    android: [0.5, 0.94], // Going straight to full 0.94 preserves height of screen on Android
+    default: [0.5, 1],
   }),
-  sheetGrabberVisible: true,
-  headerShown: false,
-  sheetCornerRadius: 16,
   headerTitle: 'Read receipts',
-}
+})
 
 export type MessageReadReceiptsScreenProps = StaticScreenProps<{
   conversation_id: number
@@ -29,6 +24,7 @@ export type MessageReadReceiptsScreenProps = StaticScreenProps<{
 
 export function MessageReadReceiptsScreen({ route }: MessageReadReceiptsScreenProps) {
   const styles = useStyles()
+  const navigation = useNavigation()
 
   const { conversation_id, message_id } = route.params
   const {
@@ -38,22 +34,22 @@ export function MessageReadReceiptsScreen({ route }: MessageReadReceiptsScreenPr
   } = useReadReceipts({ conversation_id, message_id })
 
   return (
-    <View style={styles.container} collapsable={false}>
-      <Heading variant="h3" style={styles.header}>
-        Read receipts ({totalCount})
-      </Heading>
+    <FormSheet.Root>
+      <FormSheet.Header
+        title={`Read receipts (${totalCount})`}
+        secondaryButton={<TextButton onPress={() => navigation.goBack()}>Close</TextButton>}
+      />
       <FlatList
         data={receipts}
-        style={styles.contentContainer}
+        contentContainerStyle={styles.contentContainer}
         keyExtractor={item => item.id.toString()}
         renderItem={({ item }) => <Receipt receipt={item} />}
         nestedScrollEnabled
-        ListFooterComponent={<View style={styles.footer} />}
         ListEmptyComponent={<Text style={styles.emptyText}>No one has read this message yet.</Text>}
         onEndReached={() => fetchNextPage()}
         onEndReachedThreshold={0.2}
       />
-    </View>
+    </FormSheet.Root>
   )
 }
 
@@ -71,29 +67,14 @@ const Receipt = memo(({ receipt }: { receipt: ReadReceiptResource }) => {
 })
 
 const useStyles = () => {
-  const theme = useTheme()
-  const { height } = useWindowDimensions()
-  const { bottom, top } = useSafeAreaInsets()
-  const headerHeight = useHeaderHeight()
-
-  const containerHeight = Platform.select({
-    android: null,
-    ios: height - top - headerHeight,
-  })
+  const { bottom } = useSafeAreaInsets()
+  const { colors } = useTheme()
 
   return StyleSheet.create({
-    container: {
-      paddingTop: 16,
-      backgroundColor: theme.colors.fillColorNeutral100Inverted,
-      height: containerHeight,
-      flex: 1,
-    },
     contentContainer: {
       paddingHorizontal: 16,
-    },
-    header: {
-      paddingHorizontal: 16,
-      paddingBottom: 8,
+      paddingTop: 8,
+      paddingBottom: bottom + Platform.select({ android: 24, default: 16 }),
     },
     receiptRow: {
       flexDirection: 'row',
@@ -105,12 +86,9 @@ const useStyles = () => {
     name: {
       flex: 1,
     },
-    footer: {
-      height: bottom + 16,
-    },
     emptyText: {
       textAlign: 'center',
-      color: '#888',
+      color: colors.textColorDefaultSecondary,
       marginTop: 32,
       fontSize: 16,
     },

package/src/screens/conversation_screen.tsx

@@ -18,6 +18,7 @@ import {
   MemberDisabledRepliesBanner,
 } from '../components/conversation/disabled_replies_banners'
 import { EmptyConversationBlankState } from '../components/conversation/empty_conversation_blank_state'
+import { BlankState } from '../components/display/blank_state'
 import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
@@ -93,9 +94,16 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   if (!conversation || conversation.deleted) {
     return (
       <View style={styles.container}>
-        <Text variant="plain" style={styles.deletedAlert}>
-          This conversation has been deleted.
-        </Text>
+        <BlankState
+          iconName="general.outlinedTextMessage"
+          title="This conversation has been deleted"
+          buttonProps={{
+            onPress: navigation.goBack,
+            title: 'Back to conversations',
+            accessibilityHint: 'Navigates back to the conversations list',
+            accessibilityRole: 'link',
+          }}
+        />
       </View>
     )
   }
@@ -310,10 +318,6 @@ const useStyles = () => {
       // Just whitespace to provide space where the typing indicator can be
       height: 16,
     },
-    deletedAlert: {
-      textAlign: 'center',
-      padding: 16,
-    },
   })
 }
 

package/src/screens/message_actions_screen.tsx

@@ -1,11 +1,9 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
-import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import { useMutation } from '@tanstack/react-query'
 import React, { useCallback } from 'react'
-import { Alert, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Text, TextButton } from '../components'
+import { Alert, Platform, StyleSheet, View } from 'react-native'
+import { Text } from '../components'
 import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'
 import { useTheme } from '../hooks'
 import { useApiClient } from '../hooks/use_api_client'
@@ -14,13 +12,12 @@ import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
 import { ReactionCountResource } from '../types/resources/reaction'
 import { Clipboard } from '../utils/native_adapters'
 import { isNil, omitBy } from 'lodash'
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 
-export const MessageActionsScreenOptions: NativeStackNavigationOptions = {
-  presentation: 'formSheet',
-  headerShown: false,
-  sheetAllowedDetents: [0.35],
-  sheetGrabberVisible: true,
-}
+export const MessageActionsScreenOptions = getFormSheetScreenOptions({
+  sheetAllowedDetents: [0.5],
+  headerTitle: 'Message actions',
+})
 
 export type MessageActionsScreenProps = StaticScreenProps<{
   message_id: string
@@ -92,6 +89,13 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
     },
   })
 
+  const handleDeleteConfirm = useCallback(() => {
+    Alert.alert('Delete message', 'Are you sure you want to permanently delete this message?', [
+      { text: 'Cancel', style: 'cancel' },
+      { text: 'Delete', style: 'destructive', onPress: () => handleDeleteMessage() },
+    ])
+  }, [handleDeleteMessage])
+
   const handleEditPress = useCallback(() => {
     const state = navigation.getState?.()
     const targetRoute = state?.routes?.find(r => r.name === 'Conversation')
@@ -118,7 +122,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
   }, [navigation, conversation_id, message_id])
 
   return (
-    <View style={styles.container}>
+    <FormSheet.Root>
       <View style={styles.reactionList}>
         {availableReactions.map((reaction, index) => (
           <Reaction
@@ -134,26 +138,40 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
         ))}
       </View>
       <View style={styles.actions}>
-        <View style={styles.actionButton}>
-          <TextButton onPress={handleCopyPress}>Copy</TextButton>
-          {message?.mine && <TextButton onPress={() => handleEditPress()}>Edit</TextButton>}
-          {message?.mine && (
-            <TextButton onPress={() => handleViewReadReceiptsPress()}>
-              View read receipts
-            </TextButton>
-          )}
-          {(message?.mine || canDeleteNonAuthoredMessages) && (
-            <TextButton
-              appearance="danger"
-              onPress={() => handleDeleteMessage()}
-              disabled={isPending}
-            >
-              Delete
-            </TextButton>
-          )}
-        </View>
+        <FormSheet.Action
+          onPress={handleCopyPress}
+          title="Copy text"
+          iconName="services.fileCopy"
+          accessibilityHint="Copies text and links to clipboard"
+        />
+        {message?.mine && (
+          <FormSheet.Action
+            onPress={() => handleEditPress()}
+            title="Edit message"
+            iconName="accounts.editor"
+            accessibilityHint="Opens existing text in the message form input."
+          />
+        )}
+        {message?.mine && (
+          <FormSheet.Action
+            onPress={() => handleViewReadReceiptsPress()}
+            title="View read receipts"
+            iconName="general.checkPerson"
+            accessibilityHint="Opens a modal with a list of people who read your message."
+          />
+        )}
+        {(message?.mine || canDeleteNonAuthoredMessages) && (
+          <FormSheet.Action
+            onPress={() => handleDeleteConfirm()}
+            title="Delete message"
+            iconName="publishing.trash"
+            appearance="danger"
+            disabled={isPending}
+            accessibilityHint="Opens a confirmation alert to delete this message permanently."
+          />
+        )}
       </View>
-    </View>
+    </FormSheet.Root>
   )
 }
 
@@ -173,15 +191,14 @@ const Reaction = ({
       style={[reactionStyles.reaction, styles.reaction]}
       onPress={onPress}
     >
-      <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
+      <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
     </PlatformPressable>
   )
 }
 
 const useStyles = () => {
-  const theme = useTheme()
-  const { height } = useWindowDimensions()
-  const { bottom } = useSafeAreaInsets()
+  const { colors } = useTheme()
+
   const btnBorderWidth = 1
   const baseSize = 44
   const reactionBtnSize = Platform.select({
@@ -190,13 +207,15 @@ const useStyles = () => {
   })
 
   return StyleSheet.create({
-    container: {
-      justifyContent: 'flex-start',
-      paddingTop: 12,
-      paddingBottom: bottom,
-      width: '100%',
-      backgroundColor: theme.colors.fillColorNeutral100Inverted,
-      height,
+    reactionList: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: 16,
+      paddingTop: 8,
+      paddingBottom: 16,
+      borderBottomColor: colors.borderColorDefaultBase,
+      borderBottomWidth: 1,
     },
     reaction: {
       height: reactionBtnSize,
@@ -205,15 +224,11 @@ const useStyles = () => {
       borderRadius: 32,
       justifyContent: 'center',
     },
-    reactionList: {
-      justifyContent: 'center',
-      gap: 24,
-      paddingVertical: 12,
-      flexDirection: 'row',
-      borderBottomColor: theme.colors.fillColorNeutral040,
-      borderBottomWidth: 1,
+    reactionEmoji: {
+      fontSize: 24,
+    },
+    actions: {
+      paddingTop: 4,
     },
-    actions: { flex: 1 },
-    actionButton: { padding: 12, paddingBottom: 100, gap: 12 },
   })
 }