react-instantsearch
Version:
⚡ Lightning-fast search for React, by Algolia
67 lines (64 loc) • 3.04 kB
JavaScript
import { createDisplayResultsToolComponent, createButtonComponent, ChevronLeftIcon, ChevronRightIcon } from 'instantsearch-ui-components';
import React, { createElement, Fragment, useEffect, useRef } from 'react';
import { Carousel } from '../../../components/Carousel.js';
function createGroupedResultsTool(itemComponent) {
var DisplayResultsUIComponent = createDisplayResultsToolComponent({
createElement: createElement,
Fragment: Fragment,
useEffect: useEffect,
useRef: useRef
});
var Button = createButtonComponent({
createElement: createElement
});
var DisplayResultsCarouselHeader = function DisplayResultsCarouselHeader(param) {
var nbItems = param.nbItems, canScrollLeft = param.canScrollLeft, canScrollRight = param.canScrollRight, scrollLeft = param.scrollLeft, scrollRight = param.scrollRight;
return /*#__PURE__*/ React.createElement("div", {
className: "ais-ChatToolDisplayResultsCarouselHeader"
}, /*#__PURE__*/ React.createElement("div", {
className: "ais-ChatToolDisplayResultsCarouselHeaderCount"
}, nbItems, " result", nbItems > 1 ? 's' : ''), /*#__PURE__*/ React.createElement("div", {
className: "ais-ChatToolDisplayResultsCarouselHeaderScrollButtons"
}, /*#__PURE__*/ React.createElement(Button, {
variant: "outline",
size: "sm",
iconOnly: true,
"aria-label": "Previous",
onClick: scrollLeft,
disabled: !canScrollLeft,
className: "ais-ChatToolDisplayResultsCarouselHeaderScrollButton"
}, /*#__PURE__*/ React.createElement(ChevronLeftIcon, {
createElement: createElement
})), /*#__PURE__*/ React.createElement(Button, {
variant: "outline",
size: "sm",
iconOnly: true,
"aria-label": "Next",
onClick: scrollRight,
disabled: !canScrollRight,
className: "ais-ChatToolDisplayResultsCarouselHeaderScrollButton"
}, /*#__PURE__*/ React.createElement(ChevronRightIcon, {
createElement: createElement
}))));
};
var DisplayResultsLayoutComponent = function DisplayResultsLayoutComponent(toolProps) {
return /*#__PURE__*/ React.createElement(DisplayResultsUIComponent, {
toolProps: toolProps,
groupCarouselComponent: function groupCarouselComponent(param) {
var items = param.items, sendEvent = param.sendEvent;
return /*#__PURE__*/ React.createElement(Carousel, {
items: items,
itemComponent: itemComponent,
sendEvent: sendEvent,
showNavigation: false,
headerComponent: DisplayResultsCarouselHeader
});
}
});
};
return {
layoutComponent: DisplayResultsLayoutComponent,
streamInput: true
};
}
export { createGroupedResultsTool };