You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.4 KiB
42 lines
1.4 KiB
import * as React from 'react';
|
|
import { useRef } from 'react';
|
|
import { animationEndName, transitionEndName } from '../util/motion';
|
|
export default (function (callback) {
|
|
var cacheElementRef = useRef(); // Cache callback
|
|
|
|
var callbackRef = useRef(callback);
|
|
callbackRef.current = callback; // Internal motion event handler
|
|
|
|
var onInternalMotionEnd = React.useCallback(function (event) {
|
|
callbackRef.current(event);
|
|
}, []); // Remove events
|
|
|
|
function removeMotionEvents(element) {
|
|
if (element) {
|
|
element.removeEventListener(transitionEndName, onInternalMotionEnd);
|
|
element.removeEventListener(animationEndName, onInternalMotionEnd);
|
|
}
|
|
} // Patch events
|
|
|
|
|
|
function patchMotionEvents(element) {
|
|
if (cacheElementRef.current && cacheElementRef.current !== element) {
|
|
removeMotionEvents(cacheElementRef.current);
|
|
}
|
|
|
|
if (element && element !== cacheElementRef.current) {
|
|
element.addEventListener(transitionEndName, onInternalMotionEnd);
|
|
element.addEventListener(animationEndName, onInternalMotionEnd); // Save as cache in case dom removed trigger by `motionDeadline`
|
|
|
|
cacheElementRef.current = element;
|
|
}
|
|
} // Clean up when removed
|
|
|
|
|
|
React.useEffect(function () {
|
|
return function () {
|
|
removeMotionEvents(cacheElementRef.current);
|
|
};
|
|
}, []);
|
|
return [patchMotionEvents, removeMotionEvents];
|
|
}); |