Merge pull request #7567 from BlueWallet/swipe

FIX: Swiping is now easier

components/ManageWalletsListItem.tsx

@@ -1,13 +1,13 @@
-import React, { useCallback, useState } from 'react';
-import { View, StyleSheet, ViewStyle, TouchableOpacity, ActivityIndicator, Platform } from 'react-native';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
+import { StyleSheet, ViewStyle, TouchableOpacity, ActivityIndicator, Platform, Animated } from 'react-native';
 import { Icon, ListItem } from '@rneui/base';
 import { ExtendedTransaction, LightningTransaction, TWallet } from '../class/wallets/types';
 import { WalletCarouselItem } from './WalletsCarousel';
 import { TransactionListItem } from './TransactionListItem';
 import { useTheme } from './themes';
 import { BitcoinUnit } from '../models/bitcoinUnits';
-import { TouchableOpacityWrapper } from './ListItem';
 import loc from '../loc';
+import triggerHapticFeedback, { HapticFeedbackTypes } from '../blue_modules/hapticFeedback';
 
 enum ItemType {
   WalletSection = 'wallet',
@@ -40,6 +40,7 @@ interface ManageWalletsListItemProps {
   handleToggleHideBalance: (wallet: TWallet) => void;
   isActive?: boolean;
   style?: ViewStyle;
+  globalDragActive?: boolean;
 }
 
 interface SwipeContentProps {
@@ -83,11 +84,34 @@ const ManageWalletsListItem: React.FC<ManageWalletsListItemProps> = ({
   onPressIn,
   onPressOut,
   isActive,
+  globalDragActive,
   style,
 }) => {
   const { colors } = useTheme();
   const [isLoading, setIsLoading] = useState(false);
 
+  const CARD_SORT_ACTIVE = 1.06;
+  const INACTIVE_SCALE_WHEN_ACTIVE = 0.9;
+  const SCALE_DURATION = 200;
+  const scaleValue = useRef(new Animated.Value(1)).current;
+  const prevIsActive = useRef(isActive);
+
+  const DEFAULT_VERTICAL_MARGIN = -10;
+  const REDUCED_VERTICAL_MARGIN = -50;
+
+  useEffect(() => {
+    if (isActive !== prevIsActive.current) {
+      triggerHapticFeedback(HapticFeedbackTypes.ImpactMedium);
+    }
+    prevIsActive.current = isActive;
+
+    Animated.timing(scaleValue, {
+      toValue: isActive ? CARD_SORT_ACTIVE : globalDragActive ? INACTIVE_SCALE_WHEN_ACTIVE : 1,
+      duration: SCALE_DURATION,
+      useNativeDriver: true,
+    }).start();
+  }, [isActive, globalDragActive, scaleValue]);
+
   const onPress = useCallback(() => {
     if (item.type === ItemType.WalletSection) {
       setIsLoading(true);
@@ -112,32 +136,42 @@ const ManageWalletsListItem: React.FC<ManageWalletsListItemProps> = ({
 
   const rightContent = (reset: () => void) => <RightSwipeContent onPress={() => handleRightPress(reset)} />;
 
+  const startDrag = useCallback(() => {
+    scaleValue.setValue(CARD_SORT_ACTIVE);
+    triggerHapticFeedback(HapticFeedbackTypes.ImpactMedium);
+    if (drag) {
+      drag();
+    }
+  }, [CARD_SORT_ACTIVE, drag, scaleValue]);
+
   if (isLoading) {
     return <ActivityIndicator size="large" color={colors.brandingColor} />;
   }
 
   if (item.type === ItemType.WalletSection) {
+    const animatedStyle = {
+      transform: [{ scale: scaleValue }],
+      marginVertical: globalDragActive && !isActive ? REDUCED_VERTICAL_MARGIN : DEFAULT_VERTICAL_MARGIN,
+    };
+
+    const backgroundColor = isActive || globalDragActive ? colors.brandingColor : colors.background;
     return (
-      <ListItem.Swipeable
-        leftWidth={80}
-        rightWidth={90}
-        containerStyle={[{ backgroundColor: colors.background }, style]}
-        leftContent={leftContent}
-        rightContent={rightContent}
-        Component={TouchableOpacityWrapper}
-        onPressOut={onPressOut}
-        onPressIn={onPressIn}
-        style={isActive ? styles.activeItem : undefined}
-      >
-        <ListItem.Content
-          style={{
-            backgroundColor: colors.background,
-          }}
+      <Animated.View style={animatedStyle}>
+        <ListItem.Swipeable
+          leftWidth={80}
+          rightWidth={90}
+          containerStyle={[style, { backgroundColor }, isActive || globalDragActive ? styles.transparentBackground : {}]}
+          leftContent={globalDragActive ? null : isActive ? null : leftContent}
+          rightContent={globalDragActive ? null : isActive ? null : rightContent}
+          onPressOut={onPressOut}
+          minSlideWidth={80}
+          onPressIn={onPressIn}
+          style={isActive || globalDragActive ? styles.transparentBackground : {}}
         >
-          <View style={styles.walletCarouselItemContainer}>
+          <ListItem.Content>
             <WalletCarouselItem
               item={item.data}
-              handleLongPress={isDraggingDisabled ? undefined : drag}
+              handleLongPress={isDraggingDisabled ? undefined : startDrag}
               onPress={onPress}
               onPressIn={onPressIn}
               onPressOut={onPressOut}
@@ -145,10 +179,11 @@ const ManageWalletsListItem: React.FC<ManageWalletsListItemProps> = ({
               searchQuery={state.searchQuery}
               isPlaceHolder={isPlaceHolder}
               renderHighlightedText={renderHighlightedText}
+              customStyle={styles.carouselItem}
             />
-          </View>
-        </ListItem.Content>
-      </ListItem.Swipeable>
+          </ListItem.Content>
+        </ListItem.Swipeable>
+      </Animated.View>
     );
   } else if (item.type === ItemType.TransactionSection && item.data) {
     const w = state.wallets.find(wallet => wallet.getTransactions().some((tx: ExtendedTransaction) => tx.hash === item.data.hash));
@@ -169,22 +204,22 @@ const ManageWalletsListItem: React.FC<ManageWalletsListItemProps> = ({
 };
 
 const styles = StyleSheet.create({
-  walletCarouselItemContainer: {
-    width: '100%',
-  },
   leftButtonContainer: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
   },
+  carouselItem: {
+    width: '100%',
+  },
   rightButtonContainer: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'red',
   },
-  activeItem: {
-    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+  transparentBackground: {
+    backgroundColor: 'transparent',
   },
 });