diff --git a/client/constants.js b/client/constants.js index 8e41ad91..aaa4973a 100644 --- a/client/constants.js +++ b/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'; diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js index e7bed3a2..788871c1 100644 --- a/client/modules/IDE/actions/files.js +++ b/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, diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js index 54bcd246..3ee28506 100644 --- a/client/modules/IDE/components/Sidebar.js +++ b/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} /> )} @@ -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; diff --git a/client/modules/IDE/components/SidebarItem.js b/client/modules/IDE/components/SidebarItem.js index 6b749307..4a00c8dd 100644 --- a/client/modules/IDE/components/SidebarItem.js +++ b/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 (
  • this.props.setSelectedFile(this.props.file.id)} >{this.props.file.name} + this.props.hideEditFileName(this.props.file.id)} + onKeyPress={this.handleKeyPress} + /> this.props.showFileOptions(this.props.file.id)} @@ -32,7 +57,12 @@ class SidebarItem extends React.Component {