Have new Popover component working in React 16

7 files changed, 84 insertions, 34 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}