Chore: Web: Fix "BackHandler is not supported" warning in most cases (#12458)

This commit is contained in:
Henry Heino 2025-06-10 16:10:11 -07:00 committed by GitHub
parent 99178fb1c6
commit 45d1d862a1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 14 deletions

View File

@ -6,13 +6,14 @@ import shim from '@joplin/lib/shim';
import { themeStyle } from '@joplin/lib/theme';
import { Theme } from '@joplin/lib/themes/type';
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { BackHandler, Platform } from 'react-native';
import { Platform } from 'react-native';
import ExtendedWebView from '../../ExtendedWebView';
import { OnMessageEvent, WebViewControl } from '../../ExtendedWebView/types';
import { clearAutosave } from './autosave';
import { LocalizedStrings } from './js-draw/types';
import { DialogContext } from '../../DialogManager';
import useEditorMessenger from './utils/useEditorMessenger';
import BackButtonService from '../../../services/BackButtonService';
const logger = Logger.create('ImageEditor');
@ -124,10 +125,10 @@ const ImageEditor = (props: Props) => {
onRequestCloseEditor(true);
return true;
};
const handle = BackHandler.addEventListener('hardwareBackPress', hardwareBackPressListener);
BackButtonService.addHandler(hardwareBackPressListener);
return () => {
handle.remove();
BackButtonService.removeHandler(hardwareBackPressListener);
};
}, [onRequestCloseEditor]);

View File

@ -5,11 +5,12 @@ import { useMemo, useState, useEffect } from 'react';
import { EditorSettings } from './types';
import { _ } from '@joplin/lib/locale';
import { BackHandler, TextInput, View, Text, StyleSheet, ViewStyle } from 'react-native';
import { TextInput, View, Text, StyleSheet, ViewStyle } from 'react-native';
import { Theme } from '@joplin/lib/themes/type';
import IconButton from '../IconButton';
import { SearchState } from '@joplin/editor/types';
import { SearchControl } from './types';
import BackButtonService from '../../services/BackButtonService';
const buttonSize = 48;
@ -181,14 +182,14 @@ export const SearchPanel = (props: SearchPanelProps) => {
return () => {};
}
const backListener = BackHandler.addEventListener('hardwareBackPress', () => {
const handler = () => {
control.hideSearch();
return true;
});
};
return () => backListener.remove();
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
}, [state.dialogVisible]);
BackButtonService.addHandler(handler);
return () => BackButtonService.removeHandler(handler);
}, [state.dialogVisible, control]);
const themeId = props.editorSettings.themeId;

View File

@ -1,4 +1,4 @@
import { BackHandler } from 'react-native';
import { BackHandler, Platform } from 'react-native';
export type BackButtonHandler = ()=> boolean|Promise<boolean>;
@ -9,10 +9,13 @@ export default class BackButtonService {
public static initialize(defaultHandler: BackButtonHandler) {
this.defaultHandler_ = defaultHandler;
BackHandler.addEventListener('hardwareBackPress', () => {
void this.back();
return true;
});
// On web, `BackHandler.addEventListener` fails with warning "BackHandler is not supported on web and should not be used."
if (Platform.OS !== 'web') {
BackHandler.addEventListener('hardwareBackPress', () => {
void this.back();
return true;
});
}
}
public static async back() {