aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-07-04 00:06:29 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-07-04 00:06:29 +0800
commitafbfc8ba1c8d4bf812e3087db50c6a9dd786be79 (patch)
treebef69c4e4d1cf43441aa43f7127cbd9db2c08c61 /packages/website/ts/components
parentf2af6e4b3ae71abdd068a88bd5d686970649fe8d (diff)
downloaddexon-sol-tools-afbfc8ba1c8d4bf812e3087db50c6a9dd786be79.tar
dexon-sol-tools-afbfc8ba1c8d4bf812e3087db50c6a9dd786be79.tar.gz
dexon-sol-tools-afbfc8ba1c8d4bf812e3087db50c6a9dd786be79.tar.bz2
dexon-sol-tools-afbfc8ba1c8d4bf812e3087db50c6a9dd786be79.tar.lz
dexon-sol-tools-afbfc8ba1c8d4bf812e3087db50c6a9dd786be79.tar.xz
dexon-sol-tools-afbfc8ba1c8d4bf812e3087db50c6a9dd786be79.tar.zst
dexon-sol-tools-afbfc8ba1c8d4bf812e3087db50c6a9dd786be79.zip
Implement clickaway for wallet menu on mobile
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/ui/drop_down.tsx32
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx6
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 (