self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-08-10 22:11:50 +02:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Henry Heino
2025-06-10 16:10:11 -07:00
committed by GitHub
parent 99178fb1c6
commit 45d1d862a1
3 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/app-mobile/components/NoteEditor/ImageEditor/ImageEditor.tsx
View File

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

13
packages/app-mobile/components/NoteEditor/SearchPanel.tsx
View File

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

13
packages/app-mobile/services/BackButtonService.ts
View File

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