import React , { useCallback , useEffect } from 'react' ; import { typedMemo } from '../../../../utils' ; import { Checkbox } from '../../../Checkbox' ; import { Cell , WorksheetItem } from '../../types' ; import { CheckboxWrapper } from './styled' ; export interface CheckboxEditorProps < Item > { cell : Cell < Item > ; toggle : boolean ; onBlur ( ) : void ; onChange ( value ) : void ; } const InternalCheckboxEditor = < T extends WorksheetItem > ( { cell , toggle , onBlur , onChange , } ) => { const handleChange = useCallback ( ( ) => { onChange ( ! cell . value ) ; } , [ cell , onChange ] ) ; useEffect ( ( ) => { if ( toggle ) { handleChange ( ) ; } } , [ cell . value , handleChange , toggle ] ) ; return ( < CheckboxWrapper > < Checkbox disabled = { cell . disabled } checked = { cell . value } hiddenLabel = { true } label = { cell . value ? 'Checked' : 'Unchecked' } onBlur = { onBlur } onChange = { handleChange } / > < /CheckboxWrapper>); } ; export const CheckboxEditor = typedMemo ( InternalCheckboxEditor ) ;