diff options
author | Fabio Berger <me@fabioberger.com> | 2018-03-14 22:18:16 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-03-14 22:18:16 +0800 |
commit | e16feb27f4ec1987259a87f360824a0158bd8b10 (patch) | |
tree | e94cb3bc89e215c4df38ab161379023ab8e0c4e9 /packages/react-shared/src/components/markdown_link_block.tsx | |
parent | 3f3e8be004818ddaa1921b3dff12bdd46052278b (diff) | |
parent | 83ae7ba08d55fa964bf7b7a985aea0fe1520c5c7 (diff) | |
download | dexon-sol-tools-e16feb27f4ec1987259a87f360824a0158bd8b10.tar.gz dexon-sol-tools-e16feb27f4ec1987259a87f360824a0158bd8b10.tar.zst dexon-sol-tools-e16feb27f4ec1987259a87f360824a0158bd8b10.zip |
Merge pull request #450 from 0xProject/convertScriptsToTs
Convert Scripts to TS & Other Misc. Fixes
Diffstat (limited to 'packages/react-shared/src/components/markdown_link_block.tsx')
-rw-r--r-- | packages/react-shared/src/components/markdown_link_block.tsx | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/packages/react-shared/src/components/markdown_link_block.tsx b/packages/react-shared/src/components/markdown_link_block.tsx new file mode 100644 index 000000000..8f5862249 --- /dev/null +++ b/packages/react-shared/src/components/markdown_link_block.tsx @@ -0,0 +1,47 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { constants } from '../utils/constants'; +import { utils } from '../utils/utils'; + +export interface MarkdownLinkBlockProps { + href: string; +} + +export interface MarkdownLinkBlockState {} + +export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, MarkdownLinkBlockState> { + // Re-rendering a linkBlock causes it to remain unclickable. + // We therefore noop re-renders on this component if it's props haven't changed. + public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) { + return nextProps.href !== this.props.href; + } + public render() { + const href = this.props.href; + const isLinkToSection = _.startsWith(href, '#'); + // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons + if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) { + return ( + <a href={href} target="_blank" rel="nofollow noreferrer noopener"> + {this.props.children} + </a> + ); + } else if (isLinkToSection) { + return ( + <a + style={{ cursor: 'pointer', textDecoration: 'underline' }} + onClick={this._onHashUrlClick.bind(this, href)} + > + {this.props.children} + </a> + ); + } else { + return <a href={href}>{this.props.children}</a>; + } + } + private _onHashUrlClick(href: string) { + const hash = href.split('#')[1]; + utils.scrollToHash(hash, constants.SCROLL_CONTAINER_ID); + utils.setUrlHash(hash); + } +} |