add file renaming

client/constants.js

@@ -47,6 +47,8 @@ export const HIDE_FILE_OPTIONS = 'HIDE_FILE_OPTIONS';
 
 export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
 export const DELETE_FILE = 'DELETE_FILE';
+export const SHOW_EDIT_FILE_NAME = 'SHOW_EDIT_FILE_NAME';
+export const HIDE_EDIT_FILE_NAME = 'HIDE_EDIT_FILE_NAME';
 
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/modules/IDE/actions/files.js

@@ -127,6 +127,20 @@ export function hideFileOptions(fileId) {
   };
 }
 
+export function showEditFileName(id) {
+  return {
+    type: ActionTypes.SHOW_EDIT_FILE_NAME,
+    id
+  };
+}
+
+export function hideEditFileName(id) {
+  return {
+    type: ActionTypes.HIDE_EDIT_FILE_NAME,
+    id
+  };
+}
+
 export function updateFileName(id, name) {
   return {
     type: ActionTypes.UPDATE_FILE_NAME,

client/modules/IDE/components/Sidebar.js

@@ -61,6 +61,9 @@ class Sidebar extends React.Component {
               hideFileOptions={this.props.hideFileOptions}
               deleteFile={this.props.deleteFile}
               resetSelectedFile={this.resetSelectedFile}
+              showEditFileName={this.props.showEditFileName}
+              hideEditFileName={this.props.hideEditFileName}
+              updateFileName={this.props.updateFileName}
             />
           )}
         </ul>
@@ -78,7 +81,10 @@ Sidebar.propTypes = {
   expandSidebar: PropTypes.func.isRequired,
   showFileOptions: PropTypes.func.isRequired,
   hideFileOptions: PropTypes.func.isRequired,
-  deleteFile: PropTypes.func.isRequired
+  deleteFile: PropTypes.func.isRequired,
+  showEditFileName: PropTypes.func.isRequired,
+  hideEditFileName: PropTypes.func.isRequired,
+  updateFileName: PropTypes.func.isRequired
 };
 
 export default Sidebar;

client/modules/IDE/components/SidebarItem.js

@@ -4,16 +4,31 @@ import classNames from 'classnames';
 const downArrowUrl = require('../../../images/down-arrow.svg');
 
 class SidebarItem extends React.Component {
-  onFocus() {
+  constructor(props) {
+    super(props);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+    this.handleFileNameChange = this.handleFileNameChange.bind(this);
+  }
 
+  handleFileNameChange(event) {
+    this.props.updateFileName(this.props.file.id, event.target.value);
+  }
+
+  handleKeyPress(event) {
+    console.log(event.key);
+    if (event.key === 'Enter') {
+      this.props.hideEditFileName(this.props.file.id);
+    }
   }
 
   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--open': this.props.file.isOptionsOpen,
+      'sidebar__file-item--editing': this.props.file.isEditingName
     });
+
     return (
       <li
         className={itemClass}
@@ -21,8 +36,18 @@ class SidebarItem extends React.Component {
         tabIndex={this.props.fileIndex}
       >
         <a
+          className="sidebar__file-item-name"
           onClick={() => this.props.setSelectedFile(this.props.file.id)}
         >{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.props.hideEditFileName(this.props.file.id)}
+          onKeyPress={this.handleKeyPress}
+        />
         <a
           className="sidebar__file-item-show-options"
           onClick={() => this.props.showFileOptions(this.props.file.id)}
@@ -32,7 +57,12 @@ class SidebarItem extends React.Component {
         <div ref="fileOptions" className="sidebar__file-item-options">
           <ul>
             <li>
-              <a>
+              <a
+                onClick={() => {
+                  this.props.showEditFileName(this.props.file.id);
+                  setTimeout(() => this.refs.fileNameInput.focus(), 0);
+                }}
+              >
                 Rename
               </a>
             </li>
@@ -60,14 +90,18 @@ SidebarItem.propTypes = {
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     isSelected: PropTypes.bool,
-    isOptionsOpen: 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
+  resetSelectedFile: PropTypes.func.isRequired,
+  showEditFileName: PropTypes.func.isRequired,
+  hideEditFileName: PropTypes.func.isRequired,
+  updateFileName: PropTypes.func.isRequired
 };
 
 export default SidebarItem;

client/modules/IDE/pages/IDEView.js

@@ -58,6 +58,9 @@ class IDEView extends React.Component {
             showFileOptions={this.props.showFileOptions}
             hideFileOptions={this.props.hideFileOptions}
             deleteFile={this.props.deleteFile}
+            showEditFileName={this.props.showEditFileName}
+            hideEditFileName={this.props.hideEditFileName}
+            updateFileName={this.props.updateFileName}
           />
           <div className="editor-console-container">
             <Editor
@@ -161,7 +164,10 @@ IDEView.propTypes = {
   collapseConsole: PropTypes.func.isRequired,
   showFileOptions: PropTypes.func.isRequired,
   hideFileOptions: PropTypes.func.isRequired,
-  deleteFile: PropTypes.func.isRequired
+  deleteFile: PropTypes.func.isRequired,
+  showEditFileName: PropTypes.func.isRequired,
+  hideEditFileName: PropTypes.func.isRequired,
+  updateFileName: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/files.js

@@ -99,6 +99,22 @@ const files = (state = initialState, action) => {
       });
     case ActionTypes.DELETE_FILE:
       return state.filter(file => file.id !== action.id);
+    case ActionTypes.SHOW_EDIT_FILE_NAME:
+      return state.map(file => {
+        if (file.id !== action.id) {
+          return file;
+        }
+
+        return Object.assign({}, file, { isEditingName: true });
+      });
+    case ActionTypes.HIDE_EDIT_FILE_NAME:
+      return state.map(file => {
+        if (file.id !== action.id) {
+          return file;
+        }
+
+        return Object.assign({}, file, { isEditingName: false });
+      });
     default:
       return state;
   }

client/styles/components/_sidebar.scss

@@ -46,6 +46,12 @@
   }
 }
 
+.sidebar__file-item-name {
+  .sidebar__file-item--editing & {
+    display: none;
+  }
+}
+
 .sidebar__file-item-show-options {
   @extend %icon;
   display: none;
@@ -69,6 +75,17 @@
   }
 }
 
+.sidebar__file-item-input {
+  display: none;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  max-width: 90%;
+  .sidebar__file-item--editing & {
+    display: inline-block;
+  }
+}
+
 .sidebar__contract {
   @extend %icon;
   height: #{14 / $base-font-size}rem;