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

edit/add autoSuggest options

Browse Source
This commit is contained in:
Gazook89
2022-11-24 22:51:16 -06:00
parent 60ca9530a3
commit fb95039368
2 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
client/components/combobox.jsx
View File

@@ -10,14 +10,20 @@ const Combobox = createClass({
return { return {
trigger : 'hover', trigger : 'hover',
default : '', default : '',
autoSuggest : true // autoSuggest : true,
// clearAutoSuggestOnClick : true
autoSuggest : {
clearAutoSuggestOnClick : true,
suggestMethod : 'includes'
},
}; };
}, },
getInitialState : function() { getInitialState : function() {
return { return {
showDropdown : false, showDropdown : false,
value : '', value : '',
options : [...this.props.options] options : [...this.props.options],
inputFocused : false
}; };
}, },
componentDidMount : function() { componentDidMount : function() {
@@ -39,18 +45,20 @@ const Combobox = createClass({
}, },
handleDropdown : function(show){ handleDropdown : function(show){
this.setState({ this.setState({
showDropdown : show showDropdown : show,
inputFocused : this.props.autoSuggest.clearAutoSuggestOnClick ? show : false
}); });
}, },
handleInput : function(e){ handleInput : function(e){
e.persist(); e.persist();
this.setState({ this.setState({
value : e.target.value value : e.target.value,
inputFocused : false
}, ()=>{ }, ()=>{
this.props.onEntry(e); this.props.onEntry(e);
}); });
}, },
handleOption : function(e){ handleSelect : function(e){
this.setState({ this.setState({
value : e.currentTarget.getAttribute('data-value') value : e.currentTarget.getAttribute('data-value')
}, ()=>{this.props.onSelect(this.state.value);}); }, ()=>{this.props.onSelect(this.state.value);});
@@ -67,13 +75,23 @@ const Combobox = createClass({
}, },
renderDropdown : function(dropdownChildren){ renderDropdown : function(dropdownChildren){
if(!this.state.showDropdown) return null; if(!this.state.showDropdown) return null;
if(this.props.autoSuggest === true){
if(this.props.autoSuggest && !this.state.inputFocused){
const suggestMethod = this.props.autoSuggest.suggestMethod;
dropdownChildren = dropdownChildren.map((item)=>({ dropdownChildren = dropdownChildren.map((item)=>({
...item, ...item,
value : item.props['data-value'] value : item.props['data-value']
})).filter((item)=>item.value.includes(this.state.value)); }));
if(suggestMethod === 'includes'){
console.log('includes');
dropdownChildren = dropdownChildren.filter((item)=>item.value.includes(this.state.value));
} else if(suggestMethod === 'sequential'){
dropdownChildren = dropdownChildren.filter((item)=>item.value.startsWith(this.state.value));
}
} }
return ( return (
<div className='dropdown-options'> <div className='dropdown-options'>
{dropdownChildren} {dropdownChildren}
@@ -82,7 +100,7 @@ const Combobox = createClass({
}, },
render : function () { render : function () {
const dropdownChildren = this.state.options.map((child, i)=>{ const dropdownChildren = this.state.options.map((child, i)=>{
const clone = React.cloneElement(child, { onClick: (e)=>this.handleOption(e) }); const clone = React.cloneElement(child, { onClick: (e)=>this.handleSelect(e) });
return clone; return clone;
}); });
return ( return (

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

@@ -239,7 +239,7 @@ const MetadataEditor = createClass({
onSelect={(value)=>this.handleLanguage(value)} onSelect={(value)=>this.handleLanguage(value)}
onEntry={(e)=>{this.handleFieldChange('lang', e);}} onEntry={(e)=>{this.handleFieldChange('lang', e);}}
options={listLanguages()} options={listLanguages()}
autoSuggest={true}> autoSuggest={{ suggestMethod: 'includes', clearAutoSuggestOnClick: true }}>
</Combobox> </Combobox>
</div>; </div>;
}, },