Add support for transtion{run,start,cancel} events

facebook · Sep 7, 2023 · fc02a1b · fc02a1b
1 parent 953cb02
commit fc02a1b
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 0 deletions.
diff --git a/packages/react-dom-bindings/src/events/DOMEventNames.js b/packages/react-dom-bindings/src/events/DOMEventNames.js
@@ -104,6 +104,9 @@ export type DOMEventName =
   | 'touchmove'
   | 'touchstart'
   // These are vendor-prefixed so you should use the exported constants instead:
+  // 'transitionrun' |
+  // 'transitionstart' |
+  // 'transitioncancel' |
   // 'transitionend' |
   | 'volumechange'
   | 'waiting'
@@ -115,5 +118,12 @@ export const ANIMATION_ITERATION: DOMEventName =
   getVendorPrefixedEventName('animationiteration');
 export const ANIMATION_START: DOMEventName =
   getVendorPrefixedEventName('animationstart');
+
+export const TRANSITION_RUN: DOMEventName =
+  getVendorPrefixedEventName('transitionrun');
+export const TRANSITION_START: DOMEventName =
+  getVendorPrefixedEventName('transitionstart');
+export const TRANSITION_CANCEL: DOMEventName =
+  getVendorPrefixedEventName('transitioncancel');
 export const TRANSITION_END: DOMEventName =
   getVendorPrefixedEventName('transitionend');
diff --git a/packages/react-dom-bindings/src/events/DOMEventProperties.js b/packages/react-dom-bindings/src/events/DOMEventProperties.js
@@ -14,6 +14,9 @@ import {
   ANIMATION_END,
   ANIMATION_ITERATION,
   ANIMATION_START,
+  TRANSITION_RUN,
+  TRANSITION_START,
+  TRANSITION_CANCEL,
   TRANSITION_END,
 } from './DOMEventNames';
 
@@ -128,5 +131,9 @@ export function registerSimpleEvents() {
   registerSimpleEvent('dblclick', 'onDoubleClick');
   registerSimpleEvent('focusin', 'onFocus');
   registerSimpleEvent('focusout', 'onBlur');
+
+  registerSimpleEvent(TRANSITION_RUN, 'onTransitionRun');
+  registerSimpleEvent(TRANSITION_START, 'onTransitionStart');
+  registerSimpleEvent(TRANSITION_CANCEL, 'onTransitionCancel');
   registerSimpleEvent(TRANSITION_END, 'onTransitionEnd');
 }
diff --git a/packages/react-dom-bindings/src/events/getVendorPrefixedEventName.js b/packages/react-dom-bindings/src/events/getVendorPrefixedEventName.js
@@ -31,6 +31,9 @@ const vendorPrefixes = {
   animationend: makePrefixMap('Animation', 'AnimationEnd'),
   animationiteration: makePrefixMap('Animation', 'AnimationIteration'),
   animationstart: makePrefixMap('Animation', 'AnimationStart'),
+  transitionrun: makePrefixMap('Transition', 'TransitionRun'),
+  transitionstart: makePrefixMap('Transition', 'TransitionStart'),
+  transitioncancel: makePrefixMap('Transition', 'TransitionCancel'),
   transitionend: makePrefixMap('Transition', 'TransitionEnd'),
 };
 

diff --git a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
@@ -739,6 +739,57 @@ describe('ReactDOMEventListener', () => {
       });
     });
 
+    it('onTransitionRun', () => {
+      testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTransitionRun',
+        reactEventType: 'transitionrun',
+        nativeEvent: 'transitionrun',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('transitionrun', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onTransitionStart', () => {
+      testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTransitionStart',
+        reactEventType: 'transitionstart',
+        nativeEvent: 'transitionstart',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('transitionstart', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onTransitionCancel', () => {
+      testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTransitionCancel',
+        reactEventType: 'transitioncancel',
+        nativeEvent: 'transitioncancel',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('transitioncancel', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
     it('onTransitionEnd', () => {
       testNativeBubblingEvent({
         type: 'div',

diff --git a/packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap b/packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap
@@ -83,6 +83,9 @@ exports[`ReactTestUtils Simulate should have locally attached media events 1`] =
   "touchEnd",
   "touchMove",
   "touchStart",
+  "transitionRun",
+  "transitionStart",
+  "transitionCancel",
   "transitionEnd",
   "volumeChange",
   "waiting",

diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -702,6 +702,9 @@ const simulatedEventTypes = [
   'stalled',
   'suspend',
   'timeUpdate',
+  'transitionRun',
+  'transitionStart',
+  'transitionCancel',
   'transitionEnd',
   'waiting',
   'mouseEnter',