Merge pull request #15 from mdziekon/undefined-values

Display undefined values

Author: chibicode

examples/src/App.js

@@ -10,7 +10,8 @@ export default class App extends Component {
       bool: true,
       date: new Date(),
       object: {
-        foo: 'bar'
+        foo: 'bar',
+        baz: undefined
       },
       immutable: Map({ key: 'value' })
     };

src/JSONUndefinedNode.js

@@ -0,0 +1,45 @@
+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,
+    WebkitUserSelect: 'text',
+    MozUserSelect: 'text'
+  },
+  label: {
+    display: 'inline-block',
+    marginRight: 5
+  }
+};
+
+@reactMixin.decorate(SquashClickEventMixin)
+export default class JSONUndefinedNode 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.styles.getLabelStyle('Undefined', true)
+        }}>
+          {this.props.keyName}:
+        </label>
+        <span style={{
+          color: this.props.theme.base08,
+          ...this.props.styles.getValueStyle('Undefined', true)
+        }}>undefined</span>
+      </li>
+    );
+  }
+}

src/grab-node.js

@@ -8,6 +8,7 @@ import JSONNumberNode from './JSONNumberNode';
 import JSONBooleanNode from './JSONBooleanNode';
 import JSONNullNode from './JSONNullNode';
 import JSONDateNode from './JSONDateNode';
+import JSONUndefinedNode from './JSONUndefinedNode';
 
 export default function(key, value, prevValue, theme, styles, getItemString, initialExpanded = false) {
   const nodeType = objType(value);
@@ -27,6 +28,8 @@ export default function(key, value, prevValue, theme, styles, getItemString, ini
     return <JSONDateNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} styles={styles} />;
   } else if (nodeType === 'Null') {
     return <JSONNullNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} styles={styles} />;
+  } else if (nodeType === 'Undefined') {
+    return <JSONUndefinedNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} styles={styles} />;
   }
   return false;
 }