@planningcenter/chat-react-native 3.34.0-rc.4 → 3.34.0

package/src/components/display/file_attachment_preview.tsx

@@ -0,0 +1,135 @@
+import { View, StyleSheet } from 'react-native'
+import { useTheme } from '../../hooks'
+import { platformFontWeightMedium } from '../../utils'
+import { getAttachmentIconName } from '../../utils/attachment_kind'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { Icon } from './icon'
+import { IconButton } from './icon_button'
+import { Spinner } from './spinner'
+import { Text } from './text'
+
+interface FileAttachmentPreviewProps {
+  name: string
+  contentType?: string
+  onRemovePress: () => void
+  loading?: boolean
+  error?: boolean
+  hideRemoveButton?: boolean
+}
+
+export const FileAttachmentPreview = ({
+  name,
+  contentType,
+  onRemovePress,
+  loading = false,
+  error = false,
+  hideRemoveButton = false,
+}: FileAttachmentPreviewProps) => {
+  const styles = useStyles({ error })
+
+  if (loading) {
+    return (
+      <View style={styles.container}>
+        <Spinner size={20} style={styles.spinner} />
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.contentContainer}>
+        <Icon name={getAttachmentIconName(contentType)} size={18} style={styles.fileIcon} />
+        <View style={styles.textContainer}>
+          <Text
+            variant="tertiary"
+            numberOfLines={1}
+            style={styles.nameText}
+            accessibilityLabel={`File attachment: ${name}`}
+          >
+            {name}
+          </Text>
+        </View>
+      </View>
+      {!hideRemoveButton && (
+        <IconButton
+          name="general.x"
+          onPress={onRemovePress}
+          size="xxs"
+          appearance="neutral"
+          style={styles.closeButton}
+          accessibilityLabel="Remove file attachment"
+        />
+      )}
+      {error && (
+        <View style={styles.errorBadge}>
+          <Icon name="general.exclamationTriangle" size={12} style={styles.errorIcon} />
+        </View>
+      )}
+    </View>
+  )
+}
+
+const useStyles = ({ error }: Partial<FileAttachmentPreviewProps>) => {
+  const { colors } = useTheme()
+  const borderRadius = 8
+
+  return StyleSheet.create({
+    container: {
+      height: 60,
+      minWidth: 150,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: 8,
+      backgroundColor: colors.fillColorNeutral070,
+      borderColor: error ? colors.statusErrorBorder : colors.borderColorDefaultBase,
+      borderWidth: error ? 2 : 1,
+      borderRadius,
+      padding: 4,
+    },
+    contentContainer: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+      flexShrink: 1,
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+    },
+    textContainer: {
+      flexShrink: 1,
+      flexDirection: 'column',
+    },
+    fileIcon: {
+      color: error ? colors.iconColorDefaultDisabled : colors.iconColorDefaultPrimary,
+    },
+    nameText: {
+      color: error ? colors.textColorDefaultDisabled : colors.textColorDefaultPrimary,
+      fontWeight: platformFontWeightMedium,
+      flexShrink: 1,
+    },
+    closeButton: {
+      backgroundColor: colors.fillColorNeutral050Base,
+      borderRadius: 16,
+      height: 20,
+      width: 20,
+      alignSelf: 'flex-start',
+    },
+    errorBadge: {
+      backgroundColor: colors.statusErrorBorder,
+      position: 'absolute',
+      bottom: 0,
+      right: 0,
+      zIndex: 2,
+      borderStartStartRadius: borderRadius,
+      padding: 4,
+    },
+    errorIcon: {
+      color: tokens.colorNeutral100White,
+      transform: [{ translateX: 1 }],
+      fontSize: 10,
+    },
+    spinner: {
+      marginHorizontal: 'auto',
+    },
+  })
+}

package/src/components/display/image.tsx

