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 { 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; 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, }; 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 = utils.convertCamelCaseToSpaces(sectionName); const title = !_.isUndefined(this.props.alternativeSectionTitle) ? this.props.alternativeSectionTitle : _.capitalize(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 }}> <div className="clearfix" style={{ paddingTop: 30, paddingBottom: 20 }}> <div className="col lg-col-8 md-col-8 sm-col-12"> <span style={{ color: colors.grey700 }}> <AnchorTitle headerSize={headerSize} title={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> </div> <ReactMarkdown source={markdownContent} escapeHtml={false} renderers={{ code: MarkdownCodeBlock, link: MarkdownLinkBlock, paragraph: MarkdownParagraphBlock, }} /> <div style={{ width: '100%', height: 1, backgroundColor: colors.grey300, marginTop: 32, }} /> </ScrollElement> </div> ); } private _setAnchorVisibility(shouldShowAnchor: boolean): void { this.setState({ shouldShowAnchor, }); } }