79 lines
2 KiB
JavaScript
79 lines
2 KiB
JavaScript
import cn from 'classnames';
|
|
import { CircularLoader, Icon, Tooltip } from 'UI';
|
|
import stl from './iconButton.css';
|
|
|
|
const IconButton = React.forwardRef(({
|
|
icon,
|
|
label = false,
|
|
active,
|
|
onClick,
|
|
plain = false,
|
|
shadow = false,
|
|
red = false,
|
|
primary = false,
|
|
primaryText = false,
|
|
redText = false,
|
|
outline = false,
|
|
loading = false,
|
|
roundedOutline = false,
|
|
hideLoader = false,
|
|
circle = false,
|
|
size = 'default',
|
|
marginRight,
|
|
buttonSmall,
|
|
className = '',
|
|
style,
|
|
name,
|
|
disabled = false,
|
|
tooltip = false,
|
|
tooltipPosition = 'top',
|
|
compact = false,
|
|
...rest
|
|
}, ref) => (
|
|
<Tooltip
|
|
tooltip={tooltip}
|
|
position={tooltipPosition}
|
|
trigger={
|
|
<button
|
|
ref={ ref }
|
|
name={ name }
|
|
className={ cn(stl.button, className, {
|
|
[ stl.plain ]: plain,
|
|
[ stl.active ]: active,
|
|
[ stl.shadow ]: shadow,
|
|
[ stl.primary ]: primary,
|
|
[ stl.red ]: red,
|
|
[ stl.primaryText ]: primaryText,
|
|
[ stl.redText ]: redText,
|
|
[ stl.outline ]: outline,
|
|
[ stl.circle ]: circle,
|
|
[ stl.roundedOutline ]: roundedOutline,
|
|
[ stl.buttonSmall ]: buttonSmall,
|
|
[ stl.small ]: size === 'small',
|
|
[ stl.tiny ]: size === 'tiny',
|
|
[ stl.marginRight ]: marginRight,
|
|
[ stl.compact ]: compact,
|
|
[ stl.hasLabel]: !!label
|
|
}) }
|
|
onClick={ onClick }
|
|
disabled={ disabled || loading }
|
|
style={style}
|
|
{ ...rest }
|
|
>
|
|
{ !hideLoader && <CircularLoader loading={ loading } /> }
|
|
{ icon &&
|
|
<Icon
|
|
color="teal"
|
|
name={ icon }
|
|
data-hidden={ loading }
|
|
size={ size === 'tiny' || size === 'small' || buttonSmall ? '14' : '16' }
|
|
/>
|
|
}
|
|
{ label && <span className={ cn(stl.label, icon || loading ? 'ml-2' : '') }>{ label }</span> }
|
|
</button>
|
|
}
|
|
/>
|
|
));
|
|
|
|
IconButton.displayName = "IconButton";
|
|
export default IconButton;
|