@planningcenter/chat-react-native 3.14.0-rc.2 → 3.14.0-rc.4

package/src/components/conversation/attachments/image_attachment.tsx

@@ -33,10 +33,10 @@ import { formatDatePreview } from '../../../utils/date'
 import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
 import { PlatformPressable } from '@react-navigation/elements'
 import { useTheme } from '../../../hooks'
-import { platformFontWeightMedium } from '../../../utils'
+import { Haptic, platformFontWeightMedium } from '../../../utils'
 
 const { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get('window')
-const DISMISS_PAN_THRESHOLD = 250
+const DISMISS_PAN_THRESHOLD = 175
 const MIN_DISTANCE_FOR_PAN = 10 // Higher threshold gives pinching priority
 const SINGLE_FINGER_POINTER = 1 // Single-finger panning / tapping helps to avoid conflicts with pinching
 const DEFAULT_OPACITY = 1
@@ -161,6 +161,7 @@ const LightboxGallery = ({
   const styles = useStyles()
   const insets = useSafeAreaInsets()
   const [currentImageIndex, setCurrentImageIndex] = useState(initialImageIndex)
+  const { soft: triggerMaxZoomHaptic, rigid: triggerDismissHaptic } = Haptic
 
   // Get current image data
   const currentImage = imageAttachments[currentImageIndex]
@@ -510,6 +511,15 @@ const LightboxGallery = ({
         MAX_SCALE + MAX_SCALE_OVERSHOOT,
         Math.max(MIN_SCALE, newScale)
       )
+
+      // Check if we just reached the minimum scale threshold
+      const previousScale = scale.value
+      const reacjedMinScale = previousScale > MIN_SCALE && newScaleClamped <= MIN_SCALE
+
+      if (reacjedMinScale) {
+        runOnJS(triggerDismissHaptic)()
+      }
+
       scale.value = newScaleClamped
 
       // Calculate new translation to keep focal point under fingers
@@ -545,6 +555,10 @@ const LightboxGallery = ({
       // Check if overshooting the max scale and clamp it
       const finalScale = currentScale > MAX_SCALE ? MAX_SCALE : currentScale
 
+      if (finalScale === MAX_SCALE) {
+        runOnJS(triggerMaxZoomHaptic)()
+      }
+
       // Recalculate translation using focal point to always return to the same position when image is overshooting the max scale
       const newTranslation = zoomToFocalPoint({
         focalPointX: focalX.value,
@@ -655,6 +669,15 @@ const LightboxGallery = ({
       const fadeDistance = Math.max(0, panDistance - halfThreshold)
       const fadeProgress = fadeDistance / halfThreshold
 
+      // Check if we just crossed the dismiss threshold
+      const previousDistance = Math.abs(dismissY.value)
+      const crossedDismissThreshold =
+        previousDistance < DISMISS_PAN_THRESHOLD && panDistance >= DISMISS_PAN_THRESHOLD
+
+      if (crossedDismissThreshold) {
+        runOnJS(triggerDismissHaptic)()
+      }
+
       opacity.value = Math.max(0, DEFAULT_OPACITY - fadeProgress)
       dismissY.value = e.translationY
     })

package/src/components/conversation/message_reaction.tsx

@@ -8,6 +8,7 @@ import { useMessageReactionToggle } from '../../hooks/use_message_reaction_toggl
 import { ReactionCountResource } from '../../types/resources/reaction'
 import { MessageResource } from '../../types'
 import { useCreateAndroidRippleColor } from '../../hooks/use_create_android_ripple_color'
+import { Haptic } from '../../utils/native_adapters'
 
 export const REACTION_EMOJIS: Record<ReactionCountResource['value'], string> = {
   thumbs_up: '👍',
@@ -42,6 +43,7 @@ export function MessageReaction({
   if (!REACTION_EMOJIS[reaction.value]) return null
 
   const handlePress = () => {
+    Haptic.impactLight()
     handleReactionToggle({ value: reaction.value, mine: !!reaction.mine })
   }
 

package/src/components/conversations/conversation_actions.tsx

@@ -20,7 +20,7 @@ import {
 import { ConversationResource } from '../../types'
 import { platformPressedOpacityStyle } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
-import { ActionToggleButton } from './action_toggle_button'
+import { SwipeableToggleButton } from './swipeable_toggle_button'
 
 export function ConversationActions({
   children,
@@ -193,7 +193,7 @@ function LeftActions({
 
   return (
     <View style={styles.actionButtonContainer}>
-      <ActionToggleButton
+      <SwipeableToggleButton
         loading={isMarkReadPending}
         disabled={isConversationEmpty}
         toggled={!read}
@@ -201,7 +201,7 @@ function LeftActions({
         toggleContent={latestMessageUnreadToggleContent}
         backgroundColor={tokens.fillColorInteractionSwipeDefault}
       />
-      <ActionToggleButton
+      <SwipeableToggleButton
         loading={isMutedPending}
         toggled={muted}
         onPress={handleMute}

package/src/components/conversations/{action_toggle_button.tsx → swipeable_toggle_button.tsx}

@@ -5,8 +5,9 @@ import { Icon, IconString, Spinner, Text } from '../display'
 import { useCreateAndroidRippleColor, useTheme } from '../../hooks'
 import { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils/styles'
 import { tokens } from '../../vendor/tapestry/tokens'
+import { Haptic } from '../../utils/native_adapters/configuration'
 
-interface ActionToggleButtonProps extends PressableProps {
+interface SwipeableToggleButtonProps extends PressableProps {
   backgroundColor: string
   toggled: boolean
   toggleContent: {
@@ -16,7 +17,7 @@ interface ActionToggleButtonProps extends PressableProps {
   loading?: boolean
 }
 
-export function ActionToggleButton({
+export function SwipeableToggleButton({
   backgroundColor,
   onPress,
   toggleContent,
@@ -24,7 +25,7 @@ export function ActionToggleButton({
   toggled,
   loading = false,
   ...props
-}: ActionToggleButtonProps) {
+}: SwipeableToggleButtonProps) {
   const styles = useStyles({ backgroundColor, disabled })
   const androidRippleColor = useCreateAndroidRippleColor({
     color: backgroundColor,
@@ -34,7 +35,10 @@ export function ActionToggleButton({
 
   return (
     <Pressable
-      onPress={onPress}
+      onPress={event => {
+        Haptic.impactLight()
+        onPress?.(event)
+      }}
       style={({ pressed }) => [styles.button, pressed && platformPressedOpacityStyle]}
       android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
       disabled={disabled || loading}
@@ -56,7 +60,7 @@ export function ActionToggleButton({
   )
 }
 
-const useStyles = ({ backgroundColor, disabled }: Partial<ActionToggleButtonProps>) => {
+const useStyles = ({ backgroundColor, disabled }: Partial<SwipeableToggleButtonProps>) => {
   const { colors } = useTheme()
   const fillColor = disabled ? colors.textColorDefaultDisabled : tokens.colorNeutral100White
   const buttonBackgroundColor = disabled

package/src/hooks/use_conversation.ts

@@ -5,6 +5,7 @@ import { transformGetToPost } from '../utils/client/request_helpers'
 import { useApiClient } from './use_api_client'
 import { getRequestQueryKey, useSuspenseGet } from './use_suspense_api'
 import { getConversationsRequestArgs } from '../utils/request/conversation'
+import { Haptic } from '../utils/native_adapters'
 
 export const getConversationRequestArgs = ({ conversation_id }: { conversation_id: number }) => ({
   url: `/me/conversations/${conversation_id}`,
@@ -139,6 +140,7 @@ export const useConversationDelete = ({ conversation_id }: { conversation_id: nu
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [url] })
+      Haptic.notificationSuccess()
     },
   })
 }

package/src/hooks/use_message_create_or_update.ts

@@ -5,6 +5,7 @@ import { ApiCollection, ApiResource, MessageResource } from '../types'
 import { chatQueryClient } from '../contexts/api_provider'
 import {
   deleteRecordInPagesData,
+  Haptic,
   updateOrCreateRecordInPagesData,
   updateRecordInPagesData,
 } from '../utils'
@@ -93,6 +94,8 @@ export function useMessageCreateOrUpdate({ conversationId, message }: Props) {
     },
     onError: (error, variables, context) => {
       const { message: optimisticMessage } = context || {}
+      Haptic.notificationError()
+
       // Add error to the optimistic message from the cache on error
       if (optimisticMessage) {
         const queryKey = getMessagesQueryKey({ conversation_id: conversationId })

package/src/screens/attachment_actions/hooks/useDeleteAttachment.tsx

@@ -4,6 +4,7 @@ import { useMutation } from '@tanstack/react-query'
 import { useApiClient } from '../../../hooks/use_api_client'
 import { useCallback } from 'react'
 import { useConversationMessages } from '../../../hooks/use_conversation_messages'
+import { Haptic } from '../../../utils/native_adapters'
 
 type UseDeleteAttachmentProps = {
   conversation_id: number
@@ -30,6 +31,7 @@ export function useDeleteAttachment({
     mutationFn: deleteAttachment,
     onSuccess: () => {
       refetch()
+      Haptic.notificationSuccess()
       navigation.goBack()
     },
     onError: () => {

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

@@ -14,6 +14,7 @@ import { GroupsGroupResource } from '../../../types'
 import { GraphId } from '../../../types/resources/group_resource'
 import { pluralize } from '../../../utils'
 import { Divider, FormList } from './form_list'
+import { Haptic } from '../../../utils/native_adapters'
 
 type GroupsFormProps = {
   groupId: number
@@ -44,6 +45,7 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
           chat_group_graph_id,
         })
       )
+      Haptic.notificationSuccess()
     },
     [chat_group_graph_id, navigation]
   )

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

@@ -70,6 +70,8 @@ export const ServicesForm = ({
           conversation_id: conversation.id,
         })
       )
+      // Only trigger success haptic if creating a new conversation
+      if (!selectionHasConversation) Haptic.notificationSuccess()
     },
   })
 

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

@@ -7,6 +7,7 @@ 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'
 
 const ROW_PADDING_HORIZONTAL = 16
 
@@ -41,6 +42,7 @@ export const ListHeaderComponent = () => {
 
   const handleMarkAllRead = useCallback(() => {
     currentPersonCache.update({ unreadCount: 0 })
+    Haptic.notificationSuccess()
     markAllRead()
   }, [currentPersonCache, markAllRead])
 

package/src/screens/message_actions_screen.tsx

@@ -82,6 +82,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
     mutationFn: deleteMessage,
     onSuccess: () => {
       refetch()
+      Haptic.notificationSuccess()
       navigation.goBack()
     },
     onError: () => {
@@ -129,12 +130,13 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
           <Reaction
             key={index}
             reaction={reaction}
-            onPress={() =>
+            onPress={() => {
+              Haptic.impactLight()
               handleReactionToggle({
                 value: reaction.value,
                 mine: reaction.mine,
               })
-            }
+            }}
           />
         ))}
       </View>

package/build/components/conversations/action_toggle_button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"action_toggle_button.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/action_toggle_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7E,OAAO,EAAQ,UAAU,EAAiB,MAAM,YAAY,CAAA;AAK5D,UAAU,uBAAwB,SAAQ,cAAc;IACtD,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE;QACb,IAAI,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;QAC7C,KAAK,EAAE;YAAE,QAAQ,EAAE,UAAU,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAC/C,CAAA;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,eAAe,EACf,OAAO,EACP,aAAa,EACb,QAAgB,EAChB,OAAO,EACP,OAAe,EACf,GAAG,KAAK,EACT,EAAE,uBAAuB,qBA8BzB"}

package/build/components/conversations/action_toggle_button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"action_toggle_button.js","sourceRoot":"","sources":["../../../src/components/conversations/action_toggle_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Pressable, type PressableProps } from 'react-native-gesture-handler'\nimport { Icon, IconString, Spinner, Text } from '../display'\nimport { useCreateAndroidRippleColor, useTheme } from '../../hooks'\nimport { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils/styles'\nimport { tokens } from '../../vendor/tapestry/tokens'\n\ninterface ActionToggleButtonProps extends PressableProps {\n  backgroundColor: string\n  toggled: boolean\n  toggleContent: {\n    true: { iconName: IconString; label: string }\n    false: { iconName: IconString; label: string }\n  }\n  loading?: boolean\n}\n\nexport function ActionToggleButton({\n  backgroundColor,\n  onPress,\n  toggleContent,\n  disabled = false,\n  toggled,\n  loading = false,\n  ...props\n}: ActionToggleButtonProps) {\n  const styles = useStyles({ backgroundColor, disabled })\n  const androidRippleColor = useCreateAndroidRippleColor({\n    color: backgroundColor,\n  })\n\n  const { iconName, label } = toggleContent[toggled ? 'true' : 'false']\n\n  return (\n    <Pressable\n      onPress={onPress}\n      style={({ pressed }) => [styles.button, pressed && platformPressedOpacityStyle]}\n      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n      disabled={disabled || loading}\n      accessibilityRole=\"togglebutton\"\n      accessibilityState={{ checked: toggled }}\n      {...props}\n    >\n      {loading ? (\n        <Spinner size={20} />\n      ) : (\n        <>\n          <Icon name={iconName} style={styles.icon} size={20} />\n          <Text variant=\"footnote\" style={styles.text}>\n            {label}\n          </Text>\n        </>\n      )}\n    </Pressable>\n  )\n}\n\nconst useStyles = ({ backgroundColor, disabled }: Partial<ActionToggleButtonProps>) => {\n  const { colors } = useTheme()\n  const fillColor = disabled ? colors.textColorDefaultDisabled : tokens.colorNeutral100White\n  const buttonBackgroundColor = disabled\n    ? colors.fillColorButtonNeutralSolidDisabled\n    : backgroundColor\n\n  return StyleSheet.create({\n    button: {\n      flex: 1,\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 4,\n      height: '100%',\n      backgroundColor: buttonBackgroundColor,\n    },\n    icon: {\n      color: fillColor,\n      marginTop: 4,\n    },\n    text: {\n      color: fillColor,\n      fontWeight: platformFontWeightMedium,\n    },\n  })\n}\n"]}