blob: 1aa65d9b69e795534851e6900e4c218199a04587 (
plain)
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
|
import React, { useState, useEffect } from "react";
import './pageSummary.scss'
import _ from "lodash";
import Scrollspy from 'react-scrollspy'
type PageSummaryProps = {
entries: PageSummaryEntry[],
}
type PageSummaryEntry = {
location: string,
label: string,
sourceSets: SourceSetFilterKey[]
}
type SourceSetFilterKey = string
export const PageSummary: React.FC<PageSummaryProps> = ({ entries }: PageSummaryProps) => {
const [hidden, setHidden] = useState<Boolean>(true);
const [displayableEntries, setDisplayableEntries] = useState<PageSummaryEntry[]>(entries)
const handleMouseHover = () => {
setHidden(!hidden)
}
useEffect(() => {
const handeEvent = (event: CustomEvent<SourceSetFilterKey[]>) => {
const displayable = entries.filter((entry) => entry.sourceSets.some((sourceset) => event.detail.includes(sourceset)))
setDisplayableEntries(displayable)
}
window.addEventListener('sourceset-filter-change', handeEvent)
return () => window.removeEventListener('sourceset-filter-change', handeEvent)
}, [entries])
let classnames = "page-summary"
if (hidden) classnames += " hidden"
return (
<div
className={classnames}
onMouseEnter={handleMouseHover}
onMouseLeave={handleMouseHover}
>
<div className={"content-wrapper"}>
<h4>On this page</h4>
{!hidden && <Scrollspy items={displayableEntries.map((e) => e.location)} currentClassName="selected">
{displayableEntries.map((item) => <li><a href={'#' + item.location}>{item.label}</a></li>)}
</Scrollspy>}
</div>
</div>
)
}
|
