@findify/react-components
Version:
Findify react UI components
31 lines (30 loc) • 1.39 kB
JSX
/**
* @module components/autocomplete/SuggestionItem
*/
import cx from 'classnames';
import Icon from 'components/Icon';
import escapeRegExp from 'lodash/escapeRegExp';
import styles from 'components/autocomplete/SuggestionItem/styles.css';
/**
* Function used to return HTML markup for highlighting matching query in SearchSuggestion
* @param value suggestion value
* @param highlighted query that is entered in the Autocomplete
* @param theme theme used by SuggestionItem
*/
function highlightSuggestion(value, highlighted, theme) {
const regexp = new RegExp(`(${escapeRegExp(highlighted)})`, 'i');
return value.replace(regexp, `<span class="${theme.highlightedText}">$1</span>`);
}
export default ({ item, query, theme = styles, highlighted, icon, isTrendingSearches, template, }) => {
const value = item?.get('value');
return (<li display-if={value} onClick={item.onClick} role="option" id={`suggestion-${Math.abs(item.hashCode())}`} aria-selected={highlighted} className={cx(theme.suggestion, theme[template], {
[theme.highlighted]: highlighted,
[theme.withIcon]: !!icon,
[theme.trending]: isTrendingSearches,
})}>
<Icon display-if={icon} name={icon} className={theme.icon} width={14} height={14}/>
<span dangerouslySetInnerHTML={{
__html: highlightSuggestion(value, query.get('q'), theme),
}}/>
</li>);
};