Mobile: Add long-press tooltips (#6758)

packages/app-mobile/components/NoteEditor/SearchPanel.tsx

@@ -1,15 +1,14 @@
 // Displays a find/replace dialog
 
 const React = require('react');
-const { StyleSheet } = require('react-native');
-const { TextInput, View, Text, TouchableOpacity } = require('react-native');
 const { useMemo, useState, useEffect } = require('react');
 const MaterialCommunityIcon = require('react-native-vector-icons/MaterialCommunityIcons').default;
 
 import { SearchControl, SearchState, EditorSettings } from './types';
 import { _ } from '@joplin/lib/locale';
-import { BackHandler } from 'react-native';
+import { BackHandler, TextInput, View, Text, StyleSheet, ViewStyle } from 'react-native';
 import { Theme } from '@joplin/lib/themes/type';
+import CustomButton from '../CustomButton';
 
 const buttonSize = 48;
 
@@ -33,6 +32,7 @@ export interface SearchPanelProps {
 
 interface ActionButtonProps {
 	styles: any;
+	themeId: number;
 	iconName: string;
 	title: string;
 	onPress: Callback;
@@ -42,30 +42,32 @@ const ActionButton = (
 	props: ActionButtonProps
 ) => {
 	return (
-		<TouchableOpacity
+		<CustomButton
+			themeId={props.themeId}
 			style={props.styles.button}
 			onPress={props.onPress}
-
-			accessibilityLabel={props.title}
-			accessibilityRole='button'
+			description={props.title}
 		>
 			<MaterialCommunityIcon name={props.iconName} style={props.styles.buttonText}/>
-		</TouchableOpacity>
+		</CustomButton>
 	);
 };
 
 interface ToggleButtonProps {
 	styles: any;
+	themeId: number;
 	iconName: string;
 	title: string;
 	active: boolean;
 	onToggle: Callback;
 }
+
 const ToggleButton = (props: ToggleButtonProps) => {
 	const active = props.active;
 
 	return (
-		<TouchableOpacity
+		<CustomButton
+			themeId={props.themeId}
 			style={{
 				...props.styles.toggleButton,
 				...(active ? props.styles.toggleButtonActive : {}),
@@ -75,20 +77,20 @@ const ToggleButton = (props: ToggleButtonProps) => {
 			accessibilityState={{
 				checked: props.active,
 			}}
-			accessibilityLabel={props.title}
+			description={props.title}
 			accessibilityRole='switch'
 		>
 			<MaterialCommunityIcon name={props.iconName} style={
 				active ? props.styles.activeButtonText : props.styles.buttonText
 			}/>
-		</TouchableOpacity>
+		</CustomButton>
 	);
 };
 
 
 const useStyles = (theme: Theme) => {
 	return useMemo(() => {
-		const buttonStyle = {
+		const buttonStyle: ViewStyle = {
 			width: buttonSize,
 			height: buttonSize,
 			backgroundColor: theme.backgroundColor4,
@@ -136,8 +138,9 @@ const useStyles = (theme: Theme) => {
 };
 
 export const SearchPanel = (props: SearchPanelProps) => {
-	const placeholderColor = props.editorSettings.themeData.color3;
-	const styles = useStyles(props.editorSettings.themeData);
+	const theme = props.editorSettings.themeData;
+	const placeholderColor = theme.color3;
+	const styles = useStyles(theme);
 
 	const [showingAdvanced, setShowAdvanced] = useState(false);
 
@@ -185,9 +188,10 @@ export const SearchPanel = (props: SearchPanelProps) => {
 	}, [state.dialogVisible]);
 
 
-
+	const themeId = props.editorSettings.themeId;
 	const closeButton = (
 		<ActionButton
+			themeId={themeId}
 			styles={styles}
 			iconName="close"
 			onPress={control.hideSearch}
@@ -197,6 +201,7 @@ export const SearchPanel = (props: SearchPanelProps) => {
 
 	const showDetailsButton = (
 		<ActionButton
+			themeId={themeId}
 			styles={styles}
 			iconName="menu-down"
 			onPress={() => setShowAdvanced(true)}
@@ -206,6 +211,7 @@ export const SearchPanel = (props: SearchPanelProps) => {
 
 	const hideDetailsButton = (
 		<ActionButton
+			themeId={themeId}
 			styles={styles}
 			iconName="menu-up"
 			onPress={() => setShowAdvanced(false)}
@@ -255,6 +261,7 @@ export const SearchPanel = (props: SearchPanelProps) => {
 
 	const toNextButton = (
 		<ActionButton
+			themeId={themeId}
 			styles={styles}
 			iconName="menu-right"
 			onPress={control.findNext}
@@ -264,6 +271,7 @@ export const SearchPanel = (props: SearchPanelProps) => {
 
 	const toPrevButton = (
 		<ActionButton
+			themeId={themeId}
 			styles={styles}
 			iconName="menu-left"
 			onPress={control.findPrevious}
@@ -273,6 +281,7 @@ export const SearchPanel = (props: SearchPanelProps) => {
 
 	const replaceButton = (
 		<ActionButton
+			themeId={themeId}
 			styles={styles}
 			iconName="swap-horizontal"
 			onPress={control.replaceCurrent}
@@ -282,6 +291,7 @@ export const SearchPanel = (props: SearchPanelProps) => {
 
 	const replaceAllButton = (
 		<ActionButton
+			themeId={themeId}
 			styles={styles}
 			iconName="reply-all"
 			onPress={control.replaceAll}
@@ -291,6 +301,7 @@ export const SearchPanel = (props: SearchPanelProps) => {
 
 	const regexpButton = (
 		<ToggleButton
+			themeId={themeId}
 			styles={styles}
 			iconName="regex"
 			onToggle={() => {
@@ -305,6 +316,7 @@ export const SearchPanel = (props: SearchPanelProps) => {
 
 	const caseSensitiveButton = (
 		<ToggleButton
+			themeId={themeId}
 			styles={styles}
 			iconName="format-letter-case"
 			onToggle={() => {