ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-28 00:28:00 +02:00
Code Issues Releases Wiki Activity

separate breadcrumb functionality into own component

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-08-19 18:36:23 +02:00
parent 689796b115
commit 12de8139c2
2 changed files with 88 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
js/components/ascribe_slides_container/slides_container.js
View File

@ -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;
}
});
},

78
js/components/ascribe_slides_container/slides_container_breadcrumbs.js Normal file
View File

@ -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;