framer-motion
Version:
A simple and powerful React animation library
48 lines (45 loc) • 1.82 kB
JavaScript
import { useRef, useContext, useEffect } from 'react';
import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
import { useUnmountEffect } from '../utils/use-unmount-effect.mjs';
import { usePointerEvent } from '../events/use-pointer-event.mjs';
import { PanSession } from './PanSession.mjs';
/**
*
* @param handlers -
* @param ref -
*
* @internalremarks
* Currently this sets new pan gesture functions every render. The memo route has been explored
* in the past but ultimately we're still creating new functions every render. An optimisation
* to explore is creating the pan gestures and loading them into a `ref`.
*
* @internal
*/
function usePanGesture(_a) {
var onPan = _a.onPan, onPanStart = _a.onPanStart, onPanEnd = _a.onPanEnd, onPanSessionStart = _a.onPanSessionStart, visualElement = _a.visualElement;
var hasPanEvents = onPan || onPanStart || onPanEnd || onPanSessionStart;
var panSession = useRef(null);
var transformPagePoint = useContext(MotionConfigContext).transformPagePoint;
var handlers = {
onSessionStart: onPanSessionStart,
onStart: onPanStart,
onMove: onPan,
onEnd: function (event, info) {
panSession.current = null;
onPanEnd && onPanEnd(event, info);
},
};
useEffect(function () {
if (panSession.current !== null) {
panSession.current.updateHandlers(handlers);
}
});
function onPointerDown(event) {
panSession.current = new PanSession(event, handlers, {
transformPagePoint: transformPagePoint,
});
}
usePointerEvent(visualElement, "pointerdown", hasPanEvents && onPointerDown);
useUnmountEffect(function () { return panSession.current && panSession.current.end(); });
}
export { usePanGesture };