aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-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, 84 insertions, 39 deletions
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 806eaeea5..0a5c61776 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -61,8 +61,6 @@ 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 8580c3a6e..3eef17746 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -276,8 +276,6 @@ 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 f2ae68b70..cf3ec41f2 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?: string;
- left?: string;
- right?: string;
- bottom?: string;
+ top?: StringOrNum;
+ left?: StringOrNum;
+ right?: StringOrNum;
+ bottom?: StringOrNum;
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 752c92e02..638b29f88 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 { MaterialUIPosition } from 'ts/types';
+import { Placement } from 'react-popper';
+import { Popover } from 'ts/components/ui/popover';
const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
const DEFAULT_STYLE = {
@@ -15,8 +15,7 @@ export enum DropdownMouseEvent {
export interface DropDownProps {
activeNode: React.ReactNode;
popoverContent: React.ReactNode;
- anchorOrigin: MaterialUIPosition;
- targetOrigin: MaterialUIPosition;
+ placement?: Placement;
style?: React.CSSProperties;
zDepth?: number;
activateEvent?: DropdownMouseEvent;
@@ -33,8 +32,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
public static defaultProps: Partial<DropDownProps> = {
style: DEFAULT_STYLE,
zDepth: 1,
- activateEvent: DropdownMouseEvent.Hover,
- closeEvent: DropdownMouseEvent.Hover,
+ activateEvent: DropdownMouseEvent.Click,
+ closeEvent: DropdownMouseEvent.Click,
};
private _popoverCloseCheckIntervalId: number;
public static getDerivedStateFromProps(props: DropDownProps, state: DropDownState): Partial<DropDownState> {
@@ -70,24 +69,22 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
onMouseLeave={this._onHoverOff.bind(this)}
>
<div onClick={this._onActiveNodeClick.bind(this)}>{this.props.activeNode}</div>
- <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)}
+ {this.state.isDropDownOpen &&
+ <Popover
+ anchorEl={this.state.anchorEl}
+ placement={this.props.placement}
+ onRequestClose={this._closePopover.bind(this)}
+ zIndex={this.props.zDepth}
>
- {this.props.popoverContent}
- </div>
- </Popover>
+ <div
+ onMouseEnter={this._onHover.bind(this)}
+ onMouseLeave={this._onHoverOff.bind(this)}
+ onClick={this._closePopover.bind(this)}
+ >
+ {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 fc7507475..cb68aeca1 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';
+Overlay.displayName = 'Overlay'; \ No newline at end of file
diff --git a/packages/website/ts/components/ui/popover.tsx b/packages/website/ts/components/ui/popover.tsx
new file mode 100644
index 000000000..66c0ac663
--- /dev/null
+++ b/packages/website/ts/components/ui/popover.tsx
@@ -0,0 +1,59 @@
+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 6abaa840b..968377010 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -234,8 +234,6 @@ 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 c637171dd..e76fae932 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -492,11 +492,6 @@ 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 (git 2.34.1) at 2024-11-20 04:04:44 +0800