@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
42 lines • 1.35 kB
JavaScript
import React, { useCallback, useMemo } from 'react';
import { StyledSearchBoxItem, StyledSearchBoxItemImage, StyledSearchBoxItemText } from './SearchBoxItem.styles';
const SearchBoxItem = ({
id,
text,
imageUrl,
shouldShowSmallItems,
shouldShowRoundImage,
onSelect,
groupName,
tabIndex
}) => {
const handleClick = useCallback(event => {
event.preventDefault();
event.stopPropagation();
onSelect({
id: id === 'input-value' ? text : id,
text,
imageUrl
}, groupName);
}, [onSelect, id, text, imageUrl, groupName]);
let idString = `search-box-item__${id}`;
if (groupName) {
idString = `_${groupName}`;
}
return useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBoxItem, {
id: idString,
onClick: handleClick,
tabIndex: tabIndex
}, imageUrl && /*#__PURE__*/React.createElement(StyledSearchBoxItemImage, {
src: imageUrl,
$shouldShowRoundImage: shouldShowRoundImage
}), /*#__PURE__*/React.createElement(StyledSearchBoxItemText, {
$shouldShowSmallItems: shouldShowSmallItems,
dangerouslySetInnerHTML: {
__html: text
}
})), [handleClick, idString, imageUrl, shouldShowRoundImage, shouldShowSmallItems, text, tabIndex]);
};
SearchBoxItem.displayName = 'SearchBoxItem';
export default SearchBoxItem;
//# sourceMappingURL=SearchBoxItem.js.map