#255 remove unused SidebarItem component, display file dropdown menu when right clicking on sidebar item or project folder

client/modules/IDE/components/FileNode.jsx

@@ -18,6 +18,7 @@ export class FileNode extends React.Component {
     this.handleFileNameChange = this.handleFileNameChange.bind(this);
     this.validateFileName = this.validateFileName.bind(this);
     this.handleFileClick = this.handleFileClick.bind(this);
+    this.toggleFileOptions = this.toggleFileOptions.bind(this);
   }
 
   handleFileClick(e) {
@@ -48,7 +49,8 @@ export class FileNode extends React.Component {
     }
   }
 
-  toggleFileOptions() {
+  toggleFileOptions(e) {
+    e.preventDefault();
     if (this.props.isOptionsOpen) {
       this.props.hideFileOptions(this.props.id);
     } else {
@@ -83,7 +85,7 @@ export class FileNode extends React.Component {
         {(() => { // eslint-disable-line
           if (this.props.name !== 'root') {
             return (
-              <div className="file-item__content">
+              <div className="file-item__content" onContextMenu={this.toggleFileOptions}>
                 <span className="file-item__spacer"></span>
                 {(() => { // eslint-disable-line
                   if (this.props.fileType === 'file') {
@@ -128,9 +130,7 @@ export class FileNode extends React.Component {
                   aria-label="view file options"
                   ref={`fileOptions-${this.props.id}`}
                   tabIndex="0"
-                  onClick={() => {
-                    this.toggleFileOptions();
-                  }}
+                  onClick={this.toggleFileOptions}
                 >
                   <InlineSVG src={downArrowUrl} />
                 </button>

client/modules/IDE/components/Sidebar.jsx

@@ -10,13 +10,15 @@ class Sidebar extends React.Component {
   constructor(props) {
     super(props);
     this.resetSelectedFile = this.resetSelectedFile.bind(this);
+    this.toggleProjectOptions = this.toggleProjectOptions.bind(this);
   }
 
   resetSelectedFile() {
     this.props.setSelectedFile(this.props.files[1].id);
   }
 
-  toggleProjectOptions() {
+  toggleProjectOptions(e) {
+    e.preventDefault();
     if (this.props.projectOptionsVisible) {
       this.props.closeProjectOptions();
     } else {
@@ -34,7 +36,7 @@ class Sidebar extends React.Component {
 
     return (
       <nav className={sidebarClass} title="file-navigation" role="navigation">
-        <div className="sidebar__header">
+        <div className="sidebar__header" onContextMenu={this.toggleProjectOptions}>
           <h3 className="sidebar__title">
             <span className="sidebar__folder-icon">
               <InlineSVG src={folderUrl} />
@@ -47,9 +49,7 @@ class Sidebar extends React.Component {
               className="sidebar__add"
               tabIndex="0"
               ref="sidebarOptions"
-              onClick={() => {
-                this.toggleProjectOptions();
-              }}
+              onClick={this.toggleProjectOptions}
               onBlur={() => setTimeout(this.props.closeProjectOptions, 200)}
             >
               <InlineSVG src={downArrowUrl} />
@@ -68,23 +68,6 @@ class Sidebar extends React.Component {
             </ul>
           </div>
         </div>
-        { /* <ul className="sidebar__file-list" title="project files">
-          {this.props.files.map((file, fileIndex) =>
-            <SidebarItem
-              key={file.id}
-              file={file}
-              setSelectedFile={this.props.setSelectedFile}
-              fileIndex={fileIndex}
-              showFileOptions={this.props.showFileOptions}
-              hideFileOptions={this.props.hideFileOptions}
-              deleteFile={this.props.deleteFile}
-              resetSelectedFile={this.resetSelectedFile}
-              showEditFileName={this.props.showEditFileName}
-              hideEditFileName={this.props.hideEditFileName}
-              updateFileName={this.props.updateFileName}
-            />
-          )}
-        </ul> */ }
         <ConnectedFileNode id={this.props.files.filter(file => file.name === 'root')[0].id} />
       </nav>
     );

client/modules/IDE/components/SidebarItem.jsx

@@ -1,123 +0,0 @@
-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() {
-    const oldFileExtension = this.originalFileName.match(/\.[0-9a-z]+$/i);
-    const newFileExtension = this.props.file.name.match(/\.[0-9a-z]+$/i);
-    if (oldFileExtension && !newFileExtension) {
-      this.props.updateFileName(this.props.file.id, this.originalFileName);
-    }
-    if (oldFileExtension && newFileExtension && oldFileExtension[0] !== newFileExtension[0]) {
-      this.props.updateFileName(this.props.file.id, this.originalFileName);
-    }
-  }
-
-  render() {
-    let itemClass = classNames({
-      'sidebar__file-item': true,
-      'sidebar__file-item--selected': this.props.file.isSelectedFile,
-      'sidebar__file-item--open': this.props.file.isOptionsOpen,
-      'sidebar__file-item--editing': this.props.file.isEditingName
-    });
-
-    return (
-      <li
-        className={itemClass}
-        onBlur={() => setTimeout(() => this.props.hideFileOptions(this.props.file.id), 100)}
-        tabIndex={this.props.fileIndex}
-        onClick={() => this.props.setSelectedFile(this.props.file.id)}
-      >
-        <a
-          className="sidebar__file-item-name"
-        >{this.props.file.name}</a>
-        <input
-          type="text"
-          className="sidebar__file-item-input"
-          value={this.props.file.name}
-          onChange={this.handleFileNameChange}
-          ref="fileNameInput"
-          onBlur={() => {
-            this.validateFileName();
-            this.props.hideEditFileName(this.props.file.id);
-          }}
-          onKeyPress={this.handleKeyPress}
-        />
-        <button
-          className="sidebar__file-item-show-options"
-          aria-label="view file options"
-          onClick={() => this.props.showFileOptions(this.props.file.id)}
-        >
-          <InlineSVG src={downArrowUrl} />
-        </button>
-        <div ref="fileOptions" className="sidebar__file-item-options">
-          <ul title="file options">
-            <li>
-              <a
-                onClick={() => {
-                  this.originalFileName = this.props.file.name;
-                  this.props.showEditFileName(this.props.file.id);
-                  setTimeout(() => this.refs.fileNameInput.focus(), 0);
-                }}
-              >
-                Rename
-              </a>
-            </li>
-            <li>
-              <a
-                onClick={() => {
-                  if (window.confirm(`Are you sure you want to delete ${this.props.file.name}?`)) {
-                    this.props.deleteFile(this.props.file.id);
-                    this.props.resetSelectedFile();
-                  }
-                }}
-              >
-                Delete
-              </a>
-            </li>
-          </ul>
-        </div>
-      </li>
-    );
-  }
-}
-
-SidebarItem.propTypes = {
-  file: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    isSelectedFile: 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;