67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
import React, { PureComponent } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import slugify from 'slugify'
|
|
import shortid from 'shortid'
|
|
import Scrollspy from 'react-scrollspy'
|
|
import Scroll from '../../components/Scroll'
|
|
import { filterByKindOfProperty } from './utils'
|
|
import stylesSidebar from '../../components/Sidebar.module.scss'
|
|
|
|
export default class Toc extends PureComponent {
|
|
static propTypes = {
|
|
data: PropTypes.array
|
|
}
|
|
|
|
subItems = (children, parentName) =>
|
|
children &&
|
|
children.filter(filterByKindOfProperty).map(({ name, decorators }) => {
|
|
const deprecation = (decorators || []).filter(
|
|
({ name }) => name === 'deprecated'
|
|
)[0] // Assuming deprecated annotation
|
|
|
|
return (
|
|
<li key={shortid.generate()}>
|
|
<Scroll
|
|
type="id"
|
|
element={`${parentName}-${name && slugify(name)}`}
|
|
data-deprecated={!!deprecation}
|
|
offset={-20}
|
|
>
|
|
<code>{name}</code>
|
|
</Scroll>
|
|
</li>
|
|
)
|
|
})
|
|
|
|
items = this.props.data.map(({ name, children }) => {
|
|
const subIds = []
|
|
const parentName = name
|
|
|
|
subIds.push(
|
|
children &&
|
|
children.filter(filterByKindOfProperty).map(({ name }) => {
|
|
return `${parentName}-${name && slugify(name)}`
|
|
})
|
|
)
|
|
|
|
return (
|
|
<li key={shortid.generate()}>
|
|
<Scroll type="id" element={`${name && slugify(name)}`} offset={-20}>
|
|
<code>{name}</code>
|
|
</Scroll>
|
|
<Scrollspy
|
|
items={subIds[0]}
|
|
currentClassName={stylesSidebar.scrollspyActive}
|
|
offset={-30}
|
|
>
|
|
{this.subItems(children, name)}
|
|
</Scrollspy>
|
|
</li>
|
|
)
|
|
})
|
|
|
|
render() {
|
|
return <ul>{this.items}</ul>
|
|
}
|
|
}
|