diff options
Diffstat (limited to 'packages/website/ts/components/ui/drop_down.tsx')
-rw-r--r-- | packages/website/ts/components/ui/drop_down.tsx | 43 |
1 files changed, 20 insertions, 23 deletions
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> ); } |