Fixed https://github.com/0xProject/wiki/issues/19 by disabling re-rendering of markdownCodeBlock renderer if props haven't updated

This commit is contained in:
Fabio Berger
2017-12-17 13:22:54 -06:00
parent fd3e8cd813
commit edbe6915e0

View File

@@ -7,14 +7,23 @@ interface MarkdownCodeBlockProps {
language: string;
}
export function MarkdownCodeBlock(props: MarkdownCodeBlockProps) {
return (
<span style={{fontSize: 16}}>
<HighLight
className={props.language || 'js'}
>
{props.literal}
</HighLight>
</span>
);
interface MarkdownCodeBlockState {}
export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, MarkdownCodeBlockState> {
// Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying
// to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed.
public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) {
return nextProps.literal !== this.props.literal || nextProps.language !== this.props.language;
}
public render() {
return (
<span style={{fontSize: 16}}>
<HighLight
className={this.props.language || 'javascript'}
>
{this.props.literal}
</HighLight>
</span>
);
}
}