import { observer } from 'mobx-react-lite' ; import { useContext } from 'react' ; import styled from 'reshadow' ; import { css } from 'reshadow' ; import { getComputed , Icon , Loader } from '@cloudbeaver/core-blocks' ; import { EventContext } from '@cloudbeaver/core-events' ; import { useStateDelay } from '../../useStateDelay' ; import { EventTreeNodeExpandFlag } from './EventTreeNodeExpandFlag' ; import { TreeNodeContext } from './TreeNodeContext' ; const styles = css `
  Icon {
    cursor: pointer;
    height: 100%;
    width: 100%;
  }
` ; interface Props { leaf ? : boolean ; big ? : boolean ; disabled ? : boolean ; className ? : string ; } export const TreeNodeExpand = observer < Props > ( function TreeNodeExpand ( { leaf , big , disabled , className , } ) { const context = useContext ( TreeNodeContext ) ; if ( context . externalExpanded || context . disabled ) { disabled = true ; } leaf = context . leaf || leaf ; const handleExpand = async ( event ) => { EventContext . set ( event , EventTreeNodeExpandFlag ) ; if ( ! leaf && ! disabled ) { await context . expand ( ) ; } } ; const handleDbClick = ( event ) => { EventContext . set ( event , EventTreeNodeExpandFlag ) ; } ; const loading = useStateDelay ( getComputed ( ( ) => context . loading || context . processing ) , 300 ) ; return styled ( styles ) ( < arrow className = { className } onClick = { handleExpand } onDoubleClick = { handleDbClick } > { loading && < Loader small fullSize / > } { ! loading && ( ! leaf || context . externalExpanded ) && big && < Icon name = "angle" viewBox = "0 0 15 8" / > } { ! loading && ( ! leaf || context . externalExpanded ) && ! big && < Icon name = "arrow" viewBox = "0 0 16 16" / > } < /arrow>); } ) ;