@up-group-ui/react-controls
Version:
Up shared react controls
266 lines • 12.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var React = (0, tslib_1.__importStar)(require("react"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var Grid_1 = require("../../Containers/Grid");
var typestyle_1 = require("typestyle");
var withTheme_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/withTheme"));
var theming_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var utils_1 = require("../../../Common/utils");
var getMaxPage = function (take, total) {
if ((0, utils_1.isEmpty)(take)) {
return 0;
}
return Math.ceil(total / take);
};
var generatePagesNavigation = function (page, total, take) {
{
var maxPage = 0;
maxPage = Math.ceil(total / take);
var pages_1 = [];
if (maxPage >= 1) {
if (maxPage <= 8) {
pages_1 = Array.from({ length: maxPage }, function (_, i) { return i + 1; });
}
else {
[1, 2].map(function (v) { return pages_1.push(v); });
if (page - 3 > 1 && !pages_1.includes(page - 3)) {
pages_1.push(0);
}
if (page - 2 > 1 && !pages_1.includes(page - 2)) {
pages_1.push(page - 2);
}
if (page - 1 > 1 && !pages_1.includes(page - 1)) {
pages_1.push(page - 1);
}
if (page < maxPage - 1 && !pages_1.includes(page)) {
pages_1.push(page);
}
if (page + 1 < maxPage - 1 && !pages_1.includes(page + 1)) {
pages_1.push(page + 1);
}
if (page + 2 < maxPage - 1 && !pages_1.includes(page + 2)) {
pages_1.push(page + 2);
}
if (page + 3 < maxPage - 1) {
pages_1.push(0);
}
if (!pages_1.includes(maxPage - 1)) {
pages_1.push(maxPage - 1);
}
if (!pages_1.includes(maxPage)) {
pages_1.push(maxPage);
}
}
}
return pages_1;
}
};
var paginationStyle = (0, typestyle_1.style)({
margin: '0px 4px',
listStyle: 'none',
display: 'inline-block',
paddingLeft: '0',
});
var firstChild = function (props) { return ({
textDecoration: 'underline',
fontSize: '15px',
}); };
var lastChild = function (props) { return ({
textDecoration: 'underline',
fontSize: '15px',
}); };
var itemHover = function (props) { return ({
color: props.theme.colorMap.primary,
}); };
var itemActive = function (props) { return ({
color: props.theme.colorMap.primary,
}); };
var itemDisabled = function (props) { return ({
color: '#777',
cursor: 'not-allowed',
}); };
var paginationItemStyle = function (props) {
var itemHoverStyle = itemHover(props);
var itemActiveStyle = itemActive(props);
var itemDisabledStyle = itemDisabled(props);
var firstChildStyle = firstChild(props);
var lastChildStyle = lastChild(props);
return (0, typestyle_1.style)({
display: 'inline',
color: '#4E5B59',
$nest: {
'& > a': {
minWidth: '1rem',
textAlign: 'center',
position: 'relative',
float: 'left',
padding: '6px 3px',
marginLeft: '-1px',
lineHeight: '1.43',
color: '#4E5B59',
textDecoration: 'none',
},
'&:first-child a': firstChildStyle,
'&:first-child span': firstChildStyle,
'&:last-child a': lastChildStyle,
'&:last-child span': lastChildStyle,
'& a:hover': itemHoverStyle,
'& span:hover': itemHoverStyle,
'&.active > a': itemActiveStyle,
'&.active > span': itemActiveStyle,
'&.active > a:hover': itemActiveStyle,
'&.active > span:hover': itemActiveStyle,
'&.active > a > span': itemActiveStyle,
'&.disabled > a': itemDisabledStyle,
'&.disabled > span': itemDisabledStyle,
'&.disabled > a:hover': itemDisabledStyle,
'&.disabled > span:hover': itemDisabledStyle,
'&.disabled > a:focus': itemDisabledStyle,
'&.disabled > span:focus': itemDisabledStyle,
'&.disabled > a > span': itemDisabledStyle,
},
});
};
var UpPagination = (function (_super) {
(0, tslib_1.__extends)(UpPagination, _super);
function UpPagination(props) {
var _this = _super.call(this, props) || this;
_this.goToPreviousPage = function () {
if (_this.state.page > 1) {
var previousPage = _this.state.page - 1;
var newState = {
page: previousPage,
skip: (previousPage - 1) * _this.state.take,
};
_this.setState(newState, function () {
_this.props.onPageChange(_this.state.page, _this.state.take, _this.state.skip);
});
}
};
_this.getMaxPage = function () {
return getMaxPage(_this.state.take, _this.props.total);
};
_this.goToNextPage = function () {
if (_this.state.page < _this.getMaxPage()) {
var nextPage = _this.state.page + 1;
var newState = {
page: nextPage,
skip: (nextPage - 1) * _this.state.take,
};
_this.setState(newState, function () {
_this.props.onPageChange(_this.state.page, _this.state.take, _this.state.skip);
});
}
};
_this.goTo = function (page) {
var newState = {
page: page,
skip: (page - 1) * _this.state.take,
};
_this.setState(newState, function () {
_this.props.onPageChange(_this.state.page, _this.state.take, _this.state.skip);
});
};
_this.onTakeChange = function (event, data) {
if (data && data.id != _this.state.take) {
var newTake = data.id;
var newPage = _this.getPage(newTake, _this.state.skip, _this.props.total);
var newSkip = newTake * (newPage - 1);
var newState = {
take: newTake,
page: newPage,
skip: newSkip,
};
_this.setState(newState, function () {
this.props.onPageChange(this.state.page, this.state.take, this.state.skip);
});
}
};
_this.getPage = function (take, skip, total) {
if (total != null && take >= total) {
return 1;
}
return Math.floor((skip + take) / take);
};
_this.state = {
page: _this.getPage(_this.props.take || 50, _this.props.skip || 0, _this.props.total || 0),
skip: _this.props.skip || 0,
take: _this.props.take || 50,
};
return _this;
}
UpPagination.prototype.componentWillReceiveProps = function (nextProps) {
if (nextProps.take != undefined) {
var newState = {
take: nextProps.take,
skip: nextProps.skip,
page: this.getPage(nextProps.take, nextProps.skip, nextProps.total),
};
this.setState(newState);
}
};
UpPagination.prototype.inRange = function (curPage, pagevalue, distance) {
var absRange = Math.abs(curPage - pagevalue);
if (absRange < distance) {
return true;
}
return false;
};
UpPagination.prototype.render = function () {
var _this = this;
var maxPage = this.getMaxPage();
var from = this.state.skip + 1;
var to = from + this.state.take - 1;
if (to > this.props.total)
to = this.props.total;
var pageNumberNavigation = (0, jsx_runtime_1.jsx)("span", {}, void 0);
var pages = this.props.generatePagesNavigation(this.state.page, this.props.total, this.state.take);
if (!(0, utils_1.isEmpty)(pages)) {
var paginationItemClass_1 = (0, classnames_1.default)(paginationItemStyle(this.props), 'up-pagination-page');
var PageNumber = (0, jsx_runtime_1.jsx)("span", {}, void 0);
PageNumber = pages.map(function (value, index) {
if (value === 0) {
return ((0, jsx_runtime_1.jsx)("li", (0, tslib_1.__assign)({ className: (0, classnames_1.default)(paginationItemClass_1, 'disabled') }, { children: (0, jsx_runtime_1.jsx)("a", (0, tslib_1.__assign)({ onClick: function (e) { return e.preventDefault(); }, href: "#" }, { children: _this.props.paginationNavigationSeparator ? _this.props.paginationNavigationSeparator : '..' }), void 0) }), "page-" + index));
}
return ((0, jsx_runtime_1.jsx)("li", (0, tslib_1.__assign)({ className: (0, classnames_1.default)(_this.state.page == value ? 'active' : '', paginationItemClass_1), onClick: _this.goTo.bind(_this, value) }, { children: (0, jsx_runtime_1.jsx)("a", (0, tslib_1.__assign)({ onClick: function (e) { return e.preventDefault(); }, href: "#" }, { children: value }), void 0) }), "page-" + index));
});
pageNumberNavigation = ((0, jsx_runtime_1.jsx)("nav", (0, tslib_1.__assign)({ className: 'up-pagination-nav' }, { children: (0, jsx_runtime_1.jsxs)("ul", (0, tslib_1.__assign)({ className: paginationStyle }, { children: [(0, jsx_runtime_1.jsx)("li", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-pagination-page-prev', this.state.page == 1 ? 'disabled' : 'active', paginationItemClass_1), onClick: this.goToPreviousPage }, { children: (0, jsx_runtime_1.jsx)("a", (0, tslib_1.__assign)({ onClick: function (e) { return e.preventDefault(); }, href: "#", "aria-label": "Previous" }, { children: (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", dangerouslySetInnerHTML: {
__html: this.props.previousLabel,
} }, void 0) }), void 0) }), "page-prev"), PageNumber, (0, jsx_runtime_1.jsx)("li", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-pagination-page-next', this.state.page == maxPage ? 'disabled' : 'active', paginationItemClass_1), onClick: this.goToNextPage }, { children: (0, jsx_runtime_1.jsx)("a", (0, tslib_1.__assign)({ href: "#", "aria-label": "Next", onClick: function (e) { return e.preventDefault(); } }, { children: (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", dangerouslySetInnerHTML: {
__html: this.props.nextLabel,
} }, void 0) }), void 0) }), "page-next")] }), void 0) }), void 0));
}
return ((0, jsx_runtime_1.jsx)(Grid_1.UpGrid, (0, tslib_1.__assign)({ style: {
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
}, className: 'up-pagination-wrapper' }, { children: (0, jsx_runtime_1.jsxs)(Grid_1.UpRow, { children: [this.props.renderResultMessage(this.props.theme, from, to, this.props.total), pageNumberNavigation] }, void 0) }), void 0));
};
UpPagination.defaultProps = {
nbByPageMessage: 'Par page',
isTakeChangeEnable: true,
isExtraInfoDisplay: true,
takes: [
{ id: 20, text: '20' },
{ id: 50, text: '50' },
{ id: 100, text: '100' },
{ id: 200, text: '200' },
],
total: 0,
theme: theming_1.default,
previousLabel: 'Précédent',
nextLabel: 'Suivant',
generatePagesNavigation: generatePagesNavigation,
onPageChange: function (page, take, skip) { },
renderResultMessage: function (theme, from, to, total) { return ((0, jsx_runtime_1.jsxs)("span", (0, tslib_1.__assign)({ style: {
lineHeight: '1.43',
padding: '6px 16px',
} }, { children: [total === 0 && (0, jsx_runtime_1.jsx)("span", { children: "Aucun r\u00E9sultat" }, void 0), total !== 0 && (0, jsx_runtime_1.jsx)("span", { children: total + " r\u00E9sultat" + (total > 1 ? 's' : '') }, void 0)] }), void 0)); },
};
return UpPagination;
}(React.Component));
exports.default = (0, withTheme_1.default)(UpPagination);
//# sourceMappingURL=UpPagination.js.map