packages/website/ts/pages/shared/markdown_section.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
74
75
76
77

import * as _ from 'lodash';
import * as React from 'react';
import * as ReactMarkdown from 'react-markdown';
import {Element as ScrollElement} from 'react-scroll';
import {AnchorTitle} from 'ts/pages/shared/anchor_title';
import {utils} from 'ts/utils/utils';
import {MarkdownCodeBlock} from 'ts/pages/shared/markdown_code_block';
import RaisedButton from 'material-ui/RaisedButton';
import {HeaderSizes} from 'ts/types';

interface MarkdownSectionProps {
    sectionName: string;
    markdownContent: string;
    headerSize?: HeaderSizes;
    githubLink?: string;
}

interface MarkdownSectionState {
    shouldShowAnchor: boolean;
}

export class MarkdownSection extends React.Component<MarkdownSectionProps, MarkdownSectionState> {
    public static defaultProps: Partial<MarkdownSectionProps> = {
        headerSize: HeaderSizes.H3,
    };
    constructor(props: MarkdownSectionProps) {
        super(props);
        this.state = {
            shouldShowAnchor: false,
        };
    }
    public render() {
        const sectionName = this.props.sectionName;
        const id = utils.getIdFromName(sectionName);
        return (
            <div
                className="pt2 pr3 md-pl2 sm-pl3 overflow-hidden"
                onMouseOver={this.setAnchorVisibility.bind(this, true)}
                onMouseOut={this.setAnchorVisibility.bind(this, false)}
            >
                <ScrollElement name={id}>
                    <div className="clearfix">
                        <div className="col lg-col-8 md-col-8 sm-col-12">
                            <span style={{textTransform: 'capitalize'}}>
                                <AnchorTitle
                                    headerSize={this.props.headerSize}
                                    title={sectionName}
                                    id={id}
                                    shouldShowAnchor={this.state.shouldShowAnchor}
                                />
                            </span>
                        </div>
                        <div className="col col-4 sm-hide xs-hide py2 right-align">
                            {!_.isUndefined(this.props.githubLink) &&
                                <RaisedButton
                                    href={this.props.githubLink}
                                    target="_blank"
                                    label="Edit on Github"
                                    icon={<i className="zmdi zmdi-github" style={{fontSize: 23}} />}
                                />
                            }
                        </div>
                    </div>
                    <ReactMarkdown
                        source={this.props.markdownContent}
                        renderers={{CodeBlock: MarkdownCodeBlock}}
                    />
                </ScrollElement>
            </div>
        );
    }
    private setAnchorVisibility(shouldShowAnchor: boolean) {
        this.setState({
            shouldShowAnchor,
        });
    }
}