From 02ebcc6b87cbff5c3389e5771f81949bdf70991e Mon Sep 17 00:00:00 2001
From: Mingze Xiao <mxiao@box.com>
Date: Wed, 25 Mar 2020 17:02:47 -0700
Subject: [PATCH] feat(annotations): Fix typescript

---
 src/lib/AnnotationControls.ts                | 11 +++++------
 src/lib/__tests__/AnnotationControls-test.js | 14 ++++++--------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/lib/AnnotationControls.ts b/src/lib/AnnotationControls.ts
index 3d388a76c3..b9f2713cb1 100644
--- a/src/lib/AnnotationControls.ts
+++ b/src/lib/AnnotationControls.ts
@@ -17,9 +17,6 @@ export default class AnnotationControls {
     /** @property {bool} - Region comment mode active state */
     private isRegionActive = false;
 
-    /** @property {HTMLElement} - Region comment button element */
-    private regionButtonElement: HTMLElement = new HTMLButtonElement();
-
     /**
      * [constructor]
      *
@@ -42,11 +39,13 @@ export default class AnnotationControls {
      * @return {void}
      */
     private handleRegionClick = (onRegionClick: Function) => (event: MouseEvent): void => {
+        const regionButtonElement = event.srcElement as HTMLButtonElement;
+
         this.isRegionActive = !this.isRegionActive;
         if (this.isRegionActive) {
-            this.regionButtonElement.classList.add(CLASS_BUTTON_ACTIVE);
+            regionButtonElement.classList.add(CLASS_BUTTON_ACTIVE);
         } else {
-            this.regionButtonElement.classList.remove(CLASS_BUTTON_ACTIVE);
+            regionButtonElement.classList.remove(CLASS_BUTTON_ACTIVE);
         }
 
         onRegionClick({ isRegionActive: this.isRegionActive, event });
@@ -60,7 +59,7 @@ export default class AnnotationControls {
      */
     public init({ onRegionClick = noop }: Options = {}): void {
         const groupElement = this.controls.addGroup(CLASS_ANNOTATIONS_GROUP);
-        this.regionButtonElement = this.controls.add(
+        this.controls.add(
             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
             // @ts-ignore
             __('region_comment'),
diff --git a/src/lib/__tests__/AnnotationControls-test.js b/src/lib/__tests__/AnnotationControls-test.js
index b097650eca..bd4a2b5619 100644
--- a/src/lib/__tests__/AnnotationControls-test.js
+++ b/src/lib/__tests__/AnnotationControls-test.js
@@ -61,20 +61,19 @@ describe('lib/AnnotationControls', () => {
 
     describe('handleRegionClick()', () => {
         beforeEach(() => {
-            stubs.event = sandbox.stub({});
             stubs.classListAdd = sandbox.stub();
             stubs.classListRemove = sandbox.stub();
-            stubs.add = sandbox.stub(annotationControls.controls, 'add').returns({
-                classList: {
-                    add: stubs.classListAdd,
-                    remove: stubs.classListRemove,
+            stubs.event = sandbox.stub({
+                target: {
+                    classList: {
+                        add: stubs.classListAdd,
+                        remove: stubs.classListRemove,
+                    },
                 },
             });
         });
 
         it('should activate region button then deactivate', () => {
-            annotationControls.init({ onRegionClick: stubs.onRegionClick });
-
             expect(annotationControls.isRegionActive).to.be.false;
 
             annotationControls.handleRegionClick(stubs.onRegionClick)(stubs.event);
@@ -87,7 +86,6 @@ describe('lib/AnnotationControls', () => {
         });
 
         it('should call onRegionClick', () => {
-            annotationControls.init({ onRegionClick: stubs.onRegionClick });
             annotationControls.handleRegionClick(stubs.onRegionClick)(stubs.event);
 
             expect(stubs.onRegionClick).to.be.calledWith({