Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 20x 20x 18x 20x 19x 1x 7x 1x 17x 1x 5x 5x 5x | import { useRef, useEffect, useCallback, useLayoutEffect } from 'react';
// Saves incoming handler to the ref in order to avoid "useCallback hell"
export function useEventCallback<T, K>(handler?: (value: T, event: K) => void): (value: T, event: K) => void {
const callbackRef = useRef(handler);
useEffect(() => {
callbackRef.current = handler;
});
return useCallback((value: T, event: K) => callbackRef.current && callbackRef.current(value, event), []);
}
// Check if an event was triggered by touch
export const isTouch = (event: MouseEvent | TouchEvent): event is TouchEvent => 'touches' in event;
// Browsers introduced an intervention, making touch events passive by default.
// This workaround removes `preventDefault` call from the touch handlers.
// https://github.com/facebook/react/issues/19651
export const preventDefaultMove = (event: MouseEvent | TouchEvent): void => {
!isTouch(event) && event.preventDefault && event.preventDefault();
};
// Clamps a value between an upper and lower bound.
// We use ternary operators because it makes the minified code
// 2 times shorter then `Math.min(Math.max(a,b),c)`
export const clamp = (number: number, min = 0, max = 1): number => {
return number > max ? max : number < min ? min : number;
};
export interface Interaction {
left: number;
top: number;
width: number;
height: number;
x: number;
y: number;
}
// Returns a relative position of the pointer inside the node's bounding box
export const getRelativePosition = (node: HTMLDivElement, event: MouseEvent | TouchEvent): Interaction => {
const rect = node.getBoundingClientRect();
// Get user's pointer position from `touches` array if it's a `TouchEvent`
const pointer = isTouch(event) ? event.touches[0] : (event as MouseEvent);
return {
left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),
width: rect.width,
height: rect.height,
x: pointer.pageX - (rect.left + window.pageXOffset),
y: pointer.pageY - (rect.top + window.pageYOffset),
};
};
|