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={{
-                            color: colors.secondary,
-                            textDecorationColor: colors.disabled,
-                            textDecorationLine: 'underline',
-                            textDecorationStyle: 'solid'
-                          }}
+                          style={{ color: colors.secondary }}
                           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}
+    />
+  )
+}