import Button from '@material-ui/core/Button' ; import CheckBoxIcon from '@material-ui/icons/CheckBox' ; import CheckBoxOutlineIcon from '@material-ui/icons/CheckBoxOutlineBlank' ; import * as React from 'react' ; import MultiplayerRippleContainer from '../multiplayer/MultiplayerRippleContainer' ; export interface Props { label : string ; value : boolean ; id ? : string ; onChange : ( checked : boolean ) => any ; } export default class Checkbox extends React . Component < Props , { } > { public render ( ) { const icon = ( this . props . value ) ? < CheckBoxIcon /> : <CheckBoxOutlineIcon / > ; return ( < MultiplayerRippleContainer id = { this . props . id } className = "base_checkbox" > < Button onClick = { ( e ) => this . props . onChange ( ! this . props . value ) } > < div > < span className = "icon" > { icon } < /span> < span className = "label" > { this . props . label } < /span> < /div> < div className = "subtext" id = "subtext" > { this . props . children } < /div> < /Button> < /MultiplayerRippleContainer>); } }