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

fix(vue): overlay events can now be listened for without the "on" prefix, deprecated "on" prefix event listeners (#23227)

Browse Source
This commit is contained in:
Liam DeBeasi
2021-04-23 11:38:45 -04:00
committed by GitHub
parent 0ac8ec1f05
commit dab927d290
14 changed files with 83 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
packages/vue/src/vue-component-lib/overlays.ts
View File

@ -1,10 +1,43 @@
import { defineComponent, h, ref, VNode, getCurrentInstance } from 'vue';
import { defineComponent, h, ref, VNode, getCurrentInstance, ComponentInternalInstance } from 'vue';
import { needsKebabCase } from '../utils';
export interface OverlayProps {
isOpen?: boolean;
}
/**
* Make sure we only
* warn user about each
* event at most once.
*/
let willPresentWarn = false;
let didPresentWarn = false;
let willDismissWarn = false;
let didDismissWarn = false;
const checkForDeprecatedListeners = (instance: ComponentInternalInstance) => {
const props = instance.vnode.props;
if (!willPresentWarn && props.onOnWillPresent !== undefined) {
console.warn('[@ionic/vue Deprecation]: @onWillPresent has been deprecated in favor of @willPresent and will be removed in Ionic Vue v6.0.');
willPresentWarn = true;
}
if (!didPresentWarn && props.onOnDidPresent !== undefined) {
console.warn('[@ionic/vue Deprecation]: @onDidPresent has been deprecated in favor of @didPresent and will be removed in Ionic Vue v6.0.');
didPresentWarn = true;
}
if (!willDismissWarn && props.onOnWillDismiss !== undefined) {
console.warn('[@ionic/vue Deprecation]: @onWillDismiss has been deprecated in favor of @willDismiss and will be removed in Ionic Vue v6.0.');
willDismissWarn = true;
}
if (!didDismissWarn && props.onOnDidDismiss !== undefined) {
console.warn('[@ionic/vue Deprecation]: @onDidDismiss has been deprecated in favor of @didDismiss and will be removed in Ionic Vue v6.0.');
didDismissWarn = true;
}
}
export const defineOverlayContainer = <Props extends object>(name: string, componentProps: string[] = [], controller: any) => {
/**
* Vue 3.0.6 fixed a bug where events on custom elements
@ -16,22 +49,24 @@ export const defineOverlayContainer = <Props extends object>(name: string, compo
*/
const eventPrefix = name.toLowerCase().split('-').join('');
const lowerCaseListeners = [
{ componentEv: `${eventPrefix}willpresent`, frameworkEv: 'onWillPresent' },
{ componentEv: `${eventPrefix}didpresent`, frameworkEv: 'onDidPresent' },
{ componentEv: `${eventPrefix}willdismiss`, frameworkEv: 'onWillDismiss' },
{ componentEv: `${eventPrefix}diddismiss`, frameworkEv: 'onDidDismiss' },
{ componentEv: `${eventPrefix}willpresent`, frameworkEv: 'willPresent', deprecatedEv: 'onWillPresent' },
{ componentEv: `${eventPrefix}didpresent`, frameworkEv: 'didPresent', deprecatedEv: 'onDidPresent' },
{ componentEv: `${eventPrefix}willdismiss`, frameworkEv: 'willDismiss', deprecatedEv: 'onWillDismiss' },
{ componentEv: `${eventPrefix}diddismiss`, frameworkEv: 'didDismiss', deprecatedEv: 'onDidDismiss' },
];
const kebabCaseListeners = [
{ componentEv: `${name}-will-present`, frameworkEv: 'onWillPresent' },
{ componentEv: `${name}-did-present`, frameworkEv: 'onDidPresent' },
{ componentEv: `${name}-will-dismiss`, frameworkEv: 'onWillDismiss' },
{ componentEv: `${name}-did-dismiss`, frameworkEv: 'onDidDismiss' },
{ componentEv: `${name}-will-present`, frameworkEv: 'willPresent', deprecatedEv: 'onWillPresent' },
{ componentEv: `${name}-did-present`, frameworkEv: 'didPresent', deprecatedEv: 'onDidPresent' },
{ componentEv: `${name}-will-dismiss`, frameworkEv: 'willDismiss', deprecatedEv: 'onWillDismiss' },
{ componentEv: `${name}-did-dismiss`, frameworkEv: 'didDismiss', deprecatedEv: 'onDidDismiss' },
];
const Container = defineComponent<Props & OverlayProps>((props, { slots, emit }) => {
const instance = getCurrentInstance();
const adjustedEventListeners = needsKebabCase(instance.appContext.app.version) ? kebabCaseListeners : lowerCaseListeners;
checkForDeprecatedListeners(instance);
const overlay = ref();
const onVnodeMounted = async () => {
const isOpen = props.isOpen;
@ -85,9 +120,21 @@ export const defineOverlayContainer = <Props extends object>(name: string, compo
return;
}
/**
* When supporting both the "on" prefixed and non-"on" prefixed
* events, there seems to be an issue where the handlers are
* getting passed as props. This should be resolved when we drop
* support for the "on" prefixed listeners.
*/
const restOfProps = { ...(props as any) };
delete restOfProps.onWillPresent;
delete restOfProps.onDidPresent;
delete restOfProps.onWillDismiss;
delete restOfProps.onDidDismiss;
const component = slots.default && slots.default()[0];
overlay.value = controller.create({
...props,
...restOfProps,
component
});
@ -96,6 +143,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, compo
adjustedEventListeners.forEach(eventListener => {
overlay.value.addEventListener(eventListener.componentEv, () => {
emit(eventListener.frameworkEv);
emit(eventListener.deprecatedEv);
});
})
@ -118,7 +166,10 @@ export const defineOverlayContainer = <Props extends object>(name: string, compo
Container.displayName = name;
Container.props = [...componentProps, 'isOpen'];
Container.emits = [...lowerCaseListeners.map(ev => ev.frameworkEv), ...kebabCaseListeners.map(ev => ev.frameworkEv)];
Container.emits = [
'willPresent', 'didPresent', 'willDismiss', 'didDismiss',
'onWillPresent', 'onDidPresent', 'onWillDismiss', 'onDidDismiss'
];
return Container;
}