@braineet/ui
Version:
Braineet design system
87 lines • 3.28 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React from 'react';
import Box from '../box';
import PageButtons from './pageButtons';
import { StyledNav, StyledPageButtonsContainer, StyledButton, StyledSelect, StyledTextRows } from './styles';
/**
The `Pagination` component.
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var Pagination = function Pagination(_ref) {
var pages = _ref.pages,
activePage = _ref.activePage,
onChange = _ref.onChange,
onChangeRowsByPage = _ref.onChangeRowsByPage,
optionsSelectRowsByPage = _ref.optionsSelectRowsByPage,
valueSelectRowsByPage = _ref.valueSelectRowsByPage,
withTextButton = _ref.withTextButton,
textSelect = _ref.textSelect,
unrollSelect = _ref.unrollSelect,
prevButtonProps = _ref.prevButtonProps,
nextButtonProps = _ref.nextButtonProps,
selectProps = _ref.selectProps;
var getUnroll = {
top: 'flex-end',
center: 'center',
bottom: 'flex-start '
};
var isFirstItemSelected = parseInt(activePage, 10) === 1;
var isLastItemSelected = parseInt(activePage, 10) === pages;
return /*#__PURE__*/_jsxs(StyledNav, {
children: [/*#__PURE__*/_jsxs(Box, {
display: "flex",
children: [/*#__PURE__*/_jsx(StyledButton, _extends({
styleType: "solid",
color: "white",
icon: !withTextButton ? 'arrow_left_small' : '',
onClick: function onClick(event) {
onChange(event, parseInt(activePage, 10) - 1);
},
disabled: isFirstItemSelected
}, prevButtonProps, {
children: withTextButton ? 'Previous' : ''
})), /*#__PURE__*/_jsx(StyledPageButtonsContainer, {
children: /*#__PURE__*/_jsx(PageButtons, {
onChange: onChange,
pages: pages,
activePage: parseInt(activePage, 10)
})
}), /*#__PURE__*/_jsx(StyledButton, _extends({
styleType: "solid",
color: "white",
icon: !withTextButton ? 'arrow_right_small' : '',
onClick: function onClick(event) {
onChange(event, parseInt(activePage, 10) + 1);
},
disabled: isLastItemSelected
}, nextButtonProps, {
children: withTextButton ? 'Next' : ''
}))]
}), /*#__PURE__*/_jsxs(Box, {
display: "flex",
alignItems: "center",
children: [/*#__PURE__*/_jsx(StyledSelect, _extends({
name: "formatTitle",
options: optionsSelectRowsByPage,
onChange: onChangeRowsByPage,
value: valueSelectRowsByPage,
placeholder: null,
unroll: getUnroll[unrollSelect]
}, selectProps)), /*#__PURE__*/_jsx(StyledTextRows, {
size: "sm",
children: textSelect
})]
})]
});
};
Pagination.defaultProps = {
activePage: undefined,
onChange: function onChange() {},
onChangeRowsByPage: function onChangeRowsByPage() {},
optionsSelectRowsByPage: [],
withTextButton: false,
valueSelectRowsByPage: null,
textSelect: 'Rows per pages',
unrollSelect: 'center'
};
export default Pagination;