f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-06 16:32:40 +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 (

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