94 lines
2.9 KiB
JavaScript
94 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import NavigationItem from './navigation_item';
|
|
import { footerContent } from '../custom';
|
|
|
|
function getAllInSectionFromChild(headings, idx) {
|
|
for (var i = idx; i > 0; i--) {
|
|
if (headings[i].depth === 2) {
|
|
return getAllInSection(headings, i);
|
|
}
|
|
}
|
|
}
|
|
|
|
function getAllInSection(headings, idx) {
|
|
var activeHeadings = [];
|
|
for (var i = idx + 1; i < headings.length; i++) {
|
|
if (headings[i].depth === 3) {
|
|
activeHeadings.push(headings[i].children[0].value);
|
|
} else if (headings[i].depth === 2) {
|
|
break;
|
|
}
|
|
}
|
|
return activeHeadings;
|
|
}
|
|
|
|
export default class Navigation extends React.PureComponent {
|
|
static propTypes = {
|
|
ast: PropTypes.object.isRequired,
|
|
activeSection: PropTypes.string,
|
|
navigationItemClicked: PropTypes.func.isRequired
|
|
}
|
|
render() {
|
|
var activeHeadings = [];
|
|
let headings = this.props.ast.children
|
|
.filter(child => child.type === 'heading');
|
|
|
|
if (this.props.activeSection) {
|
|
|
|
let activeHeadingIdx = headings.findIndex(heading =>
|
|
heading.children[0].value === this.props.activeSection);
|
|
let activeHeading = headings[activeHeadingIdx];
|
|
|
|
if (activeHeading.depth === 3) {
|
|
activeHeadings = [this.props.activeSection]
|
|
.concat(getAllInSectionFromChild(headings, activeHeadingIdx));
|
|
}
|
|
|
|
// this could potentially have children, try to find them
|
|
if (activeHeading.depth === 2) {
|
|
activeHeadings = [this.props.activeSection]
|
|
.concat(getAllInSection(headings, activeHeadingIdx));
|
|
}
|
|
}
|
|
|
|
activeHeadings = activeHeadings.reduce((memo, heading) => {
|
|
memo[heading] = true;
|
|
return memo;
|
|
}, {});
|
|
|
|
return (<div className='pad0x small'>
|
|
{headings
|
|
.map((child, i) => {
|
|
let sectionName = child.children[0].value;
|
|
var active = sectionName === this.props.activeSection;
|
|
if (child.depth === 1) {
|
|
return (<div key={i}
|
|
onClick={this.navigationItemClicked}
|
|
className='small pad0x quiet space-top1'>{sectionName}</div>);
|
|
} else if (child.depth === 2) {
|
|
return (<NavigationItem
|
|
key={i}
|
|
href={`#${child.data.id}`}
|
|
onClick={this.props.navigationItemClicked}
|
|
active={active}
|
|
sectionName={sectionName} />);
|
|
} else if (child.depth === 3) {
|
|
if (activeHeadings.hasOwnProperty(sectionName)) {
|
|
return (<div
|
|
key={i}
|
|
className='space-left1'>
|
|
<NavigationItem
|
|
href={`#${child.data.id}`}
|
|
onClick={this.props.navigationItemClicked}
|
|
active={active}
|
|
sectionName={sectionName} />
|
|
</div>);
|
|
}
|
|
}
|
|
})}
|
|
{footerContent}
|
|
</div>);
|
|
}
|
|
}
|