Add support for transition{run,start,cancel} events (#27345)
Hugo Sales committed
Apr 8, 2024 at 21:23 UTC
dfd3d5af83cadd9bfc904c0a62a30adc20e414c9
6 files changed
+78
-1
packages/react-dom-bindings/src/events/DOMEventNames.js
+10
@@ -105,6 +105,9 @@ export type DOMEventName =
105
| 'touchmove'
106
| 'touchstart'
107
// These are vendor-prefixed so you should use the exported constants instead:
108
+ // 'transitionrun' |
109
+ // 'transitionstart' |
110
+ // 'transitioncancel' |
111
// 'transitionend' |
112
| 'volumechange'
113
| 'waiting'
@@ -116,5 +119,12 @@ export const ANIMATION_ITERATION: DOMEventName =
119
getVendorPrefixedEventName('animationiteration');
120
export const ANIMATION_START: DOMEventName =
121
getVendorPrefixedEventName('animationstart');
122
+
123
+export const TRANSITION_RUN: DOMEventName =
124
+ getVendorPrefixedEventName('transitionrun');
125
+export const TRANSITION_START: DOMEventName =
126
+ getVendorPrefixedEventName('transitionstart');
127
+export const TRANSITION_CANCEL: DOMEventName =
128
+ getVendorPrefixedEventName('transitioncancel');
129
export const TRANSITION_END: DOMEventName =
130
getVendorPrefixedEventName('transitionend');
packages/react-dom-bindings/src/events/DOMEventProperties.js
+7
@@ -14,6 +14,9 @@ import {
14
ANIMATION_END,
15
ANIMATION_ITERATION,
16
ANIMATION_START,
17
+ TRANSITION_RUN,
18
+ TRANSITION_START,
19
+ TRANSITION_CANCEL,
20
TRANSITION_END,
21
} from './DOMEventNames';
22
@@ -129,5 +132,9 @@ export function registerSimpleEvents() {
132
registerSimpleEvent('dblclick', 'onDoubleClick');
133
registerSimpleEvent('focusin', 'onFocus');
134
registerSimpleEvent('focusout', 'onBlur');
135
+
136
+ registerSimpleEvent(TRANSITION_RUN, 'onTransitionRun');
137
+ registerSimpleEvent(TRANSITION_START, 'onTransitionStart');
138
+ registerSimpleEvent(TRANSITION_CANCEL, 'onTransitionCancel');
139
registerSimpleEvent(TRANSITION_END, 'onTransitionEnd');
140
}
packages/react-dom-bindings/src/events/getVendorPrefixedEventName.js
+3
@@ -31,6 +31,9 @@ const vendorPrefixes = {
31
animationend: makePrefixMap('Animation', 'AnimationEnd'),
32
animationiteration: makePrefixMap('Animation', 'AnimationIteration'),
33
animationstart: makePrefixMap('Animation', 'AnimationStart'),
34
+ transitionrun: makePrefixMap('Transition', 'TransitionRun'),
35
+ transitionstart: makePrefixMap('Transition', 'TransitionStart'),
36
+ transitioncancel: makePrefixMap('Transition', 'TransitionCancel'),
37
transitionend: makePrefixMap('Transition', 'TransitionEnd'),
38
};
39
packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
+52
-1
@@ -749,6 +749,57 @@ describe('ReactDOMEventListener', () => {
749
});
750
});
751
752
+ it('onTransitionRun', async () => {
753
+ await testNativeBubblingEvent({
754
+ type: 'div',
755
+ reactEvent: 'onTransitionRun',
756
+ reactEventType: 'transitionrun',
757
+ nativeEvent: 'transitionrun',
758
+ dispatch(node) {
759
+ node.dispatchEvent(
760
+ new Event('transitionrun', {
761
+ bubbles: true,
762
+ cancelable: false,
763
+ }),
764
+ );
765
+ },
766
+ });
767
+ });
768
+
769
+ it('onTransitionStart', async () => {
770
+ await testNativeBubblingEvent({
771
+ type: 'div',
772
+ reactEvent: 'onTransitionStart',
773
+ reactEventType: 'transitionstart',
774
+ nativeEvent: 'transitionstart',
775
+ dispatch(node) {
776
+ node.dispatchEvent(
777
+ new Event('transitionstart', {
778
+ bubbles: true,
779
+ cancelable: false,
780
+ }),
781
+ );
782
+ },
783
+ });
784
+ });
785
+
786
+ it('onTransitionCancel', async () => {
787
+ await testNativeBubblingEvent({
788
+ type: 'div',
789
+ reactEvent: 'onTransitionCancel',
790
+ reactEventType: 'transitioncancel',
791
+ nativeEvent: 'transitioncancel',
792
+ dispatch(node) {
793
+ node.dispatchEvent(
794
+ new Event('transitioncancel', {
795
+ bubbles: true,
796
+ cancelable: false,
797
+ }),
798
+ );
799
+ },
800
+ });
801
+ });
802
+
803
it('onTransitionEnd', async () => {
804
await testNativeBubblingEvent({
805
type: 'div',
@@ -759,7 +810,7 @@ describe('ReactDOMEventListener', () => {
810
node.dispatchEvent(
811
new Event('transitionend', {
812
bubbles: true,
762
- cancelable: true,
813
+ cancelable: false,
814
}),
815
);
816
},
packages/react-dom/src/__tests__/ReactTestUtils-test.js
+3
@@ -120,7 +120,10 @@ describe('ReactTestUtils', () => {
120
"touchEnd",
121
"touchMove",
122
"touchStart",
123
+ "transitionCancel",
124
"transitionEnd",
125
+ "transitionRun",
126
+ "transitionStart",
127
"volumeChange",
128
"waiting",
129
"wheel",
packages/react-dom/src/test-utils/ReactTestUtilsFB.js
+3
@@ -838,6 +838,9 @@ const simulatedEventTypes = [
838
'stalled',
839
'suspend',
840
'timeUpdate',
841
+ 'transitionRun',
842
+ 'transitionStart',
843
+ 'transitionCancel',
844
'transitionEnd',
845
'waiting',
846
'mouseEnter',