From e2da4e084f50b4fe38f2b4caae816bf461c903ef Mon Sep 17 00:00:00 2001
From: Marko Kuosmanen <kuosman@gmail.com>
Date: Wed, 19 Aug 2020 17:14:53 +0300
Subject: [PATCH] feature(react-dock): add touch events (#596)

* Touch events

Enable to resize the dock on touch devices by handling touch events in addition to mouse events

* Prettifying

`yarn run prettify` command prettifying.

Co-authored-by: Nathan Bierema <nbierema@gmail.com>
---
 packages/react-dock/src/Dock.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/react-dock/src/Dock.js b/packages/react-dock/src/Dock.js
index 92ecea0f..bf0dd950 100644
--- a/packages/react-dock/src/Dock.js
+++ b/packages/react-dock/src/Dock.js
@@ -244,7 +244,9 @@ export default class Dock extends Component {
   };
 
   componentDidMount() {
+    window.addEventListener('touchend', this.handleMouseUp);
     window.addEventListener('mouseup', this.handleMouseUp);
+    window.addEventListener('touchmove', this.handleMouseMove);
     window.addEventListener('mousemove', this.handleMouseMove);
     window.addEventListener('resize', this.handleResize);
 
@@ -254,7 +256,9 @@ export default class Dock extends Component {
   }
 
   componentWillUnmount() {
+    window.removeEventListener('touchend', this.handleMouseUp);
     window.removeEventListener('mouseup', this.handleMouseUp);
+    window.removeEventListener('touchmove', this.handleMouseMove);
     window.removeEventListener('mousemove', this.handleMouseMove);
     window.removeEventListener('resize', this.handleResize);
   }
@@ -329,7 +333,11 @@ export default class Dock extends Component {
           <div style={dimStyles} onClick={this.handleDimClick} />
         )}
         <div style={dockStyles}>
-          <div style={resizerStyles} onMouseDown={this.handleMouseDown} />
+          <div
+            style={resizerStyles}
+            onMouseDown={this.handleMouseDown}
+            onTouchStart={this.handleMouseDown}
+          />
           <div style={styles.dockContent}>
             {typeof children === 'function'
               ? children({
@@ -401,11 +409,18 @@ export default class Dock extends Component {
 
   handleMouseMove = (e) => {
     if (!this.state.isResizing || this.state.isWindowResizing) return;
-    e.preventDefault();
+
+    if (!e.touches) e.preventDefault();
 
     const { position, fluid } = this.props;
     const { fullWidth, fullHeight, isControlled } = this.state;
-    const { clientX: x, clientY: y } = e;
+    let { clientX: x, clientY: y } = e;
+
+    if (e.touches) {
+      x = e.touches[0].clientX;
+      y = e.touches[0].clientY;
+    }
+
     let size;
 
     switch (position) {