devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
197 lines (193 loc) • 7.64 kB
JavaScript
/**
* DevExtreme (cjs/__internal/pagination/pages/large.js)
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PagesLarge = void 0;
var _inferno = require("inferno");
var _inferno2 = require("@devextreme/runtime/inferno");
var _config_context = require("../../core/r1/config_context");
var _pagination_props = require("../common/pagination_props");
var _page = require("./page");
const PAGER_PAGE_SEPARATOR_CLASS = "dx-separator";
const PAGES_LIMITER = 4;
const PagesLargeDefaultProps = {
maxPagesCount: _pagination_props.PaginationDefaultProps.maxPagesCount,
pageCount: _pagination_props.PaginationDefaultProps.pageCount,
pageIndex: _pagination_props.PaginationDefaultProps.pageIndex,
pageIndexChangedInternal: _pagination_props.PaginationDefaultProps.pageIndexChangedInternal
};
function getDelimiterType(startIndex, slidingWindowSize, pageCount) {
switch (true) {
case 1 === startIndex:
return "high";
case startIndex + slidingWindowSize === pageCount - 1:
return "low";
default:
return "both"
}
}
function createPageIndexesBySlidingWindowIndexes(slidingWindowIndexes, pageCount, delimiter) {
let pageIndexes = [];
let indexesForReuse = [];
switch (delimiter) {
case "none":
pageIndexes = [...slidingWindowIndexes];
break;
case "both":
pageIndexes = [0, "low", ...slidingWindowIndexes, "high", pageCount - 1];
indexesForReuse = slidingWindowIndexes.slice(1, -1);
break;
case "high":
pageIndexes = [0, ...slidingWindowIndexes, "high", pageCount - 1];
indexesForReuse = slidingWindowIndexes.slice(0, -1);
break;
case "low":
pageIndexes = [0, "low", ...slidingWindowIndexes, pageCount - 1];
indexesForReuse = slidingWindowIndexes.slice(1)
}
return {
slidingWindowIndexes: slidingWindowIndexes,
indexesForReuse: indexesForReuse,
pageIndexes: pageIndexes
}
}
function createPageIndexes(startIndex, slidingWindowSize, pageCount, delimiter) {
const slidingWindowIndexes = [];
for (let i = 0; i < slidingWindowSize; i += 1) {
slidingWindowIndexes.push(i + startIndex)
}
return createPageIndexesBySlidingWindowIndexes(slidingWindowIndexes, pageCount, delimiter)
}
class PagesLarge extends _inferno2.BaseInfernoComponent {
constructor(props) {
super(props);
this.state = {};
this.refs = null;
this.canReuseSlidingWindow = this.canReuseSlidingWindow.bind(this);
this.generatePageIndexes = this.generatePageIndexes.bind(this);
this.isSlidingWindowMode = this.isSlidingWindowMode.bind(this);
this.onPageClick = this.onPageClick.bind(this)
}
getConfig() {
if (this.context[_config_context.ConfigContext.id]) {
return this.context[_config_context.ConfigContext.id]
}
return _config_context.ConfigContext.defaultValue
}
getSlidingWindowState() {
const slidingWindowState = this.slidingWindowStateHolder;
if (!slidingWindowState) {
return {
indexesForReuse: [],
slidingWindowIndexes: []
}
}
return slidingWindowState
}
canReuseSlidingWindow(currentPageCount, pageIndex) {
const {
indexesForReuse: indexesForReuse
} = this.getSlidingWindowState();
const lastPageIsFartherThanWindow = indexesForReuse.slice(-1)[0] < currentPageCount - 1;
const pageIndexExistInIndexes = indexesForReuse.includes(pageIndex);
return lastPageIsFartherThanWindow && pageIndexExistInIndexes
}
generatePageIndexes() {
const {
pageCount: pageCount,
pageIndex: pageIndex
} = this.props;
let startIndex = 0;
const {
slidingWindowIndexes: slidingWindowIndexes
} = this.getSlidingWindowState();
if (pageIndex === slidingWindowIndexes[0]) {
startIndex = pageIndex - 1
} else if (pageIndex === slidingWindowIndexes[slidingWindowIndexes.length - 1]) {
startIndex = pageIndex + 2 - 4
} else if (pageIndex < 4) {
startIndex = 1
} else if (pageIndex >= pageCount - 4) {
startIndex = pageCount - 4 - 1
} else {
startIndex = pageIndex - 1
}
const delimiter = getDelimiterType(startIndex, 4, pageCount);
const indexes = createPageIndexes(startIndex, 4, pageCount, delimiter);
const {
pageIndexes: pageIndexes
} = indexes;
this.slidingWindowStateHolder = indexes;
return pageIndexes
}
isSlidingWindowMode() {
const {
maxPagesCount: maxPagesCount,
pageCount: pageCount
} = this.props;
return pageCount <= 4 || pageCount <= maxPagesCount
}
onPageClick(pageIndex) {
this.props.pageIndexChangedInternal(pageIndex)
}
getPageIndexes() {
const {
pageCount: pageCount
} = this.props;
if (this.isSlidingWindowMode()) {
return createPageIndexes(0, pageCount, pageCount, "none").pageIndexes
}
if (this.canReuseSlidingWindow(pageCount, this.props.pageIndex)) {
const {
slidingWindowIndexes: slidingWindowIndexes
} = this.getSlidingWindowState();
const delimiter = getDelimiterType(slidingWindowIndexes[0], 4, pageCount);
return createPageIndexesBySlidingWindowIndexes(slidingWindowIndexes, pageCount, delimiter).pageIndexes
}
return this.generatePageIndexes()
}
getPages() {
var _this$getConfig;
const {
pageIndex: pageIndex
} = this.props;
const createPage = index => {
const paginationProps = "low" === index || "high" === index ? null : {
index: index,
onClick: () => this.onPageClick(index),
selected: pageIndex === index
};
return {
key: index.toString(),
pageProps: paginationProps
}
};
const indices = this.getPageIndexes();
const rtlPageIndexes = null !== (_this$getConfig = this.getConfig()) && void 0 !== _this$getConfig && _this$getConfig.rtlEnabled ? [...indices].reverse() : indices;
return rtlPageIndexes.map((index => createPage(index)))
}
render() {
const PagesMarkup = this.getPages().map((_ref => {
let {
key: key,
pageProps: pageProps
} = _ref;
return pageProps ? (0, _inferno.createComponentVNode)(2, _page.Page, {
index: pageProps.index,
selected: pageProps.selected,
onClick: pageProps.onClick
}, key) : (0, _inferno.createVNode)(1, "div", "dx-separator", ". . .", 16, null, key)
}));
return (0, _inferno.createFragment)(PagesMarkup, 0)
}
}
exports.PagesLarge = PagesLarge;
PagesLarge.defaultProps = PagesLargeDefaultProps;