import { observer } from 'mobx-react-lite' ; import { useCallback , useContext } from 'react' ; import styled , { use } from 'reshadow' ; import { EventContext } from '@cloudbeaver/core-events' ; import { useStyles } from '@cloudbeaver/core-theming' ; import { useObjectRef } from '../useObjectRef' ; import { EventTableItemExpandFlag } from './EventTableItemExpandFlag' ; import { EventTableItemSelectionFlag } from './EventTableItemSelectionFlag' ; import { TableContext } from './TableContext' ; import { TableItemContext } from './TableItemContext' ; type Props = { align ? : 'left' | 'center' | 'right' | 'justify' | 'char' ; className ? : string ; centerContent ? : boolean ; ellipsis ? : boolean ; flex ? : boolean ; expand ? : boolean ; onClick ? : ( ) => void ; onDoubleClick ? : ( ) => void ; } & React . DetailedHTMLProps < React . TdHTMLAttributes < HTMLTableDataCellElement > , HTMLTableDataCellElement > ; export const TableColumnValue = observer < Props , HTMLTableDataCellElement > ( function TableColumnValue ( { align , children , centerContent , ellipsis , flex , expand , className , onClick , onDoubleClick , ... rest } , ref ) { const styles = useStyles ( ) ; const tableContext = useContext ( TableContext ) ; const context = useContext ( TableItemContext ) ; const props = useObjectRef ( { onClick , onDoubleClick } ) ; const handleClick = useCallback ( ( event ) => { if ( ! context ) { return ; } if ( expand && ! EventContext . has ( event , EventTableItemExpandFlag ) ) { const state = ! context . isExpanded ( ) ; EventContext . set ( event , EventTableItemExpandFlag , state ) ; EventContext . set ( event , EventTableItemSelectionFlag ) ; tableContext ?. setItemExpand ( context . item , state ) ; } props . onClick ?. ( ) ; } , [ tableContext , context , expand ] ) ; const handleDoubleClick = useCallback ( ( event ) => { props . onDoubleClick ?. ( ) ; } , [ ] ) ; if ( ! context ) { return null ; } return styled ( styles ) ( < td align = { align } className = { className } { ... use ( { centerContent , ellipsis } ) } ref = { ref } onClick = { handleClick } onDoubleClick = { handleDoubleClick } { ... rest } > { flex && < td - flex className = { className } > { children } < /td-flex>} { ! flex && children } < /td>); } , { forwardRef : true } ) ;