From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001
From: Israel Lavi <israel.lavi@intl.att.com>
Date: Mon, 21 May 2018 17:42:00 +0300
Subject: init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>
---
 stories/react/utils/SourceToggle.js | 73 +++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 stories/react/utils/SourceToggle.js

(limited to 'stories/react/utils/SourceToggle.js')

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>
+		);
+	}
+}
-- 
cgit 1.2.3-korg