diff options
| author | fragosti <francesco.agosti93@gmail.com> | 2018-08-29 04:53:49 +0800 |
|---|---|---|
| committer | fragosti <francesco.agosti93@gmail.com> | 2018-08-29 04:53:49 +0800 |
| commit | ac1640140c9279ac9e8a92d84702a2f84d9165fb (patch) | |
| tree | eaa9eeb9eb01b0e9eab0f9be0d403d4ed0b08af0 | |
| parent | 5785ec0713c39466b3a6a171f5f0a2d38207b44b (diff) | |
| download | dexon-sol-tools-ac1640140c9279ac9e8a92d84702a2f84d9165fb.tar.gz dexon-sol-tools-ac1640140c9279ac9e8a92d84702a2f84d9165fb.tar.zst dexon-sol-tools-ac1640140c9279ac9e8a92d84702a2f84d9165fb.zip | |
Enable hovering state for dropdown
| -rw-r--r-- | packages/website/ts/components/ui/drop_down.tsx | 13 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/popover.tsx | 3 | ||||
| -rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 1 |
3 files changed, 10 insertions, 7 deletions
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 638b29f88..32105d353 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -32,8 +32,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> { @@ -77,8 +77,6 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { zIndex={this.props.zDepth} > <div - onMouseEnter={this._onHover.bind(this)} - onMouseLeave={this._onHoverOff.bind(this)} onClick={this._closePopover.bind(this)} > {this.props.popoverContent} @@ -97,10 +95,13 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { } } private _onHover(event: React.FormEvent<HTMLInputElement>): void { - this.setState({ isHovering: true }); + this.setState({ + isHovering: true, + anchorEl: event.currentTarget, + }); } private _onHoverOff(): void { - this.setState({ isHovering: false }); + this.setState({ isHovering: false, anchorEl: undefined }); } private _checkIfShouldClosePopover(): void { if (!this.state.isDropDownOpen) { diff --git a/packages/website/ts/components/ui/popover.tsx b/packages/website/ts/components/ui/popover.tsx index 66c0ac663..556e8b110 100644 --- a/packages/website/ts/components/ui/popover.tsx +++ b/packages/website/ts/components/ui/popover.tsx @@ -20,6 +20,7 @@ const PopoverContainer = styled.div` max-height: 679px; overflow-y: auto; border-radius: 2px; + box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; `; const defaultPlacement: Placement = 'bottom'; @@ -37,7 +38,7 @@ export class Popover extends React.Component<PopoverProps> { }; return ( <div> - <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/> + {/* <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/> */} <Popper referenceElement={anchorEl} placement="bottom" eventsEnabled={true}> {this._renderPopperChildren.bind(this)} </Popper> diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 968377010..191f3a18a 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -235,6 +235,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { </SimpleMenu> } zDepth={1} + placement="right-end" activateEvent={DropdownMouseEvent.Click} closeEvent={DropdownMouseEvent.Click} /> |