1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00

generate header based on routes

This commit is contained in:
sveisvei 2016-12-05 17:04:00 +01:00
parent 48f556dff7
commit dfbdcc093a
2 changed files with 70 additions and 11 deletions

View File

@ -3,12 +3,28 @@ import { Layout, Drawer, Header, Navigation, Content,
Footer, FooterSection, FooterDropDownSection, FooterLinkList,
Grid, Cell,
} from 'react-mdl';
import { Link } from 'react-router';
import style from './styles.scss';
import ErrorContainer from './error/error-container';
import UserContainer from './user/user-container';
import ShowUserContainer from './user/show-user-container';
const base = {
name: 'Unleash',
link: '/',
};
function replace (input, params) {
if (!params) {
return input;
}
Object.keys(params).forEach(key => {
input = input.replace(`:${key}`, params[key]);
});
return input;
}
export default class App extends Component {
constructor (props) {
super(props);
@ -32,6 +48,34 @@ export default class App extends Component {
return lastRoute ? lastRoute.pageTitle : '';
}
getTitleWithLinks () {
const { routes, params } = this.props;
const unique = {};
let result = [base].concat(routes.splice(1).map((routeEntry) => ({
name: replace(routeEntry.pageTitle, params),
link: replace(routeEntry.link || routeEntry.path, params),
}))).filter(entry => {
if (!unique[entry.link]) {
unique[entry.link] = true;
return true;
}
return false;
});
if (result.length > 2) {
result = result.splice(1);
}
return (
<span>
{result.map((entry, index) => (
<span><Link style={{ color: '#f1f1f1', textDecoration: 'none' }} key={entry.link + index} to={entry.link}>
{entry.name}
</Link> {(index + 1) < result.length ? ' / ' : null}</span>
))}
</span>
);
}
onOverlayClick = () => this.setState({ drawerActive: false });
render () {
@ -46,7 +90,7 @@ export default class App extends Component {
<div style={{}}>
<UserContainer />
<Layout fixedHeader>
<Header title={<span><span style={{ color: '#ddd' }}>Unleash Admin / </span><strong>{this.getCurrentSection()}</strong></span>}>
<Header title={this.getTitleWithLinks()}>
<Navigation>
<a href="https://github.com/Unleash" target="_blank">Github</a>
<ShowUserContainer />

View File

@ -29,22 +29,37 @@ const unleashStore = createStore(
)
);
// "pageTitle" and "link" attributes are for internal usage only
ReactDOM.render(
<Provider store={unleashStore}>
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRedirect to="/features" />
<Route pageTitle="Features" path="/features" component={Features} />
<Route pageTitle="Features" path="/features/create" component={CreateFeatureToggle} />
<Route pageTitle="Features" path="/features/edit/:name" component={EditFeatureToggle} />
<Route pageTitle="Strategies" path="/strategies" component={Strategies} />
<Route pageTitle="Strategies" path="/strategies/create" component={CreateStrategies} />
<Route pageTitle="Strategies" path="/strategies/view/:strategyName" component={StrategyView} />
<Route pageTitle="History" path="/history" component={HistoryPage} />
<Route pageTitle="History" path="/history/:toggleName" component={HistoryTogglePage} />
<Route pageTitle="Features" link="/features">
<Route pageTitle="Features" path="/features" component={Features} />
<Route pageTitle="New" path="/features/create" component={CreateFeatureToggle} />
<Route pageTitle=":name" path="/features/edit/:name" component={EditFeatureToggle} />
</Route>
<Route pageTitle="Strategies" link="/strategies">
<Route pageTitle="Strategies" path="/strategies" component={Strategies} />
<Route pageTitle="New" path="/strategies/create" component={CreateStrategies} />
<Route pageTitle=":strategyName" path="/strategies/view/:strategyName" component={StrategyView} />
</Route>
<Route pageTitle="History" link="/history">
<Route pageTitle="History" path="/history" component={HistoryPage} />
<Route pageTitle=":toggleName" path="/history/:toggleName" component={HistoryTogglePage} />
</Route>
<Route pageTitle="Archive" path="/archive" component={Archive} />
<Route pageTitle="Applications" path="/applications" component={Applications} />
<Route pageTitle="Applications" path="/applications/:name" component={ApplicationView} />
<Route pageTitle="Applications" link="/applications">
<Route pageTitle="Applications" path="/applications" component={Applications} />
<Route pageTitle=":name" path="/applications/:name" component={ApplicationView} />
</Route>
<Route pageTitle="Client strategies" ppath="/client-strategies" component={ClientStrategies} />
</Route>
</Router>