From 12de8139c23ef3e3abc3c115b29654e293bc6b77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= 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 ( -
-
-
- {breadcrumbs.map((breadcrumb, i) => { - - let glyphiconClassName; - - if(i >= this.state.slideNum) { - glyphiconClassName = this.props.glyphiconClassNames.pending; - } else { - glyphiconClassName = this.props.glyphiconClassNames.completed; - } - - return ( - -
- - {breadcrumb} - - - -
- - ); - })} -
-
-
+ ); } 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 ( +
+
+
+ {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 ( + + + + ); + })} +
+
+
+ ); + } +}); + +export default SlidesContainerBreadcrumbs; \ No newline at end of file