f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-03 06:12:51 +00:00
Code Wiki Activity

Clean up combobox component

Browse Source
This commit is contained in:
Trevor Buckner
2025-02-10 00:33:33 -05:00
parent 213a719337
commit 6cfdfad7d3
3 changed files with 53 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/components/combobox.jsx
View File

@@ -58,10 +58,10 @@ const Combobox = createClass({
this.props.onEntry(e); this.props.onEntry(e);
}); });
}, },
handleSelect : function(e){ handleSelect : function(value, data=value){
this.setState({ this.setState({
value : e.currentTarget.getAttribute('data-value') value : value
}, ()=>{this.props.onSelect(this.state.value);}); }, ()=>{this.props.onSelect(data);});
; ;
}, },
renderTextInput : function(){ renderTextInput : function(){
@@ -82,6 +82,7 @@ const Combobox = createClass({
} }
}} }}
/> />
<i className='fas fa-caret-down'/>
</div> </div>
); );
}, },
@@ -92,11 +93,10 @@ const Combobox = createClass({
const filterOn = _.isString(this.props.autoSuggest.filterOn) ? [this.props.autoSuggest.filterOn] : this.props.autoSuggest.filterOn; const filterOn = _.isString(this.props.autoSuggest.filterOn) ? [this.props.autoSuggest.filterOn] : this.props.autoSuggest.filterOn;
const filteredArrays = filterOn.map((attr)=>{ const filteredArrays = filterOn.map((attr)=>{
const children = dropdownChildren.filter((item)=>{ const children = dropdownChildren.filter((item)=>{
if(suggestMethod === 'includes'){ if(suggestMethod === 'includes')
return item.props[attr]?.toLowerCase().includes(this.state.value.toLowerCase()); return item.props[attr]?.toLowerCase().includes(this.state.value.toLowerCase());
} else if(suggestMethod === 'startsWith'){ if(suggestMethod === 'startsWith')
return item.props[attr]?.toLowerCase().startsWith(this.state.value.toLowerCase()); return item.props[attr]?.toLowerCase().startsWith(this.state.value.toLowerCase());
}
}); });
return children; return children;
}); });
@@ -111,7 +111,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.handleSelect(e) }); const clone = React.cloneElement(child, { onClick: ()=>this.handleSelect(child.props.value, child.props.data) });
return clone; return clone;
}); });
return ( return (

88
client/components/combobox.less
View File

@@ -1,50 +1,46 @@
.dropdown-container { .dropdown-container {
position:relative; position : relative;
input { input { width : 100%; }
width: 100%; .item i {
} position : absolute;
.dropdown-options { right : 10px;
position:absolute; color : black;
background-color: white; }
z-index: 100; .dropdown-options {
width: 100%; position : absolute;
border: 1px solid gray; z-index : 100;
overflow-y: auto; width : 100%;
max-height: 200px; max-height : 200px;
overflow-y : auto;
background-color : white;
border : 1px solid gray;
&::-webkit-scrollbar { &::-webkit-scrollbar { width : 14px; }
width: 14px; &::-webkit-scrollbar-track { background : #FFFFFF; }
} &::-webkit-scrollbar-thumb {
&::-webkit-scrollbar-track { background-color : #949494;
background: #ffffff; border : 3px solid #FFFFFF;
} border-radius : 10px;
&::-webkit-scrollbar-thumb { }
background-color: #949494;
border-radius: 10px;
border: 3px solid #ffffff;
}
.item {
position:relative;
font-size: 11px;
font-family: Open Sans;
padding: 5px;
cursor: default;
margin: 0 3px;
//border-bottom: 1px solid darkgray;
&:hover {
filter: brightness(120%);
background-color: rgb(163, 163, 163);
}
.detail {
width:100%;
text-align: left;
color: rgb(124, 124, 124);
font-style:italic;
font-size: 9px;
}
}
}
.item {
position : relative;
padding : 5px;
margin : 0 3px;
font-family : "Open Sans";
font-size : 11px;
cursor : default;
&:hover {
background-color : rgb(163, 163, 163);
filter : brightness(120%);
}
.detail {
width : 100%;
font-size : 9px;
font-style : italic;
color : rgb(124, 124, 124);
text-align : left;
}
}
}
} }

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

@@ -244,9 +244,9 @@ const MetadataEditor = createClass({
return _.map(langCodes.sort(), (code, index)=>{ return _.map(langCodes.sort(), (code, index)=>{
const localName = new Intl.DisplayNames([code], { type: 'language' }); const localName = new Intl.DisplayNames([code], { type: 'language' });
const englishName = new Intl.DisplayNames('en', { type: 'language' }); const englishName = new Intl.DisplayNames('en', { type: 'language' });
return <div className='item' title={`${englishName.of(code)}`} key={`${index}`} data-value={`${code}`} data-detail={`${localName.of(code)}`}> return <div className='item' title={englishName.of(code)} key={`${index}`} value={code} detail={localName.of(code)}>
{`${code}`} {code}
<div className='detail'>{`${localName.of(code)}`}</div> <div className='detail'>{localName.of(code)}</div>
</div>; </div>;
}); });
}; };
@@ -269,7 +269,7 @@ const MetadataEditor = createClass({
autoSuggest={{ autoSuggest={{
suggestMethod : 'startsWith', suggestMethod : 'startsWith',
clearAutoSuggestOnClick : true, clearAutoSuggestOnClick : true,
filterOn : ['data-value', 'data-detail', 'title'] filterOn : ['value', 'detail', 'title']
}} }}
> >
</Combobox> </Combobox>