IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

hint support for typeahead

Browse Source
This commit is contained in:
David Kaltschmidt 2018-06-12 17:12:03 +02:00
parent 2ebda4bf4d
commit 73ddf2c3ed
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/app/containers/Explore/Typeahead.tsx
View File

@ -23,12 +23,13 @@ class TypeaheadItem extends React.PureComponent<any, any> {
}; };
render() { render() {
const { isSelected, label, onClickItem } = this.props; const { hint, isSelected, label, onClickItem } = this.props;
const className = isSelected ? 'typeahead-item typeahead-item__selected' : 'typeahead-item'; const className = isSelected ? 'typeahead-item typeahead-item__selected' : 'typeahead-item';
const onClick = () => onClickItem(label); const onClick = () => onClickItem(label);
return ( return (
<li ref={this.getRef} className={className} onClick={onClick}> <li ref={this.getRef} className={className} onClick={onClick}>
{label} {label}
{hint && isSelected ? <div className="typeahead-item-hint">{hint}</div> : null}
</li> </li>
); );
} }
@ -43,12 +44,14 @@ class TypeaheadGroup extends React.PureComponent<any, any> {
<ul className="typeahead-group__list"> <ul className="typeahead-group__list">
{items.map(item => { {items.map(item => {
const text = typeof item === 'object' ? item.text : item; const text = typeof item === 'object' ? item.text : item;
const label = typeof item === 'object' ? item.display || item.text : item;
return ( return (
<TypeaheadItem <TypeaheadItem
key={text} key={text}
onClickItem={onClickItem} onClickItem={onClickItem}
isSelected={selected.indexOf(text) > -1} isSelected={selected.indexOf(text) > -1}
label={text} hint={item.hint}
label={label}
/> />
); );
})} })}

5
public/sass/components/_slate_editor.scss
View File

@ -67,6 +67,11 @@
.typeahead-item__selected { .typeahead-item__selected {
background-color: $typeahead-selected-bg; background-color: $typeahead-selected-bg;
color: $typeahead-selected-color; color: $typeahead-selected-color;
.typeahead-item-hint {
font-size: $font-size-xs;
color: $text-color;
}
} }
} }