Rift.IO OSM R1 Initial Submission
Signed-off-by: Jeremy Mordkoff <jeremy.mordkoff@riftio.com>
diff --git a/skyquake/framework/widgets/JSONViewer/JSONViewer.js b/skyquake/framework/widgets/JSONViewer/JSONViewer.js
new file mode 100644
index 0000000..2f8c0a8
--- /dev/null
+++ b/skyquake/framework/widgets/JSONViewer/JSONViewer.js
@@ -0,0 +1,140 @@
+/**
+ * Created by onvelocity on 2/2/16.
+ */
+
+import React from 'react'
+import Prism from 'prismjs'
+import PureRenderMixin from 'react-addons-pure-render-mixin'
+
+import './JSONViewer.scss'
+
+const YAML = require('json2yaml');
+
+const cssString = `
+ html, body {
+ padding:0;
+ margin:0;
+ }
+ /*
+ copied from node_modules/prismjs/themes/prismjs.css
+ */
+ :not(pre) > code[class*="language-"],
+ pre[class*="language-"] {
+ font-size: 12px;
+ padding:1rem;
+ /*
+ border: 1px solid rgba(220, 220, 220, 0.5);
+ border-radius: 4px;
+ */
+ background-color: rgba(255, 255, 255, .25);
+ }
+
+ /* Inline code */
+ :not(pre) > code[class*="language-"] {
+ padding: .1em;
+ }
+
+ .token.comment,
+ .token.prolog,
+ .token.doctype,
+ .token.cdata {
+ color: slategray;
+ }
+
+ .token.punctuation {
+ color: #333;
+ }
+
+ .namespace {
+ opacity: .7;
+ }
+
+ .token.property,
+ .token.tag,
+ .token.boolean,
+ .token.number,
+ .token.constant,
+ .token.symbol,
+ .token.deleted {
+ color: #905;
+ }
+
+ .token.selector,
+ .token.attr-name,
+ .token.string,
+ .token.char,
+ .token.builtin,
+ .token.inserted {
+ color: #df5000;
+ }
+
+ .token.operator,
+ .token.entity,
+ .token.url,
+ .language-css .token.string,
+ .style .token.string {
+ color: #a67f59;
+ }
+
+ .token.atrule,
+ .token.attr-value,
+ .token.keyword {
+ color: #07a;
+ }
+
+ .token.function {
+ color: #DD4A68;
+ }
+
+ .token.regex,
+ .token.important,
+ .token.variable {
+ color: #e90;
+ }
+
+ .token.important,
+ .token.bold {
+ font-weight: bold;
+ }
+ .token.italic {
+ font-style: italic;
+ }
+
+ .token.entity {
+ cursor: help;
+ }
+`;
+
+const JSONViewer = React.createClass({
+ mixins: [PureRenderMixin],
+ getInitialState: function () {
+ return {};
+ },
+ getDefaultProps: function () {
+ return {};
+ },
+ componentWillMount: function () {
+ },
+ componentDidMount: function () {
+ },
+ componentDidUpdate: function () {
+ },
+ componentWillUnmount: function () {
+ },
+ render() {
+ const text = YAML.stringify(this.props.json, undefined, 12).replace(/ /g, ' ');
+ const result = Prism.highlight(text, Prism.languages.javascript, 'javascript');
+ return (
+ <div className="JSONViewer">
+ <style dangerouslySetInnerHTML={{__html: cssString}}></style>
+ <label className="descriptor">
+ <pre className="language-js">
+ <code dangerouslySetInnerHTML={{__html: result}} />
+ </pre>
+ </label>
+ </div>
+ );
+ }
+});
+
+export default JSONViewer;