67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
import { SessionIcon, SessionIconProps } from '../icon';
|
|
import { SessionNotificationCount } from '../SessionNotificationCount';
|
|
import _ from 'lodash';
|
|
|
|
interface SProps extends SessionIconProps {
|
|
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
notificationCount?: number;
|
|
isSelected?: boolean;
|
|
isHidden?: boolean;
|
|
margin?: string;
|
|
dataTestId?: string;
|
|
}
|
|
|
|
const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props, ref) => {
|
|
const {
|
|
iconType,
|
|
iconSize,
|
|
iconColor,
|
|
iconRotation,
|
|
isSelected,
|
|
notificationCount,
|
|
glowDuration,
|
|
glowStartDelay,
|
|
noScale,
|
|
isHidden,
|
|
backgroundColor,
|
|
borderRadius,
|
|
iconPadding,
|
|
margin,
|
|
} = props;
|
|
const clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
if (props.onClick) {
|
|
e.stopPropagation();
|
|
props.onClick(e);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={classNames('session-icon-button', iconSize, isSelected ? 'no-opacity' : '')}
|
|
role="button"
|
|
ref={ref}
|
|
onClick={clickHandler}
|
|
style={{ display: isHidden ? 'none' : 'flex', margin: margin ? margin : '' }}
|
|
data-testid={props.dataTestId}
|
|
>
|
|
<SessionIcon
|
|
iconType={iconType}
|
|
iconSize={iconSize}
|
|
iconColor={iconColor}
|
|
iconRotation={iconRotation}
|
|
glowDuration={glowDuration}
|
|
glowStartDelay={glowStartDelay}
|
|
noScale={noScale}
|
|
backgroundColor={backgroundColor}
|
|
borderRadius={borderRadius}
|
|
iconPadding={iconPadding}
|
|
/>
|
|
{Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export const SessionIconButton = React.memo(SessionIconButtonInner, _.isEqual);
|