bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/connection-status/status-helper/component.jsx
2022-02-15 15:54:55 +00:00

90 lines
2.1 KiB
JavaScript

import React, { Fragment, PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import Styled from './styles';
import { withModalMounter } from '/imports/ui/components/common/modal/service';
import Icon from '/imports/ui/components/connection-status/icon/component';
import SettingsMenuContainer from '/imports/ui/components/settings/container';
const intlMessages = defineMessages({
label: {
id: 'app.connection-status.label',
description: 'Connection status label',
},
settings: {
id: 'app.connection-status.settings',
description: 'Connection settings label',
},
});
class ConnectionStatusIcon extends PureComponent {
renderIcon(level = 'normal') {
return(
<Styled.IconWrapper>
<Icon
level={level}
grayscale
/>
</Styled.IconWrapper>
);
}
openAdjustSettings() {
const {
closeModal,
mountModal,
} = this.props;
closeModal();
mountModal(<SettingsMenuContainer selectedTab={2} />);
}
render() {
const {
intl,
stats,
} = this.props;
let color;
switch (stats) {
case 'warning':
color = 'success';
break;
case 'danger':
color = 'warning';
break;
case 'critical':
color = 'danger';
break;
default:
color = 'success';
}
const level = stats ? stats : 'normal';
return (
<Fragment>
<Styled.StatusIconWrapper color={color}>
{this.renderIcon(level)}
</Styled.StatusIconWrapper>
<Styled.Label>
{intl.formatMessage(intlMessages.label)}
</Styled.Label>
{level === 'critical' || level === 'danger'
&& (
<div>
<Styled.Settings
onClick={this.openAdjustSettings.bind(this)}
role="button"
>
{intl.formatMessage(intlMessages.settings)}
</Styled.Settings>
</div>
)
}
</Fragment>
);
}
}
export default withModalMounter(injectIntl(ConnectionStatusIcon));