62 lines
1.5 KiB
JavaScript
62 lines
1.5 KiB
JavaScript
import React, { PropTypes } from 'react';
|
|
import { observer } from 'mobx-react';
|
|
|
|
import { Flex } from 'reflexbox';
|
|
import Tree from 'components/Tree';
|
|
|
|
import styles from './Sidebar.scss';
|
|
import classNames from 'classnames/bind';
|
|
const cx = classNames.bind(styles);
|
|
|
|
import treeStyles from 'components/Tree/Tree.scss';
|
|
|
|
@observer
|
|
class Sidebar extends React.Component {
|
|
static propTypes = {
|
|
open: PropTypes.bool,
|
|
onToggle: PropTypes.func.isRequired,
|
|
navigationTree: PropTypes.object.isRequired,
|
|
onNavigationUpdate: PropTypes.func.isRequired,
|
|
onNodeCollapse: PropTypes.func.isRequired,
|
|
}
|
|
|
|
renderNode = (node) => {
|
|
return (
|
|
<span className={ treeStyles.nodeLabel } onClick={ this.onClickNode.bind(null, node) }>
|
|
{ node.module.name }
|
|
</span>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Flex>
|
|
{ this.props.open && (
|
|
<div className={ cx(styles.sidebar) }>
|
|
<Tree
|
|
paddingLeft={ 10 }
|
|
tree={ this.props.navigationTree }
|
|
onChange={ this.props.onNavigationUpdate }
|
|
onCollapse={ this.props.onNodeCollapse }
|
|
renderNode={ this.renderNode }
|
|
/>
|
|
</div>
|
|
) }
|
|
<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;
|