118 lines
3.2 KiB
JavaScript
118 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
import { browserHistory, Link } from 'react-router';
|
|
import Helmet from 'react-helmet';
|
|
import styled from 'styled-components';
|
|
import { observer, inject } from 'mobx-react';
|
|
import keydown from 'react-keydown';
|
|
import _ from 'lodash';
|
|
|
|
import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
|
|
import { Flex } from 'reflexbox';
|
|
import LoadingIndicator from 'components/LoadingIndicator';
|
|
import Alert from 'components/Alert';
|
|
|
|
import styles from './Layout.scss';
|
|
import classNames from 'classnames/bind';
|
|
const cx = classNames.bind(styles);
|
|
|
|
@inject('user')
|
|
@observer
|
|
class Layout extends React.Component {
|
|
static propTypes = {
|
|
children: React.PropTypes.node,
|
|
actions: React.PropTypes.node,
|
|
title: React.PropTypes.node,
|
|
titleText: React.PropTypes.node,
|
|
loading: React.PropTypes.bool,
|
|
user: React.PropTypes.object.isRequired,
|
|
search: React.PropTypes.bool,
|
|
notifications: React.PropTypes.node,
|
|
};
|
|
|
|
static defaultProps = {
|
|
search: true,
|
|
};
|
|
|
|
@keydown(['/', 't'])
|
|
search() {
|
|
// if (!this.props.user) return;
|
|
_.defer(() => browserHistory.push('/search'));
|
|
}
|
|
|
|
@keydown(['d'])
|
|
dashboard() {
|
|
// if (!this.props.user) return;
|
|
_.defer(() => browserHistory.push('/'));
|
|
}
|
|
|
|
render() {
|
|
const user = this.props.user;
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Helmet
|
|
title={
|
|
this.props.titleText ? `${this.props.titleText} - Atlas` : 'Atlas'
|
|
}
|
|
/>
|
|
|
|
{this.props.loading && <LoadingIndicator />}
|
|
|
|
{this.props.notifications}
|
|
|
|
<div className={cx(styles.header)}>
|
|
<div className={styles.headerLeft}>
|
|
<Link to="/" className={styles.team}>Atlas</Link>
|
|
<span className={styles.title}>
|
|
{this.props.title}
|
|
</span>
|
|
</div>
|
|
<Flex className={styles.headerRight}>
|
|
<Flex>
|
|
<Flex align="center" className={styles.actions}>
|
|
{this.props.actions}
|
|
</Flex>
|
|
{user.user &&
|
|
<Flex>
|
|
{this.props.search &&
|
|
<Flex>
|
|
<div
|
|
onClick={this.search}
|
|
className={styles.search}
|
|
title="Search (/)"
|
|
>
|
|
<img
|
|
src={require('assets/icons/search.svg')}
|
|
alt="Search"
|
|
/>
|
|
</div>
|
|
</Flex>}
|
|
<DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
|
|
<MenuItem to="/settings">Settings</MenuItem>
|
|
<MenuItem to="/keyboard-shortcuts">
|
|
Keyboard shortcuts
|
|
</MenuItem>
|
|
<MenuItem to="/developers">API</MenuItem>
|
|
<MenuItem onClick={user.logout}>Logout</MenuItem>
|
|
</DropdownMenu>
|
|
</Flex>}
|
|
</Flex>
|
|
</Flex>
|
|
</div>
|
|
|
|
<div className={cx(styles.content)}>
|
|
{this.props.children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const Avatar = styled.img`
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
`;
|
|
|
|
export default Layout;
|