import * as React from 'react' ; import { observer } from 'mobx-react' ; import Optional from 'optional-js' ; import OptionalUtils from '../../util/OptionalUtils' ; import * as H from 'history' ; import capitalize from 'capitalize' ; import { docsService } from '../../services' ; import classNames from 'classnames' ; import { PageEntry , TableOfContents , TableOfContentsEntry } from '../../domain/Referee' ; import './TableOfContentsNav.scss' ; export const TableOfContentsNav = observer ( ( { tableOfContents , history , path } ) : JSX . Element => { return OptionalUtils . mapIfPresentOrElse ( Optional . ofNullable ( tableOfContents ) , ( tableOfContents ) => { const headerHeight = document . getElementById ( 'header-wrapper' ) ! . clientHeight ; const footerHeight = document . getElementById ( 'footer' ) ! . clientHeight ; const windowHeight = window . outerHeight ; return ( < div className = "table-of-contents" style = { { position : 'sticky' , top : `${ headerHeight }px` , maxHeight : `${ windowHeight - ( headerHeight + footerHeight ) }px` } } > < div className = "toc-entry" > < div className = { classNames ( [ 'toc-entry-label' , 'home' , path === '' ? 'selected' : '' ] ) } onClick = { ( ) => { docsService . fetchAndUpdateDocContent ( '' ) ; history . push ( '/docs/' ) ; window . scrollTo ( 0 , 0 ) ; } } > Home < /div> < /div> { tableOfContents . table_of_contents . map ( ( tocEntry ) => { return < TocEntryComp key = { tocEntry . directory } path = { path } tocEntry = { tocEntry } history = { history } / > ; } ) } { } { } { } { } { } { } { } { } { } { } { } { } { } { } { } { } < /div>); } , ( ) => { return < div />; } ) ; } ) ; const TocEntryComp = observer ( ( { tocEntry , history , path } ) : JSX . Element => { return ( < div className = "toc-entry" > < div className = "toc-entry-label" > { capitalize . words ( tocEntry . directory . replace ( /-/g , ' ' ) ) } < /div> { tocEntry . pages . map ( ( page ) => { return ( < div key = { `${ tocEntry . directory }/${ page . filename }` } className = { classNames ( [ 'toc-entry-page' , `${ tocEntry . directory } / $ { page . filename } ` === path ? 'selected' : ''
                ])} onClick={() => {
                    docsService.fetchAndUpdateDocContent(` $ { tocEntry . directory } / $ { page . filename } `);
                    history.push(` / docs / $ { tocEntry . directory } / $ { page . filename } `);
                    window.scrollTo(0, 0);
                }}>
              {Optional.ofNullable(page.display_name).orElse(capitalize.words(page.filename.replace(/-/g, ' ')))}
            </div>);
        })}
      </div>);
});
