@findify/react-components
Version:
Findify react UI components
54 lines (53 loc) • 2.3 kB
JSX
/**
* @module components/search/LazyResults
*/
import { useConfig, usePagination } from '@findify/react-connect';
import MapArray from 'components/common/MapArray';
import Grid from 'components/common/Grid';
import ProductCard from 'components/Cards/Product';
import Button from 'components/Button';
import Text from 'components/Text';
import useTranslations from 'helpers/useTranslations';
import PromoCard from 'components/Cards/Promo';
import styles from 'components/search/LazyResults/styles.css';
import useLazy from 'helpers/useLazy';
import useLazyPromos from 'helpers/useLazyPromos';
import Pagination from 'components/Pagination';
export default ({ theme = styles, card = ProductCard, itemConfig }) => {
const { container, onLoadNext, onLoadPrev, displayPrevButton, displayNextButton, items, } = useLazy();
const promos = useLazyPromos();
const { config } = useConfig();
const { getPageProps, current } = usePagination();
const translate = useTranslations();
return (<div ref={container} className={theme.root} role="main" aria-label={translate('search.title')} aria-live="polite" tabIndex={0}>
<div className={theme.buttonContainer} display-if={displayPrevButton}>
<Button className={theme.prevButton} onClick={onLoadPrev} href={getPageProps(current - 1)?.href}>
<Text primary lowercase>
{translate('search.loadPrev')}
</Text>
</Button>
</div>
<Grid role="list" wrapperComponent="ul" columnComponent="li" aria-label={translate('search.title')} columns={config.getIn(['breakpoints', 'grid'])} gutter={12}>
{MapArray({
config: itemConfig || config.get('product'),
array: items,
factory: card,
isSearch: true
})}
{MapArray({
array: promos,
factory: PromoCard,
config: config.get('promo'),
order: (item) => item.get('position'),
})}
</Grid>
<div className={theme.buttonContainer} display-if={displayNextButton}>
<Button className={theme.nextButton} onClick={onLoadNext} href={getPageProps(current + 1)?.href}>
<Text primary lowercase>
{translate('search.loadMore')}
</Text>
</Button>
</div>
<Pagination />
</div>);
};