Consolidate swipe to delete views

src/components/Filter.tsx

@@ -2,7 +2,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { Fragment } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { View } from 'react-native'
+import { View, ViewStyle } from 'react-native'
 import { TouchableNativeFeedback } from 'react-native-gesture-handler'
 import Icon from './Icon'
 import CustomText from './Text'
@@ -11,9 +11,10 @@ export type Props = {
   onPress: () => void
   filter: Mastodon.Filter<'v2'>
   button?: React.ReactNode
+  style?: ViewStyle
 }
 
-export const Filter: React.FC<Props> = ({ onPress, filter, button }) => {
+export const Filter: React.FC<Props> = ({ onPress, filter, button, style }) => {
   const { t } = useTranslation(['common', 'screenTabs'])
   const { colors } = useTheme()
 
@@ -24,7 +25,8 @@ export const Filter: React.FC<Props> = ({ onPress, filter, button }) => {
           paddingVertical: StyleConstants.Spacing.S,
           flexDirection: 'row',
           alignItems: 'center',
-          backgroundColor: colors.backgroundDefault
+          backgroundColor: colors.backgroundDefault,
+          ...style
         }}
       >
         <View style={{ flex: 1 }}>
@@ -83,12 +85,7 @@ export const Filter: React.FC<Props> = ({ onPress, filter, button }) => {
                     {filter.context.map((c, index) => (
                       <Fragment key={index}>
                         <CustomText
-                          style={{
+                          style={{ color: colors.secondary }}
-                            color: colors.secondary,
-                            textDecorationColor: colors.disabled,
-                            textDecorationLine: 'underline',
-                            textDecorationStyle: 'solid'
-                          }}
                           children={t(`screenTabs:me.preferencesFilters.contexts.${c}`)}
                         />
                         <CustomText children={t('common:separator')} />

src/components/Hr.tsx

@@ -12,7 +12,7 @@ const Hr: React.FC<{ style?: ViewStyle }> = ({ style }) => {
           borderTopColor: colors.border,
           borderTopWidth: 1,
           height: 1,
-          marginVertical: StyleConstants.Spacing.S
+          paddingVertical: StyleConstants.Spacing.S
         },
         style
       ]}

src/components/SwipeToActions.tsx

@@ -0,0 +1,57 @@
+import { StyleConstants } from '@utils/styles/constants'
+import { ColorValue, TouchableNativeFeedback, View } from 'react-native'
+import { SwipeListView } from 'react-native-swipe-list-view'
+import haptics from './haptics'
+import Icon, { IconName } from './Icon'
+import ComponentSeparator from './Separator'
+
+export type Props = {
+  actions: {
+    onPress: (item: any) => void
+    color: ColorValue
+    icon: IconName
+    haptic?: Parameters<typeof haptics>['0']
+  }[]
+}
+
+export const SwipeToActions = <T extends unknown>({
+  actions,
+  ...rest
+}: Props & SwipeListView<T>['props']) => {
+  const perActionWidth = StyleConstants.Spacing.L * 2 + StyleConstants.Font.Size.L
+
+  return (
+    <SwipeListView
+      renderHiddenItem={({ item }) => (
+        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
+          {actions.map((action, index) => (
+            <TouchableNativeFeedback
+              key={index}
+              onPress={() => {
+                haptics(action.haptic || 'Light')
+                action.onPress({ item })
+              }}
+            >
+              <View
+                style={{
+                  paddingHorizontal: StyleConstants.Spacing.L,
+                  flexBasis: perActionWidth,
+                  backgroundColor: action.color,
+                  justifyContent: 'center',
+                  alignItems: 'center'
+                }}
+              >
+                <Icon name={action.icon} color='white' size={StyleConstants.Font.Size.L} />
+              </View>
+            </TouchableNativeFeedback>
+          ))}
+        </View>
+      )}
+      rightOpenValue={-perActionWidth * actions.length}
+      disableRightSwipe
+      closeOnRowPress
+      ItemSeparatorComponent={ComponentSeparator}
+      {...rest}
+    />
+  )
+}

src/screens/Compose/DraftsList.tsx

@@ -1,6 +1,6 @@
 import { HeaderLeft } from '@components/Header'
 import Icon from '@components/Icon'
-import ComponentSeparator from '@components/Separator'
+import { SwipeToActions } from '@components/SwipeToActions'
 import CustomText from '@components/Text'
 import HeaderSharedCreated from '@components/Timeline/Shared/HeaderShared/Created'
 import apiInstance from '@utils/api/instance'
@@ -10,10 +10,8 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Dimensions, Modal, Platform, Pressable, View } from 'react-native'
+import { Dimensions, Modal, Pressable, View } from 'react-native'
 import FastImage from 'react-native-fast-image'
-import { PanGestureHandler } from 'react-native-gesture-handler'
-import { SwipeListView } from 'react-native-swipe-list-view'
 import ComposeContext from './utils/createContext'
 import { formatText } from './utils/processText'
 import { ComposeStateDraft, ExtendedAttachment } from './utils/types'
@@ -39,9 +37,7 @@ const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps<'Screen-Compose-
   useEffect(() => {
     navigation.setOptions({
       title: t('content.draftsList.header.title'),
-      headerLeft: () => (
+      headerLeft: () => <HeaderLeft content='chevron-down' onPress={() => navigation.goBack()} />
-        <HeaderLeft content='chevron-down' onPress={() => navigation.goBack()} />
-      )
     })
   }, [])
 
@@ -49,8 +45,6 @@ const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps<'Screen-Compose-
   const [drafts] = useAccountStorage.object('drafts')
   const [checkingAttachments, setCheckingAttachments] = useState(false)
 
-  const actionWidth = StyleConstants.Font.Size.L + StyleConstants.Spacing.Global.PagePadding * 4
-
   return (
     <>
       <View
@@ -61,7 +55,8 @@ const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps<'Screen-Compose-
           padding: StyleConstants.Spacing.S,
           borderColor: colors.border,
           borderWidth: 1,
-          borderRadius: StyleConstants.Spacing.S
+          borderRadius: StyleConstants.Spacing.S,
+          marginBottom: StyleConstants.Spacing.S
         }}
       >
         <Icon
@@ -74,8 +69,10 @@ const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps<'Screen-Compose-
           {t('content.draftsList.warning')}
         </CustomText>
       </View>
-      <PanGestureHandler enabled={Platform.OS === 'ios'}>
+      <SwipeToActions
-        <SwipeListView
+        actions={[
+          { onPress: ({ item }) => removeDraft(item.timestamp), color: colors.red, icon: 'trash' }
+        ]}
         data={drafts.filter(draft => draft.timestamp !== timestamp)}
         renderItem={({ item }: { item: ComposeStateDraft }) => {
           return (
@@ -168,41 +165,8 @@ const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps<'Screen-Compose-
             </Pressable>
           )
         }}
-          renderHiddenItem={({ item }) => (
-            <Pressable
-              style={{
-                flex: 1,
-                flexDirection: 'row',
-                justifyContent: 'flex-end',
-                backgroundColor: colors.red
-              }}
-              onPress={() => removeDraft(item.timestamp)}
-              children={
-                <View
-                  style={{
-                    flexBasis:
-                      StyleConstants.Font.Size.L + StyleConstants.Spacing.Global.PagePadding * 4,
-                    justifyContent: 'center',
-                    alignItems: 'center'
-                  }}
-                  children={
-                    <Icon
-                      name='trash'
-                      size={StyleConstants.Font.Size.L}
-                      color={colors.primaryOverlay}
-                    />
-                  }
-                />
-              }
-            />
-          )}
-          disableRightSwipe={true}
-          rightOpenValue={-actionWidth}
-          previewOpenValue={-actionWidth / 2}
-          ItemSeparatorComponent={ComponentSeparator}
         keyExtractor={item => item.timestamp?.toString()}
       />
-      </PanGestureHandler>
       <Modal
         transparent
         animationType='fade'

src/screens/Compose/index.tsx

@@ -416,12 +416,12 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
           <Stack.Screen
             name='Screen-Compose-DraftsList'
             component={ComposeDraftsList}
-            options={{ presentation: 'modal' }}
+            options={{ presentation: 'modal', headerShadowVisible: false }}
           />
           <Stack.Screen
             name='Screen-Compose-EditAttachment'
             component={ComposeEditAttachment}
-            options={{ presentation: 'modal' }}
+            options={{ presentation: 'modal', headerShadowVisible: false }}
           />
         </Stack.Navigator>
       </ComposeContext.Provider>

src/screens/Tabs/Me/Preferences/Filters.tsx

@@ -1,22 +1,17 @@
 import { Filter } from '@components/Filter'
 import { HeaderLeft, HeaderRight } from '@components/Header'
-import Icon from '@components/Icon'
+import { SwipeToActions } from '@components/SwipeToActions'
-import ComponentSeparator from '@components/Separator'
 import apiInstance from '@utils/api/instance'
 import { TabMePreferencesStackScreenProps } from '@utils/navigation/navigators'
 import { useFiltersQuery } from '@utils/queryHooks/filters'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Pressable, View } from 'react-native'
