Fix needs saving mark 2 - for #576 (#658)

* Comment out show/hide file options action creators.

* Comment out show/hide file options properties

* Comment out show/hide file options action definitions

* Comment out constants for show/hide options action types

* Comment out props for show/hide options and replace with component state.

* Comment out show/hide edit file name reducers.

* Comment out show/hide edit file name actions.

* comment out show/hide edit file name action types.

* Comment out show/edit file name props from IDEView component

* Replace show/hide edit filename props in FileNode component with local state

* Remove commented out code from previous changes for moving redux state back into component state.

* Add binding to this for new functions. And tidy up of code.
This commit is contained in:
Jared Donovan 2018-09-08 05:48:25 +10:00 committed by Cassie Tarakajian
parent 4a2d6d3035
commit 2f21130e0d
5 changed files with 29 additions and 90 deletions

View file

@ -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';

View file

@ -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,

View file

@ -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 (
<li key={childId}>
@ -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)}
>
<InlineSVG src={downArrowUrl} />
</button>
@ -173,7 +193,7 @@ export class FileNode extends React.Component {
<button
onClick={() => {
this.originalFileName = this.props.name;
this.props.showEditFileName(this.props.id);
this.showEditFileName();
setTimeout(() => this.fileNameInput.focus(), 0);
}}
className="sidebar__file-item-option"
@ -222,15 +242,9 @@ FileNode.propTypes = {
name: PropTypes.string.isRequired,
fileType: PropTypes.string.isRequired,
isSelectedFile: PropTypes.bool,
isOptionsOpen: PropTypes.bool,
isEditingName: PropTypes.bool,
isFolderClosed: PropTypes.bool,
setSelectedFile: PropTypes.func.isRequired,
showFileOptions: PropTypes.func.isRequired,
hideFileOptions: PropTypes.func.isRequired,
deleteFile: PropTypes.func.isRequired,
showEditFileName: PropTypes.func.isRequired,
hideEditFileName: PropTypes.func.isRequired,
updateFileName: PropTypes.func.isRequired,
resetSelectedFile: PropTypes.func.isRequired,
newFile: PropTypes.func.isRequired,
@ -242,8 +256,6 @@ FileNode.propTypes = {
FileNode.defaultProps = {
parentId: '0',
isSelectedFile: false,
isOptionsOpen: false,
isEditingName: false,
isFolderClosed: false
};

View file

@ -296,11 +296,7 @@ class IDEView extends React.Component {
setSelectedFile={this.props.setSelectedFile}
newFile={this.props.newFile}
isExpanded={this.props.ide.sidebarIsExpanded}
showFileOptions={this.props.showFileOptions}
hideFileOptions={this.props.hideFileOptions}
deleteFile={this.props.deleteFile}
showEditFileName={this.props.showEditFileName}
hideEditFileName={this.props.hideEditFileName}
updateFileName={this.props.updateFileName}
projectOptionsVisible={this.props.ide.projectOptionsVisible}
openProjectOptions={this.props.openProjectOptions}
@ -624,11 +620,7 @@ IDEView.propTypes = {
cloneProject: PropTypes.func.isRequired,
expandConsole: PropTypes.func.isRequired,
collapseConsole: PropTypes.func.isRequired,
showFileOptions: PropTypes.func.isRequired,
hideFileOptions: PropTypes.func.isRequired,
deleteFile: PropTypes.func.isRequired,
showEditFileName: PropTypes.func.isRequired,
hideEditFileName: PropTypes.func.isRequired,
updateFileName: PropTypes.func.isRequired,
showEditProjectName: PropTypes.func.isRequired,
hideEditProjectName: PropTypes.func.isRequired,

View file

@ -155,22 +155,6 @@ const files = (state, action) => {
fileType: action.fileType || 'file'
}];
}
case ActionTypes.SHOW_FILE_OPTIONS:
return state.map((file) => {
if (file.id !== action.id) {
return file;
}
return Object.assign({}, file, { isOptionsOpen: true });
});
case ActionTypes.HIDE_FILE_OPTIONS:
return state.map((file) => {
if (file.id !== action.id) {
return file;
}
return Object.assign({}, file, { isOptionsOpen: false });
});
case ActionTypes.UPDATE_FILE_NAME:
return state.map((file) => {
if (file.id !== action.id) {
@ -192,22 +176,6 @@ const files = (state, action) => {
// });
// return newState.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 });
});
case ActionTypes.SET_SELECTED_FILE:
return state.map((file) => {
if (file.id === action.selectedFile) {