8000 refactor: improve hardware back button types (#28335) · ionic-team/ionic-framework@60630cc · GitHub
[go: up one dir, main page]
Skip to content

Commit 60630cc

Browse files
liamdebeasiliamdebeasi
authored
refactor: improve hardware back button types (#28335)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> As part of FW-2832, the team would like to swap out usages of the `any` type for stronger types. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Added `ionBackButton` event types to the browser utilities - Updated menuController to use the `doc` utility instead of `document` so we can get proper types - Moved the definitions for back button types out of `interface.d.ts` and into `hardware-back-button`. `interface.d.ts` still exports these back button interfaces. - Updated all `BackButtonEvent` imports inside of `@ionic/core` to import from the utility file instead of the public interface file. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after 8000 the change. --> Note: This PR was separated from other type updates associated with the FW-3832 work because I had to modify the implementation of a feature in Ionic. While I don't expect there to be any functional differences, I have opted to pull this work out into a separate branch and target a feature branch to a) reduce the impact of any unintended bugs and b) make it easier to do a `git bisect` if a bug is introduced.
1 parent 6e79e1d commit 60630cc

File tree

6 files changed

+34
-22
lines changed

6 files changed

+34
-22
lines changed

‎core/src/components/router/router.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import type { ComponentInterface, EventEmitter } from '@stencil/core';
22
import { Component, Element, Event, Listen, Method, Prop } from '@stencil/core';
3+
import type { BackButtonEvent } from '@utils/hardware-back-button';
34
import { debounce } from '@utils/helpers';
45

5-
import type { AnimationBuilder, BackButtonEvent } from '../../interface';
6+
import type { AnimationBuilder } from '../../interface';
67
import type { NavigationHookResult } from '../route/route-interface';
78

89
import { ROUTER_INTENT_BACK, ROUTER_INTENT_FORWARD, ROUTER_INTENT_NONE } from './utils/constants';

‎core/src/interface.d.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export { TabsCustomEvent } from './components/tabs/tabs-interface';
3232
export { TextareaCustomEvent } from './components/textarea/textarea-interface';
3333
export { ToastOptions } from './components/toast/toast-interface';
3434
export { ToggleCustomEvent } from './components/toggle/toggle-interface';
35+
export { BackButtonEvent, BackButtonEventDetail } from './utils/hardware-back-button';
3536

3637
// Types from utils
3738
export {
@@ -140,17 +141,12 @@ export type ComponentRef = Function | HTMLElement | string | null;
140141
// eslint-disable-next-line
141142
export type ComponentProps<T = null> = { [key: string]: any };
142143
export type CssClassMap = { [className: string]: boolean };
143-
export type BackButtonEvent = CustomEvent<BackButtonEventDetail>;
144144

145145
export interface FrameworkDelegate {
146146
attachViewToDom(container: any, component: any, propsOrDataObj?: any, cssClasses?: string[]): Promise<HTMLElement>;
147147
removeViewFromDom(container: any, component: any): Promise<void>;
148148
}
149149

150-
export interface BackButtonEventDetail {
151-
register(priority: number, handler: (processNextHandler: () => void) => Promise<any> | void): void;
152-
}
153-
154150
export interface KeyboardEventDetail {
155151
keyboardHeight: number;
156152
}

‎core/src/utils/browser/index.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { BackButtonEvent } from '@utils/hardware-back-button';
2+
13
/**
24
* When accessing the document or window, it is important
35
* to account for SSR applications where the
@@ -58,6 +60,16 @@ type IonicEvents = {
5860
listener: (ev: CustomEvent<HTMLIonInputElement | HTMLIonTextareaElement>) => void,
5961
options?: boolean | AddEventListenerOptions
6062
): void;
63+
addEventListener(
64+
type: 'ionBackButton',
65+
listener: (ev: BackButtonEvent) => void,
66+
options?: boolean | AddEventListenerOptions
67+
): void;
68+
removeEventListener(
69+
type: 'ionBackButton',
70+
listener: (ev: BackButtonEvent) => void,
71+
options?: boolean | AddEventListenerOptions
72+
): void;
6173
};
6274

6375
type IonicWindow = Window & IonicEvents;

‎core/src/utils/hardware-back-button.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
import type { BackButtonEvent } from '../interface';
2-
31
// TODO(FW-2832): type
42
type Handler = (processNextHandler: () => void) => Promise<any> | void | null;
53

4+
export interface BackButtonEventDetail {
5+
register(priority: number, handler: (processNextHandler: () => void) => Promise<any> | void): void;
6+
}
7+
8+
export type BackButtonEvent = CustomEvent<BackButtonEventDetail>;
9+
610
interface HandlerRegister {
711
priority: number;
812
handler: Handler;

‎core/src/utils/menu-controller/index.ts

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
import { doc } from '@utils/browser';
2+
import type { BackButtonEvent } from '@utils/hardware-back-button';
3+
import { MENU_BACK_BUTTON_PRIORITY } from '@utils/hardware-back-button';
14
import { printIonWarning } from '@utils/logging';
25

36
import type { MenuI, MenuControllerI } from '../../components/menu/menu-interface';
4-
import type { AnimationBuilder, BackButtonEvent } from '../../interface';
5-
import { MENU_BACK_BUTTON_PRIORITY } from '../hardware-back-button';
7+
import type { AnimationBuilder } from '../../interface';
68
import { componentOnReady } from '../helpers';
79

810
import { menuOverlayAnimation } from './animations/overlay';
@@ -227,17 +229,14 @@ const createMenuController = (): MenuControllerI => {
227229
registerAnimation('push', menuPushAnimation);
228230
registerAnimation('overlay', menuOverlayAnimation);
229231

230-
if (typeof document !== 'undefined') {
231-
document.addEventListener('ionBackButton', (ev: any) => {
232-
// TODO(FW-2832): type
233-
const openMenu = _getOpenSync();
234-
if (openMenu) {
235-
(ev as BackButtonEvent).detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
236-
return openMenu.close();
237-
});
238-
}
239-
});
240-
}
232+
doc?.addEventListener('ionBackButton', (ev: BackButtonEvent) => {
233+
const openMenu = _getOpenSync();
234+
if (openMenu) {
235+
ev.detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
236+
return openMenu.close();
237+
});
238+
}
239+
});
241240

242241
return {
243242
registerAnimation,

‎core/src/utils/overlays.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { doc } from '@utils/browser';
2+
import type { BackButtonEvent } from '@utils/hardware-back-button';
23

34
import { config } from '../global/config';
45
import { getIonMode } from '../global/ionic-global';
@@ -7,7 +8,6 @@ import type {
78
AlertOptions,
89
Animation,
910
AnimationBuilder,
10-
BackButtonEvent,
1111
FrameworkDelegate,
1212
HTMLIonOverlayElement,
1313
IonicConfig,

0 commit comments

Comments
 (0)
0