packages/react-shared/src/components/section_header.tsx


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(): React.ReactNode {
        const { sectionName, headerSize } = this.props as PropsWithDefaults;

        const finalSectionName = utils.convertDashesToSpaces(this.props.sectionName);
        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: 'capitalize',
                                    color: colors.grey,
                                    fontFamily: 'Roboto Mono',
                                    fontWeight: 300,
                                    fontSize: 27,
                                }}
                            >
                                {finalSectionName}
                            </span>
                        }
                        id={id}
                        shouldShowAnchor={this.state.shouldShowAnchor}
                    />
                </ScrollElement>
            </div>
        );
    }
    private _setAnchorVisibility(shouldShowAnchor: boolean): void {
        this.setState({
            shouldShowAnchor,
        });
    }
}