fix: change focus when zoom buttons becomes disabled to be able to st…

…ill use arrow keys (fix issue frontend-collective#132)
bastoune · Jul 23, 2018 · 2e76e83 · 2e76e83
1 parent 357a801
commit 2e76e83
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/src/__tests__/react-image-lightbox.spec.js b/src/__tests__/react-image-lightbox.spec.js
@@ -2,6 +2,7 @@ import { mount } from 'enzyme';
 import React from 'react';
 import Modal from 'react-modal';
 import Lightbox from '../index';
+import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL, ZOOM_BUTTON_INCREMENT_SIZE } from '../constant'
 
 // Mock the loadStyles static function to avoid
 // issues with a lack of styles._insertCss
@@ -231,6 +232,30 @@ describe('Key bindings', () => {
     simulateKey(37);
     expect(mockMovePrevRequest).toHaveBeenCalledTimes(1);
   });
+
+  it('Focus the ZoomIn Button when ZoomOut is disabled', () => {
+    wrapper.setState({ zoomLevel: MIN_ZOOM_LEVEL + ZOOM_BUTTON_INCREMENT_SIZE });
+    const {zoomOutBtn, zoomInBtn} = wrapper.instance();
+    jest.spyOn(zoomOutBtn, 'focus');
+    jest.spyOn(zoomInBtn, 'focus');
+    wrapper.find('.ril-zoom-out').simulate('click')
+    setTimeout(() => {
+      expect(zoomOutBtn.focus).toHaveBeenCalledTimes(0);
+      expect(zoomInBtn.focus).toHaveBeenCalledTimes(1);
+    }, 250);
+  });
+
+  it('Focus the ZoomOut Button when ZoomIn is disabled', () => {
+    wrapper.setState({ zoomLevel: MAX_ZOOM_LEVEL - ZOOM_BUTTON_INCREMENT_SIZE });
+    const {zoomOutBtn, zoomInBtn} = wrapper.instance();
+    jest.spyOn(zoomOutBtn, 'focus');
+    jest.spyOn(zoomInBtn, 'focus');
+    wrapper.find('.ril-zoom-out').simulate('click')
+    setTimeout(() => {
+      expect(zoomOutBtn.focus).toHaveBeenCalledTimes(1);
+      expect(zoomInBtn.focus).toHaveBeenCalledTimes(0);
+    }, 250);
+  });
 });
 
 describe('Snapshot Testing', () => {

diff --git a/src/react-image-lightbox.js b/src/react-image-lightbox.js
@@ -1061,11 +1061,19 @@ class ReactImageLightbox extends Component {
   }
 
   handleZoomInButtonClick() {
-    this.changeZoom(this.state.zoomLevel + ZOOM_BUTTON_INCREMENT_SIZE);
+    const nextZoomLevel = this.state.zoomLevel + ZOOM_BUTTON_INCREMENT_SIZE;
+    this.changeZoom(nextZoomLevel);
+    if (nextZoomLevel === MAX_ZOOM_LEVEL) {
+      this.zoomOutBtn.focus();
+    }
   }
 
   handleZoomOutButtonClick() {
-    this.changeZoom(this.state.zoomLevel - ZOOM_BUTTON_INCREMENT_SIZE);
+    const nextZoomLevel = this.state.zoomLevel - ZOOM_BUTTON_INCREMENT_SIZE;
+    this.changeZoom(nextZoomLevel);
+    if (nextZoomLevel === MIN_ZOOM_LEVEL) {
+      this.zoomInBtn.focus();
+    }
   }
 
   handleCaptionMousewheel(event) {
@@ -1533,6 +1541,9 @@ class ReactImageLightbox extends Component {
                         ? ['ril__builtinButtonDisabled']
                         : []),
                     ].join(' ')}
+                    ref={el => {
+                      this.zoomInBtn = el
+                    }}
                     disabled={
                       this.isAnimating() || zoomLevel === MAX_ZOOM_LEVEL
                     }
@@ -1560,6 +1571,9 @@ class ReactImageLightbox extends Component {
                         ? ['ril__builtinButtonDisabled']
                         : []),
                     ].join(' ')}
+                    ref={el => {
+                      this.zoomOutBtn = el
+                    }}
                     disabled={
                       this.isAnimating() || zoomLevel === MIN_ZOOM_LEVEL
                     }