diff --git a/client/constants.js b/client/constants.js index 7ef4983c..4dcfae8b 100644 --- a/client/constants.js +++ b/client/constants.js @@ -59,13 +59,8 @@ export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE'; export const UPDATE_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE'; export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE'; -export const SHOW_FILE_OPTIONS = 'SHOW_FILE_OPTIONS'; -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'; export const SET_AUTOSAVE = 'SET_AUTOSAVE'; export const SET_LINT_WARNING = 'SET_LINT_WARNING'; diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js index 2667c718..4ffb5aed 100644 --- a/client/modules/IDE/actions/files.js +++ b/client/modules/IDE/actions/files.js @@ -147,34 +147,6 @@ export function createFolder(formProps) { }; } -export function showFileOptions(fileId) { - return { - type: ActionTypes.SHOW_FILE_OPTIONS, - id: fileId - }; -} - -export function hideFileOptions(fileId) { - return { - type: ActionTypes.HIDE_FILE_OPTIONS, - id: 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/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx index b4cbc708..d3b5be6b 100644 --- a/client/modules/IDE/components/FileNode.jsx +++ b/client/modules/IDE/components/FileNode.jsx @@ -21,6 +21,14 @@ export class FileNode extends React.Component { 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.state = { + isOptionsOpen: false, + isEditingName: false, + }; } handleFileClick(e) { @@ -36,7 +44,7 @@ export class FileNode extends React.Component { handleKeyPress(event) { if (event.key === 'Enter') { - this.props.hideEditFileName(this.props.id); + this.hideEditFileName(); } } @@ -57,14 +65,26 @@ export class FileNode extends React.Component { toggleFileOptions(e) { e.preventDefault(); - if (this.props.isOptionsOpen) { - this.props.hideFileOptions(this.props.id); + if (this.state.isOptionsOpen) { + this.setState({ isOptionsOpen: false }); } else { this[`fileOptions-${this.props.id}`].focus(); - this.props.showFileOptions(this.props.id); + this.setState({ isOptionsOpen: true }); } } + hideFileOptions() { + this.setState({ isOptionsOpen: false }); + } + + showEditFileName() { + this.setState({ isEditingName: true }); + } + + hideEditFileName() { + this.setState({ isEditingName: false }); + } + renderChild(childId) { return (
  • @@ -78,8 +98,8 @@ export class FileNode extends React.Component { 'sidebar__root-item': this.props.name === 'root', 'sidebar__file-item': this.props.name !== 'root', 'sidebar__file-item--selected': this.props.isSelectedFile, - 'sidebar__file-item--open': this.props.isOptionsOpen, - 'sidebar__file-item--editing': this.props.isEditingName, + 'sidebar__file-item--open': this.state.isOptionsOpen, + 'sidebar__file-item--editing': this.state.isEditingName, 'sidebar__file-item--closed': this.props.isFolderClosed }); return ( @@ -123,7 +143,7 @@ export class FileNode extends React.Component { ref={(element) => { this.fileNameInput = element; }} onBlur={() => { this.validateFileName(); - this.props.hideEditFileName(this.props.id); + this.hideEditFileName(); }} onKeyPress={this.handleKeyPress} /> @@ -133,7 +153,7 @@ export class FileNode extends React.Component { ref={(element) => { this[`fileOptions-${this.props.id}`] = element; }} tabIndex="0" onClick={this.toggleFileOptions} - onBlur={() => setTimeout(() => this.props.hideFileOptions(this.props.id), 200)} + onBlur={() => setTimeout(this.hideFileOptions, 200)} > @@ -173,7 +193,7 @@ export class FileNode extends React.Component {