@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
290 lines • 12.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var classnames = require("classnames");
var Grid_1 = require("../../Containers/Grid");
var typestyle_1 = require("typestyle");
var withTheme_1 = require("../../../Common/theming/withTheme");
var theming_1 = require("../../../Common/theming");
var utils_1 = require("../../../Common/utils");
var getMaxPage = function (take, total) {
if (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 = 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,
textDecoration: 'underline',
}); };
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 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,
'& a:focus': itemHoverStyle,
'& span:hover': itemHoverStyle,
'& span:focus': itemHoverStyle,
'&.active > a': itemActiveStyle,
'&.active > span': itemActiveStyle,
'&.active > a:hover': itemActiveStyle,
'&.active > span:hover': itemActiveStyle,
'&.active > a:focus': itemActiveStyle,
'&.active > span:focus': 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) {
tslib_1.__extends(UpPagination, _super);
function UpPagination(props, context) {
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 currentPage = 1;
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 takes = this.props.takes;
var pageNumberNavigation = React.createElement("span", null);
var pages = this.props.generatePagesNavigation(this.state.page, this.props.total, this.state.take);
if (!utils_1.isEmpty(pages)) {
var paginationItemClass_1 = classnames(paginationItemStyle(this.props), 'up-pagination-page');
var PageNumber = React.createElement("span", null);
PageNumber = pages.map(function (value, index) {
if (value === 0) {
return (React.createElement("li", { key: "page-" + index, className: classnames(paginationItemClass_1, 'disabled') },
React.createElement("a", { onClick: function (e) { return e.preventDefault(); }, href: "#" }, _this.props.paginationNavigationSeparator
? _this.props.paginationNavigationSeparator
: '..')));
}
return (React.createElement("li", { key: "page-" + index, className: classnames(_this.state.page == value ? 'active' : '', paginationItemClass_1), onClick: _this.goTo.bind(_this, value) },
React.createElement("a", { onClick: function (e) { return e.preventDefault(); }, href: "#" }, value)));
});
pageNumberNavigation = (React.createElement("nav", { className: 'up-pagination-nav' },
React.createElement("ul", { className: paginationStyle },
React.createElement("li", { key: "page-prev", className: classnames('up-pagination-page-prev', this.state.page == 1 ? 'disabled' : 'active', paginationItemClass_1), onClick: this.goToPreviousPage },
React.createElement("a", { onClick: function (e) { return e.preventDefault(); }, href: "#", "aria-label": "Previous" },
React.createElement("span", { "aria-hidden": "true", dangerouslySetInnerHTML: {
__html: this.props.previousLabel,
} }))),
PageNumber,
React.createElement("li", { key: "page-next", className: classnames('up-pagination-page-next', this.state.page == maxPage ? 'disabled' : 'active', paginationItemClass_1), onClick: this.goToNextPage },
React.createElement("a", { href: "#", "aria-label": "Next", onClick: function (e) { return e.preventDefault(); } },
React.createElement("span", { "aria-hidden": "true", dangerouslySetInnerHTML: {
__html: this.props.nextLabel,
} }))))));
}
return (React.createElement(Grid_1.UpGrid, { style: {
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
}, className: 'up-pagination-wrapper' },
React.createElement(Grid_1.UpRow, null,
this.props.renderResultMessage(this.props.theme, from, to, this.props.total),
pageNumberNavigation)));
};
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 (React.createElement("span", { style: {
lineHeight: '1.43',
padding: '6px 16px',
} },
total === 0 && React.createElement("span", null, "Aucun r\u00E9sultat"),
total !== 0 && (React.createElement("span", null, total + " r\u00E9sultat" + (total > 1 ? 's' : ''))))); },
};
return UpPagination;
}(React.Component));
exports.UpPagination = UpPagination;
exports.default = withTheme_1.default(UpPagination);
//# sourceMappingURL=UpPagination.js.map