r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

👌 move filename change tracking logic to FileNode component state

Browse source
This commit is contained in:
ghalestrilo 2020-04-10 13:42:33 -03:00
parent 55a3d1a66b
commit 1b083fe54b
2 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client/modules/IDE/actions/files.js
View file

@ -135,10 +135,9 @@ export function createFolder(formProps) {
}; };
} }
export function updateFileName(id, name, updatedName = '') { export function updateFileName(id, name) {
return (dispatch) => { return (dispatch) => {
if (name !== updatedName) dispatch(setUnsavedChanges(true)); dispatch(setUnsavedChanges(true));
dispatch({ dispatch({
type: ActionTypes.UPDATE_FILE_NAME, type: ActionTypes.UPDATE_FILE_NAME,
id, id,

22
client/modules/IDE/components/FileNode.jsx
View file

@ -31,6 +31,7 @@ export class FileNode extends React.Component {
isOptionsOpen: false, isOptionsOpen: false,
isEditingName: false, isEditingName: false,
isFocused: false, isFocused: false,
updatedName: this.props.name
}; };
} }
@ -48,8 +49,16 @@ export class FileNode extends React.Component {
} }
getName() { getName() {
const { updatedName, name } = this.props; return this.state.updatedName;
return updatedName || name; }
commitFileNameChange() {
const { updatedName } = this.state;
const { name, updateFileName, id } = this.props;
if (updatedName !== name) {
updateFileName(id, updatedName);
}
} }
handleFileClick(e) { handleFileClick(e) {
@ -59,9 +68,9 @@ export class FileNode extends React.Component {
} }
} }
handleFileNameChange(event) { handleFileNameChange(event) {
this.props.updateFileName(this.props.id, event.target.value, this.getName()); const newname = event.target.value;
this.setState({ updatedName: newname });
} }
handleKeyPress(event) { handleKeyPress(event) {
@ -82,7 +91,7 @@ export class FileNode extends React.Component {
const hasEmptyFilename = newFileName === ''; const hasEmptyFilename = newFileName === '';
const hasOnlyExtension = newFileExtension && newFileName === newFileExtension[0]; const hasOnlyExtension = newFileExtension && newFileName === newFileExtension[0];
if (hasEmptyFilename || hasNoExtension || notSameExtension || hasOnlyExtension || hasExtensionIfFolder) { if (hasEmptyFilename || hasNoExtension || notSameExtension || hasOnlyExtension || hasExtensionIfFolder) {
this.props.updateFileName(this.props.id, this.originalFileName, this.getName()); this.props.updateFileName(this.props.id, this.originalFileName);
} }
} }
@ -109,6 +118,7 @@ export class FileNode extends React.Component {
hideEditFileName() { hideEditFileName() {
this.setState({ isEditingName: false }); this.setState({ isEditingName: false });
this.commitFileNameChange();
} }
renderChild(childId) { renderChild(childId) {
@ -284,7 +294,6 @@ FileNode.propTypes = {
parentId: PropTypes.string, parentId: PropTypes.string,
children: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired, children: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
updatedName: PropTypes.string,
fileType: PropTypes.string.isRequired, fileType: PropTypes.string.isRequired,
isSelectedFile: PropTypes.bool, isSelectedFile: PropTypes.bool,
isFolderClosed: PropTypes.bool, isFolderClosed: PropTypes.bool,
@ -303,7 +312,6 @@ FileNode.defaultProps = {
parentId: '0', parentId: '0',
isSelectedFile: false, isSelectedFile: false,
isFolderClosed: false, isFolderClosed: false,
updatedName: '',
}; };
function mapStateToProps(state, ownProps) { function mapStateToProps(state, ownProps) {