86 lines
1.7 KiB
JavaScript
86 lines
1.7 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import * as stateActions from '../redux/stateActions';
|
|
|
|
class HiddenPeers extends Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
this.state = { className: '' };
|
|
}
|
|
|
|
componentDidUpdate(prevProps)
|
|
{
|
|
const { hiddenPeersCount } = this.props;
|
|
|
|
if (hiddenPeersCount !== prevProps.hiddenPeersCount)
|
|
{
|
|
// eslint-disable-next-line react/no-did-update-set-state
|
|
this.setState({ className: 'pulse' }, () =>
|
|
{
|
|
if (this.timeout)
|
|
{
|
|
clearTimeout(this.timeout);
|
|
}
|
|
|
|
this.timeout = setTimeout(() =>
|
|
{
|
|
this.setState({ className: '' });
|
|
}, 1000);
|
|
});
|
|
}
|
|
}
|
|
|
|
render()
|
|
{
|
|
const {
|
|
hiddenPeersCount,
|
|
openUsersTab
|
|
} = this.props;
|
|
|
|
return (
|
|
<div
|
|
data-component='HiddenPeers'
|
|
className={this.state.className}
|
|
onMouseOver={this.handleMouseOver}
|
|
onMouseOut={this.handleMouseOut}
|
|
>
|
|
<div data-component='HiddenPeersView'>
|
|
<div className={classnames('view-container', this.state.className)} onClick={() => openUsersTab()}>
|
|
<p>+{hiddenPeersCount} <br /> participant
|
|
{(hiddenPeersCount === 1) ? null : 's'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
HiddenPeers.propTypes =
|
|
{
|
|
hiddenPeersCount : PropTypes.number,
|
|
openUsersTab : PropTypes.func.isRequired
|
|
};
|
|
|
|
const mapDispatchToProps = (dispatch) =>
|
|
{
|
|
return {
|
|
openUsersTab : () =>
|
|
{
|
|
dispatch(stateActions.openToolArea());
|
|
dispatch(stateActions.setToolTab('users'));
|
|
}
|
|
};
|
|
};
|
|
|
|
const HiddenPeersContainer = connect(
|
|
null,
|
|
mapDispatchToProps
|
|
)(HiddenPeers);
|
|
|
|
export default HiddenPeersContainer;
|