import * as React from 'react' ; import ClickAwayListener from '@material-ui/core/ClickAwayListener' ; import { BlockIDStr , useBlocksStore } from "./store/BlocksStore" ; import { observer } from "mobx-react-lite" ; interface IProps { readonly parent : BlockIDStr | undefined ; readonly id : BlockIDStr ; readonly children : JSX . Element ; } export const NoteNavigation = observer ( function NoteNavigation ( props ) { const blocksStore = useBlocksStore ( ) ; const [ ref , setRef ] = React . useState < HTMLDivElement | null > ( null ) ; const handleClickAway = React . useCallback ( ( ) => { } , [ ] ) ; const handleClick = React . useCallback ( ( ) => { blocksStore . setActiveWithPosition ( props . id , undefined ) ; } , [ props . id , blocksStore ] ) ; return ( < > < ClickAwayListener onClickAway = { handleClickAway } > < div style = { { flexGrow : 1 } } ref = { setRef } onClick = { handleClick } > { ref !== null && props . children } < /div> < /ClickAwayListener> < />); } ) ;