react-native-web-internals
Version:
React Native for Web
75 lines (74 loc) • 3.19 kB
JavaScript
import { getModality } from "../modality/index.mjs";
import useEvent from "../useEvent/index.mjs";
import useLayoutEffect from "../useLayoutEffect/index.mjs";
const emptyObject = {},
opts = {
passive: !0
},
lockEventType = "react-gui:hover:lock",
unlockEventType = "react-gui:hover:unlock",
supportsPointerEvent = () => typeof window < "u" && window.PointerEvent != null;
function dispatchCustomEvent(target, type, payload) {
const event = document.createEvent("CustomEvent"),
{
bubbles = !0,
cancelable = !0,
detail
} = payload || emptyObject;
event.initCustomEvent(type, bubbles, cancelable, detail), target.dispatchEvent(event);
}
function getPointerType(event) {
const {
pointerType
} = event;
return pointerType ?? getModality();
}
function useHover(targetRef, config) {
const {
contain,
disabled,
onHoverStart,
onHoverChange,
onHoverUpdate,
onHoverEnd
} = config,
canUsePE = supportsPointerEvent(),
addMoveListener = useEvent(canUsePE ? "pointermove" : "mousemove", opts),
addEnterListener = useEvent(canUsePE ? "pointerenter" : "mouseenter", opts),
addLeaveListener = useEvent(canUsePE ? "pointerleave" : "mouseleave", opts),
addLockListener = useEvent(lockEventType, opts),
addUnlockListener = useEvent(unlockEventType, opts);
useLayoutEffect(() => {
const target = targetRef.current;
if (target !== null) {
const hoverEnd = function (e) {
onHoverEnd?.(e), onHoverChange?.(!1), addMoveListener(target, null), addLeaveListener(target, null);
},
leaveListener = function (e) {
const target2 = targetRef.current;
target2 != null && getPointerType(e) !== "touch" && (contain && dispatchCustomEvent(target2, unlockEventType), hoverEnd(e));
},
moveListener = function (e) {
getPointerType(e) !== "touch" && onHoverUpdate != null && (e.x == null && (e.x = e.clientX), e.y == null && (e.y = e.clientY), onHoverUpdate(e));
},
hoverStart = function (e) {
onHoverStart?.(e), onHoverChange?.(!0), onHoverUpdate != null && addMoveListener(target, disabled ? null : moveListener), addLeaveListener(target, disabled ? null : leaveListener);
};
addEnterListener(target, disabled ? null : function (e) {
const target2 = targetRef.current;
if (target2 != null && getPointerType(e) !== "touch") {
contain && dispatchCustomEvent(target2, lockEventType), hoverStart(e);
const lockListener = function (lockEvent) {
lockEvent.target !== target2 && hoverEnd(e);
},
unlockListener = function (lockEvent) {
lockEvent.target !== target2 && hoverStart(e);
};
addLockListener(target2, disabled ? null : lockListener), addUnlockListener(target2, disabled ? null : unlockListener);
}
});
}
}, [addEnterListener, addMoveListener, addLeaveListener, addLockListener, addUnlockListener, contain, disabled, onHoverStart, onHoverChange, onHoverUpdate, onHoverEnd, targetRef]);
}
export { useHover as default };
//# sourceMappingURL=index.mjs.map