1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-10 00:16:18 +02:00

sidepane: refactor new file add code

This commit is contained in:
Kushagra Gour
2018-10-11 13:39:14 +05:30
parent bd2af4db3b
commit 57c5e07ee5

View File

@ -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)}
/> />