fix(controls): Hide find and thumbnail toggles if options are disabled (

#1311)
box · Jan 4, 2021 · 46df6e4 · 46df6e4
1 parent d1a9e08
commit 46df6e4
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 17 deletions.
diff --git a/src/lib/viewers/controls/findbar/FindBarToggle.tsx b/src/lib/viewers/controls/findbar/FindBarToggle.tsx
@@ -3,10 +3,14 @@ import IconSearch18 from '../icons/IconSearch18';
 import './FindBarToggle.scss';
 
 export type Props = {
-    onFindBarToggle: () => void;
+    onFindBarToggle?: () => void;
 };
 
-export default function FindBarToggle({ onFindBarToggle }: Props): JSX.Element {
+export default function FindBarToggle({ onFindBarToggle }: Props): JSX.Element | null {
+    if (!onFindBarToggle) {
+        return null;
+    }
+
     return (
         <button className="bp-FindBarToggle" onClick={onFindBarToggle} title={__('toggle_findbar')} type="button">
             <IconSearch18 />

diff --git a/src/lib/viewers/controls/findbar/__tests__/FindBarToggle-test.tsx b/src/lib/viewers/controls/findbar/__tests__/FindBarToggle-test.tsx
@@ -4,8 +4,7 @@ import FindBarToggle from '../FindBarToggle';
 import IconSearch18 from '../../icons/IconSearch18';
 
 describe('FindBarToggle', () => {
-    const getWrapper = (props = {}): ShallowWrapper =>
-        shallow(<FindBarToggle onFindBarToggle={jest.fn()} {...props} />);
+    const getWrapper = (props = {}): ShallowWrapper => shallow(<FindBarToggle {...props} />);
 
     describe('event handlers', () => {
         test('should forward the click from the button', () => {
@@ -20,10 +19,16 @@ describe('FindBarToggle', () => {
 
     describe('render', () => {
         test('should return a valid wrapper', () => {
-            const wrapper = getWrapper();
+            const wrapper = getWrapper({ onFindBarToggle: jest.fn() });
 
             expect(wrapper.hasClass('bp-FindBarToggle')).toBe(true);
             expect(wrapper.exists(IconSearch18)).toBe(true);
         });
+
+        test('should return an empty wrapper if no callback is defined', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.isEmptyRender()).toBe(true);
+        });
     });
 });
diff --git a/src/lib/viewers/controls/sidebar/ThumbnailsToggle.tsx b/src/lib/viewers/controls/sidebar/ThumbnailsToggle.tsx
@@ -3,10 +3,14 @@ import IconThumbnailsToggle18 from '../icons/IconThumbnailsToggle18';
 import './ThumbnailsToggle.scss';
 
 export type Props = {
-    onThumbnailsToggle: () => void;
+    onThumbnailsToggle?: () => void;
 };
 
-export default function ThumbnailsToggle({ onThumbnailsToggle }: Props): JSX.Element {
+export default function ThumbnailsToggle({ onThumbnailsToggle }: Props): JSX.Element | null {
+    if (!onThumbnailsToggle) {
+        return null;
+    }
+
     return (
         <button
             className="bp-ThumbnailsToggle"

diff --git a/src/lib/viewers/controls/sidebar/__tests__/ThumbnailsToggle-test.tsx b/src/lib/viewers/controls/sidebar/__tests__/ThumbnailsToggle-test.tsx
@@ -4,8 +4,7 @@ import IconThumbnailsToggle18 from '../../icons/IconThumbnailsToggle18';
 import ThumbnailsToggle from '../ThumbnailsToggle';
 
 describe('ThumbnailsToggle', () => {
-    const getWrapper = (props = {}): ShallowWrapper =>
-        shallow(<ThumbnailsToggle onThumbnailsToggle={jest.fn()} {...props} />);
+    const getWrapper = (props = {}): ShallowWrapper => shallow(<ThumbnailsToggle {...props} />);
 
     describe('event handlers', () => {
         test('should forward the click from the button', () => {
@@ -20,10 +19,16 @@ describe('ThumbnailsToggle', () => {
 
     describe('render', () => {
         test('should return a valid wrapper', () => {
-            const wrapper = getWrapper();
+            const wrapper = getWrapper({ onThumbnailsToggle: jest.fn() });
 
             expect(wrapper.hasClass('bp-ThumbnailsToggle')).toBe(true);
             expect(wrapper.exists(IconThumbnailsToggle18)).toBe(true);
         });
+
+        test('should return an empty wrapper if no callback is defined', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.isEmptyRender()).toBe(true);
+        });
     });
 });
diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -1082,28 +1082,27 @@ class DocBaseViewer extends BaseViewer {
         }
 
         if (this.controls && this.options.useReactControls) {
+            const { enableThumbnailsSidebar, showAnnotationsDrawingCreate } = this.options;
             const canAnnotate = this.areNewAnnotationsEnabled() && this.hasAnnotationCreatePermission();
             const canDownload = checkPermission(this.options.file, PERMISSION_DOWNLOAD);
-            const canDraw = canAnnotate && this.options.showAnnotationsDrawingCreate;
-            const canHighlight = canAnnotate && canDownload;
 
             this.controls.render(
                 <DocControls
                     annotationColor={this.annotationModule.getColor()}
                     annotationMode={this.annotationControlsFSM.getMode()}
-                    hasDrawing={canDraw}
-                    hasHighlight={canHighlight}
+                    hasDrawing={canAnnotate && showAnnotationsDrawingCreate}
+                    hasHighlight={canAnnotate && canDownload}
                     hasRegion={canAnnotate}
                     maxScale={MAX_SCALE}
                     minScale={MIN_SCALE}
                     onAnnotationColorChange={this.handleAnnotationColorChange}
                     onAnnotationModeClick={this.handleAnnotationControlsClick}
                     onAnnotationModeEscape={this.handleAnnotationControlsEscape}
-                    onFindBarToggle={this.toggleFindBar}
+                    onFindBarToggle={!this.isFindDisabled() ? this.toggleFindBar : undefined}
                     onFullscreenToggle={this.toggleFullscreen}
                     onPageChange={this.setPage}
                     onPageSubmit={this.handlePageSubmit}
-                    onThumbnailsToggle={this.toggleThumbnails}
+                    onThumbnailsToggle={enableThumbnailsSidebar ? this.toggleThumbnails : undefined}
                     onZoomIn={this.zoomIn}
                     onZoomOut={this.zoomOut}
                     pageCount={this.pdfViewer.pagesCount}

diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js
@@ -1730,7 +1730,6 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
                         onAnnotationColorChange={docBase.handleAnnotationColorChange}
                         onAnnotationModeClick={docBase.handleAnnotationControlsClick}
                         onAnnotationModeEscape={docBase.handleAnnotationControlsEscape}
-                        onFindBarToggle={docBase.toggleFindBar}
                         onFullscreenToggle={docBase.toggleFullscreen}
                         onPageChange={docBase.setPage}
                         onPageSubmit={docBase.handlePageSubmit}
@@ -1781,6 +1780,41 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
             );
         });
 
+        describe('renderUI()', () => {
+            const getProps = instance => instance.controls.render.mock.calls[0][0].props;
+
+            beforeEach(() => {
+                docBase.controls = {
+                    render: jest.fn(),
+                };
+                docBase.options.useReactControls = true;
+                docBase.pdfViewer = {
+                    currentPageNumber: 1,
+                    currentScale: 0.9,
+                    pagesCount: 4,
+                };
+            });
+
+            test.each([true, false])('should enable or disable the findbar toggle based on its option', option => {
+                jest.spyOn(docBase, 'isFindDisabled').mockReturnValue(!option);
+
+                docBase.renderUI();
+
+                expect(getProps(docBase)).toMatchObject({
+                    onFindBarToggle: option ? docBase.toggleFindBar : undefined,
+                });
+            });
+
+            test.each([true, false])('should enable or disable the thumbnail toggle based on its option', option => {
+                docBase.options.enableThumbnailsSidebar = option;
+                docBase.renderUI();
+
+                expect(getProps(docBase)).toMatchObject({
+                    onThumbnailsToggle: option ? docBase.toggleThumbnails : undefined,
+                });
+            });
+        });
+
         describe('bindDOMListeners()', () => {
             beforeEach(() => {
                 stubs.addEventListener = jest.spyOn(docBase.docEl, 'addEventListener').mockImplementation();