Fix: Search button selected state doesn't toggle when opening/closing

search
personalizedrefrigerator · Dec 9, 2024 · c04bc54 · c04bc54
1 parent 5dc3a0c
commit c04bc54
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 14 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -603,6 +603,7 @@ packages/app-mobile/components/EditorToolbar/SettingButton.js
 packages/app-mobile/components/EditorToolbar/ToolbarButton.js
 packages/app-mobile/components/EditorToolbar/ToolbarEditorDialog.js
 packages/app-mobile/components/EditorToolbar/testing/mockCommandRuntimes.js
+packages/app-mobile/components/EditorToolbar/types.js
 packages/app-mobile/components/EditorToolbar/utils/allToolbarCommandNamesFromState.js
 packages/app-mobile/components/EditorToolbar/utils/isSelected.js
 packages/app-mobile/components/EditorToolbar/utils/selectedCommandNamesFromState.js

diff --git a/.gitignore b/.gitignore
@@ -579,6 +579,7 @@ packages/app-mobile/components/EditorToolbar/SettingButton.js
 packages/app-mobile/components/EditorToolbar/ToolbarButton.js
 packages/app-mobile/components/EditorToolbar/ToolbarEditorDialog.js
 packages/app-mobile/components/EditorToolbar/testing/mockCommandRuntimes.js
+packages/app-mobile/components/EditorToolbar/types.js
 packages/app-mobile/components/EditorToolbar/utils/allToolbarCommandNamesFromState.js
 packages/app-mobile/components/EditorToolbar/utils/isSelected.js
 packages/app-mobile/components/EditorToolbar/utils/selectedCommandNamesFromState.js

