fix(gestures): lowercase gesture handling and add deprecation notice when using non-string events (#10581)

packages/core/ui/core/view/view-common.ts

@@ -16,7 +16,7 @@ import { setupAccessibleView } from '../../../accessibility';
 
 import { PercentLength } from '../../styling/style-properties';
 
-import { observe as gestureObserve, GesturesObserver, GestureTypes, GestureEventData, fromString as gestureFromString, TouchManager, TouchAnimationOptions, VisionHoverOptions } from '../../gestures';
+import { observe as gestureObserve, GesturesObserver, GestureTypes, GestureEventData, fromString as gestureFromString, toString as gestureToString, TouchManager, TouchAnimationOptions, VisionHoverOptions } from '../../gestures';
 
 import { CSSUtils } from '../../../css/system-classes';
 import { Builder } from '../../builder';
@@ -72,6 +72,9 @@ export const _rootModalViews = new Array<ViewBase>();
 
 type InteractiveTransitionState = { began?: boolean; cancelled?: boolean; options?: SharedTransitionInteractiveOptions };
 
+// TODO: remove once we fully switch to the new event system
+const warnedEvent = new Set<string>();
+
 export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 	public static layoutChangedEvent = 'layoutChanged';
 	public static shownModallyEvent = 'shownModally';
@@ -300,6 +303,17 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 	public addEventListener(eventNames: string, callback: (data: EventData) => void, thisArg?: any) {
 		thisArg = thisArg || undefined;
 
+		// TODO: Remove this once we fully switch to the new event system
+		if (typeof eventNames === 'number') {
+			// likely a gesture type from a plugin
+			const gestureName = gestureToString(eventNames);
+			if (!warnedEvent.has(gestureName)) {
+				console.warn(`Using a gesture type (${gestureName}) as an event name is deprecated. Please use the event name instead.`);
+				warnedEvent.add(gestureName);
+			}
+			eventNames = gestureName;
+		}
+
 		// Normalize "ontap" -> "tap"
 		const normalizedName = getEventOrGestureName(eventNames);
 
@@ -319,6 +333,17 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 	public removeEventListener(eventNames: string, callback?: (data: EventData) => void, thisArg?: any) {
 		thisArg = thisArg || undefined;
 
+		// TODO: Remove this once we fully switch to the new event system
+		if (typeof eventNames === 'number') {
+			// likely a gesture type from a plugin
+			const gestureName = gestureToString(eventNames);
+			if (!warnedEvent.has(gestureName)) {
+				console.warn(`Using a gesture type (${gestureName}) as an event name is deprecated. Please use the event name instead.`);
+				warnedEvent.add(gestureName);
+			}
+			eventNames = gestureName;
+		}
+
 		// Normalize "ontap" -> "tap"
 		const normalizedName = getEventOrGestureName(eventNames);
 

packages/core/ui/gestures/gestures-common.ts

@@ -318,7 +318,28 @@ export function toString(type: GestureTypes): (typeof GestureTypes)[GestureTypes
  * @param type - A string representation of a single gesture type (e.g. "tap").
  */
 export function fromString(type: (typeof GestureTypes)[GestureTypes]): GestureTypes | undefined {
-	return GestureTypes[type];
+	const t = type.trim().toLowerCase();
+
+	switch (t) {
+		case 'tap':
+			return GestureTypes.tap;
+		case 'doubletap':
+			return GestureTypes.doubleTap;
+		case 'pinch':
+			return GestureTypes.pinch;
+		case 'pan':
+			return GestureTypes.pan;
+		case 'swipe':
+			return GestureTypes.swipe;
+		case 'rotation':
+			return GestureTypes.rotation;
+		case 'longpress':
+			return GestureTypes.longPress;
+		case 'touch':
+			return GestureTypes.touch;
+	}
+
+	return undefined;
 }
 
 export abstract class GesturesObserverBase implements GesturesObserverDefinition {