import React, { Component, PropTypes } from 'react';
import { Layout, Drawer, Header, Navigation, Content,
Footer, FooterSection, FooterDropDownSection, FooterLinkList,
Grid, Cell, Icon,
} from 'react-mdl';
import { Link } from 'react-router';
import styles from './styles.scss';
import ErrorContainer from './error/error-container';
import UserContainer from './user/user-container';
import ShowUserContainer from './user/show-user-container';
import { ScrollContainer } from 'react-router-scroll';
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 {
static propTypes () {
return {
location: PropTypes.object.isRequired,
params: PropTypes.object.isRequired,
routes: PropTypes.array.isRequired,
};
}
static contextTypes = {
router: React.PropTypes.object,
}
componentWillReceiveProps (nextProps) {
if (this.props.location.pathname !== nextProps.location.pathname) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
const layout = document.querySelector('.mdl-js-layout');
const drawer = document.querySelector('.mdl-layout__drawer');
// hack, might get a built in alternative later
if (drawer.classList.contains('is-visible')) {
layout.MaterialLayout.toggleDrawer();
}
}, 10);
}
}
getSections () {
const { routes, params } = this.props;
const unique = {};
const result = 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;
});
// mutate document.title:
document.title = result
.map(e => e.name)
.reverse()
.concat('Unleash')
.join(' – ');
return result;
}
getTitleWithLinks () {
const result = this.getSections();
return (
{result.map((entry, index) => (
0 ? 'mdl-layout--large-screen-only' : ''}>
{index > 0 ? ' › ' : null}
{entry.name}
))}
);
}
render () {
const shouldUpdateScroll = (prevRouterProps, { location }) => {
if (prevRouterProps && location.pathname !== prevRouterProps.location.pathname) {
return location.action === 'POP';
} else {
return [0, 0];
}
};
const createListItem = (path, caption, icon, isDrawerNavigation = false) => {
const linkColor = isDrawerNavigation &&
this.context.router.isActive(path) ? 'mdl-color-text--black' : 'mdl-color-text--grey-900';
const iconColor = isDrawerNavigation &&
this.context.router.isActive(path) ? 'mdl-color-text--black' : 'mdl-color-text--grey-600';
return (
{icon && }{caption}
);
};
return (
Unleash
{createListItem('/features', 'Feature Toggles', 'list', true)}
{createListItem('/strategies', 'Strategies', 'extension', true)}
{createListItem('/history', 'Event History', 'history', true)}
{createListItem('/archive', 'Archived Toggles', 'archive', true)}
{createListItem('/applications', 'Applications', 'apps', true)}
GitHub
{this.props.children}
|
);
}
};