mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2025-02-23 15:20:55 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update ManageWalletsListItem.tsx

Browse source
This commit is contained in:
Marcos Rodriguez Velez 2025-02-05 00:27:16 -04:00
parent 016e9f4214
commit 56c983e1dc
1 changed files with 69 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
components/ManageWalletsListItem.tsx
View file

@ -1,5 +1,5 @@
import React, { useCallback, useState } from 'react';
import { 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';
@ -7,6 +7,7 @@ import { TransactionListItem } from './TransactionListItem';
import { useTheme } from './themes';
import { BitcoinUnit } from '../models/bitcoinUnits';
import loc from '../loc';
import triggerHapticFeedback, { HapticFeedbackTypes } from '../blue_modules/hapticFeedback';
enum ItemType {
WalletSection = 'wallet',
@ -39,6 +40,7 @@ interface ManageWalletsListItemProps {
handleToggleHideBalance: (wallet: TWallet) => void;
isActive?: boolean;
style?: ViewStyle;
globalDragActive?: boolean;
}
interface SwipeContentProps {
@ -82,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);
@ -111,38 +136,54 @@ 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, isActive ? styles.transparentBackground : {}]}
leftContent={isActive ? null : leftContent}
rightContent={isActive ? null : rightContent}
onPressOut={onPressOut}
minSlideWidth={100}
onPressIn={onPressIn}
style={isActive ? styles.transparentBackground : {}}
>
<ListItem.Content>
<WalletCarouselItem
item={item.data}
handleLongPress={isDraggingDisabled ? undefined : drag}
onPress={onPress}
onPressIn={onPressIn}
onPressOut={onPressOut}
animationsEnabled={false}
searchQuery={state.searchQuery}
isPlaceHolder={isPlaceHolder}
renderHighlightedText={renderHighlightedText}
customStyle={styles.carouselItem}
/>
</ListItem.Content>
</ListItem.Swipeable>
<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 : {}}
>
<ListItem.Content>
<WalletCarouselItem
item={item.data}
handleLongPress={isDraggingDisabled ? undefined : startDrag}
onPress={onPress}
onPressIn={onPressIn}
onPressOut={onPressOut}
animationsEnabled={false}
searchQuery={state.searchQuery}
isPlaceHolder={isPlaceHolder}
renderHighlightedText={renderHighlightedText}
customStyle={styles.carouselItem}
/>
</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));