devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
193 lines (191 loc) • 7.49 kB
JavaScript
/**
* DevExtreme (esm/__internal/pagination/pages/page_index_selector.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/
*/
import {
createFragment,
createComponentVNode
} from "inferno";
import {
BaseInfernoComponent
} from "@devextreme/runtime/inferno";
import {
Fragment
} from "inferno";
import {
ConfigContext
} from "../../core/r1/config_context";
import {
LightButton
} from "../common/light_button";
import {
PaginationDefaultProps
} from "../common/pagination_props";
import {
getLocalizationMessage
} from "../utils/compatibility_utils";
import {
PagesLarge
} from "./large";
import {
PagesSmall
} from "./small";
const PAGER_NAVIGATE_BUTTON = "dx-navigate-button";
const PAGER_PREV_BUTTON_CLASS = "dx-prev-button";
const PAGER_NEXT_BUTTON_CLASS = "dx-next-button";
export const PAGER_BUTTON_DISABLE_CLASS = "dx-button-disable";
const classNames = {
nextEnabledClass: "dx-navigate-button dx-next-button",
prevEnabledClass: "dx-navigate-button dx-prev-button",
nextDisabledClass: "dx-button-disable dx-navigate-button dx-next-button",
prevDisabledClass: "dx-button-disable dx-navigate-button dx-prev-button"
};
const reverseDirections = {
next: "prev",
prev: "next"
};
function getIncrement(direction) {
return "next" === direction ? 1 : -1
}
const PageIndexSelectorDefaultProps = {
isLargeDisplayMode: true,
maxPagesCount: PaginationDefaultProps.maxPagesCount,
pageCount: PaginationDefaultProps.pageCount,
pageIndex: PaginationDefaultProps.pageIndex,
pageIndexChangedInternal: PaginationDefaultProps.pageIndexChangedInternal,
showNavigationButtons: PaginationDefaultProps.showNavigationButtons,
itemCount: PaginationDefaultProps.itemCount
};
export class PageIndexSelector extends BaseInfernoComponent {
constructor(props) {
super(props);
this.state = {};
this.refs = null;
this.__getterCache = {
prevButtonProps: void 0,
nextButtonProps: void 0
};
this.pageIndexChangedInternal = this.pageIndexChangedInternal.bind(this);
this.getButtonProps = this.getButtonProps.bind(this);
this.canNavigateToPage = this.canNavigateToPage.bind(this);
this.getNextPageIndex = this.getNextPageIndex.bind(this);
this.canNavigateTo = this.canNavigateTo.bind(this);
this.navigateToPage = this.navigateToPage.bind(this)
}
getConfig() {
if (this.context[ConfigContext.id]) {
return this.context[ConfigContext.id]
}
return ConfigContext.defaultValue
}
pageIndexChangedInternal(pageIndex) {
if (this.canNavigateToPage(pageIndex)) {
this.props.pageIndexChangedInternal(pageIndex)
}
}
getButtonProps(direction) {
var _this$getConfig;
const rtlAwareDirection = null !== (_this$getConfig = this.getConfig()) && void 0 !== _this$getConfig && _this$getConfig.rtlEnabled ? reverseDirections[direction] : direction;
const canNavigate = this.canNavigateTo(rtlAwareDirection);
const className = classNames[`${direction}${canNavigate?"Enabled":"Disabled"}Class`];
return {
className: className,
tabIndex: canNavigate ? 0 : -1,
navigate: () => this.navigateToPage(rtlAwareDirection)
}
}
canNavigateToPage(pageIndex) {
if (!this.props.hasKnownLastPage) {
return pageIndex >= 0
}
return pageIndex >= 0 && pageIndex <= this.props.pageCount - 1
}
getNextPageIndex(direction) {
return this.props.pageIndex + getIncrement(direction)
}
canNavigateTo(direction) {
return this.canNavigateToPage(this.getNextPageIndex(direction))
}
navigateToPage(direction) {
this.pageIndexChangedInternal(this.getNextPageIndex(direction))
}
getRenderPrevButton() {
const {
isLargeDisplayMode: isLargeDisplayMode,
showNavigationButtons: showNavigationButtons
} = this.props;
return (!isLargeDisplayMode || showNavigationButtons) ?? false
}
getRenderNextButton() {
return this.getRenderPrevButton() || !this.props.hasKnownLastPage
}
getPrevButtonProps() {
if (void 0 !== this.__getterCache.prevButtonProps) {
return this.__getterCache.prevButtonProps
}
const result = (() => this.getButtonProps("prev"))();
this.__getterCache.prevButtonProps = result;
return result
}
getNextButtonProps() {
if (void 0 !== this.__getterCache.nextButtonProps) {
return this.__getterCache.nextButtonProps
}
const result = (() => this.getButtonProps("next"))();
this.__getterCache.nextButtonProps = result;
return result
}
componentWillUpdate(nextProps, nextState, context) {
const isComponentUpdated = this.context[ConfigContext.id] !== context[ConfigContext.id] || this.props.hasKnownLastPage !== nextProps.hasKnownLastPage || this.props.pageCount !== nextProps.pageCount || this.props.pageIndex !== nextProps.pageIndex || this.props.pageIndexChangedInternal !== nextProps.pageIndexChangedInternal;
if (isComponentUpdated) {
this.__getterCache.prevButtonProps = void 0;
this.__getterCache.nextButtonProps = void 0
}
}
getPrevButtonLabel() {
return getLocalizationMessage(this.context, "dxPagination-prevPage")
}
getNextButtonLabel() {
return getLocalizationMessage(this.context, "dxPagination-nextPage")
}
render() {
const {
className: className,
tabIndex: tabIndex,
navigate: navigate
} = this.getPrevButtonProps();
const {
isLargeDisplayMode: isLargeDisplayMode,
maxPagesCount: maxPagesCount,
pageCount: pageCount,
pageIndex: pageIndex,
pagesCountText: pagesCountText
} = this.props;
return createFragment([this.getRenderPrevButton() && createComponentVNode(2, LightButton, {
label: this.getPrevButtonLabel(),
className: className,
tabIndex: tabIndex,
onClick: navigate
}), isLargeDisplayMode && createComponentVNode(2, PagesLarge, {
maxPagesCount: maxPagesCount,
pageCount: pageCount,
pageIndex: pageIndex,
pageIndexChangedInternal: this.pageIndexChangedInternal
}), !isLargeDisplayMode && createComponentVNode(2, PagesSmall, {
pageCount: pageCount,
pageIndex: pageIndex,
pageIndexChangedInternal: this.pageIndexChangedInternal,
pagesCountText: pagesCountText
}), this.getRenderNextButton() && createComponentVNode(2, LightButton, {
label: this.getNextButtonLabel(),
className: this.getNextButtonProps().className,
tabIndex: this.getNextButtonProps().tabIndex,
onClick: this.getNextButtonProps().navigate
})], 0)
}
}
PageIndexSelector.defaultProps = PageIndexSelectorDefaultProps;