Skip to content

Commit

Permalink
Add support for transition{run,start,cancel} events (#27345)
Browse files Browse the repository at this point in the history
  • Loading branch information
someonewithpc authored Apr 8, 2024
1 parent 1f8327f commit dfd3d5a
Show file tree
Hide file tree
Showing 6 changed files with 78 additions and 1 deletion.
10 changes: 10 additions & 0 deletions packages/react-dom-bindings/src/events/DOMEventNames.js
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,9 @@ export type DOMEventName =
| 'touchmove'
| 'touchstart'
// These are vendor-prefixed so you should use the exported constants instead:
// 'transitionrun' |
// 'transitionstart' |
// 'transitioncancel' |
// 'transitionend' |
| 'volumechange'
| 'waiting'
Expand All @@ -116,5 +119,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');
7 changes: 7 additions & 0 deletions packages/react-dom-bindings/src/events/DOMEventProperties.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import {
ANIMATION_END,
ANIMATION_ITERATION,
ANIMATION_START,
TRANSITION_RUN,
TRANSITION_START,
TRANSITION_CANCEL,
TRANSITION_END,
} from './DOMEventNames';

Expand Down Expand Up @@ -129,5 +132,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');
}
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -749,6 +749,57 @@ describe('ReactDOMEventListener', () => {
});
});

it('onTransitionRun', async () => {
await testNativeBubblingEvent({
type: 'div',
reactEvent: 'onTransitionRun',
reactEventType: 'transitionrun',
nativeEvent: 'transitionrun',
dispatch(node) {
node.dispatchEvent(
new Event('transitionrun', {
bubbles: true,
cancelable: false,
}),
);
},
});
});

it('onTransitionStart', async () => {
await testNativeBubblingEvent({
type: 'div',
reactEvent: 'onTransitionStart',
reactEventType: 'transitionstart',
nativeEvent: 'transitionstart',
dispatch(node) {
node.dispatchEvent(
new Event('transitionstart', {
bubbles: true,
cancelable: false,
}),
);
},
});
});

it('onTransitionCancel', async () => {
await testNativeBubblingEvent({
type: 'div',
reactEvent: 'onTransitionCancel',
reactEventType: 'transitioncancel',
nativeEvent: 'transitioncancel',
dispatch(node) {
node.dispatchEvent(
new Event('transitioncancel', {
bubbles: true,
cancelable: false,
}),
);
},
});
});

it('onTransitionEnd', async () => {
await testNativeBubblingEvent({
type: 'div',
Expand All @@ -759,7 +810,7 @@ describe('ReactDOMEventListener', () => {
node.dispatchEvent(
new Event('transitionend', {
bubbles: true,
cancelable: true,
cancelable: false,
}),
);
},
Expand Down
3 changes: 3 additions & 0 deletions packages/react-dom/src/__tests__/ReactTestUtils-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,10 @@ describe('ReactTestUtils', () => {
"touchEnd",
"touchMove",
"touchStart",
"transitionCancel",
"transitionEnd",
"transitionRun",
"transitionStart",
"volumeChange",
"waiting",
"wheel",
Expand Down
3 changes: 3 additions & 0 deletions packages/react-dom/src/test-utils/ReactTestUtilsFB.js
Original file line number Diff line number Diff line change
Expand Up @@ -838,6 +838,9 @@ const simulatedEventTypes = [
'stalled',
'suspend',
'timeUpdate',
'transitionRun',
'transitionStart',
'transitionCancel',
'transitionEnd',
'waiting',
'mouseEnter',
Expand Down

0 comments on commit dfd3d5a

Please sign in to comment.