f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-11 04:42:42 +00:00
Code Wiki Activity

add tag length limit, fix tag editing issues

Browse Source
This commit is contained in:
Charlie Humphreys
2022-08-26 10:42:34 -05:00
parent ae9eef4fba
commit 5227bbc1d4
2 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/homebrew/editor/metadataEditor/metadataEditor.jsx
View File

@@ -198,7 +198,7 @@ const MetadataEditor = createClass({
{this.renderThumbnail()} {this.renderThumbnail()}
</div> </div>
<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]+$/]} <StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
placeholder='add tag' unique={true} placeholder='add tag' unique={true}
values={this.props.metadata.tags} values={this.props.metadata.tags}
onChange={(e)=>this.handleFieldChange('tags', e)}/> onChange={(e)=>this.handleFieldChange('tags', e)}/>

18
client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx
View File

@@ -30,7 +30,7 @@ const StringArrayEditor = createClass({
componentDidUpdate : function(prevProps) { componentDidUpdate : function(prevProps) {
if(!_.eq(this.props, prevProps)) { if(!_.eq(this.props, prevProps)) {
this.setState({ this.setState({
valueContext : !!this.props.values ? this.props.values.map((newValue)=>({ valueContext : this.props.values ? this.props.values.map((newValue)=>({
value : newValue, value : newValue,
editing : this.state.valueContext.find(({ value })=>value === newValue)?.editing || false editing : this.state.valueContext.find(({ value })=>value === newValue)?.editing || false
})) : [] })) : []
@@ -76,15 +76,19 @@ const StringArrayEditor = createClass({
this.setState({ valueContext, updateValue: this.props.values[index] }); this.setState({ valueContext, updateValue: this.props.values[index] });
}, },
valueIsValid : function(value) { valueIsValid : function(value, index) {
const values = _.clone(this.props.values);
if(index !== undefined) {
values.splice(index, 1);
}
const matchesPatterns = !this.props.valuePatterns || this.props.valuePatterns.some((pattern)=>!!(value || '').match(pattern)); const matchesPatterns = !this.props.valuePatterns || this.props.valuePatterns.some((pattern)=>!!(value || '').match(pattern));
const uniqueIfSet = !this.props.unique || !this.props.values.includes(value); const uniqueIfSet = !this.props.unique || !values.includes(value);
return matchesPatterns && uniqueIfSet; return matchesPatterns && uniqueIfSet;
}, },
handleValueInputKeyDown : function(event, index) { handleValueInputKeyDown : function(event, index) {
if(event.key === 'Enter') { if(event.key === 'Enter') {
if(this.valueIsValid(event.target.value)) { if(this.valueIsValid(event.target.value, index)) {
if(index !== undefined) { if(index !== undefined) {
this.updateValue(event.target.value, index); this.updateValue(event.target.value, index);
} else { } else {
@@ -106,12 +110,12 @@ const StringArrayEditor = createClass({
const valueElements = Object.values(this.state.valueContext).map((context, i)=>context.editing const valueElements = Object.values(this.state.valueContext).map((context, i)=>context.editing
? <React.Fragment key={i}> ? <React.Fragment key={i}>
<div className='input-group'> <div className='input-group'>
<input type='text' className={`value ${this.valueIsValid(this.state.updateValue) ? '' : 'invalid'}`} autoFocus placeholder={this.props.placeholder} <input type='text' className={`value ${this.valueIsValid(this.state.updateValue, i) ? '' : 'invalid'}`} autoFocus placeholder={this.props.placeholder}
value={this.state.updateValue} value={this.state.updateValue}
onKeyDown={(e)=>this.handleValueInputKeyDown(e, i)} onKeyDown={(e)=>this.handleValueInputKeyDown(e, i)}
onChange={(e)=>this.setState({ updateValue: e.target.value })}/> onChange={(e)=>this.setState({ updateValue: e.target.value })}/>
{<div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.closeEditInput(i); }}><i className='fa fa-times fa-fw'/></div>} {<div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.closeEditInput(i); }}><i className='fa fa-undo fa-fw'/></div>}
{this.valueIsValid(this.state.updateValue) ? <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.updateValue(this.state.updateValue, i); }}><i className='fa fa-check fa-fw'/></div> : null} {this.valueIsValid(this.state.updateValue, i) ? <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.updateValue(this.state.updateValue, i); }}><i className='fa fa-check fa-fw'/></div> : null}
</div> </div>
</React.Fragment> </React.Fragment>
: <div className='badge' key={i} onClick={()=>this.editValue(i)}>{context.value} : <div className='badge' key={i} onClick={()=>this.editValue(i)}>{context.value}