import React, { PropTypes } from 'react'; import InlineSVG from 'react-inlinesvg'; import classNames from 'classnames'; const downArrowUrl = require('../../../images/down-arrow.svg'); class SidebarItem extends React.Component { constructor(props) { super(props); this.handleKeyPress = this.handleKeyPress.bind(this); this.handleFileNameChange = this.handleFileNameChange.bind(this); this.validateFileName = this.validateFileName.bind(this); } handleFileNameChange(event) { this.props.updateFileName(this.props.file.id, event.target.value); } handleKeyPress(event) { if (event.key === 'Enter') { this.props.hideEditFileName(this.props.file.id); } } validateFileName() { if (!this.props.file.name.match(/.*\.(js|css|html|json)$/)) { this.props.updateFileName(this.props.file.id, this.originalFileName); } } render() { let itemClass = classNames({ 'sidebar__file-item': true, 'sidebar__file-item--selected': this.props.file.isSelected, 'sidebar__file-item--open': this.props.file.isOptionsOpen, 'sidebar__file-item--editing': this.props.file.isEditingName }); return (
  • this.props.hideFileOptions(this.props.file.id)} tabIndex={this.props.fileIndex} onClick={() => this.props.setSelectedFile(this.props.file.id)} > {this.props.file.name} { this.validateFileName(); this.props.hideEditFileName(this.props.file.id); }} onKeyPress={this.handleKeyPress} />
  • ); } } SidebarItem.propTypes = { file: PropTypes.shape({ id: PropTypes.string.isRequired, name: PropTypes.string.isRequired, isSelected: PropTypes.bool, isOptionsOpen: PropTypes.bool, isEditingName: PropTypes.bool }).isRequired, setSelectedFile: PropTypes.func.isRequired, fileIndex: PropTypes.number.isRequired, showFileOptions: PropTypes.func.isRequired, hideFileOptions: PropTypes.func.isRequired, deleteFile: PropTypes.func.isRequired, resetSelectedFile: PropTypes.func.isRequired, showEditFileName: PropTypes.func.isRequired, hideEditFileName: PropTypes.func.isRequired, updateFileName: PropTypes.func.isRequired }; export default SidebarItem;