88 lines
2.3 KiB
JavaScript
88 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import './RoomSelector.scss';
|
|
|
|
import colorMXID from '../../../util/colorMXID';
|
|
|
|
import Text from '../../atoms/text/Text';
|
|
import Avatar from '../../atoms/avatar/Avatar';
|
|
import NotificationBadge from '../../atoms/badge/NotificationBadge';
|
|
import { blurOnBubbling } from '../../atoms/button/script';
|
|
|
|
function RoomSelectorWrapper({
|
|
isSelected, onClick, content, options,
|
|
}) {
|
|
return (
|
|
<div className={`room-selector${isSelected ? ' room-selector--selected' : ''}`}>
|
|
<button
|
|
className="room-selector__content"
|
|
type="button"
|
|
onClick={onClick}
|
|
onMouseUp={(e) => blurOnBubbling(e, '.room-selector')}
|
|
>
|
|
{content}
|
|
</button>
|
|
<div className="room-selector__options">{options}</div>
|
|
</div>
|
|
);
|
|
}
|
|
RoomSelectorWrapper.defaultProps = {
|
|
options: null,
|
|
};
|
|
RoomSelectorWrapper.propTypes = {
|
|
isSelected: PropTypes.bool.isRequired,
|
|
onClick: PropTypes.func.isRequired,
|
|
content: PropTypes.node.isRequired,
|
|
options: PropTypes.node,
|
|
};
|
|
|
|
function RoomSelector({
|
|
name, roomId, imageSrc, iconSrc,
|
|
isSelected, isUnread, notificationCount, isAlert,
|
|
options, onClick,
|
|
}) {
|
|
return (
|
|
<RoomSelectorWrapper
|
|
isSelected={isSelected}
|
|
content={(
|
|
<>
|
|
<Avatar
|
|
text={name.slice(0, 1)}
|
|
bgColor={colorMXID(roomId)}
|
|
imageSrc={imageSrc}
|
|
iconSrc={iconSrc}
|
|
size="extra-small"
|
|
/>
|
|
<Text variant="b1">{name}</Text>
|
|
{ isUnread && (
|
|
<NotificationBadge
|
|
alert={isAlert}
|
|
content={notificationCount !== 0 ? notificationCount : null}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
options={options}
|
|
onClick={onClick}
|
|
/>
|
|
);
|
|
}
|
|
RoomSelector.defaultProps = {
|
|
imageSrc: null,
|
|
iconSrc: null,
|
|
options: null,
|
|
};
|
|
RoomSelector.propTypes = {
|
|
name: PropTypes.string.isRequired,
|
|
roomId: PropTypes.string.isRequired,
|
|
imageSrc: PropTypes.string,
|
|
iconSrc: PropTypes.string,
|
|
isSelected: PropTypes.bool.isRequired,
|
|
isUnread: PropTypes.bool.isRequired,
|
|
notificationCount: PropTypes.number.isRequired,
|
|
isAlert: PropTypes.bool.isRequired,
|
|
options: PropTypes.node,
|
|
onClick: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default RoomSelector;
|