recursive collapsing for huge collections

Author: alexkuz

package.json

@@ -53,6 +53,7 @@
   "dependencies": {
     "babel-plugin-transform-runtime": "^6.5.0",
     "babel-runtime": "^6.3.13",
-    "react-mixin": "^1.7.0"
+    "react-mixin": "^1.7.0",
+    "react-pure-render": "^1.0.2"
   }
 }

src/ItemRange.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import shouldPureComponentUpdate from 'react-pure-render/function';
+import JSONArrow from './JSONArrow';
+
+const STYLES = {
+  itemRange: {
+    margin: '8px 0 8px 14px',
+    cursor: 'pointer'
+  }
+};
+
+
+export default class ItemRange extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { expanded: false };
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  static propTypes = {
+  }
+
+  shouldComponentUpdate = shouldPureComponentUpdate;
+
+  render() {
+    const { theme, styles, from, to, getChildNodes } = this.props;
+
+    return (this.state.expanded ?
+      <div style={{ color: theme.base0D, ...styles.label }}>
+        {getChildNodes(this.props, from, to)}
+      </div> :
+      <div style={{ color: theme.base0D, ...STYLES.itemRange, ...styles.label }}
+           onClick={this.handleClick}>
+        <JSONArrow
+          theme={theme}
+          open={false}
+          onClick={this.handleClick}
+          style={styles.getArrowStyle(false)}
+          double />
+        {`${from} ... ${to}`}
+      </div>
+    );
+  }
+
+  handleClick() {
+    this.setState({ expanded: !this.state.expanded });
+  }
+}

src/JSONArrayNode.js

@@ -1,70 +1,19 @@
 import React from 'react';
 import JSONNestedNode from './JSONNestedNode';
-import grabNode from './grab-node';
 
 // 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' : '');
-  }
-  return getItemString('Array', data, itemType, itemString);
-}
-
-// 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,
-  allExpanded,
-  keyPath
-}) {
-  const childNodes = [];
-  data.forEach((value, key) => {
-    let previousDataValue;
-    if (typeof previousData !== 'undefined' && previousData !== null) {
-      previousDataValue = previousData[key];
-    }
-
-    const node = grabNode({
-      getItemString,
-      keyPath: [key, ...keyPath],
-      labelRenderer,
-      previousData: previousDataValue,
-      renderItemString,
-      styles,
-      theme,
-      value,
-      valueRenderer,
-      allExpanded
-    });
-
-    if (node !== false) {
-      childNodes.push(node);
-    }
-  });
-
-  return childNodes;
+function createItemString(data) {
+  return `${data.length} ${data.length !== 1 ? 'items' : 'item'}`;
 }
 
 // Configures <JSONNestedNode> to render an Array
 export default function JSONArrayNode({ ...props }) {
   return (
     <JSONNestedNode
       {...props}
-      getChildNodes={getChildNodes}
       nodeType='Array'
       nodeTypeIndicator='[]'
-      renderItemString={renderItemString}
+      createItemString={createItemString}
     />
   );
 }

src/JSONArrow.js

@@ -10,25 +10,39 @@ const styles = {
     transition: '150ms',
     WebkitTransition: '150ms',
     MozTransition: '150ms',
+    WebkitTransform: 'rotateZ(-90deg)',
+    MozTransform: 'rotateZ(-90deg)',
+    transform: 'rotateZ(-90deg)',
+    position: 'relative'
+  },
+  baseDouble: {
+    marginRight: 10
+  },
+  arrow: {
     borderLeft: '5px solid transparent',
     borderRight: '5px solid transparent',
     borderTopWidth: 5,
-    borderTopStyle: 'solid',
-    WebkitTransform: 'rotateZ(-90deg)',
-    MozTransform: 'rotateZ(-90deg)',
-    transform: 'rotateZ(-90deg)'
+    borderTopStyle: 'solid'
   },
   open: {
     WebkitTransform: 'rotateZ(0deg)',
     MozTransform: 'rotateZ(0deg)',
     transform: 'rotateZ(0deg)'
+  },
+  inner: {
+    position: 'absolute',
+    top: 0,
+    left: -5
   }
 };
 
 export default class JSONArrow extends React.Component {
   render() {
     let style = {
       ...styles.base,
+      ...styles.arrow
+    };
+    const color = {
       borderTopColor: this.props.theme.base0D
     };
     if (this.props.open) {
@@ -37,10 +51,22 @@ export default class JSONArrow extends React.Component {
         ...styles.open
       };
     }
+    if (this.props.double) {
+      style = {
+        ...style,
+        ...styles.baseDouble
+      };
+    }
     style = {
       ...style,
       ...this.props.style
     };
-    return <div style={style} onClick={this.props.onClick}/>;
+    return (
+      <div style={{ ...color, ...style }} onClick={this.props.onClick}>
+        {this.props.double &&
+          <div style={{ ...color, ...styles.inner, ...styles.arrow }} />
+        }
+      </div>
+    );
   }
 }

src/JSONIterableNode.js

@@ -1,86 +1,32 @@
 import React from 'react';
 import JSONNestedNode from './JSONNestedNode';
-import grabNode from './grab-node';
 
 // 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) {
-    let count = 0;
-    if (Number.isSafeInteger(data.size)) {
-      count = data.size;
-    } else {
-      for (const entry of data) { // eslint-disable-line no-unused-vars
-        count += 1;
+function createItemString(data, limit) {
+  let count = 0;
+  let hasMore = false;
+  if (Number.isSafeInteger(data.size)) {
+    count = data.size;
+  } else {
+    for (const entry of data) { // eslint-disable-line no-unused-vars
+      if (limit && count + 1 > limit) {
+        hasMore = true;
+        break;
       }
+      count += 1;
     }
-    itemString = count + ' entr' + (count !== 1 ? 'ies' : 'y');
   }
-  return getItemString('Iterable', data, itemType, itemString);
-}
-
-// 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,
-  allExpanded,
-  keyPath
-}) {
-  const childNodes = [];
-  for (const entry of data) {
-    let key = null;
-    let value = null;
-    if (Array.isArray(entry)) {
-      [key, value] = entry;
-    } else {
-      key = childNodes.length;
-      value = entry;
-    }
-
-    let previousDataValue;
-    if (typeof previousData !== 'undefined' && previousData !== null) {
-      previousDataValue = previousData[key];
-    }
-
-    const node = grabNode({
-      getItemString,
-      keyPath: [key, ...keyPath],
-      labelRenderer,
-      previousData: previousDataValue,
-      styles,
-      theme,
-      value,
-      valueRenderer,
-      allExpanded
-    });
-
-    if (node !== false) {
-      childNodes.push(node);
-    }
-  }
-
-  return childNodes;
+  return `${hasMore ? '>' : ''}${count} ${count !== 1 ? 'entries' : 'entry'}`;
 }
 
 // Configures <JSONNestedNode> to render an iterable
 export default function({ ...props }) {
   return (
     <JSONNestedNode
       {...props}
-      getChildNodes={getChildNodes}
       nodeType='Iterable'
       nodeTypeIndicator='()'
-      renderItemString={renderItemString}
+      createItemString={createItemString}
     />
   );
 }