You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
import { SessionIcon, SessionIconProps } from '../icon';
|
|
import { SessionNotificationCount } from '../SessionNotificationCount';
|
|
import { DefaultTheme, useTheme } from 'styled-components';
|
|
|
|
interface SProps extends SessionIconProps {
|
|
onClick?: any;
|
|
notificationCount?: number;
|
|
isSelected?: boolean;
|
|
theme?: DefaultTheme;
|
|
}
|
|
|
|
export const SessionIconButton = (props: SProps) => {
|
|
const {
|
|
iconType,
|
|
iconSize,
|
|
iconColor,
|
|
iconRotation,
|
|
isSelected,
|
|
notificationCount,
|
|
theme,
|
|
} = props;
|
|
const clickHandler = (e: any) => {
|
|
if (props.onClick) {
|
|
e.stopPropagation();
|
|
props.onClick();
|
|
}
|
|
};
|
|
|
|
const themeToUSe = theme || useTheme();
|
|
|
|
return (
|
|
<div
|
|
className={classNames('session-icon-button', iconSize, isSelected ? 'no-opacity' : '')}
|
|
role="button"
|
|
onClick={clickHandler}
|
|
>
|
|
<SessionIcon
|
|
iconType={iconType}
|
|
iconSize={iconSize}
|
|
iconColor={iconColor}
|
|
iconRotation={iconRotation}
|
|
theme={themeToUSe}
|
|
/>
|
|
{Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />}
|
|
</div>
|
|
);
|
|
};
|