87 lines
2.3 KiB
JavaScript
87 lines
2.3 KiB
JavaScript
import React, { PropTypes } from 'react';
|
|
import { observer } from 'mobx-react';
|
|
import { Link } from 'react-router';
|
|
|
|
import { Flex } from 'reflexbox';
|
|
import Tree from 'components/Tree';
|
|
import Separator from './components/Separator';
|
|
|
|
import styles from './Sidebar.scss';
|
|
import classNames from 'classnames/bind';
|
|
const cx = classNames.bind(styles);
|
|
|
|
import SidebarStore from './SidebarStore';
|
|
|
|
// import treeStyles from 'components/Tree/Tree.scss';
|
|
|
|
@observer
|
|
class Sidebar extends React.Component {
|
|
static store;
|
|
|
|
static propTypes = {
|
|
open: PropTypes.bool,
|
|
onToggle: PropTypes.func.isRequired,
|
|
navigationTree: PropTypes.object.isRequired,
|
|
onNavigationUpdate: PropTypes.func.isRequired,
|
|
onNodeCollapse: PropTypes.func.isRequired,
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.store = new SidebarStore();
|
|
}
|
|
|
|
toggleEdit = (e) => {
|
|
e.preventDefault();
|
|
this.store.toggleEdit();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Flex>
|
|
{ this.props.open && (
|
|
<Flex column className={ cx(styles.sidebar) }>
|
|
<Flex auto className={ cx(styles.content) }>
|
|
<Tree
|
|
paddingLeft={ 10 }
|
|
tree={ this.props.navigationTree }
|
|
allowUpdates={ this.store.isEditing }
|
|
onChange={ this.props.onNavigationUpdate }
|
|
onCollapse={ this.props.onNodeCollapse }
|
|
/>
|
|
</Flex>
|
|
<Flex auto className={ styles.actions }>
|
|
<Link
|
|
to={ `/documents/${this.props.navigationTree.id}/new` }
|
|
className={ cx(styles.action) }
|
|
>
|
|
Add document
|
|
</Link>
|
|
<Separator />
|
|
<a
|
|
href
|
|
onClick={ this.toggleEdit }
|
|
className={ cx(styles.action, { active: this.store.isEditing }) }
|
|
>Organize</a>
|
|
</Flex>
|
|
</Flex>
|
|
) }
|
|
<div
|
|
onClick={ this.props.onToggle }
|
|
className={ styles.sidebarToggle }
|
|
title="Toggle sidebar (Cmd+/)"
|
|
>
|
|
<img
|
|
src={ require("assets/icons/menu.svg") }
|
|
className={ styles.menuIcon }
|
|
alt="Menu"
|
|
/>
|
|
</div>
|
|
</Flex>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Sidebar;
|