Mini app/smarter drop down (#35)

Author: MykolaGolubyev

package-lock.json

@@ -22,8 +22,8 @@
     "build/lib"
   ],
   "dependencies": {
-    "react": "^16.4.0",
-    "react-dom": "^16.4.0",
+    "react": "16.8.5",
+    "react-dom": "16.8.5",
     "url-search-params-polyfill": "^5.1.0"
   },
   "scripts": {
@@ -36,9 +36,9 @@
   },
   "devDependencies": {
     "@types/jest": "^22.1.0",
-    "@types/node": "^9.4.0",
-    "@types/react": "^16.0.35",
-    "@types/react-dom": "^16.0.3",
+    "@types/node": "^11.13.0",
+    "@types/react": "^16.8.10",
+    "@types/react-dom": "^16.8.3",
     "cpx": "^1.5.0",
     "jest": "^22.4.3",
     "jest-cli": "^24.7.1",

package.json

@@ -44,4 +44,9 @@
 
 .rcv-toolbar-drop-down-selection-item:hover {
     background-color: #eee;
+}
+
+.rcv-toolbar-drop-down-selection-placement {
+    position: fixed;
+    margin-top: 24px;
 }

src/components/viewer/toolbar/ToolbarDropDown.css

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import { ToolbarDropDownSelectionPlacement } from './ToolbarDropDownSelectionPlacement';
 import { ToolbarDropDownSelectionItem } from './ToolbarDropDownSelectionItem';
 
 import { DropDown } from '../dropdown/DropDown';
@@ -24,6 +23,7 @@ export class ToolbarDropDown extends React.Component<Props, State> {
     };
 
     private selectedLabelNode: HTMLElement;
+    private dropDownNode: HTMLElement;
 
     render() {
         const {dropDown} = this.props;
@@ -37,6 +37,14 @@ export class ToolbarDropDown extends React.Component<Props, State> {
         );
     }
 
+    componentDidMount() {
+        document.addEventListener('mousedown', this.onGlobalClick);
+    }
+
+    componentWillUnmount() {
+        document.addEventListener('mouseup', this.onGlobalClick);
+    }
+
     private saveSelectedLabelNode = (node: HTMLDivElement) => {
         this.selectedLabelNode = node;
     }
@@ -52,15 +60,32 @@ export class ToolbarDropDown extends React.Component<Props, State> {
         const {dropDown} = this.props;
 
         return (
-            <ToolbarDropDownSelectionPlacement parent={this.selectedLabelNode}>
+            <div
+                className="rcv-toolbar-drop-down-selection-placement"
+                style={this.dropDownSelectionStyle()}
+                ref={this.saveDropDownNode}
+            >
                 <div className="rcv-toolbar-drop-down-selection">
                     {dropDown.items.map(item =>
                         <ToolbarDropDownSelectionItem key={item.label} item={item} onItemSelect={this.onItemSelect}/>)}
                 </div>
-            </ToolbarDropDownSelectionPlacement>
+            </div>
         );
     }
 
+    private saveDropDownNode = (node: HTMLDivElement) => {
+        this.dropDownNode = node;
+    }
+
+    private dropDownSelectionStyle = () => {
+        const pos = this.selectedLabelNode.getBoundingClientRect();
+
+        return {
+            left: pos.left,
+            top: pos.top
+        };
+    }
+
     private onItemSelect = (itemLabel: string) => {
         const {dropDown, onItemSelect} = this.props;
 
@@ -100,4 +125,17 @@ export class ToolbarDropDown extends React.Component<Props, State> {
     private toggleSelection = () => {
         this.setState(prev => ({selectionVisible: !prev.selectionVisible}));
     }
+
+    private hideSelection = () => {
+        this.setState({selectionVisible: false});
+    }
+
+    private onGlobalClick = (e: any) => {
+        if (this.dropDownNode &&
+            this.selectedLabelNode &&
+            !this.dropDownNode.contains(e.target) &&
+            !this.selectedLabelNode.contains(e.target)) {
+            this.hideSelection();
+        }
+    }
 }

src/components/viewer/toolbar/ToolbarDropDown.tsx

@@ -29,7 +29,6 @@
             "static-before-instance",
             "variables-before-functions"
         ],
-        "no-any": true,
         "no-arg": true,
         "no-bitwise": true,
         "no-console": [