1. import React, { Component } from 'react'
  2. import PropTypes from 'prop-types'
  3. import { Checkbox } from './styled'
  5. import Icon from '@mdi/react'
  6. import { mdiCheckboxBlank } from '@mdi/js'
  8. /**
  9.  * @component
  10.  * @category LayerPanel
  11.  * @since 0.5.0
  12.  */
  13. class LayerPanelCheckbox extends Component {
  14.   render () {
  15.     const { checkboxState, handleClick, color } = this.props
  16.     const checkboxDataTestId = checkboxState ? 'LayerPanel.checked' : 'LayerPanel.unchecked'
  18.     if (checkboxState === 'indeterminate') {
  19.       return (
  20.         <Checkbox inputProps={{
  21.           'data-testid': 'LayerPanel.indeterminateCheckbox'
  22.         }} indeterminateIcon={<Icon path={mdiCheckboxBlank} size={1} color={color} />}
  23.         onClick={(e) => handleClick(e, true)} checked={!!checkboxState} indeterminate />
  24.       )
  25.     } else {
  26.       return (
  27.         <Checkbox inputProps={{
  28.           'data-testid': checkboxDataTestId
  29.         }} onClick={(e) => handleClick(e, !checkboxState)} checked={checkboxState} />
  30.       )
  31.     }
  32.   }
  33. }
  35. LayerPanelCheckbox.propTypes = {
  36.   /** checkbox checked state, either string('indeterminate') or bool */
  37.   checkboxState: PropTypes.oneOfType([
  38.     PropTypes.string,
  39.     PropTypes.bool
  40.   ]),
  41.   /** function that handles the click of checkbox. Returns the event and the state of the checkbox (bool) */
  42.   handleClick: PropTypes.func.isRequired,
  43.   /** string for checkbox checked color (hex) */
  44.   color: PropTypes.string
  45. }
  47. LayerPanelCheckbox.defaultProps = {
  48.   color: '#152357'
  49. }
  51. export default LayerPanelCheckbox