design-system-govbr-rnp
Version:
## Padrão Digital de Governo - React Biblioteca de componentes React que implementa o [Padrão Visual digital do governo](https://www.gov.br/ds/). O objetivo da biblioteca é facilitar a implementação e promover a padronização das interfaces de sistemas do
233 lines (232 loc) • 9.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
var _reactFontawesome = require("@fortawesome/react-fontawesome");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _Button = _interopRequireDefault(require("../Button/Button"));
var _Display = _interopRequireDefault(require("../../utilities/Display/Display"));
var _Divider = _interopRequireDefault(require("../Divider/Divider"));
var _styles = require("./styles");
var _Template = require("./Template");
var _UsePagination = require("./UsePagination");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Pagination = function Pagination(_ref) {
var size = _ref.size,
totalCount = _ref.totalCount,
pageSize = _ref.pageSize,
currentPage = _ref.currentPage,
onPageChange = _ref.onPageChange,
onPageSizeChange = _ref.onPageSizeChange,
type = _ref.type,
dark = _ref.dark,
template = _ref.template,
optionsToSelect = _ref.optionsToSelect,
idSelectPageCurrent = _ref.idSelectPageCurrent,
idSelectPageSize = _ref.idSelectPageSize;
var siblingCount = 1;
var paginationRange = (0, _UsePagination.usePagination)({
totalCount: totalCount,
pageSize: pageSize,
siblingCount: siblingCount,
currentPage: currentPage,
type: type,
onPageChange: onPageChange
});
var lastPage = paginationRange && paginationRange[paginationRange.length - 1];
if (currentPage === 0 || (paginationRange === null || paginationRange === void 0 ? void 0 : paginationRange.length) < 2) {
return null;
}
var onNext = function onNext() {
onPageChange(currentPage + 1);
};
var onPrevious = function onPrevious() {
onPageChange(currentPage - 1);
};
var renderPagination = function renderPagination() {
switch (type) {
case "context":
return renderPaginationContext();
default:
return renderPaginationSimple();
}
};
var Options = function Options(_ref2) {
var paginationRange = _ref2.paginationRange;
return paginationRange === null || paginationRange === void 0 ? void 0 : paginationRange.map(function (pageNumber, i) {
if (pageNumber === _UsePagination.DOTS) {
return /*#__PURE__*/_react.default.createElement(_styles.Icon, {
dark: dark,
key: i
}, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
"aria-hidden": "true",
icon: _freeSolidSvgIcons.faEllipsisH
}));
} else {
return /*#__PURE__*/_react.default.createElement("div", {
key: i
}, /*#__PURE__*/_react.default.createElement("input", {
checked: currentPage === pageNumber,
type: "radio",
id: "input",
name: "page",
onChange: function onChange() {
onPageChange(pageNumber);
}
}), /*#__PURE__*/_react.default.createElement("label", {
onClick: function onClick() {
onPageChange(pageNumber);
},
tabIndex: "0",
htmlFor: "input".concat(pageNumber)
}, /*#__PURE__*/_react.default.createElement("span", null, pageNumber)));
}
});
};
var renderPaginationSimple = function renderPaginationSimple() {
return /*#__PURE__*/_react.default.createElement(_styles.PaginationBox, {
dark: dark
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
circle: true,
density: "medium",
disabled: currentPage === 1,
iconProps: {
icon: _freeSolidSvgIcons.faAngleLeft,
ariaLabel: "Próximo"
},
onClick: function onClick() {
return onPrevious();
},
variant: "terciary"
}), /*#__PURE__*/_react.default.createElement(_styles.InputBox, {
dark: dark,
size: size
}, /*#__PURE__*/_react.default.createElement(Options, {
paginationRange: paginationRange
})), /*#__PURE__*/_react.default.createElement(_Button.default, {
circle: true,
density: "medium",
iconProps: {
icon: _freeSolidSvgIcons.faAngleRight,
ariaLabel: "Anterior"
},
onClick: function onClick() {
onNext();
},
disabled: currentPage === lastPage,
variant: "terciary"
}));
};
var RenderBoxPageSize = function RenderBoxPageSize() {
return /*#__PURE__*/_react.default.createElement("div", {
className: "boxPage"
}, /*#__PURE__*/_react.default.createElement(_styles.BoxSelect, null, /*#__PURE__*/_react.default.createElement("label", {
htmlFor: idSelectPageSize
}, "Exibir"), /*#__PURE__*/_react.default.createElement(_styles.Select, {
"aria-label": "pagina",
dark: dark,
id: idSelectPageSize,
value: pageSize,
onChange: function onChange(e) {
onPageSizeChange(e.target.value);
onPageChange(1);
}
}, optionsToSelect.map(function (option) {
return /*#__PURE__*/_react.default.createElement("option", {
value: option
}, option);
}))), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement("span", null, "".concat(currentPage, "-").concat(pageSize, " de ").concat(totalCount, " itens")));
};
var RenderBoxSelectPageCurrent = function RenderBoxSelectPageCurrent() {
return /*#__PURE__*/_react.default.createElement(_styles.BoxSelect, null, /*#__PURE__*/_react.default.createElement("label", {
htmlFor: idSelectPageCurrent
}, "P\xE1gina"), /*#__PURE__*/_react.default.createElement(_styles.Select, {
"aria-label": "pagina",
dark: dark,
id: idSelectPageCurrent,
value: currentPage,
onChange: function onChange(e) {
return onPageChange(parseInt(e.target.value));
}
}, paginationRange.map(function (option) {
return option;
})));
};
var RenderBoxButtons = function RenderBoxButtons(_ref3) {
var style = _ref3.style;
return /*#__PURE__*/_react.default.createElement(_styles.BoxButtons, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
circle: true,
density: "medium",
disabled: currentPage === 1,
iconProps: {
icon: _freeSolidSvgIcons.faAngleLeft,
ariaLabel: "Anterior"
},
onClick: function onClick() {
return onPrevious();
},
variant: "terciary"
}), /*#__PURE__*/_react.default.createElement(_Button.default, {
circle: true,
density: "medium",
iconProps: {
icon: _freeSolidSvgIcons.faAngleRight,
ariaLabel: "Pŕoximo"
},
onClick: function onClick() {
onNext();
},
disabled: currentPage === lastPage.props.value,
variant: "terciary"
}));
};
var TemplatePrimary = /*#__PURE__*/_react.default.createElement(_styles.PaginationBox, {
dark: dark,
type: type
}, /*#__PURE__*/_react.default.createElement(RenderBoxPageSize, null), /*#__PURE__*/_react.default.createElement("div", {
className: "boxPage"
}, /*#__PURE__*/_react.default.createElement(RenderBoxSelectPageCurrent, null), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement(RenderBoxButtons, null)));
var TemplateSecundary = /*#__PURE__*/_react.default.createElement(_styles.PaginationBox, {
dark: dark,
type: type
}, /*#__PURE__*/_react.default.createElement("div", {
className: "boxPage"
}, /*#__PURE__*/_react.default.createElement(RenderBoxButtons, null), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement(RenderBoxSelectPageCurrent, null)), /*#__PURE__*/_react.default.createElement(RenderBoxPageSize, null));
var TemplateTerciary = /*#__PURE__*/_react.default.createElement(_styles.PaginationBox, {
dark: dark,
type: type
}, /*#__PURE__*/_react.default.createElement(_Display.default, {
display: "flex"
}, /*#__PURE__*/_react.default.createElement(RenderBoxPageSize, null), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement(RenderBoxSelectPageCurrent, null)), /*#__PURE__*/_react.default.createElement("div", {
className: "boxPage"
}, /*#__PURE__*/_react.default.createElement(RenderBoxButtons, null)));
var renderPaginationContext = function renderPaginationContext() {
switch (template) {
case _Template.Primary:
return TemplatePrimary;
case _Template.Secundary:
return TemplateSecundary;
case _Template.Terciary:
return TemplateTerciary;
default:
return TemplatePrimary;
}
};
return renderPagination();
};
Pagination.propTypes = {
size: _propTypes.default.string,
totalCount: _propTypes.default.number,
pageSize: _propTypes.default.number,
currentPage: _propTypes.default.number,
onPageChange: _propTypes.default.func,
onPageSizeChange: _propTypes.default.func,
type: _propTypes.default.string,
dark: _propTypes.default.bool,
template: _propTypes.default.string
};
var _default = Pagination;
exports.default = _default;