mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-18 20:09:08 +02:00
216 lines
8.9 KiB
JavaScript
216 lines
8.9 KiB
JavaScript
import React, { Component } from 'react';
|
||
import PropTypes from 'prop-types';
|
||
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 = {
|
||
location: PropTypes.object.isRequired,
|
||
params: PropTypes.object.isRequired,
|
||
routes: PropTypes.array.isRequired,
|
||
};
|
||
|
||
static contextTypes = {
|
||
router: 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 (
|
||
<span>
|
||
{result.map((entry, index) => (
|
||
<span key={entry.link + index} className={index > 0 ? 'mdl-layout--large-screen-only' : ''}>
|
||
{index > 0 ? ' › ' : null}
|
||
<Link
|
||
className={[styles.headerTitleLink, 'mdl-color-text--primary-contrast'].join(' ')}
|
||
to={entry.link}
|
||
>
|
||
{entry.name}
|
||
</Link>
|
||
</span>
|
||
))}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
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 (
|
||
<Link to={path} className={isDrawerNavigation && [styles.navigationLink, linkColor].join(' ')}>
|
||
{icon && (
|
||
<Icon
|
||
name={icon}
|
||
className={isDrawerNavigation && [styles.navigationIcon, iconColor].join(' ')}
|
||
/>
|
||
)}
|
||
{caption}
|
||
</Link>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div className={styles.container}>
|
||
<UserContainer />
|
||
<Layout fixedHeader>
|
||
<Header title={this.getTitleWithLinks()}>
|
||
<Navigation>
|
||
<ShowUserContainer />
|
||
</Navigation>
|
||
</Header>
|
||
<Drawer className="mdl-color--white">
|
||
<span className={[styles.drawerTitle, 'mdl-layout-title'].join(' ')}>
|
||
<img src="public/logo.png" width="32" height="32" className={styles.drawerTitleLogo} />
|
||
<span className={styles.drawerTitleText}>Unleash</span>
|
||
</span>
|
||
<hr />
|
||
<Navigation className={styles.navigation}>
|
||
{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)}
|
||
</Navigation>
|
||
<hr />
|
||
<Navigation className={styles.navigation}>
|
||
<a
|
||
href="https://github.com/Unleash"
|
||
target="_blank"
|
||
className={[styles.navigationLink, 'mdl-color-text--grey-900'].join(' ')}
|
||
>
|
||
<i
|
||
className={['material-icons', styles.navigationIcon, styles.iconGitHub].join(' ')}
|
||
/>GitHub
|
||
</a>
|
||
</Navigation>
|
||
</Drawer>
|
||
<ScrollContainer scrollKey="container" shouldUpdateScroll={shouldUpdateScroll}>
|
||
<Content className="mdl-color--grey-50">
|
||
<Grid noSpacing className={styles.content}>
|
||
<Cell col={12}>
|
||
{this.props.children}
|
||
<ErrorContainer />
|
||
</Cell>
|
||
</Grid>
|
||
<Footer size="mega">
|
||
<FooterSection type="middle">
|
||
<FooterDropDownSection title="Menu">
|
||
<FooterLinkList>
|
||
{createListItem('/features', 'Feature Toggles')}
|
||
{createListItem('/strategies', 'Strategies')}
|
||
{createListItem('/history', 'Event History')}
|
||
{createListItem('/archive', 'Archived Toggles')}
|
||
{createListItem('/applications', 'Applications')}
|
||
</FooterLinkList>
|
||
</FooterDropDownSection>
|
||
<FooterDropDownSection title="Clients">
|
||
<FooterLinkList>
|
||
<a href="https://github.com/Unleash/unleash-client-node/">Node.js</a>
|
||
<a href="https://github.com/Unleash/unleash-client-java/">Java</a>
|
||
<a href="https://github.com/Unleash/unleash-client-go/">Go</a>
|
||
</FooterLinkList>
|
||
</FooterDropDownSection>
|
||
</FooterSection>
|
||
<FooterSection type="bottom" logo="Unleash">
|
||
<FooterLinkList>
|
||
<a href="https://github.com/Unleash/unleash/" target="_blank">
|
||
GitHub
|
||
</a>
|
||
<a href="https://finn.no" target="_blank">
|
||
<small>A product by</small> FINN.no
|
||
</a>
|
||
</FooterLinkList>
|
||
</FooterSection>
|
||
</Footer>
|
||
</Content>
|
||
</ScrollContainer>
|
||
</Layout>
|
||
</div>
|
||
);
|
||
}
|
||
}
|