diff options
Diffstat (limited to 'stories/react/utils/SourceToggle.js')
-rw-r--r-- | stories/react/utils/SourceToggle.js | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/stories/react/utils/SourceToggle.js b/stories/react/utils/SourceToggle.js new file mode 100644 index 0000000..a05c8d0 --- /dev/null +++ b/stories/react/utils/SourceToggle.js @@ -0,0 +1,73 @@ +/* eslint-disable react/no-danger */ +import React from 'react'; +import jsxToString from './jsxToString.js'; + +import Prism from 'prismjs'; + +import PrismJsx from 'prismjs/components/prism-jsx.js'; // eslint-disable-line no-unused-vars + +const sources = { + React: 'React', + HTML: 'HTML' +}; + +export default class SourceToggle extends React.Component { + constructor(props) { + super(props); + this.state = { + source: sources.React + }; + } + + renderFromSource() { + let {jsx, html, renderFromJsx} = this.props; + let {source} = this.state; + let classname = 'source-toggle-example'; + switch (source) { + case sources.HTML: + return renderFromJsx ? <div className={classname}>{jsx}</div> : <div className={classname} dangerouslySetInnerHTML={{__html: html}} />; + case sources.React: + default: + return <div className={classname}>{jsx}</div>; + } + } + + renderMarkdown() { + let {jsx, html, exclude} = this.props; + let {source} = this.state; + switch (source) { + case sources.HTML: + return {__html: Prism.highlight(html, Prism.languages.html)}; + case sources.React: + default: + return {__html: Prism.highlight(jsxToString({jsx, exclude}), Prism.languages.jsx)}; + } + } + + render() { + let {title} = this.props; + return ( + <div className='source-toggle-wrapper'> + {title && <div className='source-toggle-title'>{title}</div>} + <div className='source-toggle'> + {this.renderFromSource()} + <div className='source-toggle-code'> + <div className='source-toggle-code-tabs'> + {Object.keys(sources).map((source, i) => ( + <div + key={i} + className={`source-toggle-tab${this.state.source === source ? ' selected' : ''}`} + onClick={() => this.setState({source})}> + {source} + </div> + ))} + </div> + <pre> + <code dangerouslySetInnerHTML={this.renderMarkdown()} /> + </pre> + </div> + </div> + </div> + ); + } +} |