mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2024-11-19 18:00:17 +01:00
Merge pull request #6281 from BlueWallet/drawertsx
REF: DrawerList to TSX
This commit is contained in:
GLaDOS
GitHub
commit
ee1a32ec2f
@ -83,7 +83,7 @@ import LnurlPay from './screen/lnd/lnurlPay';
|
||||
import LnurlPaySuccess from './screen/lnd/lnurlPaySuccess';
|
||||
import ScanLndInvoice from './screen/lnd/scanLndInvoice';
|
||||
import SettingsPrivacy from './screen/settings/SettingsPrivacy';
|
||||
import DrawerList from './screen/wallets/drawerList';
|
||||
import DrawerList from './screen/wallets/DrawerList';
|
||||
import LdkViewLogs from './screen/wallets/ldkViewLogs';
|
||||
import PaymentCode from './screen/wallets/paymentCode';
|
||||
import PaymentCodesList from './screen/wallets/paymentCodesList';
|
||||
@ -383,12 +383,17 @@ const ReorderWalletsStackRoot = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const DrawerListContent = (props: any) => {
|
||||
return <DrawerList {...props} />;
|
||||
};
|
||||
|
||||
const Drawer = createDrawerNavigator();
|
||||
const DrawerRoot = () => {
|
||||
const dimensions = useWindowDimensions();
|
||||
const isLargeScreen = useMemo(() => {
|
||||
return Platform.OS === 'android' ? isTablet() : (dimensions.width >= Dimensions.get('screen').width / 2 && isTablet()) || isDesktop;
|
||||
}, [dimensions.width]);
|
||||
|
||||
const drawerStyle: DrawerNavigationOptions = useMemo(
|
||||
() => ({
|
||||
drawerPosition: I18nManager.isRTL ? 'right' : 'left',
|
||||
@ -399,7 +404,7 @@ const DrawerRoot = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<Drawer.Navigator screenOptions={drawerStyle} drawerContent={DrawerList}>
|
||||
<Drawer.Navigator screenOptions={drawerStyle} drawerContent={DrawerListContent}>
|
||||
<Drawer.Screen
|
||||
name="Navigation"
|
||||
component={Navigation}
|
||||
|
||||
172
screen/wallets/DrawerList.tsx
Normal file
172
screen/wallets/DrawerList.tsx
Normal file
@ -0,0 +1,172 @@
|
||||
import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useReducer } from 'react';
|
||||
import { StyleSheet, LayoutAnimation, FlatList, ViewStyle, InteractionManager } from 'react-native';
|
||||
import { DrawerContentScrollView } from '@react-navigation/drawer';
|
||||
import { useIsFocused, NavigationProp, ParamListBase } from '@react-navigation/native';
|
||||
import { BlueHeaderDefaultMain } from '../../BlueComponents';
|
||||
import WalletsCarousel from '../../components/WalletsCarousel';
|
||||
import loc from '../../loc';
|
||||
import { BlueStorageContext } from '../../blue_modules/storage-context';
|
||||
import { useTheme } from '../../components/themes';
|
||||
import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
|
||||
import { AbstractWallet } from '../../class';
|
||||
|
||||
enum WalletActionType {
|
||||
SetWallets = 'SET_WALLETS',
|
||||
SelectWallet = 'SELECT_WALLET',
|
||||
SetFocus = 'SET_FOCUS',
|
||||
Navigate = 'NAVIGATE',
|
||||
}
|
||||
|
||||
interface WalletState {
|
||||
wallets: AbstractWallet[];
|
||||
selectedWalletID: string | null;
|
||||
isFocused: boolean;
|
||||
}
|
||||
|
||||
interface SelectWalletAction {
|
||||
type: WalletActionType.SelectWallet;
|
||||
walletID: string;
|
||||
walletType: string;
|
||||
}
|
||||
|
||||
interface SelectWalletAction {
|
||||
type: WalletActionType.SelectWallet;
|
||||
walletID: string;
|
||||
}
|
||||
interface NavigateAction {
|
||||
type: WalletActionType.Navigate;
|
||||
screen: string;
|
||||
params: { [key: string]: any };
|
||||
}
|
||||
|
||||
interface SetFocusAction {
|
||||
type: WalletActionType.SetFocus;
|
||||
isFocused: boolean;
|
||||
}
|
||||
|
||||
interface SetWalletsAction {
|
||||
type: WalletActionType.SetWallets;
|
||||
wallets: AbstractWallet[];
|
||||
}
|
||||
|
||||
interface SelectWalletAction {
|
||||
type: WalletActionType.SelectWallet;
|
||||
walletID: string;
|
||||
}
|
||||
|
||||
type WalletAction = SetWalletsAction | SelectWalletAction | SetFocusAction | NavigateAction;
|
||||
|
||||
interface DrawerListProps {
|
||||
navigation: NavigationProp<ParamListBase>;
|
||||
}
|
||||
|
||||
const walletReducer = (state: WalletState, action: WalletAction): WalletState => {
|
||||
switch (action.type) {
|
||||
case WalletActionType.SetWallets: {
|
||||
const isSelectedWalletInNewSet = action.wallets.some(wallet => wallet.getID() === state.selectedWalletID);
|
||||
return {
|
||||
...state,
|
||||
wallets: action.wallets,
|
||||
selectedWalletID: isSelectedWalletInNewSet ? state.selectedWalletID : null,
|
||||
};
|
||||
}
|
||||
case WalletActionType.SelectWallet: {
|
||||
return { ...state, selectedWalletID: action.walletID };
|
||||
}
|
||||
case WalletActionType.SetFocus: {
|
||||
return { ...state, isFocused: action.isFocused };
|
||||
}
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
const DrawerList: React.FC<DrawerListProps> = memo(({ navigation }) => {
|
||||
const initialState: WalletState = {
|
||||
wallets: [],
|
||||
selectedWalletID: null,
|
||||
isFocused: false,
|
||||
};
|
||||
|
||||
const [state, dispatch] = useReducer(walletReducer, initialState);
|
||||
const walletsCarousel = useRef<FlatList<AbstractWallet>>(null);
|
||||
const { wallets } = useContext(BlueStorageContext);
|
||||
const { colors } = useTheme();
|
||||
const isFocused = useIsFocused();
|
||||
|
||||
const stylesHook = useMemo(
|
||||
() =>
|
||||
StyleSheet.create({
|
||||
root: { backgroundColor: colors.elevated } as ViewStyle,
|
||||
}),
|
||||
[colors.elevated],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch({ type: WalletActionType.SetWallets, wallets });
|
||||
dispatch({ type: WalletActionType.SetFocus, isFocused });
|
||||
}, [wallets, isFocused]);
|
||||
|
||||
const handleClick = useCallback(
|
||||
(item: AbstractWallet) => {
|
||||
if (item?.getID) {
|
||||
const walletID = item.getID();
|
||||
const walletType = item.type;
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
||||
dispatch({ type: WalletActionType.SelectWallet, walletID, walletType });
|
||||
InteractionManager.runAfterInteractions(() => {
|
||||
navigation.navigate({
|
||||
name: 'WalletTransactions',
|
||||
params: { walletID, walletType },
|
||||
});
|
||||
});
|
||||
} else {
|
||||
navigation.navigate('Navigation', { screen: 'AddWalletRoot' });
|
||||
}
|
||||
},
|
||||
[navigation],
|
||||
);
|
||||
|
||||
const handleLongPress = useCallback(() => {
|
||||
if (state.wallets.length > 1) {
|
||||
navigation.navigate('ReorderWallets');
|
||||
} else {
|
||||
triggerHapticFeedback(HapticFeedbackTypes.NotificationError);
|
||||
}
|
||||
}, [state.wallets.length, navigation]);
|
||||
|
||||
const onNewWalletPress = useCallback(() => {
|
||||
navigation.navigate('AddWalletRoot');
|
||||
}, [navigation]);
|
||||
|
||||
return (
|
||||
<DrawerContentScrollView
|
||||
contentContainerStyle={[styles.root, stylesHook.root]}
|
||||
contentInsetAdjustmentBehavior="automatic"
|
||||
automaticallyAdjustContentInsets={true}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<BlueHeaderDefaultMain leftText={loc.wallets.list_title} onNewWalletPress={onNewWalletPress} isDrawerList />
|
||||
<WalletsCarousel
|
||||
// @ts-ignore: refactor later
|
||||
data={state.wallets.concat(false as any)}
|
||||
extraData={[state.wallets]}
|
||||
onPress={handleClick}
|
||||
handleLongPress={handleLongPress}
|
||||
ref={walletsCarousel}
|
||||
testID="WalletsList"
|
||||
selectedWallet={state.selectedWalletID}
|
||||
scrollEnabled={state.isFocused}
|
||||
/>
|
||||
</DrawerContentScrollView>
|
||||
);
|
||||
});
|
||||
|
||||
export default DrawerList;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
@ -1,99 +0,0 @@
|
||||
import React, { useContext, useEffect, useRef } from 'react';
|
||||
import { StyleSheet, LayoutAnimation } from 'react-native';
|
||||
import { DrawerContentScrollView } from '@react-navigation/drawer';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useIsFocused } from '@react-navigation/native';
|
||||
import { BlueHeaderDefaultMain } from '../../BlueComponents';
|
||||
import WalletsCarousel from '../../components/WalletsCarousel';
|
||||
import loc from '../../loc';
|
||||
import { BlueStorageContext } from '../../blue_modules/storage-context';
|
||||
import { useTheme } from '../../components/themes';
|
||||
import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
|
||||
|
||||
const DrawerList = props => {
|
||||
const walletsCarousel = useRef();
|
||||
const { wallets, selectedWalletID, setSelectedWalletID } = useContext(BlueStorageContext);
|
||||
const { colors } = useTheme();
|
||||
const walletsCount = useRef(wallets.length);
|
||||
const isFocused = useIsFocused();
|
||||
const stylesHook = StyleSheet.create({
|
||||
root: {
|
||||
backgroundColor: colors.elevated,
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (walletsCount.current < wallets.length) {
|
||||
walletsCarousel.current?.scrollToItem({ item: wallets[walletsCount.current] });
|
||||
}
|
||||
walletsCount.current = wallets.length;
|
||||
}, [wallets]);
|
||||
|
||||
const handleClick = item => {
|
||||
if (item?.getID) {
|
||||
const walletID = item.getID();
|
||||
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
||||
setSelectedWalletID(walletID);
|
||||
props.navigation.navigate({
|
||||
name: 'WalletTransactions',
|
||||
params: { walletID, walletType: item.type },
|
||||
});
|
||||
} else {
|
||||
props.navigation.navigate('Navigation', { screen: 'AddWalletRoot' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleLongPress = () => {
|
||||
if (wallets.length > 1) {
|
||||
props.navigation.navigate('ReorderWallets');
|
||||
} else {
|
||||
triggerHapticFeedback(HapticFeedbackTypes.NotificationError);
|
||||
}
|
||||
};
|
||||
|
||||
const onNewWalletPress = () => {
|
||||
return props.navigation.navigate('AddWalletRoot');
|
||||
};
|
||||
|
||||
return (
|
||||
<DrawerContentScrollView
|
||||
{...props}
|
||||
drawerContentContainerStyle={[styles.root, stylesHook.root]}
|
||||
contentInsetAdjustmentBehavior="automatic"
|
||||
automaticallyAdjustContentInsets
|
||||
showsHorizontalScrollIndicator={false}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<BlueHeaderDefaultMain leftText={loc.wallets.list_title} onNewWalletPress={onNewWalletPress} isDrawerList />
|
||||
<WalletsCarousel
|
||||
data={wallets.concat(false)}
|
||||
extraData={[wallets]}
|
||||
onPress={handleClick}
|
||||
handleLongPress={handleLongPress}
|
||||
ref={walletsCarousel}
|
||||
testID="WalletsList"
|
||||
selectedWallet={selectedWalletID}
|
||||
scrollEnabled={isFocused}
|
||||
/>
|
||||
</DrawerContentScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
export default DrawerList;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
DrawerList.propTypes = {
|
||||
navigation: PropTypes.shape({
|
||||
navigate: PropTypes.func,
|
||||
addListener: PropTypes.func,
|
||||
}),
|
||||
route: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
params: PropTypes.object,
|
||||
}),
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user