@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.
159 lines (157 loc) • 5.98 kB
JavaScript
"use client";
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);
}
};
/**
* @orbit-doc-start
* README
* ----------
* # Pagination
*
* To implement Pagination component into your project you'll need to the import:
*
* ```jsx
* import Pagination from "@kiwicom/orbit-components/lib/Pagination";
* ```
*
* After adding import into your project you can use it simply like:
*
* ```jsx
* <Pagination pageCount={1337} selectedPage={69} />
* ```
*
* ## Props
*
* Table below contains all types of the props available in the Pagination component.
*
* | Name | Type | Default | Description |
* | :--------------- | :--------------- | :--------- | :----------------------------------------------------------------------------------------- |
* | dataTest | `string` | | Optional prop for testing purposes. |
* | hideLabels | `boolean` | `true` | If `false`, the Previous and Next labels will be visible. |
* | labelPrev | `string` | | The text label for the previous page call to action. |
* | labelNext | `string` | | The text label for the next page call to action. |
* | labelProgress | `React.Node` | | The text label for progress indicator. |
* | **onPageChange** | `number => void` | | Function for handling onPageChange event. [See Functional specs](#functional-specs) |
* | **pageCount** | `number` | | The page count to render into separated buttons. [See Functional specs](#functional-specs) |
* | selectedPage | `number` | `1` | The index number of the selected page. |
* | size | [`enum`](#enum) | `"normal"` | The size of the Pagination. |
*
* ### enum
*
* | size |
* | :--------- |
* | `"small"` |
* | `"normal"` |
*
* ### Functional specs
*
* - If the `pageCount` will be bigger than 7, the compact version will be rendered.
*
* - The prop `onPageChange` will return the new index of selected page. Use arrow function for it, e.g.:
*
* ```jsx
* <Pagination onPageChange={selectedPage => doSomething(selectedPage)} />
* ```
*
*
* @orbit-doc-end
*/
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: "100",
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, {
ariaHidden: true,
reverseOnRtl: true
}),
type: "secondary",
title: labelPrev,
size: size,
disabled: selectedPage <= 1
}), /*#__PURE__*/React.createElement(ActiveButton, {
className: "bg-transparent",
size: size
}, labelProgress), /*#__PURE__*/React.createElement(ButtonLink, {
onClick: () => pageChanged(selectedPage + 1),
iconLeft: /*#__PURE__*/React.createElement(ChevronForward, {
ariaHidden: true,
reverseOnRtl: true
}),
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, {
ariaHidden: true,
reverseOnRtl: true
}),
type: "secondary",
title: hideLabels ? labelPrev : undefined,
size: size,
disabled: selectedPage <= 1
}, !hideLabels && labelPrev), /*#__PURE__*/React.createElement(Stack, {
inline: true,
grow: false,
spacing: "100",
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, {
ariaHidden: true,
reverseOnRtl: true
}),
iconLeft: hideLabels && /*#__PURE__*/React.createElement(ChevronForward, {
ariaHidden: true,
reverseOnRtl: true
}),
type: "secondary",
title: hideLabels ? labelNext : undefined,
size: size,
disabled: pageCount <= selectedPage
}, !hideLabels && labelNext)));
};
export default Pagination;