Rift.IO OSM R1 Initial Submission

[osm/UI.git] / skyquake / framework / widgets / JSONViewer / JSONViewer.js

diff --git a/skyquake/framework/widgets/JSONViewer/JSONViewer.js b/skyquake/framework/widgets/JSONViewer/JSONViewer.js
new file mode 100644 (file)
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;