diff options
author | 2018-08-07 10:54:17 +0300 | |
---|---|---|
committer | 2018-08-07 11:06:44 +0300 | |
commit | b2a3acea0d0f66028c9ce5fad02d4ecc64abf70c (patch) | |
tree | 8d70110f34cb845965c42a5915e950bca967d2c3 /stories/react/utils/SourceToggle.js | |
parent | 05b37297177e8a342668c15e5d6f738b51f7aedd (diff) |
Initial commit.
Adding files needed for Linux Foundation.
Change-Id: I9f2b4851a5ae01f83800c7f8bab8608a2221c730
Issue-ID: SDC-1608
Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to 'stories/react/utils/SourceToggle.js')
-rw-r--r-- | stories/react/utils/SourceToggle.js | 73 |
1 files changed, 0 insertions, 73 deletions
diff --git a/stories/react/utils/SourceToggle.js b/stories/react/utils/SourceToggle.js deleted file mode 100644 index a05c8d0..0000000 --- a/stories/react/utils/SourceToggle.js +++ /dev/null @@ -1,73 +0,0 @@ -/* 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> - ); - } -} |