diff options
Diffstat (limited to 'packages/website/ts/components/ui')
| -rw-r--r-- | packages/website/ts/components/ui/container.tsx | 8 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/drop_down.tsx | 43 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/overlay.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/popover.tsx | 59 |
4 files changed, 28 insertions, 84 deletions
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> - ); - } -} |