import React from 'react' import PropTypes from 'prop-types' import { useTranslation } from 'react-i18next' import { Dropdown, MenuItem, OverlayTrigger, Tooltip } from 'react-bootstrap' import Icon from '../../../shared/components/icon' import { getHueForUserId } from '../../../shared/utils/colors' import ControlledDropdown from '../../../shared/components/controlled-dropdown' function OnlineUsersWidget({ onlineUsers, goToUser }) { const { t } = useTranslation() const shouldDisplayDropdown = onlineUsers.length >= 4 if (shouldDisplayDropdown) { return ( {t('connected_users')} {onlineUsers.map((user, index) => ( ))} ) } else { return (
{onlineUsers.map((user, index) => ( {user.name}} > {/* OverlayTrigger won't fire unless UserIcon is wrapped in a span */} ))}
) } } OnlineUsersWidget.propTypes = { onlineUsers: PropTypes.arrayOf( PropTypes.shape({ user_id: PropTypes.string.isRequired, name: PropTypes.string.isRequired, }) ).isRequired, goToUser: PropTypes.func.isRequired, } function UserIcon({ user, showName, onClick }) { const backgroundColor = `hsl(${getHueForUserId(user.user_id)}, 70%, 50%)` function handleOnClick() { onClick(user) } return ( // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions {user.name.slice(0, 1)} {showName && user.name} ) } UserIcon.propTypes = { user: PropTypes.shape({ user_id: PropTypes.string.isRequired, name: PropTypes.string.isRequired, }), showName: PropTypes.bool, onClick: PropTypes.func.isRequired, } const DropDownToggleButton = React.forwardRef((props, ref) => { const { t } = useTranslation() return ( {t('connected_users')} } > ) }) DropDownToggleButton.displayName = 'DropDownToggleButton' DropDownToggleButton.propTypes = { onlineUserCount: PropTypes.number.isRequired, onClick: PropTypes.func, } export default OnlineUsersWidget