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

Merge pull request #6552 from BlueWallet/largescrenprov

Browse source 
REF: Single source of truth for useIsLargeScreen
This commit is contained in:
GLaDOS 2024-05-16 02:40:44 +00:00 • committed by GitHub
commit 2c16a49474
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 70 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
App.tsx
View file

@ -9,22 +9,25 @@ import { NavigationProvider } from './components/NavigationProvider';
import { BlueStorageProvider } from './blue_modules/storage-context';
import MasterView from './MasterView';
import { SettingsProvider } from './components/Context/SettingsContext';
import { LargeScreenProvider } from './components/Context/LargeScreenProvider';
const App = () => {
const colorScheme = useColorScheme();
return (
<NavigationContainer ref={navigationRef} theme={colorScheme === 'dark' ? BlueDarkTheme : BlueDefaultTheme}>
<NavigationProvider>
<SafeAreaProvider>
<BlueStorageProvider>
<SettingsProvider>
<MasterView />
</SettingsProvider>
</BlueStorageProvider>
</SafeAreaProvider>
</NavigationProvider>
</NavigationContainer>
<LargeScreenProvider>
<NavigationContainer ref={navigationRef} theme={colorScheme === 'dark' ? BlueDarkTheme : BlueDefaultTheme}>
<NavigationProvider>
<SafeAreaProvider>
<BlueStorageProvider>
<SettingsProvider>
<MasterView />
</SettingsProvider>
</BlueStorageProvider>
</SafeAreaProvider>
</NavigationProvider>
</NavigationContainer>
</LargeScreenProvider>
);
};

7
blue_modules/environment.ts
View file

@ -1,6 +1,7 @@
import { isTablet, getDeviceType } from 'react-native-device-info';
import { isTablet as checkIsTablet, getDeviceType } from 'react-native-device-info';
const isTablet: boolean = checkIsTablet();
const isDesktop: boolean = getDeviceType() === 'Desktop';
const isHandset: boolean = getDeviceType() === 'Handset';
export const isHandset: boolean = getDeviceType() === 'Handset';
export { isDesktop, isTablet };
export { isDesktop, isTablet, isHandset };

41
components/Context/LargeScreenProvider.tsx Normal file
View file

@ -0,0 +1,41 @@
import React, { createContext, useState, useEffect, useMemo, ReactNode } from 'react';
import { Dimensions } from 'react-native';
import { isDesktop, isTablet } from '../../blue_modules/environment';
interface ILargeScreenContext {
isLargeScreen: boolean;
}
export const LargeScreenContext = createContext<ILargeScreenContext | undefined>(undefined);
interface LargeScreenProviderProps {
children: ReactNode;
}
export const LargeScreenProvider: React.FC<LargeScreenProviderProps> = ({ children }) => {
const [windowWidth, setWindowWidth] = useState<number>(Dimensions.get('window').width);
const screenWidth: number = useMemo(() => Dimensions.get('screen').width, []);
useEffect(() => {
const updateScreenUsage = (): void => {
const newWindowWidth = Dimensions.get('window').width;
if (newWindowWidth !== windowWidth) {
setWindowWidth(newWindowWidth);
}
};
const subscription = Dimensions.addEventListener('change', updateScreenUsage);
return () => subscription.remove();
}, [windowWidth]);
const isLargeScreen: boolean = useMemo(() => {
const halfScreenWidth = windowWidth >= screenWidth / 2;
const condition = (isTablet && halfScreenWidth) || isDesktop;
console.debug(
`LargeScreenProvider.isLargeScreen: width: ${windowWidth}, Screen width: ${screenWidth}, Is tablet: ${isTablet}, Is large screen: ${condition}, isDesktkop: ${isDesktop}`,
);
return condition;
}, [windowWidth, screenWidth]);
return <LargeScreenContext.Provider value={{ isLargeScreen }}>{children}</LargeScreenContext.Provider>;
};

47
hooks/useIsLargeScreen.ts
View file

@ -1,41 +1,10 @@
import { useState, useEffect, useMemo } from 'react';
import { Dimensions } from 'react-native';
import { isTablet } from 'react-native-device-info';
import { isDesktop } from '../blue_modules/environment';
import { useContext } from 'react';
import { LargeScreenContext } from '../components/Context/LargeScreenProvider';
// Custom hook to determine if the screen is large
export const useIsLargeScreen = () => {
const [windowWidth, setWindowWidth] = useState(Dimensions.get('window').width);
const screenWidth = useMemo(() => Dimensions.get('screen').width, []);
useEffect(() => {
const updateScreenUsage = () => {
const newWindowWidth = Dimensions.get('window').width;
if (newWindowWidth !== windowWidth) {
console.debug(`Window width changed: ${newWindowWidth}`);
setWindowWidth(newWindowWidth);
}
};
// Add event listener for dimension changes
const subscription = Dimensions.addEventListener('change', updateScreenUsage);
// Cleanup function to remove the event listener
return () => {
subscription.remove();
};
}, [windowWidth]);
// Determine if the window width is at least half of the screen width
const isLargeScreen = useMemo(() => {
const isRunningOnTablet = isTablet();
const halfScreenWidth = windowWidth >= screenWidth / 2;
const condition = (isRunningOnTablet && halfScreenWidth) || isDesktop;
console.debug(
`Window width: ${windowWidth}, Screen width: ${screenWidth}, Is tablet: ${isTablet()}, Is large screen: ${condition}, isDesktkop: ${isDesktop}`,
);
return condition;
}, [windowWidth, screenWidth]);
return isLargeScreen;
export const useIsLargeScreen = (): boolean => {
const context = useContext(LargeScreenContext);
if (context === undefined) {
throw new Error('useIsLargeScreen must be used within a LargeScreenProvider');
}
return context.isLargeScreen;
};

4
screen/send/Broadcast.tsx
View file

@ -21,7 +21,7 @@ import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/h
import SafeArea from '../../components/SafeArea';
import presentAlert from '../../components/Alert';
import { scanQrHelper } from '../../helpers/scan-qr';
import { isTablet } from 'react-native-device-info';
import { isTablet } from '../../blue_modules/environment';
const BROADCAST_RESULT = Object.freeze({
none: 'Input transaction hex',
@ -117,7 +117,7 @@ const Broadcast: React.FC = () => {
return (
<SafeArea>
<KeyboardAvoidingView enabled={!isTablet()} behavior={Platform.OS === 'ios' ? 'position' : undefined}>
<KeyboardAvoidingView enabled={!isTablet} behavior={Platform.OS === 'ios' ? 'position' : undefined}>
<View style={styles.wrapper} testID="BroadcastView">
{BROADCAST_RESULT.success !== broadcastResult && (
<BlueCard style={styles.mainCard}>

1
tests/setup.js
View file

@ -59,6 +59,7 @@ jest.mock('react-native-device-info', () => {
getDeviceType: jest.fn().mockReturnValue(false),
hasGmsSync: jest.fn().mockReturnValue(true),
hasHmsSync: jest.fn().mockReturnValue(false),
isTablet: jest.fn().mockReturnValue(false),
};
});