feat(controls): Code review feedback

box · Nov 3, 2020 · 318013a · 318013a
1 parent ef2340d
commit 318013a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 14 deletions.
diff --git a/src/lib/viewers/controls/controls-layer/ControlsLayer.scss b/src/lib/viewers/controls/controls-layer/ControlsLayer.scss
@@ -1,5 +1,3 @@
-@import 'node_modules/box-ui-elements/es/styles/variables';
-
 .bp-ControlsLayer {
     display: flex;
     opacity: 0;

diff --git a/src/lib/viewers/controls/controls-layer/ControlsLayer.tsx b/src/lib/viewers/controls/controls-layer/ControlsLayer.tsx
@@ -24,7 +24,7 @@ export default function ControlsLayer({ children, onMount = noop }: Props): JSX.
     const hideTimeoutRef = React.useRef<number>();
 
     // Visibility helpers
-    const helpers = React.useRef({
+    const helpersRef = React.useRef({
         hide() {
             window.clearTimeout(hideTimeoutRef.current);
 
@@ -49,27 +49,27 @@ export default function ControlsLayer({ children, onMount = noop }: Props): JSX.
     // Event handlers
     const handleFocusIn = (): void => {
         hasFocusRef.current = true;
-        helpers.current.show();
+        helpersRef.current.show();
     };
 
     const handleFocusOut = (): void => {
         hasFocusRef.current = false;
-        helpers.current.hide();
+        helpersRef.current.hide();
     };
 
     const handleMouseEnter = (): void => {
         hasCursorRef.current = true;
-        helpers.current.show();
+        helpersRef.current.show();
     };
 
     const handleMouseLeave = (): void => {
         hasCursorRef.current = false;
-        helpers.current.hide();
+        helpersRef.current.hide();
     };
 
     // Expose helpers to parent
     React.useEffect(() => {
-        onMount(helpers.current);
+        onMount(helpersRef.current);
     }, [onMount]);
 
     return (

diff --git a/src/lib/viewers/controls/controls-root/ControlsRoot.tsx b/src/lib/viewers/controls/controls-root/ControlsRoot.tsx
@@ -48,13 +48,13 @@ export default class ControlsRoot {
     }, 100);
 
     destroy(): void {
-        if (!this.containerEl) {
-            return;
-        }
+        ReactDOM.unmountComponentAtNode(this.controlsEl);
 
-        this.containerEl.removeEventListener('mousemove', this.handleMouseMove);
-        this.containerEl.removeEventListener('touchstart', this.handleMouseMove);
-        this.containerEl.removeChild(this.controlsEl);
+        if (this.containerEl) {
+            this.containerEl.removeEventListener('mousemove', this.handleMouseMove);
+            this.containerEl.removeEventListener('touchstart', this.handleMouseMove);
+            this.containerEl.removeChild(this.controlsEl);
+        }
     }
 
     disable(): void {