diff --git a/packages/app-mobile/components/EditorToolbar/ButtonGroup.tsx b/packages/app-mobile/components/EditorToolbar/ButtonGroup.tsx
@@ -4,13 +4,13 @@ import { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { themeStyle } from '../global-style';
 import ToolbarButton from './ToolbarButton';
-import SelectionFormatting from '@joplin/editor/SelectionFormatting';
 import isSelected from './utils/isSelected';
+import { EditorState } from './types';
 
 interface Props {
 	themeId: number;
 	buttonInfos: ToolbarButtonInfo[];
-	selectionState: SelectionFormatting;
+	editorState: EditorState;
 }
 
 const useStyles = (themeId: number) => {
@@ -38,7 +38,7 @@ const ButtonGroup: React.FC<Props> = props => {
 			key={`command-${info.name}`}
 			buttonInfo={info}
 			themeId={props.themeId}
-			selected={isSelected(info.name, props.selectionState)}
+			selected={isSelected(info.name, props.editorState)}
 		/>;
 	};
 

diff --git a/packages/app-mobile/components/EditorToolbar/EditorToolbar.test.tsx b/packages/app-mobile/components/EditorToolbar/EditorToolbar.test.tsx
@@ -19,7 +19,7 @@ interface WrapperProps { }
 
 const WrappedToolbar: React.FC<WrapperProps> = _props => {
 	return <TestProviderStack store={store}>
-		<EditorToolbar selectionState={null} />
+		<EditorToolbar editorState={null} />
 	</TestProviderStack>;
 };
 

diff --git a/packages/app-mobile/components/EditorToolbar/EditorToolbar.tsx b/packages/app-mobile/components/EditorToolbar/EditorToolbar.tsx
@@ -4,18 +4,18 @@ import { connect } from 'react-redux';
 import { ScrollView, StyleSheet, View } from 'react-native';
 import { ToolbarButtonInfo, ToolbarItem } from '@joplin/lib/services/commands/ToolbarButtonUtils';
 import toolbarButtonsFromState from './utils/toolbarButtonsFromState';
-import SelectionFormatting from '@joplin/editor/SelectionFormatting';
 import ButtonGroup from './ButtonGroup';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { themeStyle } from '../global-style';
 import ToggleSpaceButton from '../ToggleSpaceButton';
 import SettingButton from './SettingButton';
 import ToolbarEditorDialog from './ToolbarEditorDialog';
+import { EditorState } from './types';
 
 interface Props {
 	themeId: number;
 	toolbarButtonInfos: ToolbarItem[];
-	selectionState: SelectionFormatting;
+	editorState: EditorState;
 }
 
 const useStyles = (themeId: number) => {
@@ -62,7 +62,7 @@ const EditorToolbar: React.FC<Props> = props => {
 		return <ButtonGroup
 			key={`group-starting-with-${firstItem.name}`}
 			buttonInfos={group}
-			selectionState={props.selectionState}
+			editorState={props.editorState}
 			themeId={props.themeId}
 		/>;
 	};

diff --git a/packages/app-mobile/components/EditorToolbar/SettingButton.tsx b/packages/app-mobile/components/EditorToolbar/SettingButton.tsx
@@ -23,7 +23,7 @@ const SettingButton: React.FC<Props> = ({ themeId, setSettingsVisible }) => {
 	return <ButtonGroup
 		themeId={themeId}
 		buttonInfos={buttonInfos}
-		selectionState={null}
+		editorState={null}
 	/>;
 };
 

diff --git a/packages/app-mobile/components/EditorToolbar/types.ts b/packages/app-mobile/components/EditorToolbar/types.ts
@@ -0,0 +1,6 @@
+import SelectionFormatting from '@joplin/editor/SelectionFormatting';
+
+export interface EditorState {
+	selectionState: SelectionFormatting;
+	searchVisible: boolean;
+}
diff --git a/packages/app-mobile/components/EditorToolbar/utils/isSelected.ts b/packages/app-mobile/components/EditorToolbar/utils/isSelected.ts
@@ -1,9 +1,10 @@
 import SelectionFormatting from '@joplin/editor/SelectionFormatting';
 import { EditorCommandType } from '@joplin/editor/types';
+import { EditorState } from '../types';
 
-type SelectionSelector = (selectionState: SelectionFormatting)=> boolean;
+type StateSelector = (selectionState: SelectionFormatting, searchVisible: boolean)=> boolean;
 
-const commandNameToSelectionState: Record<string, SelectionSelector> = {
+const commandNameToSelectionState: Record<string, StateSelector> = {
 	[EditorCommandType.ToggleBolded]: state => state.bolded,
 	[EditorCommandType.ToggleItalicized]: state => state.italicized,
 	[EditorCommandType.ToggleCode]: state => state.inCode,
@@ -18,18 +19,19 @@ const commandNameToSelectionState: Record<string, SelectionSelector> = {
 	[EditorCommandType.ToggleNumberedList]: state => state.inOrderedList,
 	[EditorCommandType.ToggleCheckList]: state => state.inChecklist,
 	[EditorCommandType.EditLink]: state => state.inLink,
+	[EditorCommandType.ToggleSearch]: (_selectionState, searchVisible) => searchVisible,
 };
 
 // Returns undefined if not a toggle button
-const isSelected = (commandName: string, selectionState: SelectionFormatting) => {
+const isSelected = (commandName: string, editorState: EditorState) => {
 	// Newer editor commands are registered with the "editor." prefix. Remove this
 	// prefix to simplify looking up the selection state:
 	commandName = commandName.replace(/^editor\./, '');
 
 	if (commandName in commandNameToSelectionState) {
-		if (!selectionState) return false;
+		if (!editorState) return false;
 		return commandNameToSelectionState[commandName as EditorCommandType](
-			selectionState,
+			editorState.selectionState, editorState.searchVisible,
 		);
 	}
 	return undefined;

diff --git a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
@@ -535,7 +535,12 @@ function NoteEditor(props: Props, ref: any) {
 		}
 	}, []);
 
-	const toolbar = <EditorToolbar selectionState={selectionState} />;
+	const toolbarEditorState = useMemo(() => ({
+		selectionState,
+		searchVisible: searchState.dialogVisible,
+	}), [selectionState, searchState.dialogVisible]);
+
+	const toolbar = <EditorToolbar editorState={toolbarEditorState} />;
 
 	return (
 		<View