Support functions

Author: chibicode

examples/src/App.js

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

src/JSONFunctionNode.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 JSONFunctionNode 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)
+        }}>{ this.props.value.toString() }</span>
+      </li>
+    );
+  }
+}

src/grab-node.js

@@ -9,6 +9,7 @@ import JSONBooleanNode from './JSONBooleanNode';
 import JSONNullNode from './JSONNullNode';
 import JSONDateNode from './JSONDateNode';
 import JSONUndefinedNode from './JSONUndefinedNode';
+import JSONFunctionNode from './JSONFunctionNode';
 
 export default function(key, value, prevValue, theme, styles, getItemString, initialExpanded = false) {
   const nodeType = objType(value);
@@ -30,6 +31,8 @@ export default function(key, value, prevValue, theme, styles, getItemString, ini
     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} />;
+  } else if (nodeType === 'Function') {
+    return <JSONFunctionNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} styles={styles} />;
   }
   return false;
 }