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
|
import * as React from 'react';
import { Element as ScrollElement } from 'react-scroll';
import { HeaderSizes } from '../types';
import { colors } from '../utils/colors';
import { utils } from '../utils/utils';
import { AnchorTitle } from './anchor_title';
export interface SectionHeaderProps {
sectionName: string;
headerSize?: HeaderSizes;
}
interface DefaultSectionHeaderProps {
headerSize: HeaderSizes;
}
type PropsWithDefaults = SectionHeaderProps & DefaultSectionHeaderProps;
export interface SectionHeaderState {
shouldShowAnchor: boolean;
}
export class SectionHeader extends React.Component<SectionHeaderProps, SectionHeaderState> {
public static defaultProps: Partial<SectionHeaderProps> = {
headerSize: HeaderSizes.H2,
};
constructor(props: SectionHeaderProps) {
super(props);
this.state = {
shouldShowAnchor: false,
};
}
public render() {
const { sectionName, headerSize } = this.props as PropsWithDefaults;
const finalSectionName = this.props.sectionName.replace(/-/g, ' ');
const id = utils.getIdFromName(finalSectionName);
return (
<div
onMouseOver={this._setAnchorVisibility.bind(this, true)}
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>
<ScrollElement name={id}>
<AnchorTitle
headerSize={headerSize}
title={
<span
style={{
textTransform: 'uppercase',
color: colors.grey,
fontFamily: 'Roboto Mono',
fontWeight: 300,
fontSize: 27,
}}
>
{finalSectionName}
</span>
}
id={id}
shouldShowAnchor={this.state.shouldShowAnchor}
/>
</ScrollElement>
</div>
);
}
private _setAnchorVisibility(shouldShowAnchor: boolean) {
this.setState({
shouldShowAnchor,
});
}
}
|
