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

REF: navigationStyle default close position

Browse source
This commit is contained in:
Marcos Rodriguez Velez 2024-06-06 13:04:50 -04:00
parent 3728fb4bf1
commit b78bf8c1fc
No known key found for this signature in database
GPG key ID: 6030B2F48CCE86D7
16 changed files with 71 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
components/navigationStyle.tsx
View file

@ -14,6 +14,12 @@ const styles = StyleSheet.create({
},
});
enum CloseButtonPosition {
None = 'None',
Left = 'Left',
Right = 'Right',
}
type OptionsFormatter = (
options: NativeStackNavigationOptions,
deps: { theme: Theme; navigation: any; route: any },
@ -23,32 +29,44 @@ export type NavigationOptionsGetter = (theme: Theme) => (deps: { navigation: any
const navigationStyle = (
{
closeButtonFunc,
closeButtonPosition,
onCloseButtonPressed,
headerBackVisible = true,
...opts
}: NativeStackNavigationOptions & {
closeButton?: boolean;
closeButtonFunc?: (deps: { navigation: any; route: any }) => React.ReactElement | void;
closeButtonPosition?: CloseButtonPosition;
onCloseButtonPressed?: (deps: { navigation: any; route: any }) => void;
},
formatter?: OptionsFormatter,
): NavigationOptionsGetter => {
return theme =>
({ navigation, route }) => {
// Determine if the current screen is the first one in the stack using the updated method
const isFirstRouteInStack = navigation.getState().index === 0;
const isModal = route.params?.presentation !== 'card';
// Default closeButton to true if the current screen is the first one in the stack
const closeButton = opts.closeButton !== undefined ? opts.closeButton : isFirstRouteInStack;
const closeButton =
closeButtonPosition !== undefined
? closeButtonPosition
: isFirstRouteInStack && isModal
? CloseButtonPosition.Right
: CloseButtonPosition.None;
const handleClose = onCloseButtonPressed
? () => onCloseButtonPressed({ navigation, route })
: () => {
Keyboard.dismiss();
navigation.goBack(null);
};
let headerRight;
let headerLeft;
if (closeButton) {
const handleClose = closeButtonFunc
? () => closeButtonFunc({ navigation, route })
: () => {
Keyboard.dismiss();
navigation.goBack(null);
};
if (!headerBackVisible) {
headerLeft = () => <></>;
opts.headerLeft = headerLeft;
}
if (closeButton === CloseButtonPosition.Right) {
headerRight = () => (
<TouchableOpacity
accessibilityRole="button"
@ -60,22 +78,30 @@ const navigationStyle = (
<Image source={theme.closeImage} />
</TouchableOpacity>
);
} else if (closeButton === CloseButtonPosition.Left) {
headerLeft = () => (
<TouchableOpacity
accessibilityRole="button"
accessibilityLabel={loc._.close}
style={styles.button}
onPress={handleClose}
testID="NavigationCloseButton"
>
<Image source={theme.closeImage} />
</TouchableOpacity>
);
}
if (!headerBackVisible) {
headerLeft = () => <></>;
opts.headerLeft = headerLeft;
}
let options: NativeStackNavigationOptions = {
headerShadowVisible: false,
headerTitleStyle: {
fontWeight: '600',
color: theme.colors.foregroundColor,
},
headerRight,
headerBackTitleVisible: false,
headerTintColor: theme.colors.foregroundColor,
headerRight,
headerLeft,
...opts,
};
@ -88,38 +114,4 @@ const navigationStyle = (
};
export default navigationStyle;
export const navigationStyleTx = (opts: NativeStackNavigationOptions, formatter: OptionsFormatter): NavigationOptionsGetter => {
return theme =>
({ navigation, route }) => {
let options: NativeStackNavigationOptions = {
headerTitleStyle: {
fontWeight: '600',
color: theme.colors.foregroundColor,
},
// headerBackTitle: null,
headerBackTitleVisible: false,
headerTintColor: theme.colors.foregroundColor,
headerLeft: () => (
<TouchableOpacity
accessibilityRole="button"
accessibilityLabel={loc._.close}
style={styles.button}
onPress={() => {
Keyboard.dismiss();
navigation.goBack(null);
}}
>
<Image source={theme.closeImage} />
</TouchableOpacity>
),
...opts,
};
if (formatter) {
options = formatter(options, { theme, navigation, route });
}
return options;
};
};
export { CloseButtonPosition };

1
navigation/AddWalletStack.tsx
View file

@ -30,7 +30,6 @@ const AddWalletStack = () => {
name="AddWallet"
component={AddComponent}
options={navigationStyle({
closeButton: true,
headerBackVisible: false,
title: loc.wallets.add_title,
})(theme)}

10
navigation/AztecoRedeemStack.tsx
View file

@ -1,7 +1,6 @@
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import navigationStyle, { navigationStyleTx } from '../components/navigationStyle';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import navigationStyle from '../components/navigationStyle';
import { useTheme } from '../components/themes';
import loc from '../loc';
import { AztecoRedeemComponent, SelectWalletComponent } from './LazyLoadAztecoRedeemStack';
@ -16,11 +15,10 @@ const AztecoRedeemStackRoot = () => {
<Stack.Screen
name="AztecoRedeem"
component={AztecoRedeemComponent}
options={navigationStyleTx({}, options => ({
...options,
options={navigationStyle({
title: loc.azteco.title,
statusBarStyle: 'auto',
}))(theme)}
})(theme)}
/>
<Stack.Screen
name="SelectWallet"

26
navigation/DetailViewScreensStack.tsx
View file

@ -5,7 +5,7 @@ import { Icon } from 'react-native-elements';
import { isDesktop } from '../blue_modules/environment';
import HeaderRightButton from '../components/HeaderRightButton';
import navigationStyle from '../components/navigationStyle';
import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
import { useTheme } from '../components/themes';
import { useExtendedNavigation } from '../hooks/useExtendedNavigation';
import loc from '../loc';
@ -31,13 +31,7 @@ import LdkViewLogs from '../screen/wallets/ldkViewLogs';
import SelectWallet from '../screen/wallets/selectWallet';
import WalletTransactions from '../screen/wallets/transactions';
import WalletsList from '../screen/wallets/WalletsList';
import {
NavigationDefaultOptions,
NavigationDefaultOptionsForDesktop,
NavigationFormModalOptions,
StatusBarLightOptions,
DetailViewStack,
} from './index'; // Importing the navigator
import { NavigationDefaultOptions, NavigationFormModalOptions, StatusBarLightOptions, DetailViewStack } from './index'; // Importing the navigator
import AddWalletStack from './AddWalletStack';
import AztecoRedeemStackRoot from './AztecoRedeemStack';
import ExportMultisigCoordinationSetupStackRoot from './ExportMultisigCoordinationSetupStack';
@ -72,16 +66,11 @@ import SignVerifyStackRoot from './SignVerifyStack';
import ViewEditMultisigCosignersStackRoot from './ViewEditMultisigCosignersStack';
import WalletExportStack from './WalletExportStack';
import WalletXpubStackRoot from './WalletXpubStack';
import { StackActions } from '@react-navigation/native';
const DetailViewStackScreensStack = () => {
const theme = useTheme();
const navigation = useExtendedNavigation();
const popToTop = () => {
navigation.dispatch(StackActions.popToTop());
};
const SaveButton = useMemo(() => <HeaderRightButton testID="Save" disabled={true} title={loc.wallets.details_save} />, []);
const DetailButton = useMemo(() => <HeaderRightButton testID="DetailButton" disabled={true} title={loc.send.create_details} />, []);
@ -129,10 +118,9 @@ const DetailViewStackScreensStack = () => {
title: loc.lnd.new_channel,
headerLargeTitle: true,
statusBarStyle: 'auto',
closeButton: true,
closeButtonPosition: CloseButtonPosition.Right,
headerBackVisible: false,
gestureEnabled: false,
closeButtonFunc: popToTop,
})(theme)}
/>
<DetailViewStack.Screen name="LdkInfo" component={LdkInfo} options={LdkInfo.navigationOptions(theme)} />
@ -217,8 +205,7 @@ const DetailViewStackScreensStack = () => {
component={LnurlPay}
options={navigationStyle({
title: '',
closeButton: true,
closeButtonFunc: popToTop,
closeButtonPosition: CloseButtonPosition.Right,
})(theme)}
/>
<DetailViewStack.Screen
@ -226,10 +213,9 @@ const DetailViewStackScreensStack = () => {
component={LnurlPaySuccess}
options={navigationStyle({
title: '',
closeButton: true,
closeButtonPosition: CloseButtonPosition.Right,
headerBackVisible: false,
gestureEnabled: false,
closeButtonFunc: popToTop,
})(theme)}
/>
<DetailViewStack.Screen name="LnurlAuth" component={LnurlAuth} options={LnurlAuth.navigationOptions(theme)} />
@ -247,7 +233,7 @@ const DetailViewStackScreensStack = () => {
<DetailViewStack.Screen
name="SendDetailsRoot"
component={SendDetailsStack}
options={isDesktop ? NavigationDefaultOptionsForDesktop : NavigationDefaultOptions}
options={navigationStyle({ headerShown: false, presentation: isDesktop ? 'fullScreenModal' : 'modal' })(theme)}
/>
<DetailViewStack.Screen name="LNDCreateInvoiceRoot" component={LNDCreateInvoiceRoot} options={NavigationDefaultOptions} />
<DetailViewStack.Screen name="ScanLndInvoiceRoot" component={ScanLndInvoiceRoot} options={NavigationDefaultOptions} />

7
navigation/ExportMultisigCoordinationSetupStack.tsx
View file

@ -1,7 +1,6 @@
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import navigationStyle from '../components/navigationStyle';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
import { useTheme } from '../components/themes';
import loc from '../loc';
import { ExportMultisigCoordinationSetupComponent } from './LazyLoadExportMultisigCoordinationSetupStack';
@ -17,7 +16,7 @@ const ExportMultisigCoordinationSetupStackRoot = () => {
name="ExportMultisigCoordinationSetup"
component={ExportMultisigCoordinationSetupComponent}
options={navigationStyle({
closeButton: true,
closeButtonPosition: CloseButtonPosition.Right,
headerBackVisible: false,
statusBarStyle: 'light',
title: loc.multisig.export_coordination_setup,

5
navigation/LNDCreateInvoiceStack.tsx
View file

@ -1,7 +1,6 @@
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import navigationStyle from '../components/navigationStyle';
import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
import { useTheme } from '../components/themes';
import loc from '../loc';
import {
@ -24,7 +23,7 @@ const LNDCreateInvoiceRoot = () => {
component={LNDCreateInvoiceComponent}
options={navigationStyle({
title: loc.receive.header,
closeButton: true,
closeButtonPosition: CloseButtonPosition.Right,
headerBackVisible: false,
statusBarStyle: 'light',
})(theme)}

4
navigation/PaymentCodeStack.tsx
View file

@ -33,12 +33,12 @@ const PaymentCodeStackRoot = () => {
<Stack.Screen
name="PaymentCode"
component={PaymentCodeComponent}
options={navigationStyle({ title: loc.bip47.payment_code, closeButton: true })(theme)}
options={navigationStyle({ title: loc.bip47.payment_code })(theme)}
/>
<Stack.Screen
name="PaymentCodesList"
component={PaymentCodesListComponent}
options={navigationStyle({ title: loc.bip47.contacts, closeButton: true })(theme)}
options={navigationStyle({ title: loc.bip47.contacts })(theme)}
/>
</Stack.Navigator>
);

4
navigation/ReceiveDetailsStack.tsx
View file

@ -16,9 +16,7 @@ const ReceiveDetailsStackRoot = () => {
<Stack.Screen
name="ReceiveDetails"
component={ReceiveDetailsComponent}
options={navigationStyle({ closeButton: true, headerBackVisible: false, title: loc.receive.header, statusBarStyle: 'light' })(
theme,
)}
options={navigationStyle({ headerBackVisible: false, title: loc.receive.header, statusBarStyle: 'light' })(theme)}
/>
</Stack.Navigator>
);

1
navigation/ReorderWalletsStack.tsx
View file

@ -19,7 +19,6 @@ const ReorderWalletsStackRoot = () => {
options={navigationStyle({
headerBackVisible: false,
headerLargeTitle: true,
closeButton: true,
headerTitle: loc.wallets.reorder_title,
})(theme)}

4
navigation/ScanLndInvoiceStack.tsx
View file

@ -21,7 +21,7 @@ const ScanLndInvoiceRoot = () => {
<Stack.Screen
name="ScanLndInvoice"
component={ScanLndInvoiceComponent}
options={navigationStyle({ closeButton: true, headerBackVisible: false, title: loc.send.header, statusBarStyle: 'light' })(theme)}
options={navigationStyle({ headerBackVisible: false, title: loc.send.header, statusBarStyle: 'light' })(theme)}
initialParams={{ uri: undefined, walletID: undefined, invoice: undefined }}
/>
<Stack.Screen
@ -39,7 +39,6 @@ const ScanLndInvoiceRoot = () => {
component={LnurlPayComponent}
options={navigationStyle({
title: '',
closeButton: true,
})(theme)}
/>
<Stack.Screen
@ -47,7 +46,6 @@ const ScanLndInvoiceRoot = () => {
component={LnurlPaySuccessComponent}
options={navigationStyle({
title: '',
closeButton: true,
headerBackVisible: false,
gestureEnabled: false,
})(theme)}

11
navigation/SendDetailsStack.tsx
View file

@ -1,7 +1,6 @@
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React, { useMemo } from 'react';
import navigationStyle, { navigationStyleTx } from '../components/navigationStyle';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
import { useTheme } from '../components/themes';
import loc from '../loc';
import {
@ -29,11 +28,11 @@ const SendDetailsStack = () => {
<Stack.Screen
name="SendDetails"
component={SendDetailsComponent}
options={navigationStyleTx({}, options => ({
...options,
options={navigationStyle({
title: loc.send.header,
statusBarStyle: 'light',
}))(theme)}
closeButtonPosition: CloseButtonPosition.Left,
})(theme)}
initialParams={{ isEditable: true }} // Correctly typed now
/>
<Stack.Screen

4
navigation/SignVerifyStack.tsx
View file

@ -16,9 +16,7 @@ const SignVerifyStackRoot = () => {
<Stack.Screen
name="SignVerify"
component={SignVerifyComponent}
options={navigationStyle({ closeButton: true, headerBackVisible: false, statusBarStyle: 'light', title: loc.addresses.sign_title })(
theme,
)}
options={navigationStyle({ headerBackVisible: false, statusBarStyle: 'light', title: loc.addresses.sign_title })(theme)}
/>
</Stack.Navigator>
);

1
navigation/ViewEditMultisigCosignersStack.tsx
View file

@ -23,7 +23,6 @@ const ViewEditMultisigCosignersStackRoot = () => {
name="ViewEditMultisigCosigners"
component={ViewEditMultisigCosignersComponent}
options={navigationStyle({
closeButton: true,
headerBackVisible: false,
title: loc.multisig.manage_keys,
})(theme)}

1
navigation/WalletExportStack.tsx
View file

@ -21,7 +21,6 @@ const WalletExportStack = () => {
name="WalletExport"
component={WalletExportComponent}
options={navigationStyle({
closeButton: true,
headerBackVisible: false,
title: loc.wallets.export_title,
})(theme)}

1
navigation/WalletXpubStack.tsx
View file

@ -17,7 +17,6 @@ const WalletXpubStackRoot = () => {
name="WalletXpub"
component={WalletXpubComponent}
options={navigationStyle({
closeButton: true,
headerBackVisible: false,
headerTitle: loc.wallets.xpub_title,
})(theme)}

1
navigation/index.tsx
View file

@ -18,7 +18,6 @@ export const NavigationFormModalOptions: NativeStackNavigationOptions = {
headerShown: false,
presentation: 'formSheet',
};
export const NavigationDefaultOptionsForDesktop: NativeStackNavigationOptions = { headerShown: false, presentation: 'fullScreenModal' };
export const StatusBarLightOptions: NativeStackNavigationOptions = { statusBarStyle: 'light' };
const DetailViewStack = createNativeStackNavigator<DetailViewStackParamList>();