skyquake/framework/widgets/JSONViewer/JSONViewer.js

   1 /**
   2  * Created by onvelocity on 2/2/16.
   3  */
   4
   5 import React from 'react'
   6 import Prism from 'prismjs'
   7 import PureRenderMixin from 'react-addons-pure-render-mixin'
   8
   9 import './JSONViewer.scss'
  10
  11 const YAML = require('json2yaml');
  12
  13 const cssString = `
  14                                 html, body {
  15                                         padding:0;
  16                                         margin:0;
  17                                 }
  18                                         /*
  19                                          copied from node_modules/prismjs/themes/prismjs.css
  20                                          */
  21                                         :not(pre) > code[class*="language-"],
  22                                         pre[class*="language-"] {
  23                                         font-size: 12px;
  24                                         padding:1rem;
  25                                         /*
  26                                         border: 1px solid rgba(220, 220, 220, 0.5);
  27                                         border-radius: 4px;
  28                                         */
  29                                         background-color: rgba(255, 255, 255, .25);
  30                                 }
  31
  32                                         /* Inline code */
  33                                         :not(pre) > code[class*="language-"] {
  34                                         padding: .1em;
  35                                 }
  36
  37                                         .token.comment,
  38                                         .token.prolog,
  39                                         .token.doctype,
  40                                         .token.cdata {
  41                                         color: slategray;
  42                                 }
  43
  44                                         .token.punctuation {
  45                                         color: #333;
  46                                 }
  47
  48                                         .namespace {
  49                                         opacity: .7;
  50                                 }
  51
  52                                         .token.property,
  53                                         .token.tag,
  54                                         .token.boolean,
  55                                         .token.number,
  56                                         .token.constant,
  57                                         .token.symbol,
  58                                         .token.deleted {
  59                                         color: #905;
  60                                 }
  61
  62                                         .token.selector,
  63                                         .token.attr-name,
  64                                         .token.string,
  65                                         .token.char,
  66                                         .token.builtin,
  67                                         .token.inserted {
  68                                         color: #df5000;
  69                                 }
  70
  71                                         .token.operator,
  72                                         .token.entity,
  73                                         .token.url,
  74                                         .language-css .token.string,
  75                                         .style .token.string {
  76                                         color: #a67f59;
  77                                 }
  78
  79                                         .token.atrule,
  80                                         .token.attr-value,
  81                                         .token.keyword {
  82                                         color: #07a;
  83                                 }
  84
  85                                         .token.function {
  86                                         color: #DD4A68;
  87                                 }
  88
  89                                         .token.regex,
  90                                         .token.important,
  91                                         .token.variable {
  92                                         color: #e90;
  93                                 }
  94
  95                                         .token.important,
  96                                         .token.bold {
  97                                         font-weight: bold;
  98                                 }
  99                                         .token.italic {
 100                                         font-style: italic;
 101                                 }
 102
 103                                         .token.entity {
 104                                         cursor: help;
 105                                 }
 106 `;
 107
 108 const JSONViewer = React.createClass({
 109         mixins: [PureRenderMixin],
 110         getInitialState: function () {
 111                 return {};
 112         },
 113         getDefaultProps: function () {
 114                 return {};
 115         },
 116         componentWillMount: function () {
 117         },
 118         componentDidMount: function () {
 119         },
 120         componentDidUpdate: function () {
 121         },
 122         componentWillUnmount: function () {
 123         },
 124         render() {
 125                 const text = YAML.stringify(this.props.json, undefined, 12).replace(/    /g, '     ');
 126                 const result = Prism.highlight(text, Prism.languages.javascript, 'javascript');
 127                 return (
 128                         <div className="JSONViewer">
 129                                 <style dangerouslySetInnerHTML={{__html: cssString}}></style>
 130                                 <label className="descriptor">
 131                                         <pre className="language-js">
 132                                                 <code dangerouslySetInnerHTML={{__html: result}} />
 133                                         </pre>
 134                                 </label>
 135                         </div>
 136                 );
 137         }
 138 });
 139
 140 export default JSONViewer;