adds haptic feedback for long press actions

Expensify · Feb 26, 2024 · ea79992 · ea79992
1 parent 4c96add
commit ea79992
Show file tree

Hide file tree

Showing 11 changed files with 15 additions and 5 deletions.
diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx
@@ -54,6 +54,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow
                     onPressOut={onPressOut}
                     // @ts-expect-error TODO: Remove this once ShowContextMenuContext (https://github.com/Expensify/App/issues/24980) is migrated to TypeScript.
                     onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
+                    shouldUseHapticsOnLongPress
                     accessibilityLabel={displayName}
                     role={CONST.ROLE.BUTTON}
                 >

diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -58,6 +58,7 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
                 onMouseDown={(e) => e.preventDefault()}
                 onPress={() => onSelect(index)}
                 onLongPress={() => {}}
+                shouldUseHapticsOnLongPress={false}
                 accessibilityLabel={accessibilityLabelExtractor(item, index)}
             >
                 {renderSuggestionMenuItem(item, index)}

diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx
@@ -122,6 +122,7 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo
                         pressDimmingValue={1}
                         onPress={toggleFabAction}
                         onLongPress={() => {}}
+                        shouldUseHapticsOnLongPress={false}
                         style={[styles.floatingActionButton, animatedStyle]}
                     >
                         <Svg

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
@@ -85,6 +85,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                         Navigation.navigate(route);
                     }}
                     onLongPress={(event) => showContextMenuForReport(event, anchor, report?.reportID ?? '', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
+                    shouldUseHapticsOnLongPress
                     accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                     accessibilityLabel={translate('accessibilityHints.viewAttachment')}
                 >

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx
@@ -40,6 +40,7 @@ function PreRenderer({TDefaultRenderer, onPressIn, onPressOut, onLongPress, ...d
                         onPressIn={onPressIn}
                         onPressOut={onPressOut}
                         onLongPress={(event) => showContextMenuForReport(event, anchor, report?.reportID ?? '', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
+                        shouldUseHapticsOnLongPress
                         role={CONST.ROLE.PRESENTATION}
                         accessibilityLabel={translate('accessibilityHints.prestyledText')}
                     >

diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
@@ -26,7 +26,7 @@ function GenericPressable(
         focusStyle = {},
         pressStyle = {},
         screenReaderActiveStyle = {},
-        shouldUseHapticsOnLongPress = false,
+        shouldUseHapticsOnLongPress = true,
         shouldUseHapticsOnPress = false,
         nextFocusRef,
         keyboardShortcut,

diff --git a/src/components/Pressable/PressableWithoutFeedback.tsx b/src/components/Pressable/PressableWithoutFeedback.tsx
@@ -4,14 +4,15 @@ import type {PressableRef} from './GenericPressable/types';
 import type PressableProps from './GenericPressable/types';
 
 function PressableWithoutFeedback(
-    {pressStyle, hoverStyle, focusStyle, screenReaderActiveStyle, shouldUseHapticsOnPress, shouldUseHapticsOnLongPress, ...rest}: PressableProps,
+    {pressStyle, hoverStyle, focusStyle, screenReaderActiveStyle, shouldUseHapticsOnPress, shouldUseHapticsOnLongPress = false, ...rest}: PressableProps,
     ref: PressableRef,
 ) {
     return (
         <GenericPressable
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}
             ref={ref}
+            shouldUseHapticsOnLongPress={shouldUseHapticsOnLongPress}
         />
     );
 }

diff --git a/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx
@@ -10,7 +10,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MoneyRequestSkeletonView from '@components/MoneyRequestSkeletonView';
 import MultipleAvatars from '@components/MultipleAvatars';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import PressableWithFeedback from '@components/Pressable/PressableWithoutFeedback';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import RenderHTML from '@components/RenderHTML';
 import ReportActionItemImages from '@components/ReportActionItem/ReportActionItemImages';
 import {showContextMenuForReport} from '@components/ShowContextMenuContext';
@@ -303,17 +303,18 @@ function MoneyRequestPreviewContent({
     const shouldDisableOnPress = isBillSplit && isEmptyObject(transaction);
 
     return (
-        <PressableWithFeedback
+        <PressableWithoutFeedback
             onPress={shouldDisableOnPress ? undefined : onPreviewPressed}
             onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
             onPressOut={() => ControlSelection.unblock()}
             onLongPress={showContextMenu}
+            shouldUseHapticsOnLongPress
             accessibilityLabel={isBillSplit ? translate('iou.split') : translate('iou.cash')}
             accessibilityHint={CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency)}
             style={[styles.moneyRequestPreviewBox, containerStyles, shouldDisableOnPress && styles.cursorDefault]}
         >
             {childContainer}
-        </PressableWithFeedback>
+        </PressableWithoutFeedback>
     );
 }
 

diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
@@ -256,6 +256,7 @@ function ReportPreview({
                     onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={() => ControlSelection.unblock()}
                     onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)}
+                    shouldUseHapticsOnLongPress
                     style={[styles.flexRow, styles.justifyContentBetween, styles.reportPreviewBox]}
                     role="button"
                     accessibilityLabel={translate('iou.viewDetails')}

diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx
@@ -88,6 +88,7 @@ function TaskPreview({taskReport, taskReportID, action, contextMenuAnchor, chatR
                 onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                 onPressOut={() => ControlSelection.unblock()}
                 onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)}
+                shouldUseHapticsOnLongPress
                 style={[styles.flexRow, styles.justifyContentBetween]}
                 role={CONST.ROLE.BUTTON}
                 accessibilityLabel={translate('task.task')}

diff --git a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
@@ -51,6 +51,7 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}) {
                         onLongPress={(event) =>
                             showContextMenuForReport(event, anchor, (report && report.reportID) || '', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))
                         }
+                        shouldUseHapticsOnLongPress
                     >
                         <View style={[styles.videoThumbnailPlayButton]}>
                             <Icon