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

Merge pull request #1299 from nik72619c/rename-input-not-changing-focus

Browse source 
Fix focus not coming on clicking on the rename option
This commit is contained in:
Cassie Tarakajian 2020-04-02 17:53:14 -04:00 committed by GitHub
commit c19ae217ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
client/modules/IDE/components/CollectionList/CollectionListRow.jsx
View file

@ -25,6 +25,7 @@ class CollectionListRowBase extends React.Component {
renameOpen: false, renameOpen: false,
renameValue: '', renameValue: '',
}; };
this.renameInput = React.createRef();
} }
onFocusComponent = () => { onFocusComponent = () => {
@ -89,7 +90,7 @@ class CollectionListRowBase extends React.Component {
this.setState({ this.setState({
renameOpen: true, renameOpen: true,
renameValue: this.props.collection.name, renameValue: this.props.collection.name,
}); }, () => this.renameInput.current.focus());
} }
handleRenameChange = (e) => { handleRenameChange = (e) => {
@ -99,23 +100,23 @@ class CollectionListRowBase extends React.Component {
} }
handleRenameEnter = (e) => { handleRenameEnter = (e) => {
const isValid = this.state.renameValue !== '';
if (e.key === 'Enter') { if (e.key === 'Enter') {
if (isValid) { this.updateName();
this.props.editCollection(this.props.collection.id, { name: this.state.renameValue });
}
// this.resetName();
this.closeAll(); this.closeAll();
} }
} }
// resetName = () => { handleRenameBlur = () => {
// this.setState({ this.updateName();
// renameValue: this.props.collection.name this.closeAll();
// }); }
// }
updateName = () => {
const isValid = this.state.renameValue.trim().length !== 0;
if (isValid) {
this.props.editCollection(this.props.collection.id, { name: this.state.renameValue.trim() });
}
}
renderActions = () => { renderActions = () => {
const { optionsOpen } = this.state; const { optionsOpen } = this.state;
@ -188,8 +189,9 @@ class CollectionListRowBase extends React.Component {
value={renameValue} value={renameValue}
onChange={this.handleRenameChange} onChange={this.handleRenameChange}
onKeyUp={this.handleRenameEnter} onKeyUp={this.handleRenameEnter}
// onBlur={this.resetName} onBlur={this.handleRenameBlur}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
ref={this.renameInput}
/> />
} }
</React.Fragment> </React.Fragment>

27
client/modules/IDE/components/SketchList.jsx
View file

@ -32,6 +32,7 @@ class SketchListRowBase extends React.Component {
renameValue: props.sketch.name, renameValue: props.sketch.name,
isFocused: false, isFocused: false,
}; };
this.renameInput = React.createRef();
} }
onFocusComponent = () => { onFocusComponent = () => {
@ -69,8 +70,9 @@ class SketchListRowBase extends React.Component {
openRename = () => { openRename = () => {
this.setState({ this.setState({
renameOpen: true renameOpen: true,
}); renameValue: this.props.sketch.name
}, () => this.renameInput.current.focus());
} }
closeRename = () => { closeRename = () => {
@ -94,15 +96,27 @@ class SketchListRowBase extends React.Component {
handleRenameEnter = (e) => { handleRenameEnter = (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
// TODO pass this func this.updateName();
this.props.changeProjectName(this.props.sketch.id, this.state.renameValue);
this.closeAll(); this.closeAll();
} }
} }
handleRenameBlur = () => {
this.updateName();
this.closeAll();
}
updateName = () => {
const isValid = this.state.renameValue.trim().length !== 0;
if (isValid) {
this.props.changeProjectName(this.props.sketch.id, this.state.renameValue.trim());
}
}
resetSketchName = () => { resetSketchName = () => {
this.setState({ this.setState({
renameValue: this.props.sketch.name renameValue: this.props.sketch.name,
renameOpen: false
}); });
} }
@ -255,8 +269,9 @@ class SketchListRowBase extends React.Component {
value={renameValue} value={renameValue}
onChange={this.handleRenameChange} onChange={this.handleRenameChange}
onKeyUp={this.handleRenameEnter} onKeyUp={this.handleRenameEnter}
onBlur={this.resetSketchName} onBlur={this.handleRenameBlur}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
ref={this.renameInput}
/> />
} }
</React.Fragment> </React.Fragment>