import PropTypes from 'prop-types'; import React from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import InlineSVG from 'react-inlinesvg'; import classNames from 'classnames'; import * as IDEActions from '../actions/ide'; import * as FileActions from '../actions/files'; const downArrowUrl = require('../../../images/down-filled-triangle.svg'); const folderRightUrl = require('../../../images/triangle-arrow-right.svg'); const folderDownUrl = require('../../../images/triangle-arrow-down.svg'); const fileUrl = require('../../../images/file.svg'); export class FileNode extends React.Component { constructor(props) { super(props); this.renderChild = this.renderChild.bind(this); this.handleKeyPress = this.handleKeyPress.bind(this); this.handleFileNameChange = this.handleFileNameChange.bind(this); this.validateFileName = this.validateFileName.bind(this); this.handleFileClick = this.handleFileClick.bind(this); this.toggleFileOptions = this.toggleFileOptions.bind(this); this.hideFileOptions = this.hideFileOptions.bind(this); this.showEditFileName = this.showEditFileName.bind(this); this.hideEditFileName = this.hideEditFileName.bind(this); this.onBlurComponent = this.onBlurComponent.bind(this); this.onFocusComponent = this.onFocusComponent.bind(this); this.state = { isOptionsOpen: false, isEditingName: false, isFocused: false, }; } onFocusComponent() { this.setState({ isFocused: true }); } onBlurComponent() { this.setState({ isFocused: false }); setTimeout(() => { if (!this.state.isFocused) { this.hideFileOptions(); } }, 200); } getName() { const { updatedName, name } = this.props; return updatedName || name; } handleFileClick(e) { e.stopPropagation(); if (this.getName() !== 'root' && !this.isDeleting) { this.props.setSelectedFile(this.props.id); } } handleFileNameChange(event) { this.props.updateFileName(this.props.id, event.target.value, this.getName()); } handleKeyPress(event) { if (event.key === 'Enter') { this.hideEditFileName(); } } validateFileName() { const oldFileExtension = this.originalFileName.match(/\.[0-9a-z]+$/i); const newFileExtension = this.getName().match(/\.[0-9a-z]+$/i); const hasPeriod = this.getName().match(/\.+/); const newFileName = this.getName(); const hasNoExtension = oldFileExtension && !newFileExtension; const hasExtensionIfFolder = this.props.fileType === 'folder' && hasPeriod; const notSameExtension = oldFileExtension && newFileExtension && oldFileExtension[0].toLowerCase() !== newFileExtension[0].toLowerCase(); const hasEmptyFilename = newFileName === ''; const hasOnlyExtension = newFileExtension && newFileName === newFileExtension[0]; if (hasEmptyFilename || hasNoExtension || notSameExtension || hasOnlyExtension || hasExtensionIfFolder) { this.props.updateFileName(this.props.id, this.originalFileName, this.getName()); } } toggleFileOptions(e) { e.preventDefault(); if (!this.props.canEdit) { return; } if (this.state.isOptionsOpen) { this.setState({ isOptionsOpen: false }); } else { this[`fileOptions-${this.props.id}`].focus(); this.setState({ isOptionsOpen: true }); } } hideFileOptions() { this.setState({ isOptionsOpen: false }); } showEditFileName() { this.setState({ isEditingName: true }); } hideEditFileName() { this.setState({ isEditingName: false }); } renderChild(childId) { return (
  • ); } render() { const itemClass = classNames({ 'sidebar__root-item': this.getName() === 'root', 'sidebar__file-item': this.getName() !== 'root', 'sidebar__file-item--selected': this.props.isSelectedFile, 'sidebar__file-item--open': this.state.isOptionsOpen, 'sidebar__file-item--editing': this.state.isEditingName, 'sidebar__file-item--closed': this.props.isFolderClosed }); return (
    {(() => { // eslint-disable-line if (this.getName() !== 'root') { return (
    {(() => { // eslint-disable-line if (this.props.fileType === 'file') { return ( ); } return (
    ); })()} { this.fileNameInput = element; }} onBlur={() => { this.validateFileName(); this.hideEditFileName(); }} onKeyPress={this.handleKeyPress} />
      {(() => { // eslint-disable-line if (this.props.fileType === 'folder') { return (
    • ); } })()} {(() => { // eslint-disable-line if (this.props.fileType === 'folder') { return (
    • ); } })()}
    ); } })()} {(() => { // eslint-disable-line if (this.props.children) { return ( ); } })()}
    ); } } FileNode.propTypes = { id: PropTypes.string.isRequired, parentId: PropTypes.string, children: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired, name: PropTypes.string.isRequired, updatedName: PropTypes.string, fileType: PropTypes.string.isRequired, isSelectedFile: PropTypes.bool, isFolderClosed: PropTypes.bool, setSelectedFile: PropTypes.func.isRequired, deleteFile: PropTypes.func.isRequired, updateFileName: PropTypes.func.isRequired, resetSelectedFile: PropTypes.func.isRequired, newFile: PropTypes.func.isRequired, newFolder: PropTypes.func.isRequired, showFolderChildren: PropTypes.func.isRequired, hideFolderChildren: PropTypes.func.isRequired, canEdit: PropTypes.bool.isRequired }; FileNode.defaultProps = { parentId: '0', isSelectedFile: false, isFolderClosed: false, updatedName: '', }; function mapStateToProps(state, ownProps) { // this is a hack, state is updated before ownProps return state.files.find(file => file.id === ownProps.id) || { name: 'test', fileType: 'file' }; } function mapDispatchToProps(dispatch) { return bindActionCreators(Object.assign(FileActions, IDEActions), dispatch); } const ConnectedFileNode = connect(mapStateToProps, mapDispatchToProps)(FileNode); export default ConnectedFileNode;