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

Browse source
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, 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>

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

@ -70,7 +70,8 @@ class SketchListRowBase extends React.Component {
openRename = () => { openRename = () => {
this.setState({ this.setState({
renameOpen: true renameOpen: true,
renameValue: this.props.sketch.name
}, () => this.renameInput.current.focus()); }, () => this.renameInput.current.focus());
} }
@ -95,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
}); });
} }
@ -256,7 +269,7 @@ 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} ref={this.renameInput}
/> />