From 9e603dc6373cc8ef0924941487f6325491e35bba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pavel=20Palec=CC=8Cek=20=28ext95868=29?=
 <pavel.palecek@ext.csas.cz>
Date: Thu, 19 Sep 2019 12:33:16 +0200
Subject: [PATCH] Fixes dblClick on mobile devices

---
 cypress/integration/react-modal-image-spec.js |  8 +++++--
 src/Image.js                                  | 22 ++++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/cypress/integration/react-modal-image-spec.js b/cypress/integration/react-modal-image-spec.js
index 02aff8b..ea73f08 100644
--- a/cypress/integration/react-modal-image-spec.js
+++ b/cypress/integration/react-modal-image-spec.js
@@ -37,13 +37,17 @@ describe("react-modal-image", function() {
         const initialHtml = $zoom1.html();
 
         // doubleclicks
-        cy.get("#react-modal-image-img").dblclick();
+        cy.get("#react-modal-image-img").click();
+        cy.wait(200)
+        cy.get("#react-modal-image-img").click();
 
         cy.get("span.__react_modal_image__icon_menu").children().first().next().then($zoom2 => {
           expect($zoom2.html()).to.not.equal(initialHtml);
         });
 
-        cy.get("#react-modal-image-img").dblclick();
+        cy.get("#react-modal-image-img").click();
+        cy.wait(200)
+        cy.get("#react-modal-image-img").click();
 
         cy.get("span.__react_modal_image__icon_menu").children().first().next().then($zoom2 => {
           expect($zoom2.html()).to.equal(initialHtml);
diff --git a/src/Image.js b/src/Image.js
index 5e7ad96..05ca9dc 100644
--- a/src/Image.js
+++ b/src/Image.js
@@ -4,7 +4,8 @@ import { SpinnerIcon } from "./icons";
 
 export default class Image extends Component {
   state = {
-    loading: true
+    loading: true,
+    lastClickTs: 0
   };
 
   handleOnLoad = () => {
@@ -15,8 +16,23 @@ export default class Image extends Component {
     !this.props.contextMenu && event.preventDefault();
   };
 
+  // Fixes dblClick on mobile devices
+  handleClick = event => {
+    const { handleDoubleClick } = this.props;
+    const { lastClickTs } = this.state
+    const now = Date.now()
+    const delta = now - lastClickTs;
+
+    if (delta > 20 && delta < 500) {
+      this.setState({ lastClickTs: 0 });
+      handleDoubleClick(event);
+    } else {
+      this.setState({ lastClickTs: now });
+    }
+  };
+
   render() {
-    const { id, className, src, style, handleDoubleClick } = this.props;
+    const { id, className, src, style } = this.props;
 
     return (
       <div>
@@ -27,7 +43,7 @@ export default class Image extends Component {
           src={src}
           style={style}
           onLoad={this.handleOnLoad}
-          onDoubleClick={handleDoubleClick}
+          onClick={this.handleClick}
           onContextMenu={this.handleOnContextMenu}
         />
       </div>