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 (