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

38 lines
961 B
JavaScript
Raw Normal View History

import React, { PropTypes } from 'react';
2016-07-08 18:57:22 +00:00
import classNames from 'classnames';
function Sidebar(props) {
return (
2016-07-14 21:20:44 +00:00
<nav className="sidebar" role="navigation" title="file-navigation">
2016-07-13 15:59:47 +00:00
<ul className="sidebar__file-list" title="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;