mirror of
https://github.com/ascribe/onion.git
synced 2025-01-03 10:25:08 +01:00
Create generic links in nav using routes
This commit is contained in:
parent
5688bde3c7
commit
cd49a9c402
@ -20,6 +20,7 @@ import NavItemLink from 'react-router-bootstrap/lib/NavItemLink';
|
||||
|
||||
import HeaderNotificationDebug from './header_notification_debug';
|
||||
|
||||
import NavRoutesLinks from './nav_routes_links';
|
||||
|
||||
import { mergeOptions } from '../utils/general_utils';
|
||||
import { getLangText } from '../utils/lang_utils';
|
||||
@ -27,7 +28,8 @@ import { getLangText } from '../utils/lang_utils';
|
||||
|
||||
let Header = React.createClass({
|
||||
propTypes: {
|
||||
showAddWork: React.PropTypes.bool
|
||||
showAddWork: React.PropTypes.bool,
|
||||
routes: React.PropTypes.element
|
||||
},
|
||||
|
||||
mixins: [Router.State],
|
||||
@ -129,6 +131,7 @@ let Header = React.createClass({
|
||||
{account}
|
||||
{signup}
|
||||
</Nav>
|
||||
<NavRoutesLinks routes={this.props.routes} navbar right/>
|
||||
</CollapsibleNav>
|
||||
</Navbar>
|
||||
</div>
|
||||
|
65
js/components/nav_routes_links.js
Normal file
65
js/components/nav_routes_links.js
Normal file
@ -0,0 +1,65 @@
|
||||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import Nav from 'react-bootstrap/lib/Nav';
|
||||
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
|
||||
import MenuItemLink from 'react-router-bootstrap/lib/MenuItemLink';
|
||||
import NavItemLink from 'react-router-bootstrap/lib/NavItemLink';
|
||||
|
||||
import { sanitizeList } from '../utils/general_utils';
|
||||
|
||||
|
||||
let NavRoutesLinks = React.createClass({
|
||||
propTypes: {
|
||||
routes: React.PropTypes.element
|
||||
},
|
||||
|
||||
extractLinksFromRoutes(node, i) {
|
||||
|
||||
node = node.props;
|
||||
|
||||
let links = node.children.map((child, j) => {
|
||||
|
||||
// check if this a candidate for a link generation
|
||||
if(child.props.headerTitle && typeof child.props.headerTitle === 'string') {
|
||||
|
||||
// also check if it is a candidate for generating a dropdown menu
|
||||
if(child.props.children && child.props.children.length > 0) {
|
||||
return (
|
||||
<DropdownButton title={child.props.headerTitle} key={j}>
|
||||
{this.extractLinksFromRoutes(child, i++)}
|
||||
</DropdownButton>
|
||||
);
|
||||
} else if(i === 1) {
|
||||
// if the node's child is actually a node of level one (a child of a node), we're
|
||||
// returning a DropdownButton matching MenuItemLink
|
||||
return (
|
||||
<MenuItemLink to={child.props.path} key={j}>{child.props.headerTitle}</MenuItemLink>
|
||||
);
|
||||
} else if(i === 0) {
|
||||
return (
|
||||
<NavItemLink to={child.props.path} key={j}>{child.props.headerTitle}</NavItemLink>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
// remove all nulls from the list of generated links
|
||||
return sanitizeList(links);
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Nav {...this.props}>
|
||||
{this.extractLinksFromRoutes(this.props.routes, 0)}
|
||||
</Nav>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default NavRoutesLinks;
|
@ -55,14 +55,14 @@ let IkonotvRegisterPiece = React.createClass({
|
||||
|
||||
|
||||
render() {
|
||||
if (this.state.currentUser &&
|
||||
/* if (this.state.currentUser &&
|
||||
this.state.whitelabel &&
|
||||
this.state.whitelabel.user &&
|
||||
this.state.currentUser.email === this.state.whitelabel.user){
|
||||
return (
|
||||
<ContractForm />
|
||||
);
|
||||
}
|
||||
} */
|
||||
return (
|
||||
<div className="ascribe-form-bordered ascribe-form-wrapper">
|
||||
<RegisterPieceForm
|
||||
|
@ -0,0 +1,16 @@
|
||||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import ContractForm from './ascribe_forms/ikonotv_contract_form';
|
||||
|
||||
|
||||
let IkonotvRequestLoan = React.createClass({
|
||||
render() {
|
||||
return (
|
||||
<ContractForm />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default IkonotvRequestLoan;
|
@ -7,21 +7,26 @@ import Footer from '../../footer';
|
||||
|
||||
import GlobalNotification from '../../global_notification';
|
||||
|
||||
import getRoutes from './wallet_routes';
|
||||
|
||||
let RouteHandler = Router.RouteHandler;
|
||||
|
||||
let WalletApp = React.createClass({
|
||||
mixins: [Router.State],
|
||||
|
||||
render() {
|
||||
let header = null;
|
||||
let subdomain = window.location.host.split('.')[0];
|
||||
let ROUTES = getRoutes(null, subdomain);
|
||||
|
||||
let header = null;
|
||||
if ((this.isActive('landing') || this.isActive('login') || this.isActive('signup'))
|
||||
&& (['ikonotv', 'cyland']).indexOf(subdomain) > -1) {
|
||||
header = (
|
||||
<div className="hero"/>);
|
||||
} else {
|
||||
header = <Header showAddWork={true} />;
|
||||
header = <Header showAddWork={true} routes={ROUTES} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container ascribe-prize-app">
|
||||
{header}
|
||||
|
@ -21,6 +21,7 @@ import CylandPieceList from './components/cyland/cyland_piece_list';
|
||||
|
||||
import IkonotvPieceList from './components/ikonotv/ikonotv_piece_list';
|
||||
import IkonotvRegisterPiece from './components/ikonotv/ikonotv_register_piece';
|
||||
import IkonotvRequestLoan from './components/ikonotv/ikonotv_request_loan';
|
||||
|
||||
import CCRegisterPiece from './components/cc/cc_register_piece';
|
||||
|
||||
@ -69,6 +70,7 @@ let ROUTES = {
|
||||
<Route name="logout" path="logout" handler={LogoutContainer} />
|
||||
<Route name="signup" path="signup" handler={SignupContainer} />
|
||||
<Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
|
||||
<Route name="request_loan" path="request_loan" handler={IkonotvRequestLoan} headerTitle="Send new contract" />
|
||||
<Route name="register_piece" path="register_piece" handler={IkonotvRegisterPiece} />
|
||||
<Route name="pieces" path="collection" handler={IkonotvPieceList} />
|
||||
<Route name="piece" path="pieces/:pieceId" handler={CylandPieceContainer} />
|
||||
|
@ -26,6 +26,23 @@ export function sanitize(obj, filterFn) {
|
||||
return obj;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes all falsy values (undefined, null, false, ...) from a list/array
|
||||
* @param {array} l the array to sanitize
|
||||
* @return {array} the sanitized array
|
||||
*/
|
||||
export function sanitizeList(l) {
|
||||
let sanitizedList = [];
|
||||
|
||||
for(let i = 0; i < l.length; i++) {
|
||||
if(l[i]) {
|
||||
sanitizedList.push(l[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return sanitizedList;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sums up a list of numbers. Like a Epsilon-math-kinda-sum...
|
||||
*/
|
||||
|
@ -100,10 +100,9 @@ hr {
|
||||
}
|
||||
|
||||
.img-brand {
|
||||
padding: 0;
|
||||
height: 45px;
|
||||
margin: 5px 0 5px 0;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
white-space: nowrap;
|
||||
width: 4em;
|
||||
|
Loading…
Reference in New Issue
Block a user