feat: allow setting key, touch and mouse event handlers

[n1ru4l]

The project I am working on requires adding event listeners to the PanZoom component.

Ideally, this project would use prop getters (https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters). However, this is something to consider for a major release/braking change.

This implementation uses a list of allowed event property names in order to apply them from either the component instance methods or the props passed to the component instance.

[n1ru4l]

Edit: I think I have to change this, I did not see the event listeners that were added to the document

@mnogueron Could you please explain why you choose to add the event listeners for mousedown ad mouseup to the document instead of adding those via the props?

react-easy-panzoom/src/PanZoom.js

Lines 416 to 423 in 7ed8238

	setMouseListeners = () => {
	document.addEventListener('mousemove', this.onMouseMove)
	document.addEventListener('mouseup', this.onMouseUp)
	}
	cleanMouseListeners = () => {
	document.removeEventListener('mousemove', this.onMouseMove)
	document.removeEventListener('mouseup', this.onMouseUp)

[mnogueron]

Edit: I think I have to change this, I did not see the event listeners that were added to the document

@mnogueron Could you please explain why you choose to add the event listeners for mousedown ad mouseup to the document instead of adding those via the props?

react-easy-panzoom/src/PanZoom.js

Lines 416 to 423 in 7ed8238

	setMouseListeners = () => {
	document.addEventListener('mousemove', this.onMouseMove)
	document.addEventListener('mouseup', this.onMouseUp)
	}
	cleanMouseListeners = () => {
	document.removeEventListener('mousemove', this.onMouseMove)
	document.removeEventListener('mouseup', this.onMouseUp)

The reason to set the listener on the document and not on the actual component via props is that you still want to catch events when the mouse is leaving the component boundaries.

[mnogueron]

@n1ru4l I would rather see a use of deconstructing props, to pass down the rest of the props given to the PanZoom to the first div, and only combine the listeners that need to be combined.
It feels a bit hard to understand the way you did it, and makes the implementation rely on a static list of listener names. It would be easier if we were just passing down the props.

[n1ru4l]

Sure let's do it like that!

[n1ru4l]

@mnogueron Done 😊

[mnogueron]

@n1ru4l Sweat modifications!
Just same small comments but overwise it's good to go 🙂

[mnogueron]

@n1ru4l Perfect! Just need to fix the merge issue and it's good to go! :)

[n1ru4l]

@mnogueron Done!