Implement clickaway for wallet menu on mobile

1 files changed, 20 insertions, 12 deletions

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({