From afbfc8ba1c8d4bf812e3087db50c6a9dd786be79 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 3 Jul 2018 09:06:29 -0700
Subject: Implement clickaway for wallet menu on mobile

---
 packages/website/ts/components/ui/drop_down.tsx | 32 +++++++++++++++----------
 1 file changed, 20 insertions(+), 12 deletions(-)

(limited to 'packages/website/ts/components/ui/drop_down.tsx')

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index c21c69993..4d5caef08 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -7,14 +7,20 @@ const DEFAULT_STYLE = {
     fontSize: 14,
 };
 
-interface DropDownProps {
+export enum DropdownMouseEvent {
+    Hover = 'hover',
+    Click = 'click',
+}
+
+export interface DropDownProps {
     activeNode: React.ReactNode;
     popoverContent: React.ReactNode;
     anchorOrigin: MaterialUIPosition;
     targetOrigin: MaterialUIPosition;
     style?: React.CSSProperties;
     zDepth?: number;
-    shouldWaitForClickToActivate?: boolean;
+    activateEvent?: DropdownMouseEvent;
+    closeEvent?: DropdownMouseEvent;
 }
 
 interface DropDownState {
@@ -26,7 +32,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
-        shouldWaitForClickToActivate: false,
+        activateEvent: DropdownMouseEvent.Hover,
+        closeEvent: DropdownMouseEvent.Hover,
     };
     private _isHovering: boolean;
     private _popoverCloseCheckIntervalId: number;
@@ -67,7 +74,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                     anchorOrigin={this.props.anchorOrigin}
                     targetOrigin={this.props.targetOrigin}
                     onRequestClose={this._closePopover.bind(this)}
-                    useLayerForClickAway={false}
+                    useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
                     animated={false}
                     zDepth={this.props.zDepth}
                 >
@@ -83,7 +90,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         );
     }
     private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void {
-        if (this.props.shouldWaitForClickToActivate) {
+        if (this.props.activateEvent === DropdownMouseEvent.Click) {
             this.setState({
                 isDropDownOpen: true,
                 anchorEl: event.currentTarget,
@@ -92,28 +99,29 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     }
     private _onHover(event: React.FormEvent<HTMLInputElement>): void {
         this._isHovering = true;
-        if (!this.props.shouldWaitForClickToActivate) {
+        if (this.props.activateEvent === DropdownMouseEvent.Hover) {
             this._checkIfShouldOpenPopover(event);
         }
     }
+    private _onHoverOff(): void {
+        this._isHovering = false;
+    }
     private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void {
         if (this.state.isDropDownOpen) {
             return; // noop
         }
-
         this.setState({
             isDropDownOpen: true,
             anchorEl: event.currentTarget,
         });
     }
-    private _onHoverOff(): void {
-        this._isHovering = false;
-    }
     private _checkIfShouldClosePopover(): void {
-        if (!this.state.isDropDownOpen || this._isHovering) {
+        if (!this.state.isDropDownOpen) {
             return; // noop
         }
-        this._closePopover();
+        if (this.props.closeEvent === DropdownMouseEvent.Hover && !this._isHovering) {
+            this._closePopover();
+        }
     }
     private _closePopover(): void {
         this.setState({
-- 
cgit v1.2.3