forked from mapbox/mapbox-java
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathnavigation.js
More file actions
96 lines (86 loc) · 2.94 KB
/
Copy pathnavigation.js
File metadata and controls
96 lines (86 loc) · 2.94 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import React from 'react';
import PureRenderMixin from 'react-pure-render/mixin';
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;
}
var Navigation = React.createClass({
mixins: [PureRenderMixin],
propTypes: {
ast: React.PropTypes.object.isRequired,
activeSection: React.PropTypes.string,
navigationItemClicked: React.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>);
}
});
module.exports = Navigation;