From 12de8139c23ef3e3abc3c115b29654e293bc6b77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Wed, 19 Aug 2015 18:36:23 +0200
Subject: [PATCH] separate breadcrumb functionality into own component

---
 .../slides_container.js                       | 54 +++----------
 .../slides_container_breadcrumbs.js           | 78 +++++++++++++++++++
 2 files changed, 88 insertions(+), 44 deletions(-)
 create mode 100644 js/components/ascribe_slides_container/slides_container_breadcrumbs.js

diff --git a/js/components/ascribe_slides_container/slides_container.js b/js/components/ascribe_slides_container/slides_container.js
index 3b0c493e..ea329ca2 100644
--- a/js/components/ascribe_slides_container/slides_container.js
+++ b/js/components/ascribe_slides_container/slides_container.js
@@ -6,6 +6,8 @@ import ReactAddons from 'react/addons';
 
 import Col from 'react-bootstrap/lib/Col';
 
+import SlidesContainerBreadcrumbs from './slides_container_breadcrumbs';
+
 let State = Router.State;
 let Navigation = Router.Navigation;
 
@@ -22,15 +24,6 @@ let SlidesContainer = React.createClass({
 
     mixins: [State, Navigation],
 
-    getDefaultProps() {
-        return {
-            glyphiconClassNames: {
-                pending: 'glyphicon glyphicon-chevron-right',
-                complete: 'glyphicon glyphicon-lock'
-            }
-        };
-    },
-
     getInitialState() {
         // handle queryParameters
         let queryParams = this.getQuery();
@@ -206,41 +199,13 @@ let SlidesContainer = React.createClass({
         // otherwise do not display the breadcrumbs at all
         // Also, if there is only one child, do not display the breadcrumbs
         if(breadcrumbs.length === numOfChildren && breadcrumbs.length > 1 && numOfChildren > 1) {
-            let numSlides = breadcrumbs.length;
-            let columnWidth = Math.floor(12 / numSlides);
-
             return (
-                <div className="row" style={{width: this.state.containerWidth}}>
-                    <div className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
-                        <div className="no-margin row ascribe-breadcrumb-container">
-                            {breadcrumbs.map((breadcrumb, i) => {
-
-                                let glyphiconClassName;
-
-                                if(i >= this.state.slideNum) {
-                                    glyphiconClassName = this.props.glyphiconClassNames.pending;
-                                } else {
-                                    glyphiconClassName = this.props.glyphiconClassNames.completed;
-                                }
-
-                                return (
-                                    <Col
-                                        className="no-padding"
-                                        sm={columnWidth}
-                                        key={i}>
-                                        <div className="ascribe-breadcrumb">
-                                            <a className={this.state.slideNum === i ? 'active' : ''}>
-                                                {breadcrumb}
-                                            <span className={i === numSlides - 1 ? 'invisible' : '' + 'pull-right ' + glyphiconClassName}>
-                                            </span>
-                                            </a>
-                                        </div>
-                                    </Col>
-                                );
-                            })}
-                        </div>
-                    </div>
-                </div>
+                <SlidesContainerBreadcrumbs
+                    breadcrumbs={breadcrumbs}
+                    slideNum={this.state.slideNum}
+                    numOfSlides={breadcrumbs.length}
+                    containerWidth={this.state.containerWidth}
+                    glyphiconClassNames={this.props.glyphiconClassNames}/>
             );
         } else {
             return null;
@@ -251,9 +216,9 @@ let SlidesContainer = React.createClass({
     // Also, a key is nice to have!
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child, i) => {
+
             // since the default parameter of startFrom is -1, we do not need to check
             // if its actually present in the url bar, as it will just not match
-
             if(i >= this.state.startFrom) {
                 return ReactAddons.addons.cloneWithProps(child, {
                     className: 'ascribe-slide',
@@ -266,6 +231,7 @@ let SlidesContainer = React.createClass({
                 // Abortions are bad mkay
                 return null;
             }
+
         });
     },
 
diff --git a/js/components/ascribe_slides_container/slides_container_breadcrumbs.js b/js/components/ascribe_slides_container/slides_container_breadcrumbs.js
new file mode 100644
index 00000000..eb3e95f1
--- /dev/null
+++ b/js/components/ascribe_slides_container/slides_container_breadcrumbs.js
@@ -0,0 +1,78 @@
+'use strict';
+
+import React from 'react';
+
+import Col from 'react-bootstrap/lib/Col';
+
+
+// Note:
+//
+// If we ever need generic breadcrumbs component, we should refactor this
+let SlidesContainerBreadcrumbs = React.createClass({
+    propTypes: {
+        breadcrumbs: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
+        
+        slideNum: React.PropTypes.number.isRequired,
+        numOfSlides: React.PropTypes.number.isRequired,
+
+        containerWidth: React.PropTypes.number.isRequired,
+
+        glyphiconClassNames: React.PropTypes.shape({
+            pending: React.PropTypes.string,
+            complete: React.PropTypes.string
+        })
+    },
+
+    getDefaultProps() {
+        return {
+            glyphiconClassNames: {
+                pending: 'glyphicon glyphicon-chevron-right',
+                complete: 'glyphicon glyphicon-lock'
+            }
+        };
+    },
+
+    render() {
+        let breadcrumbs = this.props.breadcrumbs;
+        let numSlides = breadcrumbs.length;
+        let columnWidth = Math.floor(12 / numSlides);
+
+        return (
+            <div className="row" style={{width: this.props.containerWidth}}>
+                <div className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
+                    <div className="no-margin row ascribe-breadcrumb-container">
+                        {breadcrumbs.map((breadcrumb, i) => {
+
+                            // Depending on the progress the user has already made, we display different
+                            // glyphicons that can also be specified from the outside
+                            let glyphiconClassName;
+
+                            if(i >= this.props.slideNum) {
+                                glyphiconClassName = this.props.glyphiconClassNames.pending;
+                            } else {
+                                glyphiconClassName = this.props.glyphiconClassNames.completed;
+                            }
+
+                            return (
+                                <Col
+                                    className="no-padding"
+                                    sm={columnWidth}
+                                    key={i}>
+                                    <div className="ascribe-breadcrumb">
+                                        <a className={this.props.slideNum === i ? 'active' : ''}>
+                                            {breadcrumb}
+                                        <span className={i === numSlides - 1 ? 'invisible' : '' + 'pull-right ' + glyphiconClassName}>
+                                        </span>
+                                        </a>
+                                    </div>
+                                </Col>
+                            );
+                        })}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default SlidesContainerBreadcrumbs;
\ No newline at end of file