@@ -79,6 +79,10 @@ export function Image({
     onLoad?.(event)
   }
 
+  const handleOnError = () => {
+    setIsImageLoading(false)
+  }
+
   const isLoading = isImageLoading || loading
 
   const ImageComponent = animatedImageStyle ? Animated.Image : ReactNativeImage
@@ -94,6 +98,7 @@ export function Image({
       <ImageComponent
         style={[styles.image, imageStyles, animatedImageStyle]}
         onLoad={handleOnLoad}
+        onError={handleOnError}
         source={source}
         alt={isLoading ? '' : alt}
         {...props}

package/src/components/display/index.ts

@@ -12,6 +12,7 @@ export * from './heading'
 export * from './icon_button'
 export * from './icon'
 export * from './image'
+export * from './file_attachment_preview'
 export * from './image_attachment_preview'
 export * from './video_attachment_preview'
 export * from './person'

package/src/hooks/attachments/fallback_chat_configuration.ts

@@ -56,6 +56,30 @@ export const FALLBACK_ALLOWED_FILE_EXTENSIONS = [
   '.xlsx',
 ]
 
+// Broad MIME categories covering the extensions in
+// FALLBACK_ALLOWED_FILE_EXTENSIONS. Used to constrain native pickers up
+// front; final accept/reject still uses the extension list because the
+// picker's `type` filter is advisory on iOS and Android.
+export const FALLBACK_ALLOWED_MIME_TYPES = [
+  'image/*',
+  'video/*',
+  'audio/*',
+  'application/pdf',
+  'application/msword',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.ms-excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  'application/vnd.apple.pages',
+  'application/vnd.apple.numbers',
+  'application/vnd.apple.keynote',
+  'application/rtf',
+  'text/plain',
+  'text/rtf',
+  'text/vcard',
+]
+
 export const FALLBACK_MAX_FILE_SIZE_IN_BYTES = 50 * 1024 * 1024
 
 export const FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE = 10

package/src/hooks/use_chat_configuration.ts

@@ -7,6 +7,7 @@ import {
 } from '../utils/request/get_chat_configuration'
 import {
   FALLBACK_ALLOWED_FILE_EXTENSIONS,
+  FALLBACK_ALLOWED_MIME_TYPES,
   FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE,
   FALLBACK_MAX_FILE_SIZE_IN_BYTES,
 } from './attachments/fallback_chat_configuration'
@@ -34,6 +35,13 @@ export function useChatConfiguration() {
 
   return {
     allowedFileExtensions: attrs.allowedFileExtensions,
+    // During the server-side rollout the API may omit allowedMimeTypes.
+    // The static fallback covers the same set of file kinds as the server's
+    // hardcoded ALLOWED_FILE_EXTENSIONS, so the picker filter and the
+    // post-pick extension validator agree. Once the server always returns
+    // allowedMimeTypes, the resource type can tighten from optional to
+    // required and this nullish-coalesce becomes pure defense-in-depth.
+    allowedMimeTypes: attrs.allowedMimeTypes ?? FALLBACK_ALLOWED_MIME_TYPES,
     maxFileSizeInBytes: attrs.maxFileSizeInBytes,
     maxAttachmentsPerMessage: attrs.maxAttachmentsPerMessage,
   }
@@ -46,6 +54,7 @@ const stableFallbackConfiguration: ApiResource<ChatConfigurationResource> = {
     type: 'ChatConfiguration',
     id: 'current',
     allowedFileExtensions: FALLBACK_ALLOWED_FILE_EXTENSIONS,
+    allowedMimeTypes: FALLBACK_ALLOWED_MIME_TYPES,
     maxFileSizeInBytes: FALLBACK_MAX_FILE_SIZE_IN_BYTES,
     maxAttachmentsPerMessage: FALLBACK_MAX_ATTACHMENTS_PER_MESSAGE,
   },

package/src/types/resources/chat_configuration_resource.ts

@@ -6,6 +6,10 @@ export interface ChatConfigurationResource {
   type: 'ChatConfiguration'
   id: string
   allowedFileExtensions: string[]
+  // Optional during server-side rollout. Once the server always returns it,
+  // tighten to `string[]`. Until then, useChatConfiguration falls back to
+  // FALLBACK_ALLOWED_MIME_TYPES.
+  allowedMimeTypes?: string[]
   maxFileSizeInBytes: number
   maxAttachmentsPerMessage: number
 }

package/src/utils/__tests__/attachment_kind.test.ts

@@ -0,0 +1,37 @@
+import { pickAttachmentPreviewKind } from '../attachment_kind'
+
+describe('pickAttachmentPreviewKind', () => {
+  describe('with a usable MIME type', () => {
+    it.each([
+      ['image/png', 'image'],
+      ['image/jpeg', 'image'],
+      ['video/mp4', 'video'],
+      ['video/quicktime', 'video'],
+      ['application/pdf', 'file'],
+      ['text/plain', 'file'],
+      ['application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'file'],
+      ['', 'file'],
+      [undefined, 'file'],
+    ])('classifies %p as %p', (input, expected) => {
+      expect(pickAttachmentPreviewKind(input)).toBe(expected)
+    })
+  })
+
+  // Document picker providers sometimes drop the MIME type. Without an
+  // extension-based fallback, octet-stream-typed images and videos would
+  // render as generic file tiles even though the bytes are decodable.
+  describe('with an unhelpful MIME type', () => {
+    it.each([
+      ['application/octet-stream', 'IMG_1234.HEIC', 'image'],
+      ['application/octet-stream', 'photo.jpg', 'image'],
+      ['application/octet-stream', 'clip.mov', 'video'],
+      ['application/octet-stream', 'movie.MP4', 'video'],
+      ['application/octet-stream', 'spreadsheet.xlsx', 'file'],
+      [undefined, 'photo.png', 'image'],
+      ['application/octet-stream', undefined, 'file'],
+      ['application/octet-stream', 'no_extension', 'file'],
+    ])('with type %p and name %p classifies as %p', (type, name, expected) => {
+      expect(pickAttachmentPreviewKind(type, name)).toBe(expected)
+    })
+  })
+})

package/src/utils/attachment_kind.ts

@@ -0,0 +1,47 @@
+import { IconString } from '../components/display/icon'
+
+export type AttachmentPreviewKind = 'image' | 'video' | 'file'
+
+// Document picker providers sometimes hand back assets without a usable
+// MIME type (Android `MediaStore` content URIs, some cloud-storage
+// providers). The asset's `type` then arrives as `application/octet-stream`
+// or undefined even though the file is genuinely an image or video. Fall
+// back to extension-based classification in that case so the preview
+// matches the actual content.
+const IMAGE_EXTENSIONS = new Set(['bmp', 'gif', 'heic', 'heif', 'jpeg', 'jpg', 'png', 'webp'])
+
+const VIDEO_EXTENSIONS = new Set([
+  '3gp',
+  'avi',
+  'h263',
+  'h264',
+  'm4v',
+  'mkv',
+  'mov',
+  'mp4',
+  'mpeg',
+  'mpeg4',
+  'mpg',
+  'webm',
+  'wmv',
+])
+
+export function pickAttachmentPreviewKind(
+  type: string | undefined,
+  name?: string
+): AttachmentPreviewKind {
+  if (type?.startsWith('image/')) return 'image'
+  if (type?.startsWith('video/')) return 'video'
+  const ext = name?.split('.').pop()?.toLowerCase()
+  if (ext && IMAGE_EXTENSIONS.has(ext)) return 'image'
+  if (ext && VIDEO_EXTENSIONS.has(ext)) return 'video'
+  return 'file'
+}
+
+export function getAttachmentIconName(type: string | undefined): IconString {
+  if (type?.startsWith('image/')) return 'general.outlinedImageFile'
+  if (type?.startsWith('video/')) return 'general.outlinedVideoFile'
+  if (type?.startsWith('audio/')) return 'general.outlinedMusicFile'
+  if (type === 'application/pdf') return 'general.outlinedPdfFile'
+  return 'general.outlinedGenericFile'
+}

package/src/utils/index.ts

@@ -10,4 +10,5 @@ export * from './reaction_constants'
 export * from './destructure_chat_group_graph_id'
 export * from './convert_attachments_for_create'
 export * from './assert_keys_are_numbers'
+export * from './attachment_kind'
 export * from './system_messages'

package/src/utils/native_adapters/document_picker.ts

@@ -17,12 +17,19 @@ type DocumentPickerCanceledResult = {
 
 export type DocumentPickerResult = DocumentPickerSuccessResult | DocumentPickerCanceledResult
 
+export interface DocumentPickerOpenOptions {
+  // MIME types the picker should restrict to. Hosts forward to the
+  // underlying picker's `type` argument. Omitted/empty means no
+  // restriction (the picker behaves as before).
+  mimeTypes?: string[]
+}
+
 interface DocumentPicker {
-  openAsync: () => Promise<DocumentPickerResult>
+  openAsync: (options?: DocumentPickerOpenOptions) => Promise<DocumentPickerResult>
 }
 
 export class DocumentPickerAdapter {
-  openAsync: () => Promise<DocumentPickerResult>
+  openAsync: (options?: DocumentPickerOpenOptions) => Promise<DocumentPickerResult>
   configured: boolean
 
   constructor(methods?: DocumentPicker) {