import { observer } from 'mobx-react-lite' ; import { useContext , useCallback } from 'react' ; import styled , { css } from 'reshadow' ; import { EventContext } from '@cloudbeaver/core-events' ; import { useStyles } from '@cloudbeaver/core-theming' ; import { Checkbox } from '../FormControls/Checkboxes/Checkbox' ; import { EventTableItemSelectionFlag } from './EventTableItemSelectionFlag' ; import { TableContext } from './TableContext' ; import { TableItemContext } from './TableItemContext' ; interface Props { checked ? : boolean ; disabled ? : boolean ; tooltip ? : string ; className ? : string ; } const checkboxStyles = css `
  Checkbox {
    margin-left: -10px;
    margin-right: -10px;
  }
` ; export const TableItemSelect = observer < Props > ( function TableItemSelect ( { checked , disabled , tooltip , className } ) { const tableContext = useContext ( TableContext ) ; const context = useContext ( TableItemContext ) ; const styles = useStyles ( ) ; const handleClick = useCallback ( ( event ) => { if ( ! context ) { return ; } const state = ! context . isSelected ( ) ; EventContext . set ( event , EventTableItemSelectionFlag , state ) ; tableContext ?. setItemSelect ( context . item , state ) ; } , [ tableContext , context ] ) ; if ( ! context ) { return null ; } return styled ( styles , checkboxStyles ) ( < Checkbox className = { className } title = { tooltip } disabled = { context . selectDisabled || disabled } checked = { checked || context . isSelected ( ) } onClick = { handleClick } / > ) ; } ) ;