Don't allow Collection name to be empty

This commit is contained in:
Andrew Nicolaou 2020-01-15 11:56:29 +01:00
parent 811c88fc83
commit ed481b9a89
2 changed files with 16 additions and 9 deletions

View file

@ -23,7 +23,7 @@ class CollectionListRowBase extends React.Component {
optionsOpen: false, optionsOpen: false,
isFocused: false, isFocused: false,
renameOpen: false, renameOpen: false,
renameValue: props.collection.name, renameValue: '',
}; };
} }
@ -88,6 +88,7 @@ class CollectionListRowBase extends React.Component {
this.closeAll(); this.closeAll();
this.setState({ this.setState({
renameOpen: true, renameOpen: true,
renameValue: this.props.collection.name,
}); });
} }
@ -98,17 +99,23 @@ class CollectionListRowBase extends React.Component {
} }
handleRenameEnter = (e) => { handleRenameEnter = (e) => {
const isValid = this.state.renameValue !== '';
if (e.key === 'Enter') { if (e.key === 'Enter') {
this.props.editCollection(this.props.collection.id, { name: this.state.renameValue }); if (isValid) {
this.props.editCollection(this.props.collection.id, { name: this.state.renameValue });
}
// this.resetName();
this.closeAll(); this.closeAll();
} }
} }
resetSketchName = () => { // resetName = () => {
this.setState({ // this.setState({
renameValue: this.props.collection.name // renameValue: this.props.collection.name
}); // });
} // }
renderActions = () => { renderActions = () => {
const { optionsOpen } = this.state; const { optionsOpen } = this.state;
@ -181,7 +188,7 @@ class CollectionListRowBase extends React.Component {
value={renameValue} value={renameValue}
onChange={this.handleRenameChange} onChange={this.handleRenameChange}
onKeyUp={this.handleRenameEnter} onKeyUp={this.handleRenameEnter}
onBlur={this.resetSketchName} // onBlur={this.resetName}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
/> />
} }

View file

@ -204,7 +204,7 @@ class Collection extends React.Component {
<div className="collection-metadata__column--left"> <div className="collection-metadata__column--left">
<h2 className="collection-metadata__name"> <h2 className="collection-metadata__name">
{ {
this.isOwner() ? <EditableInput value={name} onChange={handleEditCollectionName} /> : name this.isOwner() ? <EditableInput value={name} onChange={handleEditCollectionName} validate={value => value !== ''} /> : name
} }
</h2> </h2>