54 lines
1.3 KiB
React
54 lines
1.3 KiB
React
|
import React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import classnames from 'classnames';
|
||
|
|
|
||
|
|
import { IconButton, Icon, Tooltip } from '@ohif/ui';
|
||
|
|
|
||
|
|
const ToolbarButton = ({
|
||
|
|
id,
|
||
|
|
isActive,
|
||
|
|
onClick,
|
||
|
|
icon,
|
||
|
|
label,
|
||
|
|
dropdownContent,
|
||
|
|
}) => {
|
||
|
|
const shouldShowDropdown = !!isActive && !!dropdownContent;
|
||
|
|
return (
|
||
|
|
<div key={id}>
|
||
|
|
<Tooltip
|
||
|
|
content={shouldShowDropdown ? dropdownContent : label}
|
||
|
|
tight={shouldShowDropdown}
|
||
|
|
>
|
||
|
|
<IconButton
|
||
|
|
variant={isActive ? 'contained' : 'text'}
|
||
|
|
className={classnames('mx-1', {
|
||
|
|
'text-black': isActive,
|
||
|
|
'text-common-bright hover:bg-primary-dark hover:text-primary-light': !isActive,
|
||
|
|
})}
|
||
|
|
onClick={onClick}
|
||
|
|
key={id}
|
||
|
|
>
|
||
|
|
<Icon name={icon} />
|
||
|
|
</IconButton>
|
||
|
|
</Tooltip>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
ToolbarButton.defaultProps = {
|
||
|
|
dropdownContent: null,
|
||
|
|
isActive: false,
|
||
|
|
};
|
||
|
|
|
||
|
|
ToolbarButton.propTypes = {
|
||
|
|
id: PropTypes.string.isRequired,
|
||
|
|
isActive: PropTypes.bool,
|
||
|
|
onClick: PropTypes.func.isRequired,
|
||
|
|
icon: PropTypes.string.isRequired,
|
||
|
|
label: PropTypes.string.isRequired,
|
||
|
|
/** Tooltip content can be replaced for a customized content by passing a node to this value. */
|
||
|
|
dropdownContent: PropTypes.node,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ToolbarButton;
|