@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
87 lines • 3.13 kB
JavaScript
import * as React from "react";
import useMediaQuery from "../hooks/useMediaQuery";
import ButtonLink from "../ButtonLink";
import Stack from "../Stack";
import ChevronBackward from "../icons/ChevronBackward";
import ChevronForward from "../icons/ChevronForward";
import { MAXIMUM_PAGES, SIZES } from "./consts";
import Pages from "./components/Pages";
import CompactPages from "./components/CompactPages";
import ActiveButton from "./components/ActiveButton";
const handlePageChange = (onPageChange, pageCount) => nextPageIndex => {
if (onPageChange && nextPageIndex <= pageCount && nextPageIndex >= 0) {
onPageChange(nextPageIndex);
}
};
const Pagination = ({
pageCount,
labelPrev,
labelNext,
labelProgress,
selectedPage = 1,
onPageChange,
dataTest,
hideLabels = true,
size = SIZES.NORMAL
}) => {
const pageChanged = handlePageChange(onPageChange, pageCount);
const {
isTablet
} = useMediaQuery();
return /*#__PURE__*/React.createElement(Stack, {
spacing: "XXSmall",
align: "center",
grow: false,
shrink: true,
dataTest: dataTest,
basis: "auto"
}, !isTablet ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonLink, {
onClick: () => pageChanged(selectedPage - 1),
iconLeft: /*#__PURE__*/React.createElement(ChevronBackward, null),
type: "secondary",
title: labelPrev,
size: size,
disabled: selectedPage <= 1
}), /*#__PURE__*/React.createElement(ActiveButton, {
transparent: true,
size: size
}, labelProgress), /*#__PURE__*/React.createElement(ButtonLink, {
onClick: () => pageChanged(selectedPage + 1),
iconLeft: /*#__PURE__*/React.createElement(ChevronForward, null),
type: "secondary",
title: labelNext,
size: size,
disabled: pageCount <= selectedPage
})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonLink, {
onClick: () => pageChanged(selectedPage - 1),
iconLeft: /*#__PURE__*/React.createElement(ChevronBackward, null),
type: "secondary",
title: hideLabels ? labelPrev : undefined,
size: size,
disabled: selectedPage <= 1
}, !hideLabels && labelPrev), /*#__PURE__*/React.createElement(Stack, {
inline: true,
grow: false,
spacing: "XXSmall",
align: "center"
}, pageCount <= MAXIMUM_PAGES ? /*#__PURE__*/React.createElement(Pages, {
pageCount: pageCount,
selectedPage: selectedPage,
onPageChange: onPageChange,
size: size
}) : /*#__PURE__*/React.createElement(CompactPages, {
pageCount: pageCount,
selectedPage: selectedPage,
onPageChange: onPageChange,
size: size
})), /*#__PURE__*/React.createElement(ButtonLink, {
onClick: () => pageChanged(selectedPage + 1),
iconRight: !hideLabels && /*#__PURE__*/React.createElement(ChevronForward, null),
iconLeft: hideLabels && /*#__PURE__*/React.createElement(ChevronForward, null),
type: "secondary",
title: hideLabels ? labelNext : undefined,
size: size,
disabled: pageCount <= selectedPage
}, !hideLabels && labelNext)));
};
export default Pagination;