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

Add ref to focus in Collection List, handle whitespace errors in renaming sketch and collection

This commit is contained in:
Cassie Tarakajian 2020-04-02 17:52:04 -04:00
parent 47458ae601
commit d348f79d2a
2 changed files with 34 additions and 19 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,
renameValue: '',
};
this.renameInput = React.createRef();
}
onFocusComponent = () => {
@ -89,7 +90,7 @@ class CollectionListRowBase extends React.Component {
this.setState({
renameOpen: true,
renameValue: this.props.collection.name,
});
}, () => this.renameInput.current.focus());
}
handleRenameChange = (e) => {
@ -99,23 +100,23 @@ class CollectionListRowBase extends React.Component {
}
handleRenameEnter = (e) => {
const isValid = this.state.renameValue !== '';
if (e.key === 'Enter') {
if (isValid) {
this.props.editCollection(this.props.collection.id, { name: this.state.renameValue });
}
// this.resetName();
this.updateName();
this.closeAll();
}
}
// resetName = () => {
// this.setState({
// renameValue: this.props.collection.name
// });
// }
handleRenameBlur = () => {
this.updateName();
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 = () => {
const { optionsOpen } = this.state;
@ -188,8 +189,9 @@ class CollectionListRowBase extends React.Component {
value={renameValue}
onChange={this.handleRenameChange}
onKeyUp={this.handleRenameEnter}
// onBlur={this.resetName}
onBlur={this.handleRenameBlur}
onClick={e => e.stopPropagation()}
ref={this.renameInput}
/>
}
</React.Fragment>

23
client/modules/IDE/components/SketchList.jsx
View File

@ -70,7 +70,8 @@ class SketchListRowBase extends React.Component {
openRename = () => {
this.setState({
renameOpen: true
renameOpen: true,
renameValue: this.props.sketch.name
}, () => this.renameInput.current.focus());
}
@ -95,15 +96,27 @@ class SketchListRowBase extends React.Component {
handleRenameEnter = (e) => {
if (e.key === 'Enter') {
// TODO pass this func
this.props.changeProjectName(this.props.sketch.id, this.state.renameValue);
this.updateName();
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 = () => {
this.setState({
renameValue: this.props.sketch.name
renameValue: this.props.sketch.name,
renameOpen: false
});
}
@ -256,7 +269,7 @@ class SketchListRowBase extends React.Component {
value={renameValue}
onChange={this.handleRenameChange}
onKeyUp={this.handleRenameEnter}
onBlur={this.resetSketchName}
onBlur={this.handleRenameBlur}
onClick={e => e.stopPropagation()}
ref={this.renameInput}
/>