import { isUndefined } from 'lodash' ; import { Dispatch , SetStateAction } from 'react' ; import { TOCEntryItem } from '../../../types' ; import TOCEntry from './TOCEntry' ; interface Props { index ? : number ; setVisibleTOC : Dispatch < SetStateAction < boolean > > ; toc : TOCEntryItem [ ] ; scrollIntoView : ( id ? : string ) => void ; } const MAX_VISIBLE_LEVEL = 3 ; const TOCList = ( props ) => { return ( < div > { props . toc . map ( ( entry , index ) => { if ( ! isUndefined ( props . index ) && props . index >= MAX_VISIBLE_LEVEL ) return null ; return ( < div key = { `toc_${ entry . value }_${ index }` } > < TOCEntry entry = { entry } scrollIntoView = { props . scrollIntoView } level = { props . index || 0 } setVisibleTOC = { props . setVisibleTOC } / > { entry . children && entry . children . length > 0 && ( < TOCList toc = { entry . children } setVisibleTOC = { props . setVisibleTOC } scrollIntoView = { props . scrollIntoView } index = { props . index ? props . index + 1 : 1 } / > ) } < /div>); } ) } < /div>); } ; export default TOCList ;