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

refactor breadcrumbs to attributes

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-08-19 14:11:03 +02:00
parent 6dab66ec61
commit 406cee5bd3
2 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,6 @@ let Navigation = Router.Navigation;
let SlidesContainer = React.createClass({ let SlidesContainer = React.createClass({
propTypes: { propTypes: {
breadcrumbs: React.PropTypes.arrayOf(React.PropTypes.string),
children: React.PropTypes.arrayOf(React.PropTypes.element), children: React.PropTypes.arrayOf(React.PropTypes.element),
forwardProcess: React.PropTypes.bool.isRequired forwardProcess: React.PropTypes.bool.isRequired
}, },
@ -135,15 +134,31 @@ let SlidesContainer = React.createClass({
} }
}, },
renderBreadCrumbs() { extractBreadcrumbs() {
if (this.props.breadcrumbs) { let breadcrumbs = [];
let numSlides = this.props.breadcrumbs.length;
ReactAddons.Children.map(this.props.children, (child) => {
breadcrumbs.push(child.props['data-slide-title']);
});
return breadcrumbs;
},
renderBreadcrumbs() {
let breadcrumbs = this.extractBreadcrumbs();
let numOfChildren = React.Children.count(this.props.children);
// check if every child/slide has a title,
// otherwise do not display the breadcrumbs at all
if(breadcrumbs.length === numOfChildren) {
let numSlides = breadcrumbs.length;
let columnWidth = Math.floor(12 / numSlides); let columnWidth = Math.floor(12 / numSlides);
return ( return (
<div className="row" style={{width: this.state.containerWidth}}> <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="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"> <div className="no-margin row ascribe-breadcrumb-container">
{this.props.breadcrumbs.map((breadcrumb, i) => { {breadcrumbs.map((breadcrumb, i) => {
return ( return (
<Col <Col
className="no-padding" className="no-padding"
@ -151,7 +166,7 @@ let SlidesContainer = React.createClass({
key={i}> key={i}>
<div className="ascribe-breadcrumb"> <div className="ascribe-breadcrumb">
<a className={this.state.slideNum === i ? 'active' : ''}> <a className={this.state.slideNum === i ? 'active' : ''}>
{this.props.breadcrumbs[i]} {breadcrumb}
<span className={i === numSlides - 1 ? 'invisible' : '' + 'pull-right glyphicon glyphicon-chevron-right'}> <span className={i === numSlides - 1 ? 'invisible' : '' + 'pull-right glyphicon glyphicon-chevron-right'}>
</span> </span>
</a> </a>
@ -163,8 +178,9 @@ let SlidesContainer = React.createClass({
</div> </div>
</div> </div>
); );
} else {
return null;
} }
return null;
}, },
// Since we need to give the slides a width, we need to call ReactAddons.addons.cloneWithProps // Since we need to give the slides a width, we need to call ReactAddons.addons.cloneWithProps
@ -186,7 +202,7 @@ let SlidesContainer = React.createClass({
<div <div
className="container ascribe-sliding-container-wrapper" className="container ascribe-sliding-container-wrapper"
ref="containerWrapper"> ref="containerWrapper">
{this.renderBreadCrumbs()} {this.renderBreadcrumbs()}
<div <div
className="container ascribe-sliding-container" className="container ascribe-sliding-container"
style={{ style={{

7
js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
View File

@ -138,9 +138,8 @@ let CylandRegisterPiece = React.createClass({
return ( return (
<SlidesContainer <SlidesContainer
ref="slidesContainer" ref="slidesContainer"
breadcrumbs={['Register work', 'Additional details', 'Loan']}
forwardProcess={true}> forwardProcess={true}>
<div> <div data-slide-title="Register work">
<Row className="no-margin"> <Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}> <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<RegisterPieceForm <RegisterPieceForm
@ -167,7 +166,7 @@ let CylandRegisterPiece = React.createClass({
</Col> </Col>
</Row> </Row>
</div> </div>
<div> <div data-slide-title="Additional details">
<Row className="no-margin"> <Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}> <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<CylandAdditionalDataForm <CylandAdditionalDataForm
@ -176,7 +175,7 @@ let CylandRegisterPiece = React.createClass({
</Col> </Col>
</Row> </Row>
</div> </div>
<div> <div data-slide-title="Loan">
<Row className="no-margin"> <Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}> <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<LoanForm <LoanForm