Added subblocks in the minimap. #26

js/components/BlockNode.js

@@ -3,6 +3,7 @@ var cx = require('classnames');
 var { DragSource, DropTarget } = require('react-dnd');
 var ItemTypes = require('./ItemTypes');
 var flow = require('lodash/function/flow');
+var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
 
 /* setup for dragging block node */
 var nodeSource = {
@@ -55,6 +56,7 @@ function sortCollect(connect, monitor) {
 }
 
 var BlockNode = React.createClass({
+    mixins: [PureRenderMixin],
     propTypes: {
         collapsed: React.PropTypes.bool,
         defaultCollapsed: React.PropTypes.bool,
@@ -95,8 +97,7 @@ var BlockNode = React.createClass({
                     </div>);
 
         return connectSortTarget(connectDragSource(connectDropTarget(
-           <div className='tree-view_node-block'
-                  style={{opacity: isDragging ? 0 : 1}} onClick={this.handleCollapse}> {arrow}
+           <div className='tree-view_node-block' style={{opacity: isDragging ? 0 : 1}}> {arrow}
                 <span className="tree-view_block-title" onClick={handleClick}>{"Block #" + id}</span>
                 { collapsed ? null : <div className="tree-view_children">{children}</div> }
            </div>

js/components/QuestionNode.js

@@ -2,6 +2,7 @@ var React = require('react');
 var { DragSource, DropTarget } = require('react-dnd');
 var cx = require('classnames');
 var flow = require('lodash/function/flow');
+var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
 var ItemTypes = require('./ItemTypes');
 
 /* setup for dragging question nodes */
@@ -40,6 +41,7 @@ function dropCollect(connect, monitor) {
 }
 
 var QuestionNode = React.createClass({
+    mixins: [PureRenderMixin],
     propTypes: {
         collapsed: React.PropTypes.bool,
         defaultCollapsed: React.PropTypes.bool,

js/components/TreeView.js

@@ -5,10 +5,12 @@ var QuestionNode = require('./QuestionNode');
 var SurveyActions = require('../actions/SurveyActions');
 var ItemTypes = require('./ItemTypes');
 var SurveyStore = require('../stores/SurveyStore');
+var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
 
 var TreeView = React.createClass({
+    mixins: [PureRenderMixin],
     propTypes: {
-        survey: React.PropTypes.instanceOf(List)
+        survey: React.PropTypes.instanceOf(List).isRequired
     },
     getInitialState() {
         return {
@@ -93,20 +95,50 @@ var TreeView = React.createClass({
             });
         }
     },
+    renderSubblocks(block) {
+        var subblocks = block.get('subblocks');
+        var self = this;
+        return subblocks.map(subb =>
+                <BlockNode key={subb.get('id')} id={subb.get('id')}
+                   handleClick={self.focusOnItem.bind(this, subb.get('id'))}
+                   handleDrop={self.handleDrop}
+                   reorderBlock={self.reorderBlock} >
+
+                     {self.renderSubblocks(subb)}
+
+                     {subb.get('questions').map(ques =>
+                        <QuestionNode id={ques.get('id')}
+                                      key={ques.get('id')}
+                                      label={self.ellipsize(ques.get('qtext'))}
+                                      handleClick={self.focusOnItem.bind(this, ques.get('id'))}
+                                      handleDrop={self.handleDrop}
+                                      reorderQuestion={self.reorderQuestion}>
+                            <div className="tree-view_node">{"Options: " + ques.get('options').count()}</div>
+                            <div className="tree-view_node">{self.renderProp('ordering', ques.get('ordering'))}</div>
+                            <div className="tree-view_node">{self.renderProp('exclusive', ques.get('exclusive'))}</div>
+                            <div className="tree-view_node">{self.renderProp('freetext', ques.get('freetext'))}</div>
+                        </QuestionNode>
+                     )}
+               </BlockNode>
+       );
+    },
     render() {
         var { survey } = this.state;
         var self = this;
 
         // build the tree
         var tree = survey.map((block, i) => {
             var questions = block.get('questions');
+            var subblocks = block.get('subblocks');
             return (
                 <BlockNode key={block.get('id')} id={block.get('id')}
                            handleClick={self.focusOnItem.bind(this, block.get('id'))}
                            handleDrop={self.handleDrop}
                            reorderBlock={self.reorderBlock}>
 
-                    {questions.map((ques, j) =>
+                    {self.renderSubblocks(block)}
+
+                    {questions.map(ques =>
                         <QuestionNode id={ques.get('id')}
                                       key={ques.get('id')}
                                       label={self.ellipsize(ques.get('qtext'))}