@findify/react-components
Version:
Findify react UI components
52 lines (50 loc) • 2.15 kB
JSX
/**
* @module components/autocomplete/Products
*/
import { useCallback } from 'react';
import styles from 'components/autocomplete/Products/styles.css';
import ProductCard from 'components/Cards/Product';
import Grid from 'components/common/Grid';
import MapArray from 'components/common/MapArray';
import { useItems, useQuery } from '@findify/react-connect';
import useTranslations from 'helpers/useTranslations';
import Title from 'components/autocomplete/BlockTitle';
import { emit } from 'helpers/emmiter';
const makeSearchUrl = (query, config) => {
const prefix = config.getIn(['location', 'prefix']);
const searchUrl = config.getIn(['location', 'searchUrl']);
const defaultPathName = config.getIn(['location', 'defaultPath'], '');
return `${defaultPathName}${searchUrl}?${prefix ? prefix + '_' : ''}q=${query}`;
};
export default ({ theme = styles, config, isTrendingSearches, registerItems, highlightedItem, }) => {
const { items, config: baseConfig, } = useItems();
const { query } = useQuery();
const translate = useTranslations();
const onViewAll = useCallback((e) => {
e.preventDefault();
emit('search', baseConfig.get('widgetKey'), query.get('q') ? query.get('q') : '');
}, [query]);
registerItems(items, config.get('limit'));
return (<div className={theme.root} display-if={items.size}>
<Title>
{isTrendingSearches
? translate('autocomplete.trendingProducts')
: translate('autocomplete.productMatches')}
<a className={theme.viewAll} onClick={onViewAll} href={makeSearchUrl(query.get('q'), baseConfig)}>
{translate('autocomplete.viewAllResults')}
</a>
</Title>
<Grid columns={config.getIn(['breakpoints', 'products'], '12')} gutter={12} className={theme.list}>
{MapArray({
array: items,
limit: config.get('limit'),
factory: ProductCard,
isAutocomplete: true,
config: config.get('item'),
mapProps: (item) => ({
highlighted: highlightedItem && item.hashCode() === highlightedItem.hashCode(),
}),
})}
</Grid>
</div>);
};