feat: Replace Pressable with CustomPressable

razinj · Jun 23, 2024 · 0390059 · 0390059
1 parent 0a37062
commit 0390059
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 81 deletions.
diff --git a/src/components/AllAppsLetterIndex.tsx b/src/components/AllAppsLetterIndex.tsx
@@ -3,7 +3,6 @@ import {
   FlatList,
   ListRenderItem,
   ListRenderItemInfo,
-  Pressable,
   PressableAndroidRippleConfig,
   StyleSheet,
   Text,
@@ -13,6 +12,7 @@ import { useSelector } from 'react-redux'
 import { WHITE_COLOR } from '../constants'
 import { AppLetterIndex } from '../models/list-letter-index'
 import { selectAppsLetterListMemoized } from '../slices/appsList'
+import CustomPressable from './shared/CustomPressable'
 
 type Props = {
   onPress: (letterIndex: number) => void
@@ -32,13 +32,12 @@ const AllAppsLetterIndex = ({ onPress }: Props) => {
 
   const renderItem: ListRenderItem<AppLetterIndex> = ({ item }: ListRenderItemInfo<AppLetterIndex>) => {
     return (
-      <Pressable
-        android_disableSound={true}
+      <CustomPressable
         android_ripple={rippleConfig}
         style={styles.letterIndexLabelWrapper}
         onPress={() => onPress(item.index)}>
         <Text style={styles.letterIndexLabel}>{item.letter}</Text>
-      </Pressable>
+      </CustomPressable>
     )
   }
 

diff --git a/src/components/AppItem.tsx b/src/components/AppItem.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { List } from 'react-native-paper'
 import { useDispatch } from 'react-redux'
 import { APP_ITEM_HEIGHT, PRESSABLE_RIPPLE_COLOR } from '../constants'
@@ -10,6 +10,7 @@ import { appLaunch, setDisplayAppMenu, setMenuAppDetails } from '../slices/appSt
 import { launchApp } from '../utils/apps-module'
 import HighlightText from './HighlightText'
 import AppIcon from './shared/AppIcon'
+import CustomPressable from './shared/CustomPressable'
 
 type Props = {
   appDetails: AppDetails
@@ -54,13 +55,13 @@ const AppItem = ({ appDetails, renderedIn }: Props) => {
 
   return (
     <View style={styles.pressableWrapper}>
-      <Pressable
+      <CustomPressable
         onPress={onPress}
         onLongPress={onLongPress}
         style={styles.pressable}
         android_ripple={{ borderless: false, color: PRESSABLE_RIPPLE_COLOR }}>
         {getAppIconElement()}
-      </Pressable>
+      </CustomPressable>
     </View>
   )
 }

diff --git a/src/components/Settings/SettingsHeader.tsx b/src/components/Settings/SettingsHeader.tsx
@@ -36,16 +36,11 @@ const SettingsHeader = () => {
         </Text>
       </Text>
       <View style={styles.pressablesWrapper}>
-        <CustomPressable
-          onPress={onAppInfoClick}
-          android_disableSound={true}
-          android_ripple={pressableRippleConfig}
-          testID='app-info-button'>
+        <CustomPressable onPress={onAppInfoClick} android_ripple={pressableRippleConfig} testID='app-info-button'>
           <CustomIcon name='information-outline' size={34} color='#808080' />
         </CustomPressable>
         <CustomPressable
           onPress={onSystemSettingsClick}
-          android_disableSound={true}
           android_ripple={pressableRippleConfig}
           testID='system-settings-button'>
           <CustomIcon name='cog-outline' size={34} color='#808080' />

diff --git a/src/components/Settings/sections/AdvancedSettings.tsx b/src/components/Settings/sections/AdvancedSettings.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
-import { Pressable, View } from 'react-native'
+import { View } from 'react-native'
 import { useDispatch } from 'react-redux'
 import { getAppsListAction } from '../../../slices/appsList'
 import { resetPreferences } from '../../../slices/preferences'
 import { displayToast } from '../../../utils/toast'
+import CustomPressable from '../../shared/CustomPressable'
 import SettingsItemLabel from '../shared/SettingsItemLabel'
 import { settingItemButtonRippleConfig, settingItemWrapperStyle, settingsPressableItemStyle } from '../shared/values'
 
@@ -23,25 +24,23 @@ const AdvancedSettings = () => {
   return (
     <>
       <View style={settingItemWrapperStyle}>
-        <Pressable
+        <CustomPressable
           testID='reload-all-apps-button'
           onPress={reloadAllApps}
-          android_disableSound={true}
           android_ripple={settingItemButtonRippleConfig}
           style={settingsPressableItemStyle}>
           <SettingsItemLabel title='Reload all apps' />
-        </Pressable>
+        </CustomPressable>
       </View>
 
       <View style={settingItemWrapperStyle}>
-        <Pressable
+        <CustomPressable
           testID='reset-preferences-button'
           onPress={onResetPreferences}
-          android_disableSound={true}
           android_ripple={settingItemButtonRippleConfig}
           style={settingsPressableItemStyle}>
           <SettingsItemLabel title='Reset settings' />
-        </Pressable>
+        </CustomPressable>
       </View>
     </>
   )

diff --git a/src/components/Settings/sections/FavoriteAppsSettings.tsx b/src/components/Settings/sections/FavoriteAppsSettings.tsx
@@ -1,10 +1,11 @@
 import React, { useMemo } from 'react'
-import { Pressable, Switch, View } from 'react-native'
+import { Switch, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 import { sortFavoriteApps } from '../../../slices/appState'
 import { clearFavoriteApps, selectFavoriteAppsCountMemoized } from '../../../slices/favoriteApps'
 import { displayFavoriteApps, selectDisplayFavoriteAppsMemoized } from '../../../slices/preferences'
 import { displayToast } from '../../../utils/toast'
+import CustomPressable from '../../shared/CustomPressable'
 import SettingsItemLabel from '../shared/SettingsItemLabel'
 import {
   activeSwitch,
@@ -52,11 +53,10 @@ const FavoriteAppsSettings = () => {
       </View>
 
       <View style={settingItemWrapperStyle}>
-        <Pressable
+        <CustomPressable
           testID='sort-button'
           disabled={favoriteAppsSortDisabled}
           onPress={onFavoriteAppsSortViewClick}
-          android_disableSound={true}
           android_ripple={settingItemButtonRippleConfig}
           style={[settingsPressableItemStyle, { opacity: favoriteAppsSortDisabled ? 0.5 : 1 }]}>
           <SettingsItemLabel
@@ -69,18 +69,17 @@ const FavoriteAppsSettings = () => {
                 : 'Click to start sorting'
             }
           />
-        </Pressable>
+        </CustomPressable>
       </View>
 
       <View style={settingItemWrapperStyle}>
-        <Pressable
+        <CustomPressable
           testID='clear-button'
           onPress={onClearFavoriteApps}
-          android_disableSound={true}
           android_ripple={settingItemButtonRippleConfig}
           style={settingsPressableItemStyle}>
           <SettingsItemLabel title='Clear' />
-        </Pressable>
+        </CustomPressable>
       </View>
     </>
   )

diff --git a/src/components/Settings/sections/PinnedAppsSettings.tsx b/src/components/Settings/sections/PinnedAppsSettings.tsx
@@ -1,6 +1,6 @@
 import { DateTimePickerAndroid, DateTimePickerEvent } from '@react-native-community/datetimepicker'
 import React, { useMemo } from 'react'
-import { Pressable, StyleSheet, Switch, Text, View } from 'react-native'
+import { StyleSheet, Switch, Text, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 import { sortPinnedApps, sortTemporaryPinnedApps } from '../../../slices/appState'
 import {
@@ -18,6 +18,7 @@ import {
 } from '../../../slices/preferences'
 import { getDateFromStringWithCurrentDateValue, getTimeFromDate, stripDateFromSeconds } from '../../../utils/date'
 import { displayToast } from '../../../utils/toast'
+import CustomPressable from '../../shared/CustomPressable'
 import SettingsItemLabel from '../shared/SettingsItemLabel'
 import {
   activeSwitch,
@@ -125,11 +126,10 @@ const PinnedAppsSettings = () => {
       </View>
 
       <View style={settingItemWrapperStyle}>
-        <Pressable
+        <CustomPressable
           testID='sort-pinned-apps-button'
           disabled={pinnedAppsSortDisabled}
           onPress={onPinnedAppsSortViewClick}
-          android_disableSound={true}
           android_ripple={settingItemButtonRippleConfig}
           style={[settingsPressableItemStyle, { opacity: pinnedAppsSortDisabled ? 0.5 : 1 }]}>
           <SettingsItemLabel
@@ -142,7 +142,7 @@ const PinnedAppsSettings = () => {
                 : 'Click to start sorting'
             }
           />
-        </Pressable>
+        </CustomPressable>
       </View>
 
       <View style={settingItemWrapperStyle}>
@@ -157,11 +157,10 @@ const PinnedAppsSettings = () => {
       </View>
 
       <View style={settingItemWrapperStyle}>
-        <Pressable
+        <CustomPressable
           testID='sort-temporarily-pinned-apps-button'
           disabled={temporaryPinnedAppsSortDisabled}
           onPress={onTemporaryPinnedAppsSortViewClick}
-          android_disableSound={true}
           android_ripple={settingItemButtonRippleConfig}
           style={[settingsPressableItemStyle, { opacity: temporaryPinnedAppsSortDisabled ? 0.5 : 1 }]}>
           <SettingsItemLabel
@@ -174,7 +173,7 @@ const PinnedAppsSettings = () => {
                 : 'Click to start sorting'
             }
           />
-        </Pressable>
+        </CustomPressable>
       </View>
 
       <View style={styles.pinnedAppsItemContainer}>
@@ -183,49 +182,45 @@ const PinnedAppsSettings = () => {
           description='Click below to set times'
         />
         <View style={styles.pinnedAppsTimePickersWrapper}>
-          <Pressable
+          <CustomPressable
             testID='set-start-time-button'
             onPress={() => showTimePicker(true)}
-            android_disableSound={true}
             android_ripple={settingItemButtonRippleConfig}
             style={styles.pinnedAppsTimePicker}>
             <Text style={styles.pinnedAppsTimePickerLabel}>
               Start time is {getTimeFromDate(temporaryPinnedAppsConfig?.startDate)}
             </Text>
-          </Pressable>
-          <Pressable
+          </CustomPressable>
+          <CustomPressable
             testID='set-end-time-button'
             onPress={() => showTimePicker(false)}
-            android_disableSound={true}
             android_ripple={settingItemButtonRippleConfig}
             style={styles.pinnedAppsTimePicker}>
             <Text style={styles.pinnedAppsTimePickerLabel}>
               End time is {getTimeFromDate(temporaryPinnedAppsConfig?.endDate)}
             </Text>
-          </Pressable>
+          </CustomPressable>
         </View>
       </View>
 
       <View style={settingItemWrapperStyle}>
-        <Pressable
+        <CustomPressable
           testID='clear-pinned-apps-button'
           onPress={onClearPinnedApps}
-          android_disableSound={true}
           android_ripple={settingItemButtonRippleConfig}
           style={settingsPressableItemStyle}>
           <SettingsItemLabel title='Clear pinned apps' />
-        </Pressable>
+        </CustomPressable>
       </View>
 
       <View style={settingItemWrapperStyle}>
-        <Pressable
+        <CustomPressable
           testID='clear-temporarily-pinned-apps-button'
           onPress={onClearTemporarilyPinnedApps}
-          android_disableSound={true}
           android_ripple={settingItemButtonRippleConfig}
           style={settingsPressableItemStyle}>
           <SettingsItemLabel title='Clear temporarily pinned apps' />
-        </Pressable>
+        </CustomPressable>
       </View>
     </>
   )

diff --git a/src/components/Settings/sections/RecentAppsSettings.tsx b/src/components/Settings/sections/RecentAppsSettings.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
-import { Pressable, Switch, View } from 'react-native'
+import { Switch, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 import { displayRecentApps, selectDisplayRecentAppsMemoized } from '../../../slices/preferences'
 import { clearRecentApps } from '../../../slices/recentApps'
 import { displayToast } from '../../../utils/toast'
+import CustomPressable from '../../shared/CustomPressable'
 import SettingsItemLabel from '../shared/SettingsItemLabel'
 import {
   activeSwitch,
@@ -41,14 +42,13 @@ const RecentAppsSettings = () => {
       </View>
 
       <View style={settingItemWrapperStyle}>
-        <Pressable
+        <CustomPressable
           testID='clear-button'
           onPress={onClearRecentApps}
-          android_disableSound={true}
           android_ripple={settingItemButtonRippleConfig}
           style={settingsPressableItemStyle}>
           <SettingsItemLabel title='Clear' />
-        </Pressable>
+        </CustomPressable>
       </View>
     </>
   )

diff --git a/src/components/Settings/shared/ToggleSettings.tsx b/src/components/Settings/shared/ToggleSettings.tsx
@@ -1,6 +1,7 @@
 import React, { PropsWithChildren, useState } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import CustomIcon from '../../shared/CustomIcon'
+import CustomPressable from '../../shared/CustomPressable'
 import SettingsItemLabel from './SettingsItemLabel'
 import { settingItemButtonRippleConfig } from './values'
 
@@ -12,10 +13,9 @@ const ToggleSettings = ({ title, description, children }: ToggleSettingsProps) =
   return (
     <>
       <View style={renderSettings ? [styles.wrapper, styles.activeWrapper] : styles.wrapper}>
-        <Pressable
+        <CustomPressable
           testID='toggle-settings-button'
           onPress={() => setRenderSettings(!renderSettings)}
-          android_disableSound={true}
           android_ripple={settingItemButtonRippleConfig}
           style={styles.pressable}>
           <SettingsItemLabel
@@ -24,7 +24,7 @@ const ToggleSettings = ({ title, description, children }: ToggleSettingsProps) =
             titleStyle={renderSettings ? [styles.activeTitle] : []}
           />
           <CustomIcon name={`chevron-${renderSettings ? 'up' : 'down'}`} size={30} color='#808080' />
-        </Pressable>
+        </CustomPressable>
       </View>
 
       {renderSettings && children}

diff --git a/src/components/SortableFavoriteApps.tsx b/src/components/SortableFavoriteApps.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Pressable, PressableAndroidRippleConfig, StyleSheet, Text, View } from 'react-native'
+import { PressableAndroidRippleConfig, StyleSheet, Text, View } from 'react-native'
 import DraggableFlatList, { RenderItemParams, ScaleDecorator } from 'react-native-draggable-flatlist'
 import Animated, {
   cancelAnimation,
@@ -16,6 +16,7 @@ import { selectFavoriteAppsMemoized, setFavoriteApps } from '../slices/favoriteA
 import { getListKey } from '../utils/apps'
 import AppIcon from './shared/AppIcon'
 import CustomIcon from './shared/CustomIcon'
+import CustomPressable from './shared/CustomPressable'
 
 const doneButtonRippleConfig: PressableAndroidRippleConfig = {
   borderless: true,
@@ -52,9 +53,9 @@ const SortableFavoriteApps = () => {
     return (
       <ScaleDecorator>
         <Animated.View style={isActive ? undefined : animatedStyles}>
-          <Pressable key={item.packageName} style={styles.pressable} onLongPress={drag} disabled={isActive}>
+          <CustomPressable key={item.packageName} style={styles.pressable} onLongPress={drag} disabled={isActive}>
             <AppIcon style={styles.image} icon={item.icon} />
-          </Pressable>
+          </CustomPressable>
         </Animated.View>
       </ScaleDecorator>
     )
@@ -64,13 +65,9 @@ const SortableFavoriteApps = () => {
     <View style={styles.wrapper}>
       <View style={styles.infoTextWrapper}>
         <Text style={styles.infoText}>Press and hold an app to start dragging</Text>
-        <Pressable
-          style={styles.doneButtonWrapper}
-          onPress={doneSorting}
-          android_disableSound={true}
-          android_ripple={doneButtonRippleConfig}>
+        <CustomPressable style={styles.doneButtonWrapper} onPress={doneSorting} android_ripple={doneButtonRippleConfig}>
           <CustomIcon name={sorted ? 'check' : 'close'} size={18} color={WHITE_COLOR} />
-        </Pressable>
+        </CustomPressable>
       </View>
       <View style={styles.draggableListWrapper}>
         <DraggableFlatList