@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.
164 lines (162 loc) • 6.64 kB
JavaScript
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _useMediaQuery = _interopRequireDefault(require("../hooks/useMediaQuery"));
var _ButtonLink = _interopRequireDefault(require("../ButtonLink"));
var _Stack = _interopRequireDefault(require("../Stack"));
var _ChevronBackward = _interopRequireDefault(require("../icons/ChevronBackward"));
var _ChevronForward = _interopRequireDefault(require("../icons/ChevronForward"));
var _consts = require("./consts");
var _Pages = _interopRequireDefault(require("./components/Pages"));
var _CompactPages = _interopRequireDefault(require("./components/CompactPages"));
var _ActiveButton = _interopRequireDefault(require("./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 = _consts.SIZES.NORMAL
}) => {
const pageChanged = handlePageChange(onPageChange, pageCount);
const {
isTablet
} = (0, _useMediaQuery.default)();
return /*#__PURE__*/React.createElement(_Stack.default, {
spacing: "100",
align: "center",
grow: false,
shrink: true,
dataTest: dataTest,
basis: "auto"
}, !isTablet ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ButtonLink.default, {
onClick: () => pageChanged(selectedPage - 1),
iconLeft: /*#__PURE__*/React.createElement(_ChevronBackward.default, {
ariaHidden: true,
reverseOnRtl: true
}),
type: "secondary",
title: labelPrev,
size: size,
disabled: selectedPage <= 1
}), /*#__PURE__*/React.createElement(_ActiveButton.default, {
className: "bg-transparent",
size: size
}, labelProgress), /*#__PURE__*/React.createElement(_ButtonLink.default, {
onClick: () => pageChanged(selectedPage + 1),
iconLeft: /*#__PURE__*/React.createElement(_ChevronForward.default, {
ariaHidden: true,
reverseOnRtl: true
}),
type: "secondary",
title: labelNext,
size: size,
disabled: pageCount <= selectedPage
})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ButtonLink.default, {
onClick: () => pageChanged(selectedPage - 1),
iconLeft: /*#__PURE__*/React.createElement(_ChevronBackward.default, {
ariaHidden: true,
reverseOnRtl: true
}),
type: "secondary",
title: hideLabels ? labelPrev : undefined,
size: size,
disabled: selectedPage <= 1
}, !hideLabels && labelPrev), /*#__PURE__*/React.createElement(_Stack.default, {
inline: true,
grow: false,
spacing: "100",
align: "center"
}, pageCount <= _consts.MAXIMUM_PAGES ? /*#__PURE__*/React.createElement(_Pages.default, {
pageCount: pageCount,
selectedPage: selectedPage,
onPageChange: onPageChange,
size: size
}) : /*#__PURE__*/React.createElement(_CompactPages.default, {
pageCount: pageCount,
selectedPage: selectedPage,
onPageChange: onPageChange,
size: size
})), /*#__PURE__*/React.createElement(_ButtonLink.default, {
onClick: () => pageChanged(selectedPage + 1),
iconRight: !hideLabels && /*#__PURE__*/React.createElement(_ChevronForward.default, {
ariaHidden: true,
reverseOnRtl: true
}),
iconLeft: hideLabels && /*#__PURE__*/React.createElement(_ChevronForward.default, {
ariaHidden: true,
reverseOnRtl: true
}),
type: "secondary",
title: hideLabels ? labelNext : undefined,
size: size,
disabled: pageCount <= selectedPage
}, !hideLabels && labelNext)));
};
var _default = exports.default = Pagination;