p5.js-web-editor/client/modules/IDE/components/Sidebar.js
2016-07-14 17:20:44 -04:00

37 lines
961 B
JavaScript

import React, { PropTypes } from 'react';
import classNames from 'classnames';
function Sidebar(props) {
return (
<nav className="sidebar" role="navigation" title="file-navigation">
<ul className="sidebar__file-list" title="file-list">
{props.files.map(file => {
let itemClass = classNames({
'sidebar__file-item': true,
'sidebar__file-item--selected': file.id === props.selectedFile.id
});
return (
<li
className={itemClass}
key={file.id}
>
<a
onClick={() => props.setSelectedFile(file.id)}
>{file.name}</a>
</li>
);
})}
</ul>
</nav>
);
}
Sidebar.propTypes = {
files: PropTypes.array.isRequired,
selectedFile: PropTypes.shape({
id: PropTypes.string.isRequired
}),
setSelectedFile: PropTypes.func.isRequired
};
export default Sidebar;