p5.js-web-editor/client/modules/IDE/components/Sidebar.js

69 lines
1.8 KiB
JavaScript
Raw Normal View History

import React, { PropTypes } from 'react';
2016-07-08 18:57:22 +00:00
import classNames from 'classnames';
2016-07-14 16:47:54 +00:00
import InlineSVG from 'react-inlinesvg';
const rightArrowUrl = require('../../../images/right-arrow.svg');
const leftArrowUrl = require('../../../images/left-arrow.svg');
function Sidebar(props) {
2016-07-14 16:47:54 +00:00
const sidebarClass = classNames({
sidebar: true,
'sidebar--contracted': !props.isExpanded
});
return (
2016-07-15 21:25:54 +00:00
<nav className={sidebarClass} title="file-navigation" role="navigation">
<div className="sidebar__header">
<h3 className="sidebar__title">Sketch Files</h3>
2016-07-14 16:47:54 +00:00
<div className="sidebar__icons">
<a
className="sidebar__add"
onClick={props.newFile}
>
+
</a>
<a
className="sidebar__contract"
onClick={props.collapseSidebar}
>
<InlineSVG src={leftArrowUrl} />
</a>
<a
className="sidebar__expand"
onClick={props.expandSidebar}
>
<InlineSVG src={rightArrowUrl} />
</a>
</div>
</div>
<ul className="sidebar__file-list">
2016-07-08 18:57:22 +00:00
{props.files.map(file => {
let itemClass = classNames({
'sidebar__file-item': true,
'sidebar__file-item--selected': file.id === props.selectedFile.id
});
return (
2016-07-12 19:11:45 +00:00
<li
className={itemClass}
key={file.id}
>
2016-07-12 16:25:48 +00:00
<a
onClick={() => props.setSelectedFile(file.id)}
2016-07-12 19:11:45 +00:00
>{file.name}</a>
2016-07-12 16:25:48 +00:00
</li>
2016-07-08 18:57:22 +00:00
);
})}
</ul>
2016-07-14 21:20:44 +00:00
</nav>
);
}
Sidebar.propTypes = {
2016-07-08 18:57:22 +00:00
files: PropTypes.array.isRequired,
selectedFile: PropTypes.shape({
id: PropTypes.string.isRequired
}),
setSelectedFile: PropTypes.func.isRequired
};
export default Sidebar;