import * as React from 'react' ; import Icon , { CheckboxIndeterminateM , CheckboxSelectedFillM } from '@synerise/ds-icon' ; import Button from '../Button' ; import * as S from './Checkbox.styles' ; import { CheckboxButtonProps , ButtonCheckboxIconProps } from './Checkbox.types' ; const CheckboxButtonIcon = ( { checked , indeterminate } ) : React . ReactElement => { if ( indeterminate ) { return < CheckboxIndeterminateM />; } if ( checked ) { return < CheckboxSelectedFillM />; } return ( < > < S . DefaultIcon /> < S . HoverIcon / > < />); } ; const getNextCheckedState = ( prevState , { checked , indeterminate } ) : boolean => { if ( indeterminate === true ) { return true ; } if ( checked === undefined ) { return ! prevState ; } return ! checked ; } ; const CheckboxButton = ( props ) : React . ReactElement => { const { checked , defaultChecked = false , hasError , indeterminate , onChange , onClick , ... restProps } = props ; const [ isCheckedState , setIsCheckedState ] = React . useState ( defaultChecked ) ; const handleButtonClick = ( e ) : void => { if ( typeof onClick === 'function' ) { onClick ( e ) ; } setIsCheckedState ( ( prevState ) => { const nextState = getNextCheckedState ( prevState , props ) ; if ( typeof onChange === 'function' ) { onChange ( nextState ) ; } return nextState ; } ) ; } ; const isChecked = checked !== undefined ? checked : isCheckedState ; return ( < Button aria - checked = { indeterminate ? 'mixed' : isChecked } mode = "single-icon" role = "checkbox" style = { { transition : 'none' } } tabIndex = { 0 } type = "ghost" onClick = { handleButtonClick } { ... restProps } > < S . IconWrapper active = { indeterminate || isChecked } error = { hasError } > < Icon component = { < CheckboxButtonIcon checked = { isChecked } indeterminate = { indeterminate } / > } /> < /S.IconWrapper> < /Button>); } ; export default CheckboxButton ;