From e34cc02cc2a88ab5e5f869570ec7b541faf6c5d1 Mon Sep 17 00:00:00 2001
From: Jared Stoffan <jstoffan@users.noreply.github.com>
Date: Tue, 8 Dec 2020 17:39:13 -0800
Subject: [PATCH] feat(controls): Add option for react controls to CSV viewer
 (#1306)

---
 src/lib/viewers/text/CSVViewer.js                |  7 ++++++-
 src/lib/viewers/text/MarkdownViewer.js           |  2 +-
 src/lib/viewers/text/TextBaseViewer.js           |  2 +-
 src/lib/viewers/text/__tests__/CSVViewer-test.js | 13 +++++++++++++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/lib/viewers/text/CSVViewer.js b/src/lib/viewers/text/CSVViewer.js
index f67b7aed2..a013065e1 100644
--- a/src/lib/viewers/text/CSVViewer.js
+++ b/src/lib/viewers/text/CSVViewer.js
@@ -164,7 +164,12 @@ class CSVViewer extends TextBaseViewer {
         this.csvComponent = new BoxCSV(this.csvEl, this.data);
         this.csvComponent.renderCSV();
 
-        this.loadUI();
+        if (this.options.useReactControls) {
+            this.loadUIReact();
+        } else {
+            this.loadUI();
+        }
+
         this.loaded = true;
         this.emit(VIEWER_EVENT.load);
     }
diff --git a/src/lib/viewers/text/MarkdownViewer.js b/src/lib/viewers/text/MarkdownViewer.js
index 27c3ddf01..483640e6f 100644
--- a/src/lib/viewers/text/MarkdownViewer.js
+++ b/src/lib/viewers/text/MarkdownViewer.js
@@ -116,7 +116,7 @@ class MarkdownViewer extends PlainTextViewer {
     }
 
     renderUI() {
-        if (this.options.useReactControls) {
+        if (this.controls && this.options.useReactControls) {
             this.controls.render(<MarkdownControls onFullscreenToggle={this.toggleFullscreen} />);
         }
     }
diff --git a/src/lib/viewers/text/TextBaseViewer.js b/src/lib/viewers/text/TextBaseViewer.js
index 5e6080cd1..cf5d93d8b 100644
--- a/src/lib/viewers/text/TextBaseViewer.js
+++ b/src/lib/viewers/text/TextBaseViewer.js
@@ -156,7 +156,7 @@ class TextBaseViewer extends BaseViewer {
             this.zoomControls.setCurrentScale(this.scale);
         }
 
-        if (this.options.useReactControls) {
+        if (this.controls && this.options.useReactControls) {
             this.controls.render(
                 <TextControls
                     maxScale={ZOOM_MAX}
diff --git a/src/lib/viewers/text/__tests__/CSVViewer-test.js b/src/lib/viewers/text/__tests__/CSVViewer-test.js
index b195c238a..e6515f409 100644
--- a/src/lib/viewers/text/__tests__/CSVViewer-test.js
+++ b/src/lib/viewers/text/__tests__/CSVViewer-test.js
@@ -191,14 +191,27 @@ describe('lib/viewers/text/CSVViewer', () => {
             });
             /* eslint-enable react/prefer-es6-class */
             jest.spyOn(csv, 'loadUI');
+            jest.spyOn(csv, 'loadUIReact');
             jest.spyOn(csv, 'emit');
 
             csv.finishLoading();
 
             expect(csv.loadUI).toBeCalled();
+            expect(csv.loadUIReact).not.toBeCalled();
             expect(csv.loaded).toBe(true);
             expect(csv.emit).toBeCalledWith(VIEWER_EVENT.load);
         });
+
+        test('should finish loading and render react ui if option is enabled', () => {
+            jest.spyOn(csv, 'loadUI');
+            jest.spyOn(csv, 'loadUIReact');
+
+            csv.options.useReactControls = true;
+            csv.finishLoading();
+
+            expect(csv.loadUI).not.toBeCalled();
+            expect(csv.loadUIReact).toBeCalled();
+        });
     });
 
     describe('checkForParseErrors()', () => {