aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx2
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx2
-rw-r--r--packages/website/ts/components/ui/container.tsx8
-rw-r--r--packages/website/ts/components/ui/drop_down.tsx43
-rw-r--r--packages/website/ts/components/ui/overlay.tsx2
-rw-r--r--packages/website/ts/components/ui/popover.tsx59
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx2
-rw-r--r--packages/website/ts/types.ts5
8 files changed, 39 insertions, 84 deletions
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 0a5c61776..806eaeea5 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -61,6 +61,8 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
<DropDown
activeNode={activeNode}
popoverContent={this._renderPopoverContent()}
+ anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
+ targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
zDepth={1}
/>
</div>
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 3eef17746..8580c3a6e 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -276,6 +276,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<DropDown
activeNode={activeNode}
popoverContent={popoverContent}
+ anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
+ targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
style={styles.menuItem}
/>
<TopBarMenuItem
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index cf3ec41f2..f2ae68b70 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -26,10 +26,10 @@ export interface ContainerProps {
className?: string;
position?: 'absolute' | 'fixed' | 'relative' | 'unset';
display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
- top?: StringOrNum;
- left?: StringOrNum;
- right?: StringOrNum;
- bottom?: StringOrNum;
+ top?: string;
+ left?: string;
+ right?: string;
+ bottom?: string;
zIndex?: number;
Tag?: ContainerTag;
cursor?: string;
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 638b29f88..752c92e02 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -1,6 +1,6 @@
+import Popover from 'material-ui/Popover';
import * as React from 'react';
-import { Placement } from 'react-popper';
-import { Popover } from 'ts/components/ui/popover';
+import { MaterialUIPosition } from 'ts/types';
const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
const DEFAULT_STYLE = {
@@ -15,7 +15,8 @@ export enum DropdownMouseEvent {
export interface DropDownProps {
activeNode: React.ReactNode;
popoverContent: React.ReactNode;
- placement?: Placement;
+ anchorOrigin: MaterialUIPosition;
+ targetOrigin: MaterialUIPosition;
style?: React.CSSProperties;
zDepth?: number;
activateEvent?: DropdownMouseEvent;
@@ -32,8 +33,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
public static defaultProps: Partial<DropDownProps> = {
style: DEFAULT_STYLE,
zDepth: 1,
- activateEvent: DropdownMouseEvent.Click,
- closeEvent: DropdownMouseEvent.Click,
+ activateEvent: DropdownMouseEvent.Hover,
+ closeEvent: DropdownMouseEvent.Hover,
};
private _popoverCloseCheckIntervalId: number;
public static getDerivedStateFromProps(props: DropDownProps, state: DropDownState): Partial<DropDownState> {
@@ -69,22 +70,24 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
onMouseLeave={this._onHoverOff.bind(this)}
>
<div onClick={this._onActiveNodeClick.bind(this)}>{this.props.activeNode}</div>
- {this.state.isDropDownOpen &&
- <Popover
- anchorEl={this.state.anchorEl}
- placement={this.props.placement}
- onRequestClose={this._closePopover.bind(this)}
- zIndex={this.props.zDepth}
+ <Popover
+ open={this.state.isDropDownOpen}
+ anchorEl={this.state.anchorEl}
+ anchorOrigin={this.props.anchorOrigin}
+ targetOrigin={this.props.targetOrigin}
+ onRequestClose={this._closePopover.bind(this)}
+ useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
+ animated={false}
+ zDepth={this.props.zDepth}
+ >
+ <div
+ onMouseEnter={this._onHover.bind(this)}
+ onMouseLeave={this._onHoverOff.bind(this)}
+ onClick={this._closePopover.bind(this)}
>
- <div
- onMouseEnter={this._onHover.bind(this)}
- onMouseLeave={this._onHoverOff.bind(this)}
- onClick={this._closePopover.bind(this)}
- >
- {this.props.popoverContent}
- </div>
- </Popover>
- }
+ {this.props.popoverContent}
+ </div>
+ </Popover>
</div>
);
}
diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx
index cb68aeca1..fc7507475 100644
--- a/packages/website/ts/components/ui/overlay.tsx
+++ b/packages/website/ts/components/ui/overlay.tsx
@@ -29,4 +29,4 @@ Overlay.defaultProps = {
onClick: _.noop.bind(_),
};
-Overlay.displayName = 'Overlay'; \ No newline at end of file
+Overlay.displayName = 'Overlay';
diff --git a/packages/website/ts/components/ui/popover.tsx b/packages/website/ts/components/ui/popover.tsx
deleted file mode 100644
index 66c0ac663..000000000
--- a/packages/website/ts/components/ui/popover.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { Placement, Popper, PopperChildrenProps } from 'react-popper';
-
-import { colors } from '@0xproject/react-shared';
-import { Container } from 'ts/components/ui/container';
-import { Overlay } from 'ts/components/ui/overlay';
-import { styled } from 'ts/style/theme';
-
-export interface PopoverProps {
- anchorEl: HTMLInputElement;
- placement?: Placement;
- onRequestClose?: () => void;
- zIndex?: number;
-}
-
-const PopoverContainer = styled.div`
- background-color: ${colors.white};
- max-height: 679px;
- overflow-y: auto;
- border-radius: 2px;
-`;
-
-const defaultPlacement: Placement = 'bottom';
-
-export class Popover extends React.Component<PopoverProps> {
- public static defaultProps = {
- placement: defaultPlacement,
- };
-
- public render(): React.ReactNode {
- const { anchorEl, placement, zIndex, onRequestClose } = this.props;
- const overlayStyleOverrides = {
- zIndex,
- backgroundColor: 'transparent',
- };
- return (
- <div>
- <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/>
- <Popper referenceElement={anchorEl} placement="bottom" eventsEnabled={true}>
- {this._renderPopperChildren.bind(this)}
- </Popper>
- </div>
- );
- }
- private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
- const popperContainerStyleOverrids = {
- zIndex: _.isUndefined(this.props.zIndex) ? undefined : this.props.zIndex + 1,
- };
- return (
- <div ref={props.ref} style={{...props.style, ...popperContainerStyleOverrids}}>
- <PopoverContainer>
- {this.props.children}
- </PopoverContainer>
- </div>
- );
- }
-}
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 968377010..6abaa840b 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -234,6 +234,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
{!isMobile && <GoToAccountManagementSimpleMenuItem />}
</SimpleMenu>
}
+ anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+ targetOrigin={{ horizontal: 'right', vertical: 'top' }}
zDepth={1}
activateEvent={DropdownMouseEvent.Click}
closeEvent={DropdownMouseEvent.Click}
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index e76fae932..c637171dd 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -492,6 +492,11 @@ export enum Deco {
Upper,
}
+export interface MaterialUIPosition {
+ vertical: 'bottom' | 'top' | 'center';
+ horizontal: 'left' | 'middle' | 'right';
+}
+
export enum Providers {
Parity = 'PARITY',
Metamask = 'METAMASK',
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-06 13:18:18 +0800