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

35 lines
857 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 (
<section className="sidebar">
<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 (
<li
className={itemClass}
key={file.id}
onClick={() => props.setSelectedFile(file.id)}
2016-07-08 18:57:22 +00:00
>{file.name}</li>
);
})}
</ul>
</section>
);
}
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;