Implement clickaway for wallet menu on mobile

2 files changed, 24 insertions, 14 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({
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 875e6e78d..b891f873a 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -10,7 +10,7 @@ import firstBy = require('thenby');
 import { Blockchain } from 'ts/blockchain';
 import { AccountConnection } from 'ts/components/ui/account_connection';
 import { Container } from 'ts/components/ui/container';
-import { DropDown } from 'ts/components/ui/drop_down';
+import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
 import { IconButton } from 'ts/components/ui/icon_button';
 import { Identicon } from 'ts/components/ui/identicon';
 import { Island } from 'ts/components/ui/island';
@@ -194,6 +194,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         );
     }
     private _renderConnectedHeaderRows(): React.ReactElement<{}> {
+        const isMobile = this.props.screenWidth === ScreenWidths.Sm;
         const userAddress = this.props.userAddress;
         const accountState = this._getAccountState();
         const main = (
@@ -234,7 +235,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
                 targetOrigin={{ horizontal: 'right', vertical: 'top' }}
                 zDepth={1}
-                shouldWaitForClickToActivate={true}
+                activateEvent={DropdownMouseEvent.Click}
+                closeEvent={isMobile ? DropdownMouseEvent.Click : DropdownMouseEvent.Hover}
             />
         );
         return (