Create example to test out a large number of nodes

References #14.

Author: jakezatecky

examples/src/index.html

@@ -32,6 +32,9 @@ <h2>Pessimistic Toggle Example</h2>
       <p>Try clicking a partially-checked node. Instead of select all children, the pessimistic model will uncheck them.</p>
       <div id="pessimistic-toggle-example"></div>
 
+      <h2>Large Data Example</h2>
+      <div id="large-data-example"></div>
+
       <footer class="site-footer">
         <span class="site-footer-owner">
           <a href="https://github.com/jakezatecky/react-checkbox-tree">React Checkbox Tree</a> is maintained by <a href="https://github.com/jakezatecky">jakezatecky</a>.

examples/src/index.js

@@ -4,7 +4,9 @@ import ReactDOM from 'react-dom';
 import BasicExample from './js/BasicExample';
 import CustomIconsExample from './js/CustomIconsExample';
 import PessimisticToggleExample from './js/PessimisticToggleExample';
+import LargeDataExample from './js/LargeDataExample';
 
 ReactDOM.render(<BasicExample />, document.getElementById('basic-example'));
 ReactDOM.render(<CustomIconsExample />, document.getElementById('custom-icons-example'));
 ReactDOM.render(<PessimisticToggleExample />, document.getElementById('pessimistic-toggle-example'));
+ReactDOM.render(<LargeDataExample />, document.getElementById('large-data-example'));

examples/src/js/LargeDataExample.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import CheckboxTree from 'react-checkbox-tree';
+
+const parents = [];
+
+for (let i = 0; i < 100; i += 1) {
+	const children = [];
+
+	for (let j = 0; j < 200; j += 1) {
+		children.push({
+			value: `node-0-${i}-${j}`,
+			label: `Node 0-${i}-${j}`,
+		});
+	}
+
+	parents.push({
+		value: `node-0-${i}`,
+		label: `Node 0-${i}`,
+		children,
+	});
+}
+
+const nodes = [{
+	value: 'node-0',
+	label: 'Node 0',
+	children: parents,
+}];
+
+class LargeDataExample extends React.Component {
+	constructor() {
+		super();
+
+		this.state = {
+			checked: [],
+			expanded: [],
+		};
+
+		this.onCheck = this.onCheck.bind(this);
+		this.onExpand = this.onExpand.bind(this);
+	}
+
+	onCheck(checked) {
+		this.setState({ checked });
+	}
+
+	onExpand(expanded) {
+		this.setState({ expanded });
+	}
+
+	render() {
+		const { checked, expanded } = this.state;
+
+		return (
+			<CheckboxTree
+				checked={checked}
+				expanded={expanded}
+				nodes={nodes}
+				onCheck={this.onCheck}
+				onExpand={this.onExpand}
+			/>
+		);
+	}
+}
+
+export default LargeDataExample;