mirror of
https://github.com/array-in-a-matrix/xinny.git
synced 2024-05-19 21:00:17 -04:00
50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import './SidebarAvatar.scss';
|
|
|
|
import Text from '../../atoms/text/Text';
|
|
import Tooltip from '../../atoms/tooltip/Tooltip';
|
|
import { blurOnBubbling } from '../../atoms/button/script';
|
|
|
|
const SidebarAvatar = React.forwardRef(
|
|
({ className, tooltip, active, onClick, onContextMenu, avatar, notificationBadge }, ref) => {
|
|
const classes = ['sidebar-avatar'];
|
|
if (active) classes.push('sidebar-avatar--active');
|
|
if (className) classes.push(className);
|
|
return (
|
|
<Tooltip content={<Text variant="b1">{tooltip}</Text>} placement="right">
|
|
<button
|
|
ref={ref}
|
|
className={classes.join(' ')}
|
|
type="button"
|
|
onMouseUp={(e) => blurOnBubbling(e, '.sidebar-avatar')}
|
|
onClick={onClick}
|
|
onContextMenu={onContextMenu}
|
|
>
|
|
{avatar}
|
|
{notificationBadge}
|
|
</button>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
);
|
|
SidebarAvatar.defaultProps = {
|
|
className: null,
|
|
active: false,
|
|
onClick: null,
|
|
onContextMenu: null,
|
|
notificationBadge: null,
|
|
};
|
|
|
|
SidebarAvatar.propTypes = {
|
|
className: PropTypes.string,
|
|
tooltip: PropTypes.string.isRequired,
|
|
active: PropTypes.bool,
|
|
onClick: PropTypes.func,
|
|
onContextMenu: PropTypes.func,
|
|
avatar: PropTypes.node.isRequired,
|
|
notificationBadge: PropTypes.node,
|
|
};
|
|
|
|
export default SidebarAvatar;
|