-import { SwipeListView } from 'react-native-swipe-list-view'
 
 const TabMePreferencesFilters: React.FC<
   TabMePreferencesStackScreenProps<'Tab-Me-Preferences-Filters'>
 > = ({ navigation }) => {
   const { colors } = useTheme()
-  const { t } = useTranslation(['common', 'screenTabs'])
 
   useEffect(() => {
     navigation.setOptions({
@@ -38,40 +33,31 @@ const TabMePreferencesFilters: React.FC<
   const { data, refetch } = useFiltersQuery<'v2'>({ version: 'v2' })
 
   return (
-    <SwipeListView
+    <SwipeToActions
-      contentContainerStyle={{ padding: StyleConstants.Spacing.Global.PagePadding }}
+      actions={[
-      renderHiddenItem={({ item }) => (
+        {
-        <Pressable
+          onPress: ({ item }) => {
-          style={{
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'flex-end',
-            backgroundColor: colors.red
-          }}
-          onPress={() => {
             apiInstance({ method: 'delete', version: 'v2', url: `filters/${item.id}` }).then(() =>
               refetch()
             )
-          }}
+          },
-        >
+          color: colors.red,
-          <View style={{ paddingHorizontal: StyleConstants.Spacing.L }}>
+          icon: 'trash'
-            <Icon name='trash' color='white' size={StyleConstants.Font.Size.L} />
+        }
-          </View>
+      ]}
-        </Pressable>
-      )}
-      rightOpenValue={-(StyleConstants.Spacing.L * 2 + StyleConstants.Font.Size.L)}
-      disableRightSwipe
-      closeOnRowPress
       data={data?.sort(filter =>
         filter.expires_at ? new Date().getTime() - new Date(filter.expires_at).getTime() : 1
       )}
       renderItem={({ item: filter }) => (
         <Filter
+          style={{
+            padding: StyleConstants.Spacing.Global.PagePadding,
+            paddingVertical: StyleConstants.Spacing.M
+          }}
           filter={filter}
           onPress={() => navigation.navigate('Tab-Me-Preferences-Filter', { type: 'edit', filter })}
         />
       )}
-      ItemSeparatorComponent={ComponentSeparator}
     />
   )
 }

src/screens/Tabs/Me/Preferences/index.tsx

@@ -1,8 +1,9 @@
 import { HeaderLeft } from '@components/Header'
 import { Message } from '@components/Message'
+import { useNavigationState } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { TabMePreferencesStackParamList, TabMeStackScreenProps } from '@utils/navigation/navigators'
-import React, { useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import FlashMessage from 'react-native-flash-message'
 import TabMePreferencesFilter from './Filter'
@@ -17,6 +18,15 @@ const TabMePreferences: React.FC<TabMeStackScreenProps<'Tab-Me-Preferences'>> =
   const { t } = useTranslation('screenTabs')
   const messageRef = useRef<FlashMessage>(null)
 
+  const isNested =
+    (useNavigationState(
+      state => state.routes.find(route => route.name === 'Tab-Me-Preferences')?.state?.routes.length
+    ) || 0) > 1
+
+  useEffect(() => {
+    navigation.setOptions({ gestureEnabled: !isNested })
+  }, [isNested])
+
   return (
     <>
       <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>