import clsx from 'clsx' ; import React from 'react' ; import { makeStyles } from './theme' ; interface IProps { isSelected ? : boolean ; hidden ? : boolean ; } const useStyles = makeStyles ( ) ( theme => ( { button : { background : theme . buttonBackground , border : 'none' , borderRadius : theme . borderRadiusMedium , color : theme . buttonColor , width : 40 , height : 40 , padding : theme . spacing ( 0.5 ) , transition : 'width 300ms ease' + ', height 300ms ease' + ', padding 300ms ease' + ', opacity 300ms ease' , display : 'flex' , alignItems : 'center' , '& > svg' : { width : '100%' , height : '100%' , pointerEvents : 'none' , } , '&:hover:not(:disabled)' : { background : theme . buttonBackgroundHover , } , '&:focus' : { outline : `1px solid ${ theme . buttonColor }` , outlineOffset : - 1 , } , '&:active' : { background : theme . buttonBackgroundPress , } , '&:disabled' : { opacity : 0.5 , } , } , selected : { background : `radial-gradient(circle, transparent 0%, ${ theme . buttonBackgroundHover } 100%)` , } , hidden : { width : 0 , height : 0 , padding : 0 , opacity : 0 , background : 'none !important' , } , } ) ) ; type PropsType = IProps & React . DetailedHTMLProps < React . ButtonHTMLAttributes < HTMLButtonElement > , HTMLButtonElement > ; export default function MinimapToolbarIconButton ( props ) { const { classes } = useStyles ( ) ; const { className , isSelected , hidden , ... otherProps } = props ; return < button className = { clsx ( classes . button , isSelected && classes . selected , hidden && classes . hidden , className ) } tabIndex = { hidden ? - 1 : 0 } { ... otherProps } />; }