@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
85 lines (84 loc) • 2.93 kB
JavaScript
"use client";
import { createEventHandler } from "../../core/utils/create-event-handler/create-event-handler.mjs";
import { useRef } from "react";
import { useLongPress } from "@mantine/hooks";
//#region packages/@mantine/core/src/utils/Floating/use-context-menu-handlers.ts
function useContextMenuHandlers({ childProps, disabled, opened, longPressDelay = 500, setReference, open }) {
const touchActiveRef = useRef(false);
const gestureHandledRef = useRef(false);
const touchTargetRef = useRef(null);
const disabledRef = useRef(disabled);
disabledRef.current = disabled;
const openAtPoint = (clientX, clientY, contextElement) => {
setReference({
getBoundingClientRect: () => ({
x: clientX,
y: clientY,
width: 0,
height: 0,
top: clientY,
left: clientX,
right: clientX,
bottom: clientY,
toJSON: () => void 0
}),
contextElement
});
open();
};
const onMouseDown = createEventHandler(childProps.onMouseDown, (event) => {
if (disabled) return;
if (event.button === 2) event.stopPropagation();
});
const onContextMenu = createEventHandler(childProps.onContextMenu, (event) => {
if (disabled || event.defaultPrevented) return;
event.preventDefault();
if (gestureHandledRef.current) return;
openAtPoint(event.clientX, event.clientY, event.currentTarget);
if (touchActiveRef.current) gestureHandledRef.current = true;
});
const longPressHandlers = useLongPress((event) => {
if (disabledRef.current || gestureHandledRef.current) return;
const touchEvent = event;
const touch = touchEvent.touches[0] ?? touchEvent.changedTouches[0];
if (!touch) return;
openAtPoint(touch.clientX, touch.clientY, touchTargetRef.current);
gestureHandledRef.current = true;
}, {
threshold: longPressDelay,
events: ["touch"],
cancelOnMove: true,
onStart: (event) => {
touchActiveRef.current = true;
gestureHandledRef.current = false;
touchTargetRef.current = event.currentTarget;
},
onFinish: (event) => {
touchActiveRef.current = false;
gestureHandledRef.current = false;
if (!disabledRef.current) event.preventDefault();
},
onCancel: () => {
touchActiveRef.current = false;
gestureHandledRef.current = false;
}
});
return {
onContextMenu,
onMouseDown,
onTouchStart: createEventHandler(childProps.onTouchStart, longPressHandlers.onTouchStart),
onTouchEnd: createEventHandler(childProps.onTouchEnd, longPressHandlers.onTouchEnd),
onTouchCancel: createEventHandler(childProps.onTouchCancel, longPressHandlers.onTouchCancel),
onTouchMove: createEventHandler(childProps.onTouchMove, longPressHandlers.onTouchMove),
style: disabled ? childProps.style : {
...childProps.style,
WebkitTouchCallout: "none",
WebkitUserSelect: "none",
userSelect: "none"
},
"data-expanded": opened ? true : void 0
};
}
//#endregion
export { useContextMenuHandlers };
//# sourceMappingURL=use-context-menu-handlers.mjs.map