123 lines
3.5 KiB
JavaScript
123 lines
3.5 KiB
JavaScript
import { h, Component, createRef } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
|
|
class ChannelButton extends Component {
|
|
buttonRef = createRef();
|
|
|
|
componentDidMount() {
|
|
const { isActiveChannel = false } = this.props;
|
|
|
|
if (isActiveChannel) {
|
|
this.buttonRef.current.click();
|
|
}
|
|
}
|
|
|
|
renderChannelImage = () => {
|
|
const { channel, newMessagesIndicator, discoverableChannel } = this.props;
|
|
|
|
return (
|
|
<span
|
|
data-channel-slug={channel.channel_modified_slug}
|
|
className={
|
|
discoverableChannel
|
|
? 'chatchanneltabindicator'
|
|
: `chatchanneltabindicator chatchanneltabindicator--${newMessagesIndicator}`
|
|
}
|
|
data-channel-id={channel.chat_channel_id}
|
|
>
|
|
<img
|
|
src={channel.channel_image}
|
|
alt="pic"
|
|
className={
|
|
channel.channel_type === 'direct'
|
|
? 'chatchanneltabindicatordirectimage'
|
|
: 'chatchanneltabindicatordirectimage invert-channel-image'
|
|
}
|
|
/>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
channel,
|
|
handleSwitchChannel,
|
|
otherClassname,
|
|
newMessagesIndicator,
|
|
isUnopened,
|
|
discoverableChannel,
|
|
triggerActiveContent,
|
|
} = this.props;
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
ref={this.buttonRef}
|
|
key={channel.id}
|
|
className="chatchanneltabbutton"
|
|
onClick={
|
|
discoverableChannel ? triggerActiveContent : handleSwitchChannel
|
|
}
|
|
data-content="sidecar-channel-request"
|
|
data-channel-id={channel.chat_channel_id}
|
|
data-channel-slug={channel.channel_modified_slug}
|
|
data-channel-status={channel.status}
|
|
data-channel-name={channel.channel_name}
|
|
>
|
|
<span
|
|
className={
|
|
discoverableChannel
|
|
? 'chatchanneltab chatchanneltab--inactive'
|
|
: `chatchanneltab ${otherClassname} chatchanneltab--${newMessagesIndicator}`
|
|
}
|
|
data-channel-id={channel.chat_channel_id}
|
|
data-content="sidecar-channel-request"
|
|
data-channel-slug={channel.channel_modified_slug}
|
|
data-channel-status={channel.status}
|
|
data-channel-name={channel.channel_name}
|
|
style={{
|
|
border: `1px solid ${channel.channel_color}`,
|
|
boxShadow: `3px 3px 0px ${channel.channel_color}`,
|
|
}}
|
|
>
|
|
{this.renderChannelImage()}
|
|
{isUnopened ? (
|
|
<span className="crayons-indicator crayons-indicator--accent crayons-indicator--bullet" />
|
|
) : (
|
|
''
|
|
)}
|
|
{channel.channel_name}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
}
|
|
|
|
ChannelButton.propTypes = {
|
|
channel: PropTypes.shape({
|
|
channel_name: PropTypes.string,
|
|
channel_color: PropTypes.string,
|
|
channel_type: PropTypes.string,
|
|
channel_modified_slug: PropTypes.string,
|
|
id: PropTypes.number,
|
|
chat_channel_id: PropTypes.number,
|
|
status: PropTypes.string,
|
|
channel_image: PropTypes.string,
|
|
}).isRequired,
|
|
discoverableChannel: PropTypes.bool,
|
|
handleSwitchChannel: PropTypes.func,
|
|
triggerActiveContent: PropTypes.func,
|
|
newMessagesIndicator: PropTypes.string,
|
|
otherClassname: PropTypes.string,
|
|
isUnopened: PropTypes.string,
|
|
};
|
|
|
|
ChannelButton.defaultProps = {
|
|
otherClassname: '',
|
|
isUnopened: '',
|
|
newMessagesIndicator: '',
|
|
discoverableChannel: false,
|
|
handleSwitchChannel: null,
|
|
triggerActiveContent: null,
|
|
};
|
|
export default ChannelButton;
|