[TS] <DraggableCore>'s event handlers are not using React events, but the typing said so

[be5invis]

export type DraggableEventHandler = (e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>, data: DraggableData) => void | false;

should be

export type DraggableEventHandler = (e: MouseEvent | TouchEvent, data: DraggableData) => void | false;

[be5invis]

@matoilic @STRML

[STRML]

What's the actual error?

[be5invis]

@be5invis
In my app, from the typing info I used e.presist() and grabbed the native event via e.nativeEvent and it failed like Uncaught TypeError: event.persist is not a function.
Your TS typing in 3.1 is misguiding people.

[STRML]

It is a React.MouseEvent and persist is defined. What is the actual code you are running?

[be5invis]

I am using DraggableCore. Maybe DraggableCore is not using React events?

Some code:

function handleDrag(e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>, d: DraggableData) {
	e.persist();
	somethingElse(e.nativeEvent);
}

<DraggableCore
	onDrag={handleDrag}
>
	<div>
		test
	</div>
</DraggableCore>

[STRML]

Ah, I see now why this happens: https://github.com/mzabriskie/react-draggable/blob/master/lib/DraggableCore.js#L297

This is not a React-wrapped event. Brainstorming how to address it.

[be5invis]

@STRML
But for things like DraggableCore, we may want native events for performance or fine tuning.
As for immediate fix, just add a new type CoreDraggableEventHandler and type parameters as native events.

[STRML]

Since SyntheticEvent is pooled the performance impact will be negligible. We can't just adjust the typedefs - for instance, if the drag stop is initiated by a mouseup outside of the wrapped element, it will be a regular MouseEvent, not a React.MouseEvent. So where your mouse happens to be affects the callback's shape.

[STRML]

I don't see any good way to arbitrarily wrap a native event in a SyntheticEvent, so my proposal is to change the typedef:

  export type DraggableEventHandler = (
    e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement> | MouseEvent | TouchEvent,
    data: DraggableData
  ) => void | false;

Please try it out and open a PR if it works for you.

[be5invis]

@STRML LGTM
Perhaps this is more accurate

export type DraggableEventHandler = (
    e: React.MouseEvent<HTMLElement | SVGElement> | React.TouchEvent<HTMLElement | SVGElement> | MouseEvent | TouchEvent,
    data: DraggableData
  ) => void | false;

[STRML]

Fixed in #374