Zoom only on click

Add a prop which allows images to only be zoomed in if they are
clicked.

Author: rosesyrett

src/App/App.jsx

@@ -14,6 +14,7 @@ import {
   Example12,
   Example13,
   Example14,
+  Example15,
 } from './examples';
 import s from './style.scss';
 
@@ -255,6 +256,13 @@ class DevelopmentApp extends React.Component {
               </section>
               )}
 
+              {(value === '0' || value === '15') && (
+              <section id="example--15">
+                <hr />
+                <Example15 />
+              </section>
+              )}
+
             </div>
           </div>
         </div>

src/App/examples/Example15/Example15.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import
+{
+  ButtonBack,
+  ButtonFirst,
+  ButtonLast,
+  ButtonNext,
+  CarouselProvider,
+  Slide,
+  Slider,
+  ImageWithZoom,
+  DotGroup,
+} from '../../..';
+
+import s from '../../style.scss';
+
+export default () => (
+  <CarouselProvider
+    visibleSlides={1}
+    totalSlides={2}
+    step={1}
+    naturalSlideWidth={400}
+    naturalSlideHeight={500}
+  >
+    <h2 className={s.headline}>Zoom only on click</h2>
+    <p>Two images: first will zoom on click, second will not.</p>
+    <Slider className={s.slider}>
+      <Slide tag="a" index={0}>
+        <ImageWithZoom src="./media/img01.jpeg" onlyZoomOnClick />
+      </Slide>
+      <Slide tag="a" index={1}>
+        <ImageWithZoom src="./media/img02.jpeg" />
+      </Slide>
+    </Slider>
+    <ButtonFirst>First</ButtonFirst>
+    <ButtonBack>Back</ButtonBack>
+    <ButtonNext>Next</ButtonNext>
+    <ButtonLast>Last</ButtonLast>
+    <DotGroup dotNumbers />
+  </CarouselProvider>
+);

src/App/examples/Example15/index.js

@@ -0,0 +1,3 @@
+import Example15 from './Example15';
+
+export default Example15;

src/App/examples/index.js

@@ -12,3 +12,4 @@ export { default as Example11 } from './Example11';
 export { default as Example12 } from './Example12';
 export { default as Example13 } from './Example13';
 export { default as Example14 } from './Example14';
+export { default as Example15 } from './Example15';

src/ImageWithZoom/ImageWithZoom.jsx

@@ -25,7 +25,8 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
     srcZoomed: PropTypes.string,
     tag: PropTypes.string,
     isPinchZoomEnabled: PropTypes.bool,
-  }
+    onlyZoomOnClick: PropTypes.bool,
+  };
 
   static defaultProps = {
     alt: undefined,
@@ -40,7 +41,8 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
     onError: null,
     srcZoomed: null,
     tag: 'div',
-  }
+    onlyZoomOnClick: false,
+  };
 
   /**
    * Find the midpoint between two touches.
@@ -86,6 +88,9 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
       // tracks the status via image element's onerror events.
       isImageLoadingError: true,
 
+      // tracks if the user has clicked on the image or not.
+      clicked: false,
+
       // the mouse is currently hovering over the image.
       isHovering: false,
 
@@ -156,6 +161,7 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
     if (this.state.isZooming) return;
     this.setState({
       isHovering: false,
+      clicked: false,
       scale: 1,
     });
   }
@@ -303,6 +309,7 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
       src,
       srcZoomed,
       tag: Tag,
+      onlyZoomOnClick,
       ...filteredProps
     } = this.props;
 
@@ -333,8 +340,38 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
       overlayStyle.transform = `scale(${this.state.scale})`;
     }
 
+    const overlayImage = (
+      <Image
+        className={newOverlayClassName}
+        tag="div"
+        src={srcZoomed || src}
+        style={overlayStyle}
+        isBgImage
+        onFocus={this.handleOnMouseOver}
+        onMouseOver={this.handleOnMouseOver}
+        onBlur={this.handleOnMouseOut}
+        onMouseOut={this.handleOnMouseOut}
+        onMouseMove={this.handleOnMouseMove}
+        onTouchStart={this.handleOnTouchStart}
+        onTouchEnd={this.handleOnTouchEnd}
+        onTouchMove={this.handleOnTouchMove}
+      />
+    );
+
+    let cursorStyle = { cursor: 'zoom-in' };
+    if (onlyZoomOnClick) {
+      cursorStyle = this.state.clicked ? { cursor: 'zoom-out' } : { cursor: 'zoom-in' };
+    }
+
     return (
-      <Tag className={newClassName} {...filteredProps}>
+      <Tag
+        className={newClassName}
+        {...filteredProps}
+        onClick={() => {
+          this.setState(state => ({ clicked: !state.clicked }));
+        }}
+        style={cursorStyle}
+      >
         <Image
           alt={alt}
           className={newImageClassName}
@@ -344,21 +381,8 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
           onError={this.handleImageLoadError}
           {...bgImageProps}
         />
-        <Image
-          className={newOverlayClassName}
-          tag="div"
-          src={srcZoomed || src}
-          style={overlayStyle}
-          isBgImage
-          onFocus={this.handleOnMouseOver}
-          onMouseOver={this.handleOnMouseOver}
-          onBlur={this.handleOnMouseOut}
-          onMouseOut={this.handleOnMouseOut}
-          onMouseMove={this.handleOnMouseMove}
-          onTouchStart={this.handleOnTouchStart}
-          onTouchEnd={this.handleOnTouchEnd}
-          onTouchMove={this.handleOnTouchMove}
-        />
+        {((onlyZoomOnClick && this.state.clicked) || !onlyZoomOnClick)
+          ? overlayImage : <></>}
         {this.renderLoading()}
       </Tag>
     );

src/ImageWithZoom/ImageWithZoom.scss

@@ -12,7 +12,6 @@
   bottom: 0;
   right: 0;
   opacity: 0;
-  cursor: zoom-in;
   transition: opacity 300ms, transform 300ms;
 }
 

src/ImageWithZoom/__tests__/ImageWithZoom.test.jsx

@@ -276,6 +276,15 @@ describe('<ImageWithZoom />', () => {
       expect(wrapper.state('x')).toBe('50%');
       expect(wrapper.state('y')).toBe('50%');
     });
+    it('if onlyZoomOnClick then zoom should not happen if not clicked', () => {
+      const wrapper = shallow(<ImageWithZoom {...props} onlyZoomOnClick />);
+      expect(wrapper.state('clicked')).toBe(false);
+      expect(wrapper.find('.overlay').exists()).toBe(false);
+      wrapper.simulate('click');
+      wrapper.update();
+      expect(wrapper.find('.overlay').exists()).toBe(true);
+      expect(wrapper.state('clicked')).toBe(true);
+    });
     it('should properly set state for x y when touches are moving', () => {
       const wrapper = shallow(<ImageWithZoom {...props} />);
       expect(wrapper.state('x')).toBe(null);