mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-10 08:26:19 +02:00
sidepane: refactor new file add code
This commit is contained in:
@ -171,9 +171,6 @@ function Folder(props) {
|
|||||||
export class SidePane extends Component {
|
export class SidePane extends Component {
|
||||||
addFileButtonClickHandler() {
|
addFileButtonClickHandler() {
|
||||||
this.setState({ isEditing: true });
|
this.setState({ isEditing: true });
|
||||||
setTimeout(() => {
|
|
||||||
this.newFileNameInput.focus();
|
|
||||||
}, 1);
|
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* Checks if the passed filename already exists and if so, warns the user.
|
* Checks if the passed filename already exists and if so, warns the user.
|
||||||
@ -195,12 +192,13 @@ export class SidePane extends Component {
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
addFile() {
|
addFile(e) {
|
||||||
// This gets called twice when enter is pressed, because blur also fires.
|
// This gets called twice when enter is pressed, because blur also fires.
|
||||||
if (!this.newFileNameInput) {
|
// So check `isEditing` before proceeding.
|
||||||
|
if (!this.state.isEditing) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const newFileName = this.newFileNameInput.value;
|
const newFileName = e.target.value;
|
||||||
if (!this.warnForExistingFileName(newFileName)) {
|
if (!this.warnForExistingFileName(newFileName)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -211,14 +209,14 @@ export class SidePane extends Component {
|
|||||||
}
|
}
|
||||||
newFileNameInputKeyDownHandler(e) {
|
newFileNameInputKeyDownHandler(e) {
|
||||||
if (e.which === ENTER_KEY) {
|
if (e.which === ENTER_KEY) {
|
||||||
this.addFile();
|
this.addFile(e);
|
||||||
} else if (e.which === ESCAPE_KEY) {
|
} else if (e.which === ESCAPE_KEY) {
|
||||||
this.setState({ isEditing: false });
|
this.setState({ isEditing: false });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
removeFileClickHandler(file, e) {
|
removeFileClickHandler(file, e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
const answer = confirm(`Are you sure you want to delete ${file.name}?`);
|
const answer = confirm(`Are you sure you want to delete "${file.name}"?`);
|
||||||
if (answer) {
|
if (answer) {
|
||||||
this.props.onRemoveFile(file);
|
this.props.onRemoveFile(file);
|
||||||
}
|
}
|
||||||
@ -283,7 +281,12 @@ export class SidePane extends Component {
|
|||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
ref={el => (this.newFileNameInput = el)}
|
ref={el => {
|
||||||
|
el &&
|
||||||
|
setTimeout(() => {
|
||||||
|
el.focus();
|
||||||
|
}, 1);
|
||||||
|
}}
|
||||||
onBlur={this.addFile.bind(this)}
|
onBlur={this.addFile.bind(this)}
|
||||||
onKeyUp={this.newFileNameInputKeyDownHandler.bind(this)}
|
onKeyUp={this.newFileNameInputKeyDownHandler.bind(this)}
|
||||||
/>
|
/>
|
||||||
|
Reference in New Issue
Block a user