mirror of https://github.com/laurent22/joplin.git
85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
import * as React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import NotesScreen from './screens/Notes/Notes';
|
|
import SearchScreen from './screens/SearchScreen';
|
|
import { KeyboardAvoidingView, Platform, View } from 'react-native';
|
|
import { AppState } from '../utils/types';
|
|
import { themeStyle } from './global-style';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
import useKeyboardState from '../utils/hooks/useKeyboardState';
|
|
import usePrevious from '@joplin/lib/hooks/usePrevious';
|
|
import FeedbackBanner from './FeedbackBanner';
|
|
|
|
interface Props {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
|
|
route: any;
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
|
|
screens: any;
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
|
|
dispatch: (action: any)=> void;
|
|
themeId: number;
|
|
}
|
|
|
|
const AppNavComponent: React.FC<Props> = (props) => {
|
|
const keyboardState = useKeyboardState();
|
|
const safeAreaPadding = useSafeAreaInsets();
|
|
|
|
if (!props.route) throw new Error('Route must not be null');
|
|
|
|
// Note: certain screens are kept into memory, in particular Notes and Search
|
|
// so that the scroll position is not lost when the user navigate away from them.
|
|
|
|
const route = props.route;
|
|
let Screen = null;
|
|
let notesScreenVisible = false;
|
|
let searchScreenVisible = false;
|
|
|
|
if (route.routeName === 'Notes') {
|
|
notesScreenVisible = true;
|
|
} else if (route.routeName === 'Search') {
|
|
searchScreenVisible = true;
|
|
} else {
|
|
Screen = props.screens[route.routeName].screen;
|
|
}
|
|
|
|
const previousRouteName = usePrevious(route.routeName, '');
|
|
|
|
// Keep the search screen loaded if the user is viewing a note from that search screen
|
|
// so that if the back button is pressed, the screen is still loaded. However, unload
|
|
// it if navigating away.
|
|
const searchScreenLoaded = searchScreenVisible || (previousRouteName === 'Search' && route.routeName === 'Note');
|
|
|
|
const theme = themeStyle(props.themeId);
|
|
|
|
const style = { flex: 1, backgroundColor: theme.backgroundColor };
|
|
|
|
// When the floating keyboard is enabled, the KeyboardAvoidingView can have a very small
|
|
// height. Don't use the KeyboardAvoidingView when the floating keyboard is enabled.
|
|
// See https://github.com/facebook/react-native/issues/29473
|
|
const keyboardAvoidingViewEnabled = !keyboardState.isFloatingKeyboard;
|
|
const autocompletionBarPadding = Platform.OS === 'ios' && keyboardState.keyboardVisible ? safeAreaPadding.top : 0;
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
enabled={keyboardAvoidingViewEnabled}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : null}
|
|
style={style}
|
|
>
|
|
<NotesScreen visible={notesScreenVisible} />
|
|
{searchScreenLoaded && <SearchScreen visible={searchScreenVisible} />}
|
|
{!notesScreenVisible && !searchScreenVisible && <Screen navigation={{ state: route }} themeId={props.themeId} dispatch={props.dispatch} />}
|
|
{notesScreenVisible ? <FeedbackBanner/> : null}
|
|
<View style={{ height: autocompletionBarPadding }} />
|
|
</KeyboardAvoidingView>
|
|
);
|
|
};
|
|
|
|
const AppNav = connect((state: AppState) => {
|
|
return {
|
|
route: state.route,
|
|
themeId: state.settings.theme,
|
|
};
|
|
})(AppNavComponent);
|
|
|
|
module.exports = { AppNav };
|