diff --git a/client/constants.js b/client/constants.js
index 147c2ba9..43536f75 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -58,13 +58,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 18762dd1..b436034e 100644
--- a/client/modules/IDE/actions/files.js
+++ b/client/modules/IDE/actions/files.js
@@ -148,34 +148,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 {