@planningcenter/chat-react-native 3.4.1-rc.9 → 3.4.1

package/src/screens/attachment_actions/attachment_actions_screen.tsx

@@ -0,0 +1,56 @@
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React from 'react'
+import { Linking } from 'react-native'
+import { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource'
+import ActionsFormSheet, {
+  BaseActionsFormSheetOptions,
+} from '../../components/primitive/actions_form_sheet'
+
+export const AttachmentActionsScreenOptions = BaseActionsFormSheetOptions
+
+export type AttachmentActionsScreenProps = StaticScreenProps<{
+  attachment: DenormalizedAttachmentResource
+}>
+
+export function AttachmentActionsScreen({ route }: AttachmentActionsScreenProps) {
+  const navigation = useNavigation()
+  const { attachment } = route.params
+
+  const attachmentName = getAttachmentLabelName(attachment)
+
+  const handleSaveAttachment = () => {
+    if (attachment.type === 'giphy') {
+      Linking.openURL(attachment.titleLink)
+    } else {
+      Linking.openURL(attachment.attributes.url)
+    }
+
+    navigation.goBack()
+  }
+
+  return (
+    <ActionsFormSheet.Root>
+      <ActionsFormSheet.Action
+        iconName="general.newWindow"
+        title="Open in browser"
+        accessibilityRole="link"
+        accessibilityLabel={`Open ${attachmentName} in browser`}
+        accessibilityHint={`${attachmentName} can be downloaded and shared through the browser.`}
+        onPress={handleSaveAttachment}
+      />
+    </ActionsFormSheet.Root>
+  )
+}
+
+function getAttachmentLabelName(attachment: DenormalizedAttachmentResource) {
+  if (attachment.type === 'giphy') return 'giphy'
+  if (attachment.type === 'ExpandedLink') return 'link'
+
+  const { contentType } = attachment.attributes
+  if (contentType.startsWith('image/')) return 'image'
+  if (contentType.startsWith('video/')) return 'video'
+  if (contentType.startsWith('audio/')) return 'audio'
+  if (contentType.startsWith('application/')) return 'file'
+
+  return ''
+}

package/src/types/api_primitives.ts

@@ -23,7 +23,7 @@ export type ApiCollection<Type = ResourceObject> = {
   meta: CollectionMeta
 }
 
-export interface ApiError {
+export interface ApiError extends Response {
   errors: ErrorObject[]
 }
 

package/src/utils/index.ts

@@ -8,3 +8,4 @@ export * from './cache'
 export * from './native_adapters'
 export * from './pluralize'
 export * from './destructure_chat_group_graph_id'
+export * from './navigation_constants'

package/src/utils/native_adapters/configuration.ts

@@ -1,3 +1,4 @@
+import { LogAdapter } from './log'
 import { AudioAdapter } from './audio'
 import { ClipboardAdapter } from './clipboard'
 import { ImagePickerAdapter } from './image_picker'
@@ -8,6 +9,7 @@ type ChatConfigurations = {
   audio: AudioAdapter
   video: VideoAdapter
   imagePicker: ImagePickerAdapter
+  log?: LogAdapter
 }
 
 export class ChatAdapters {
@@ -16,6 +18,7 @@ export class ChatAdapters {
     Audio = configurations.audio
     Video = configurations.video
     ImagePicker = configurations.imagePicker
+    Log = configurations.log || new LogAdapter()
   }
 }
 
@@ -23,7 +26,7 @@ const methodMissing = () => {
   console.warn('ChatAdapters.configure() must be called before using any adapters')
 }
 
-let Clipboard: ClipboardAdapter = new ClipboardAdapter({
+export let Clipboard: ClipboardAdapter = new ClipboardAdapter({
   getStringAsync: async () => {
     methodMissing()
     return ''
@@ -31,14 +34,14 @@ let Clipboard: ClipboardAdapter = new ClipboardAdapter({
   setStringAsync: async (_: string) => methodMissing(),
 })
 
-let Audio: AudioAdapter = new AudioAdapter({
+export let Audio: AudioAdapter = new AudioAdapter({
   useAudio: (_: string) => {
     methodMissing()
     return {} as any
   },
 })
 
-let Video: VideoAdapter = new VideoAdapter({
+export let Video: VideoAdapter = new VideoAdapter({
   Player: Object.assign(
     () => {
       methodMissing()
@@ -48,7 +51,7 @@ let Video: VideoAdapter = new VideoAdapter({
   ),
 })
 
-let ImagePicker: ImagePickerAdapter = new ImagePickerAdapter({
+export let ImagePicker: ImagePickerAdapter = new ImagePickerAdapter({
   openCameraAsync: async () => {
     methodMissing()
     return { canceled: true, assets: null }
@@ -59,4 +62,4 @@ let ImagePicker: ImagePickerAdapter = new ImagePickerAdapter({
   },
 })
 
-export { Clipboard, Audio, Video, ImagePicker }
+export let Log: LogAdapter = new LogAdapter()

package/src/utils/native_adapters/index.ts

@@ -3,3 +3,4 @@ export * from './configuration'
 export * from './audio'
 export * from './image_picker'
 export * from './video'
+export * from './log'

package/src/utils/native_adapters/log.ts

@@ -0,0 +1,29 @@
+interface LogAdapterConfig {
+  enabled: boolean
+  error: (message: string, ...args: any[]) => void
+  info: (message: string, ...args: any[]) => void
+}
+
+export class LogAdapter {
+  enabled: boolean
+  onError?: LogAdapterConfig['error']
+  onInfo?: LogAdapterConfig['info']
+
+  constructor(config: Partial<LogAdapterConfig> = {}) {
+    this.enabled = config.enabled ?? false
+    this.onError = config.error
+    this.onInfo = config.info
+  }
+
+  error(message: string, ...args: any[]) {
+    if (!this.enabled) return
+
+    this.onError?.(message, ...args)
+  }
+
+  info(message: string, ...args: any[]) {
+    if (!this.enabled) return
+
+    this.onInfo?.(message, ...args)
+  }
+}

package/src/utils/navigation_constants.ts

@@ -0,0 +1,12 @@
+import { Platform } from 'react-native'
+
+/*
+ * Android doesn't support "fitToContents" yet, so we need to manually set the detents.
+ * This tries to mimic iOS by setting a small detent of 25%, but allowing the user to "grow" the sheet to a full screen detent of 100% as an escape hatch if there is a lot of content.
+ */
+
+export const PLATFORM_SHEET_ALLOWED_DETENTS_FIT_TO_CONTENTS = Platform.select({
+  ios: 'fitToContents',
+  // @ts-expect-error TS was seeing this as "fitToContents", even though it is valid to pass number[] to NativeStackNavigationOptions['sheetAllowedDetents']
+  android: [0.25, 1],
+} as const)

package/src/utils/response_error.ts

@@ -0,0 +1,17 @@
+import { ApiError } from '../types/api_primitives'
+
+export class ResponseError extends Error {
+  status: number
+  statusText: string
+  errors: ApiError['errors']
+  response: ApiError
+
+  constructor(response: ApiError) {
+    super(`ResponseError: ${response?.status} ${response?.statusText}`)
+    this.name = 'ResponseError'
+    this.status = response?.status
+    this.statusText = response?.statusText
+    this.errors = response?.errors || []
+    this.response = response
+  }
+}