2019-02-26 15:22:12 +01:00
|
|
|
import React, { PureComponent } from 'react'
|
2019-03-01 20:21:00 +01:00
|
|
|
import { Manager, Reference, Popper } from 'react-popper'
|
2019-02-26 15:22:12 +01:00
|
|
|
import AccountPopover from './Popover'
|
|
|
|
import AccountIndicator from './Indicator'
|
|
|
|
|
|
|
|
interface AccountStatusProps {
|
|
|
|
className?: string
|
|
|
|
}
|
|
|
|
|
|
|
|
interface AccountStatusState {
|
2019-02-27 00:26:53 +01:00
|
|
|
isPopoverOpen: boolean
|
2019-02-26 15:22:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class AccountStatus extends PureComponent<
|
|
|
|
AccountStatusProps,
|
|
|
|
AccountStatusState
|
|
|
|
> {
|
|
|
|
public state = {
|
2019-02-27 00:26:53 +01:00
|
|
|
isPopoverOpen: false
|
2019-02-26 15:22:12 +01:00
|
|
|
}
|
|
|
|
|
2019-02-27 00:26:53 +01:00
|
|
|
public togglePopover() {
|
|
|
|
this.setState(prevState => ({
|
|
|
|
isPopoverOpen: !prevState.isPopoverOpen
|
|
|
|
}))
|
2019-02-26 15:22:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
public render() {
|
|
|
|
return (
|
2019-03-01 20:21:00 +01:00
|
|
|
<Manager>
|
|
|
|
<Reference>
|
|
|
|
{({ ref }) => (
|
|
|
|
<AccountIndicator
|
|
|
|
togglePopover={() => this.togglePopover()}
|
|
|
|
className={this.props.className}
|
|
|
|
forwardedRef={ref}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</Reference>
|
|
|
|
{this.state.isPopoverOpen && (
|
|
|
|
<Popper placement="auto">
|
2019-03-04 15:46:02 +01:00
|
|
|
{({ ref, style, placement }) => (
|
2019-03-01 20:21:00 +01:00
|
|
|
<AccountPopover
|
|
|
|
forwardedRef={ref}
|
|
|
|
style={style}
|
|
|
|
data-placement={placement}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</Popper>
|
2019-02-27 00:26:53 +01:00
|
|
|
)}
|
2019-03-01 20:21:00 +01:00
|
|
|
</Manager>
|
2019-02-26 15:22:12 +01:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|