javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(overlays): triggerController warns about missing triggers (#26651)

Browse Source
This commit is contained in:
Liam DeBeasi
2023-01-23 12:59:00 -05:00
committed by GitHub
parent f8a2c79488
commit a7c2c555f3
2 changed files with 16 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
core/src/components/modal/modal.tsx
View File

@ -30,6 +30,7 @@ import {
eventMethod, eventMethod,
prepareOverlay, prepareOverlay,
present, present,
createTriggerController,
} from '../../utils/overlays'; } from '../../utils/overlays';
import { getClassMap } from '../../utils/theme'; import { getClassMap } from '../../utils/theme';
import { deepReady } from '../../utils/transition'; import { deepReady } from '../../utils/transition';
@ -61,13 +62,13 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
shadow: true, shadow: true,
}) })
export class Modal implements ComponentInterface, OverlayInterface { export class Modal implements ComponentInterface, OverlayInterface {
private readonly triggerController = createTriggerController();
private gesture?: Gesture; private gesture?: Gesture;
private modalIndex = modalIds++; private modalIndex = modalIds++;
private modalId?: string; private modalId?: string;
private coreDelegate: FrameworkDelegate = CoreDelegate(); private coreDelegate: FrameworkDelegate = CoreDelegate();
private currentTransition?: Promise<any>; private currentTransition?: Promise<any>;
private sheetTransition?: Promise<any>; private sheetTransition?: Promise<any>;
private destroyTriggerInteraction?: () => void;
private isSheetModal = false; private isSheetModal = false;
private currentBreakpoint?: number; private currentBreakpoint?: number;
private wrapperEl?: HTMLElement; private wrapperEl?: HTMLElement;
@ -236,8 +237,11 @@ export class Modal implements ComponentInterface, OverlayInterface {
*/ */
@Prop() trigger: string | undefined; @Prop() trigger: string | undefined;
@Watch('trigger') @Watch('trigger')
onTriggerChange() { triggerChanged() {
this.configureTriggerInteraction(); const { trigger, el, triggerController } = this;
if (trigger) {
triggerController.addClickListener(el, trigger);
}
} }
/** /**
@ -318,17 +322,13 @@ export class Modal implements ComponentInterface, OverlayInterface {
} }
connectedCallback() { connectedCallback() {
const { configureTriggerInteraction, el } = this; const { el } = this;
prepareOverlay(el); prepareOverlay(el);
configureTriggerInteraction(); this.triggerChanged();
} }
disconnectedCallback() { disconnectedCallback() {
const { destroyTriggerInteraction } = this; this.triggerController.removeClickListener();
if (destroyTriggerInteraction) {
destroyTriggerInteraction();
}
} }
componentWillLoad() { componentWillLoad() {
@ -363,32 +363,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
this.breakpointsChanged(this.breakpoints); this.breakpointsChanged(this.breakpoints);
} }
private configureTriggerInteraction = () => {
const { trigger, el, destroyTriggerInteraction } = this;
if (destroyTriggerInteraction) {
destroyTriggerInteraction();
}
const triggerEl = trigger !== undefined ? document.getElementById(trigger) : null;
if (!triggerEl) {
return;
}
const configureTriggerInteraction = (trigEl: HTMLElement, modalEl: HTMLIonModalElement) => {
const openModal = () => {
modalEl.present();
};
trigEl.addEventListener('click', openModal);
return () => {
trigEl.removeEventListener('click', openModal);
};
};
this.destroyTriggerInteraction = configureTriggerInteraction(triggerEl, el);
};
/** /**
* Determines whether or not an overlay * Determines whether or not an overlay
* is being used inline or via a controller/JS * is being used inline or via a controller/JS

6
core/src/utils/overlays.ts
View File

@ -1,3 +1,5 @@
import { printIonWarning } from '@utils/logging';
import { config } from '../global/config'; import { config } from '../global/config';
import { getIonMode } from '../global/ionic-global'; import { getIonMode } from '../global/ionic-global';
import type { import type {
@ -737,6 +739,10 @@ export const createTriggerController = () => {
const triggerEl = trigger !== undefined ? document.getElementById(trigger) : null; const triggerEl = trigger !== undefined ? document.getElementById(trigger) : null;
if (!triggerEl) { if (!triggerEl) {
printIonWarning(
`A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on an overlay component.`,
el
);
return; return;
} }