How to have an onPress and onLongPress on the same element in React?-CodePudding

I have a button that I want to trigger different things depending on the duration of the press; so one callback for short presses under 1000ms and another callback for long presses over 1000ms. The short press callback should not be called if the long press callback is called.

Building upon another user's solution for a long press only (https://stackoverflow.com/a/54749871/11239421), I tried to create this React hook:

import { useState, useEffect } from "react";

export default function useLongAndShortPress(
  longPressCallback = () => {
    console.log("Long press callback");
  },
  shortPressCallback = () => {
    console.log("Short press callback");
  },
  ms = 1000
) {
  const [startLongPress, setStartLongPress] = useState(false);
  const [startShortPress, setStartShortPress] = useState(false);

  useEffect(() => {
    let timerId: any;
    if (startLongPress) {
      timerId = setTimeout(longPressCallback, ms);
    } else if (startShortPress) {
      shortPressCallback();
      setStartShortPress(false);
    } else {
      clearTimeout(timerId);
    }

    return () => {
      clearTimeout(timerId);
    };
  }, [
    longPressCallback,
    shortPressCallback,
    ms,
    startLongPress,
    startShortPress,
  ]);

  return {
    onMouseDown: () => {
      setStartLongPress(true);
      setStartShortPress(false);
    },
    onMouseUp: () => {
      setStartLongPress(true);
      setStartShortPress(false);
    },
    onMouseLeave: () => {
      setStartLongPress(true);
      setStartShortPress(false);
    },
    onTouchStart: () => {
      setStartLongPress(true);
      setStartShortPress(false);
    },
    onTouchEnd: () => {
      setStartLongPress(true);
      setStartShortPress(false);
    },
    onTouchCancel: () => {
      setStartLongPress(true);
      setStartShortPress(false);
    },
  };
}

and then use this hook in a component:

import useLongAndShortPress from './useLongAndShortPress';

function MyComponent (props) {
  const longAndShortPress = useLongAndShortPress(() => alert("LONG PRESS"), () => alert("SHORT PRESS"), 1000);

  return (
    <Page>
      <Button {...backspaceLongPress}>
        Click me
      </Button>
    </Page>
  );
};

This doesn't work, as the short press callback is never triggered, and the long press callback seems to be triggered periodically even when not pressing the button at all.

Is there a better way to get both long and short presses on the same element, or are there any way to get my current solution to work? Thank you very much :)

CodePudding user response：

I managed to get it working. I only changed the custom hook, so that it looked like this:

import { useState, useEffect } from "react";

export default function useLongAndShortPress(
  longPressCallback = () => {
    console.log("Long press callback");
  },
  shortPressCallback = () => {
    console.log("Short press callback");
  },
  ms = 1000
) {
  const [startLongPress, setStartLongPress] = useState(false);
  const [startShortPress, setStartShortPress] = useState(false);

  useEffect(() => {
    let timerId: any;

    if (startLongPress) {
      timerId = setTimeout(() => {
        setStartShortPress(false);
        setStartLongPress(false);
        longPressCallback();
      }, ms);
    } else if (startShortPress) {
      setStartShortPress(false);
      shortPressCallback();

      clearTimeout(timerId);
    }

    return () => {
      clearTimeout(timerId);
    };
  }, [startLongPress, startShortPress]);

  return {
    onMouseLeave: () => {
      setStartLongPress(false);
    },
    onTouchStart: () => {
      setStartLongPress(true);
      setStartShortPress(true);
    },
    onTouchEnd: () => {
      setStartLongPress(false);
    },
  };
}