diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-03-16 00:57:27 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-03-16 00:57:27 +0800 |
commit | 76029cbf0915df36266bd5e51add07755297ddda (patch) | |
tree | e1692f8cc4ea4642292c61f65ba3911ded26de8e /packages/react-shared/src/components/markdown_section.tsx | |
parent | b9c1653c1cf6984d56b7825d8747b48d797fa39e (diff) | |
parent | 4a27a7dc581fc6c8a3d4e212ca3712c249a5b417 (diff) | |
download | dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.tar dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.tar.gz dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.tar.bz2 dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.tar.lz dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.tar.xz dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.tar.zst dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.zip |
Merge branch 'development' into feature/sra-report/collection-tests
* development: (97 commits)
Keep console.log in monorepo-scripts
Enable coverage for all other packages with tests
Fix parallel coverage results reporting
Fix linter issuesx
Remove outdated comment
Add script copying to build command
Add postpublish script to sol-cov
Move configuration into package.json configs section
Transform input data before encoding for callAsync and getABIEncodedTransactionData
Update CHANGELOGs
Consolidate all console.log into the @0xproject/utils package
Update coverage badge to show development coverage
Configure post build hook
Notify coveralls after all tasks have finished
Address feedback
Revert "Report all coverage reports together"
Separate published packages and typescript typings on README
Consolidate docs generation and uploading logic
Use async/await instead of promise syntax
Move changelog entry
...
Diffstat (limited to 'packages/react-shared/src/components/markdown_section.tsx')
-rw-r--r-- | packages/react-shared/src/components/markdown_section.tsx | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx new file mode 100644 index 000000000..d24a43dcb --- /dev/null +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -0,0 +1,94 @@ +import * as _ from 'lodash'; +import RaisedButton from 'material-ui/RaisedButton'; +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 { MarkdownCodeBlock } from './markdown_code_block'; +import { MarkdownLinkBlock } from './markdown_link_block'; + +export interface MarkdownSectionProps { + sectionName: string; + markdownContent: string; + headerSize?: HeaderSizes; + githubLink?: 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() { + const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults; + + const id = utils.getIdFromName(sectionName); + return ( + <div + className="md-px1 sm-px2 overflow-hidden" + onMouseOver={this._setAnchorVisibility.bind(this, true)} + onMouseOut={this._setAnchorVisibility.bind(this, false)} + > + <ScrollElement name={id}> + <div className="clearfix pt3"> + <div className="col lg-col-8 md-col-8 sm-col-12"> + <span style={{ textTransform: 'capitalize', color: colors.grey700 }}> + <AnchorTitle + headerSize={headerSize} + title={sectionName} + 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) && ( + <a + href={githubLink} + target="_blank" + style={{ color: colors.linkBlue, textDecoration: 'none', lineHeight: 2.1 }} + > + Edit on Github + </a> + )} + </div> + </div> + <hr style={{ border: `1px solid ${colors.lightestGrey}` }} /> + <ReactMarkdown + source={markdownContent} + escapeHtml={false} + renderers={{ + code: MarkdownCodeBlock, + link: MarkdownLinkBlock, + }} + /> + </ScrollElement> + </div> + ); + } + private _setAnchorVisibility(shouldShowAnchor: boolean) { + this.setState({ + shouldShowAnchor, + }); + } +} |