devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
115 lines (114 loc) • 3.92 kB
JavaScript
/**
* DevExtreme (esm/__internal/pagination/page_size/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/
*/
import {
createFragment,
createComponentVNode
} from "inferno";
import {
BaseInfernoComponent
} from "@devextreme/runtime/inferno";
import {
Fragment
} from "inferno";
import {
format
} from "../../../core/utils/string";
import {
combineClasses
} from "../../core/r1/utils/render_utils";
import {
FIRST_CHILD_CLASS,
PAGINATION_PAGE_SIZE_CLASS,
PAGINATION_SELECTED_PAGE_SIZE_CLASS
} from "../common/consts";
import {
LightButton
} from "../common/light_button";
import {
PaginationDefaultProps
} from "../common/pagination_props";
import {
getLocalizationMessage
} from "../utils/compatibility_utils";
export const PageSizeLargeDefaultProps = {
allowedPageSizes: [],
pageSize: PaginationDefaultProps.pageSize,
pageSizeChangedInternal: PaginationDefaultProps.pageSizeChangedInternal
};
export class PageSizeLarge extends BaseInfernoComponent {
constructor(props) {
super(props);
this.state = {};
this.refs = null;
this.__getterCache = {
pageSizesText: void 0
};
this.state = {};
this.onPageSizeChange = this.onPageSizeChange.bind(this)
}
getPageSizesText() {
if (void 0 !== this.__getterCache.pageSizesText) {
return this.__getterCache.pageSizesText
}
const result = (() => {
const {
pageSize: pageSize,
allowedPageSizes: allowedPageSizes
} = this.props;
return allowedPageSizes.map(((_ref3, index) => {
const {
text: text,
value: processedPageSize
} = _ref3;
const selected = processedPageSize === pageSize;
const className = combineClasses({
[selected ? PAGINATION_SELECTED_PAGE_SIZE_CLASS : PAGINATION_PAGE_SIZE_CLASS]: true,
[FIRST_CHILD_CLASS]: 0 === index
});
return {
className: className,
click: this.onPageSizeChange(processedPageSize),
label: format(getLocalizationMessage(this.context, "dxPagination-pageSize"), processedPageSize || getLocalizationMessage(this.context, "dxPagination-pageSizesAllText")),
text: text
}
}))
})();
this.__getterCache.pageSizesText = result;
return result
}
onPageSizeChange(processedPageSize) {
return () => {
this.props.pageSizeChangedInternal(processedPageSize);
return this.props.pageSize
}
}
componentWillUpdate(nextProps) {
const componentChanged = this.props.pageSize !== nextProps.pageSize || this.props.allowedPageSizes !== nextProps.allowedPageSizes || this.props.pageSizeChangedInternal !== nextProps.pageSizeChangedInternal;
if (componentChanged) {
this.__getterCache.pageSizesText = void 0
}
}
render() {
return createFragment(this.getPageSizesText().map((_ref => {
let {
text: text,
className: className,
label: label,
click: click
} = _ref;
return createComponentVNode(2, LightButton, {
className: className,
label: label,
onClick: click,
children: text
}, text)
})), 0)
}
}
PageSizeLarge.defaultProps = PageSizeLargeDefaultProps;