path: root/packages/react-shared/src/components/markdown_section.tsx

import * as _ from 'lodash';
import * as React from 'react';
import * as ReactMarkdown from 'react-markdown';
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';
import { Container } from './container';
import { Link } from './link';
import { MarkdownCodeBlock } from './markdown_code_block';
import { MarkdownLinkBlock } from './markdown_link_block';
import { MarkdownParagraphBlock } from './markdown_paragraph_block';

export interface MarkdownSectionProps {
    sectionName: string;
    markdownContent: string;
    headerSize?: HeaderSizes;
    githubLink?: string;
    shouldReformatTitle?: boolean;
    alternativeSectionTitle?: string;
}

interface DefaultMarkdownSectionProps {
    headerSize: HeaderSizes;
}

type PropsWithDefaults = MarkdownSectionProps & DefaultMarkdownSectionProps;

export interface MarkdownSectionState {
    shouldShowAnchor: boolean;
}

export class MarkdownSection extends React.Component<MarkdownSectionProps, MarkdownSectionState> {
    public static defaultProps: Partial<MarkdownSectionProps> = {
        headerSize: HeaderSizes.H3,
        shouldReformatTitle: true,
    };
    constructor(props: MarkdownSectionProps) {
        super(props);
        this.state = {
            shouldShowAnchor: false,
        };
    }
    public render(): React.ReactNode {
        const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;

        const id = utils.getIdFromName(sectionName);
        const formattedSectionName = this.props.shouldReformatTitle
            ? utils.convertCamelCaseToSpaces(sectionName)
            : sectionName;
        const title = !_.isUndefined(this.props.alternativeSectionTitle)
            ? this.props.alternativeSectionTitle
            : formattedSectionName;
        return (
            <div
                className="md-px1 sm-px2 overflow-hidden"
                onMouseOver={this._setAnchorVisibility.bind(this, true)}
                onMouseOut={this._setAnchorVisibility.bind(this, false)}
            >
                <ScrollElement name={id} style={{ paddingBottom: 20 }}>
                    <Container className="clearfix" paddingTop="30px" paddingBottom="20px">
                        <div className="col lg-col-8 md-col-8 sm-col-12">
                            <span style={{ color: colors.grey700 }}>
                                <AnchorTitle
                                    headerSize={headerSize}
                                    title={_.capitalize(title)}
                                    id={id}
                                    shouldShowAnchor={this.state.shouldShowAnchor}
                                />
                            </span>
                        </div>
                        <div className="col col-4 sm-hide xs-hide right-align pr3" style={{ height: 28 }}>
                            {!_.isUndefined(githubLink) && (
                                <div style={{ lineHeight: 2.1 }}>
                                    <Link to={githubLink} shouldOpenInNewTab={true} fontColor={colors.linkBlue}>
                                        Edit on Github
                                    </Link>
                                </div>
                            )}
                        </div>
                    </Container>
                    <ReactMarkdown
                        source={markdownContent}
                        escapeHtml={false}
                        renderers={{
                            code: MarkdownCodeBlock,
                            link: MarkdownLinkBlock,
                            paragraph: MarkdownParagraphBlock,
                        }}
                    />
                    <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'32px'} />
                </ScrollElement>
            </div>
        );
    }
    private _setAnchorVisibility(shouldShowAnchor: boolean): void {
        this.setState({
            shouldShowAnchor,
        });
    }
}