Merge pull request #18 from bvaughn/master

Support new `labelRenderer` and `valueRenderer` properties

Author: chibicode

.eslintrc

@@ -13,6 +13,7 @@
     // Temporarily disabled due to babel-eslint issues:
     "block-scoped-var": 0,
     "padded-blocks": 0,
+    "no-param-reassign": 0,
   },
   "plugins": [
     "react"

README.md

@@ -117,6 +117,19 @@ Then the preview of child elements now look like this:
 
 ![](http://cl.ly/image/1J1a0b0T0K3c/screenshot%202015-10-07%20at%203.44.31%20PM.png)
 
+#### Customize Rendering
+
+You can pass the following properties to customize rendered labels and values:
+
+```js
+<JSONTree
+    labelRenderer={raw => <strong>{raw}</strong>}
+    valueRenderer={raw => <em>{raw}</em>}
+/>
+```
+
+In this example the label and value will be rendered with `<strong>` and `<em>` wrappers respectively.
+
 ### Credits
 
 - All credits to [Dave Vedder](http://www.eskimospy.com/) ([[email protected]](mailto:[email protected])), who wrote the original code as [JSONViewer](https://bitbucket.org/davevedder/react-json-viewer/).

examples/package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "immutable": "^3.7.4",
-    "react": "^0.13.0"
+    "react": "^0.14.0",
+    "react-dom": "^0.14.5"
   }
 }

examples/src/App.js

@@ -65,6 +65,13 @@ export default class App extends Component {
                     getValueStyle={ getStyle }
                     getItemString={ getItemString }/>
         </div>
+        <h3>More Fine Grained Rendering</h3>
+        <p>Pass <code>labelRenderer</code> or <code>valueRenderer</code>.</p>
+        <div>
+          <JSONTree data={ data }
+                    labelRenderer={raw => <strong>{ raw }</strong>}
+                    valueRenderer={raw => <em>{ raw }</em>} />
+        </div>
       </div>
     );
   }

examples/src/index.js

@@ -1,4 +1,5 @@
+import { render } from 'react-dom';
 import React from 'react';
 import App from './App';
 
-React.render(<App />, document.getElementById('root'));
+render(<App />, document.getElementById('root'));

src/JSONArrayNode.js

@@ -1,131 +1,67 @@
 import React from 'react';
-import reactMixin from 'react-mixin';
-import { ExpandedStateHandlerMixin } from './mixins';
-import JSONArrow from './JSONArrow';
+import JSONNestedNode from './JSONNestedNode';
 import grabNode from './grab-node';
 
-const styles = {
-  base: {
-    position: 'relative',
-    paddingTop: 3,
-    paddingBottom: 3,
-    paddingRight: 0,
-    marginLeft: 14
-  },
-  label: {
-    margin: 0,
-    padding: 0,
-    display: 'inline-block'
-  },
-  span: {
-    cursor: 'default'
-  },
-  spanType: {
-    marginLeft: 5,
-    marginRight: 5
+// Returns the "n Items" string for this node, generating and caching it if it hasn't been created yet.
+function renderItemString({
+  data,
+  getItemString,
+  itemString,
+  itemType
+}) {
+  if (!itemString) {
+    itemString = data.length + ' item' + (data.length !== 1 ? 's' : '');
   }
-};
-
-@reactMixin.decorate(ExpandedStateHandlerMixin)
-export default class JSONArrayNode extends React.Component {
-  defaultProps = {
-    data: [],
-    initialExpanded: false
-  };
-
-  // flag to see if we still need to render our child nodes
-  needsChildNodes = true;
-
-  // cache store for our child nodes
-  renderedChildren = [];
+  return getItemString('Array', data, itemType, itemString);
+}
 
-  // cache store for the number of items string we display
-  itemString = false;
+// Returns the child nodes for each entry in iterable.
+// If we have generated them previously we return from cache; otherwise we create them.
+function getChildNodes({
+  data,
+  getItemString,
+  labelRenderer,
+  previousData,
+  styles,
+  theme,
+  valueRenderer
+}) {
+  const childNodes = [];
+  data.forEach((value, key) => {
+    let previousDataValue;
+    if (typeof previousData !== 'undefined' && previousData !== null) {
+      previousDataValue = previousData[key];
+    }
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      expanded: this.props.initialExpanded,
-      createdChildNodes: false
-    };
-  }
+    const node = grabNode({
+      getItemString,
+      key,
+      labelRenderer,
+      previousData: previousDataValue,
+      renderItemString,
+      styles,
+      theme,
+      value,
+      valueRenderer
+    });
 
-  // Returns the child nodes for each element in the array. If we have
-  // generated them previously, we return from cache, otherwise we create
-  // them.
-  getChildNodes() {
-    if (this.state.expanded && this.needsChildNodes) {
-      let childNodes = [];
-      this.props.data.forEach((element, idx) => {
-        let prevData;
-        if (typeof this.props.previousData !== 'undefined' && this.props.previousData !== null) {
-          prevData = this.props.previousData[idx];
-        }
-        const node = grabNode(idx, element, prevData, this.props.theme, this.props.styles, this.props.getItemString);
-        if (node !== false) {
-          childNodes.push(node);
-        }
-      });
-      this.needsChildNodes = false;
-      this.renderedChildren = childNodes;
+    if (node !== false) {
+      childNodes.push(node);
     }
-    return this.renderedChildren;
-  }
+  });
 
-  // Returns the "n Items" string for this node, generating and
-  // caching it if it hasn't been created yet.
-  getItemString(itemType) {
-    if (!this.itemString) {
-      this.itemString = this.props.data.length + ' item' + (this.props.data.length !== 1 ? 's' : '');
-    }
-    return this.props.getItemString('Array', this.props.data, itemType, this.itemString);
-  }
+  return childNodes;
+}
 
-  render() {
-    const childNodes = this.getChildNodes();
-    const childListStyle = {
-      padding: 0,
-      margin: 0,
-      listStyle: 'none',
-      display: (this.state.expanded) ? 'block' : 'none'
-    };
-    let containerStyle;
-    let spanStyle = {
-      ...styles.span,
-      color: this.props.theme.base0E
-    };
-    containerStyle = {
-      ...styles.base
-    };
-    if (this.state.expanded) {
-      spanStyle = {
-        ...spanStyle,
-        color: this.props.theme.base03
-      };
-    }
-    return (
-      <li style={containerStyle}>
-        <JSONArrow theme={this.props.theme} open={this.state.expanded} onClick={::this.handleClick} style={this.props.styles.getArrowStyle(this.state.expanded)}/>
-        <label style={{
-          ...styles.label,
-          color: this.props.theme.base0D,
-          ...this.props.styles.getLabelStyle('Array', this.state.expanded)
-        }} onClick={::this.handleClick}>
-          {this.props.keyName}:
-        </label>
-        <span style={{
-          ...spanStyle,
-          ...this.props.styles.getItemStringStyle('Array', this.state.expanded)
-        }} onClick={::this.handleClick}>
-          {this.getItemString(<span style={styles.spanType}>[]</span>)}
-        </span>
-        <ol style={{
-          ...childListStyle,
-          ...this.props.styles.getListStyle('Array', this.state.expanded)
-        }}>
-          {childNodes}
-        </ol>
-      </li>
-    );
-  }
+// Configures <JSONNestedNode> to render an Array
+export default function JSONArrayNode({ ...props }) {
+  return (
+    <JSONNestedNode
+      {...props}
+      getChildNodes={getChildNodes}
+      nodeType='Array'
+      nodeTypeIndicator='[]'
+      renderItemString={renderItemString}
+    />
+  );
 }