Merge pull request #7 from liamkennedy89/master

added JSONDateNode to display Date values

Author: chibicode

examples/src/App.js

@@ -8,6 +8,7 @@ export default class App extends Component {
     const data = {
       array: [1, 2, 3],
       bool: true,
+      date: new Date(),
       object: {
         foo: 'bar'
       },
@@ -33,6 +34,7 @@ export default class App extends Component {
       base0D: '#66d9ef',
       base0E: '#ae81ff',
       base0F: '#cc6633'
+      
     };
 
     return (

src/JSONDateNode.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import reactMixin from 'react-mixin';
+import { SquashClickEventMixin } from './mixins';
+import hexToRgb from './utils/hexToRgb';
+
+const styles = {
+  base: {
+    paddingTop: 3,
+    paddingBottom: 3,
+    paddingRight: 0,
+    marginLeft: 14
+  },
+  label: {
+    display: 'inline-block',
+    marginRight: 5
+  }
+};
+
+@reactMixin.decorate(SquashClickEventMixin)
+export default class JSONDateNode extends React.Component {
+  render() {
+    let backgroundColor = 'transparent';
+    if (this.props.previousValue !== this.props.value) {
+      const bgColor = hexToRgb(this.props.theme.base06);
+      backgroundColor = `rgba(${bgColor.r}, ${bgColor.g}, ${bgColor.b}, 0.1)`;
+    }
+    return (
+      <li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
+        <label style={{
+          ...styles.label,
+          color: this.props.theme.base0D
+        }}>
+          {this.props.keyName}:
+        </label>
+        <span style={{ color: this.props.theme.base0B }}>{this.props.value.toISOString()}</span>
+      </li>
+    );
+  }
+}

src/grab-node.js

@@ -7,6 +7,7 @@ import JSONStringNode from './JSONStringNode';
 import JSONNumberNode from './JSONNumberNode';
 import JSONBooleanNode from './JSONBooleanNode';
 import JSONNullNode from './JSONNullNode';
+import JSONDateNode from './JSONDateNode';
 
 export default function(key, value, prevValue, theme, initialExpanded = false) {
   const nodeType = objType(value);
@@ -22,8 +23,10 @@ export default function(key, value, prevValue, theme, initialExpanded = false) {
     return <JSONNumberNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
   } else if (nodeType === 'Boolean') {
     return <JSONBooleanNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
-  } else if (nodeType === 'Null') {
+  } else if (nodeType === 'Date') {
+    return <JSONDateNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
+  }else if (nodeType === 'Null') {
     return <JSONNullNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
-  }
+  } 
   return false;
 }