You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.5 KiB
60 lines
1.5 KiB
import React, { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import classnames from 'classnames'
|
|
import {
|
|
STATUS_CONNECTED,
|
|
STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
|
|
STATUS_NOT_CONNECTED,
|
|
} from '../../../helpers/constants/connected-sites'
|
|
|
|
export default class ConnectedStatusIndicator extends Component {
|
|
static contextTypes = {
|
|
t: PropTypes.func,
|
|
}
|
|
|
|
static propTypes = {
|
|
status: PropTypes.oneOf([ STATUS_CONNECTED, STATUS_CONNECTED_TO_ANOTHER_ACCOUNT, STATUS_NOT_CONNECTED ]),
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
static defaultProps = {
|
|
status: STATUS_NOT_CONNECTED,
|
|
onClick: null,
|
|
}
|
|
|
|
renderStatusCircle = () => {
|
|
const { status } = this.props
|
|
|
|
return (
|
|
<div
|
|
className={classnames({
|
|
'connected-status-indicator__green-circle': status === STATUS_CONNECTED,
|
|
'connected-status-indicator__yellow-circle': status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
|
|
'connected-status-indicator__grey-circle': status === STATUS_NOT_CONNECTED,
|
|
})}
|
|
/>
|
|
)
|
|
}
|
|
|
|
renderStatusText = () => {
|
|
const { t } = this.context
|
|
const { status } = this.props
|
|
|
|
const text = status === STATUS_CONNECTED
|
|
? t('statusConnected')
|
|
: t('statusNotConnected')
|
|
|
|
return (
|
|
<div className="connected-status-indicator__text">{ text }</div>
|
|
)
|
|
}
|
|
|
|
render () {
|
|
return (
|
|
<button className="connected-status-indicator" onClick={this.props.onClick}>
|
|
{ this.renderStatusCircle() }
|
|
{ this.renderStatusText() }
|
|
</button>
|
|
)
|
|
}
|
|
}
|
|
|