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() {
const { isSelected, label, onClickItem } = this.props;
const { hint, isSelected, label, onClickItem } = this.props;
const className = isSelected ? 'typeahead-item typeahead-item__selected' : 'typeahead-item';
const onClick = () => onClickItem(label);
return (
<li ref={this.getRef} className={className} onClick={onClick}>
{label}
{hint && isSelected ? <div className="typeahead-item-hint">{hint}</div> : null}
</li>
);
}
@ -43,12 +44,14 @@ class TypeaheadGroup extends React.PureComponent<any, any> {
<ul className="typeahead-group__list">
{items.map(item => {
const text = typeof item === 'object' ? item.text : item;
const label = typeof item === 'object' ? item.display || item.text : item;
return (
<TypeaheadItem
key={text}
onClickItem={onClickItem}
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 {
background-color: $typeahead-selected-bg;
color: $typeahead-selected-color;
.typeahead-item-hint {
font-size: $font-size-xs;
color: $text-color;
}
}
}