From d4d9fe921b8ec0a3a6fecbbb57b740cf07f719be Mon Sep 17 00:00:00 2001 From: Henry Heino Date: Thu, 26 Sep 2024 15:29:23 -0700 Subject: [PATCH 1/2] Mobile: Fixes #11130: Fix regression: Search screen not hidden when cached for search result navigation For now, this commit uses the same approach as the Notes screen -- the search screen is given `flex: 0.001`. This was also the component's behavior prior to a recent [prior to a recent refactoring](https://github.com/laurent22/joplin/blob/598677b2072ab0648c7702f1d27c1e5ca3d628d3/packages/app-mobile/components/screens/search.tsx#L163). --- .../components/screens/SearchScreen/index.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/app-mobile/components/screens/SearchScreen/index.tsx b/packages/app-mobile/components/screens/SearchScreen/index.tsx index 9f96d27304c..2d659c6be0f 100644 --- a/packages/app-mobile/components/screens/SearchScreen/index.tsx +++ b/packages/app-mobile/components/screens/SearchScreen/index.tsx @@ -10,6 +10,7 @@ import { Dispatch } from 'redux'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import IconButton from '../../IconButton'; import SearchResults from './SearchResults'; +import AccessibleView from '../../accessibility/AccessibleView'; interface Props { themeId: number; @@ -21,7 +22,7 @@ interface Props { ftsEnabled: number; } -const useStyles = (theme: ThemeStyle) => { +const useStyles = (theme: ThemeStyle, visible: boolean) => { return useMemo(() => { return StyleSheet.create({ body: { @@ -46,13 +47,19 @@ const useStyles = (theme: ThemeStyle) => { paddingRight: theme.marginRight, backgroundColor: theme.backgroundColor, }, + rootStyle: { + ...theme.rootStyle, + + // TODO: Improve. This hides the component without unmounting it. + flex: !visible ? 0.001 : 1, + }, }); - }, [theme]); + }, [theme, visible]); }; const SearchScreenComponent: React.FC = props => { const theme = themeStyle(props.themeId); - const styles = useStyles(theme); + const styles = useStyles(theme, props.visible); const [query, setQuery] = useState(props.query); @@ -79,7 +86,7 @@ const SearchScreenComponent: React.FC = props => { }, [props.dispatch]); return ( - + = props => { onHighlightedWordsChange={onHighlightedWordsChange} /> - + ); }; From 2194b004804ff05ad19d99a03402e128a3105e46 Mon Sep 17 00:00:00 2001 From: Henry Heino Date: Thu, 26 Sep 2024 16:01:13 -0700 Subject: [PATCH 2/2] Refactoring: Reduce style duplication --- packages/app-mobile/components/global-style.ts | 7 +++++++ packages/app-mobile/components/screens/Notes.tsx | 9 +-------- .../app-mobile/components/screens/SearchScreen/index.tsx | 7 +------ 3 files changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/app-mobile/components/global-style.ts b/packages/app-mobile/components/global-style.ts index c8f66fef65a..4dbe65e0b60 100644 --- a/packages/app-mobile/components/global-style.ts +++ b/packages/app-mobile/components/global-style.ts @@ -30,6 +30,7 @@ export type ThemeStyle = BaseTheme & typeof baseStyle & { headerStyle: TextStyle; headerWrapperStyle: ViewStyle; rootStyle: ViewStyle; + hiddenRootStyle: ViewStyle; keyboardAppearance: 'light'|'dark'; }; @@ -87,6 +88,11 @@ function extraStyles(theme: BaseTheme) { backgroundColor: theme.backgroundColor, }; + const hiddenRootStyle: ViewStyle = { + ...rootStyle, + flex: 0.001, // This is a bit of a hack but it seems to work fine - it makes the component invisible but without unmounting it + }; + return { marginRight: baseStyle.margin, marginLeft: baseStyle.margin, @@ -101,6 +107,7 @@ function extraStyles(theme: BaseTheme) { headerStyle, headerWrapperStyle, rootStyle, + hiddenRootStyle, keyboardAppearance: theme.appearance, color5: theme.color5 ?? theme.backgroundColor4, diff --git a/packages/app-mobile/components/screens/Notes.tsx b/packages/app-mobile/components/screens/Notes.tsx index bc104d1ad77..6a7e740a7f9 100644 --- a/packages/app-mobile/components/screens/Notes.tsx +++ b/packages/app-mobile/components/screens/Notes.tsx @@ -234,14 +234,7 @@ class NotesScreenComponent extends BaseScreenComponent { const parent = this.parentItem(); const theme = themeStyle(this.props.themeId); - const rootStyle = { - flex: 1, - backgroundColor: theme.backgroundColor, - }; - - if (!this.props.visible) { - rootStyle.flex = 0.001; // This is a bit of a hack but it seems to work fine - it makes the component invisible but without unmounting it - } + const rootStyle = this.props.visible ? theme.rootStyle : theme.hiddenRootStyle; const title = parent ? parent.title : null; if (!parent) { diff --git a/packages/app-mobile/components/screens/SearchScreen/index.tsx b/packages/app-mobile/components/screens/SearchScreen/index.tsx index 2d659c6be0f..4e365585d7a 100644 --- a/packages/app-mobile/components/screens/SearchScreen/index.tsx +++ b/packages/app-mobile/components/screens/SearchScreen/index.tsx @@ -47,12 +47,7 @@ const useStyles = (theme: ThemeStyle, visible: boolean) => { paddingRight: theme.marginRight, backgroundColor: theme.backgroundColor, }, - rootStyle: { - ...theme.rootStyle, - - // TODO: Improve. This hides the component without unmounting it. - flex: !visible ? 0.001 : 1, - }, + rootStyle: visible ? theme.rootStyle : theme.hiddenRootStyle, }); }, [theme, visible]); };