Add className prop in sidebar avatar comp
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
parent
c27f2d6268
commit
0bdb14f5b7
1 changed files with 8 additions and 5 deletions
|
@ -9,11 +9,12 @@ import Tooltip from '../../atoms/tooltip/Tooltip';
|
||||||
import { blurOnBubbling } from '../../atoms/button/script';
|
import { blurOnBubbling } from '../../atoms/button/script';
|
||||||
|
|
||||||
const SidebarAvatar = React.forwardRef(({
|
const SidebarAvatar = React.forwardRef(({
|
||||||
tooltip, active, onClick, onContextMenu,
|
className, tooltip, active, onClick,
|
||||||
avatar, notificationBadge,
|
onContextMenu, avatar, notificationBadge,
|
||||||
}, ref) => {
|
}, ref) => {
|
||||||
let activeClass = '';
|
const classes = ['sidebar-avatar'];
|
||||||
if (active) activeClass = ' sidebar-avatar--active';
|
if (active) classes.push('sidebar-avatar--active');
|
||||||
|
if (className) classes.push(className);
|
||||||
return (
|
return (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
content={<Text variant="b1">{twemojify(tooltip)}</Text>}
|
content={<Text variant="b1">{twemojify(tooltip)}</Text>}
|
||||||
|
@ -21,7 +22,7 @@ const SidebarAvatar = React.forwardRef(({
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={`sidebar-avatar${activeClass}`}
|
className={classes.join(' ')}
|
||||||
type="button"
|
type="button"
|
||||||
onMouseUp={(e) => blurOnBubbling(e, '.sidebar-avatar')}
|
onMouseUp={(e) => blurOnBubbling(e, '.sidebar-avatar')}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
|
@ -34,6 +35,7 @@ const SidebarAvatar = React.forwardRef(({
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
SidebarAvatar.defaultProps = {
|
SidebarAvatar.defaultProps = {
|
||||||
|
className: null,
|
||||||
active: false,
|
active: false,
|
||||||
onClick: null,
|
onClick: null,
|
||||||
onContextMenu: null,
|
onContextMenu: null,
|
||||||
|
@ -41,6 +43,7 @@ SidebarAvatar.defaultProps = {
|
||||||
};
|
};
|
||||||
|
|
||||||
SidebarAvatar.propTypes = {
|
SidebarAvatar.propTypes = {
|
||||||
|
className: PropTypes.string,
|
||||||
tooltip: PropTypes.string.isRequired,
|
tooltip: PropTypes.string.isRequired,
|
||||||
active: PropTypes.bool,
|
active: PropTypes.bool,
|
||||||
onClick: PropTypes.func,
|
onClick: PropTypes.func,
|
||||||
|
|
Loading…
Reference in a new issue