Feature Request: LongPress threshold on touch device

[dbuchet]

trafficstars

Hi there, what do you think of adding a new prop to trigger onResizeStart after a delay on touchDevices? So resize will not trigger if user is trying to scroll, and was unfortunately over the handler.

I'm not familiar with flow, but I think something like this would do the job

export default props => {

  let timeout;
  const onTouchStart = e => {
    if (!props.longPressThreshold || props.longPressThreshold <= 0) return startResize(e); // immediate trigger if longPressThreshold is not defined or <= 0

    timeout = setTimeout(() => startResize(e), props.longPressThreshold);
  }

  const onTouchEnd = () => {
    clearTimeout(timeout);
  }

  const startResize = e => {
    props.onResizeStart(e, props.direction);
  }
	
  return (
    <div
      className={props.className}
      style={{
        ...styles.base,
        ...styles[props.direction],
        ...(props.replaceStyles || {}),
      }}
      onMouseDown={startResize}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
    >
      {props.children}
    </div>
  );
};

What do you think?

(This code is not tested :) )