message: feat(useLongPress): add movement threshold
diff: @@ -8,6 +8,7 @@ import useEffectWithTarget from '../utils/useEffectWithTarget';
  type EventType = MouseEvent | TouchEvent;
  export interface Options {
  delay?: number;
  + moveThreshold?: { x?: number; y?: number };
  onClick?: (event: EventType) => void;
  onLongPressEnd?: (event: EventType) => void;
  }
  @@ -17,10 +18,22 @@ const touchSupported =
  // @ts-ignore
  ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch));
  +const getCurrentPosition = (event: EventType) => {
  + const position = { x: 0, y: 0 };
  + if (!touchSupported) {
  + position.x = (event as MouseEvent).clientX;
  + position.y = (event as MouseEvent).clientY;
  + } else {
  + position.x = (event as TouchEvent).touches[0].clientX;
  + position.y = (event as TouchEvent).touches[0].clientY;
  + }
  + return position;
  +};
  +
  function useLongPress(
  onLongPress: (event: EventType) => void,
  target: BasicTarget,
  - { delay = 300, onClick, onLongPressEnd }: Options = {},
  + { delay = 300, moveThreshold, onClick, onLongPressEnd }: Options = {},
  ) {
  const onLongPressRef = useLatest(onLongPress);
  const onClickRef = useLatest(onClick);
  @@ -29,6 +42,9 @@ function useLongPress(
  const timerRef = useRef<ReturnType<typeof setTimeout>>();
  const isTriggeredRef = useRef(false);
  + const checkMovement = !!(moveThreshold?.x || moveThreshold?.y);
  + const positionRef = useRef({ x: 0, y: 0 });
  +
  useEffectWithTarget(
  () => {
  const targetElement = getTargetElement(target);
  @@ -36,14 +52,23 @@ function useLongPress(
  return;
  }
  - const onStart = (event: TouchEvent | MouseEvent) => {
  + const onStart = (event: EventType) => {
  + if (checkMovement) {
  + positionRef.current = getCurrentPosition(event);
  + }
  timerRef.current = setTimeout(() => {
  + if (checkMovement) {
  + const offsetX = getCurrentPosition(event).x - positionRef.current.x;
  + const offsetY = getCurrentPosition(event).y - positionRef.current.y;
  + if (moveThreshold?.x && moveThreshold.x > 0 && offsetX > moveThreshold.x) return;
  + if (moveThreshold?.y && moveThreshold.y > 0 && offsetY > moveThreshold.y) return;
  + }
  onLongPressRef.current(event);
  isTriggeredRef.current = true;
  }, delay);
  };
  - const onEnd = (event: TouchEvent | MouseEvent, shouldTriggerClick: boolean = false) => {
  + const onEnd = (event: EventType, shouldTriggerClick: boolean = false) => {
  if (timerRef.current) {
  clearTimeout(timerRef.current);
  }
  @@ -56,7 +81,7 @@ function useLongPress(
  isTriggeredRef.current = false;
  };
  - const onEndWithClick = (event: TouchEvent | MouseEvent) => onEnd(event, true);
  + const onEndWithClick = (event: EventType) => onEnd(event, true);
  if (!touchSupported) {
  targetElement.addEventListener('mousedown', onStart);
  