devextreme/esm/__internal/pagination/page_size/selector.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/pagination/page_size/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 {
    createVNode,
    createComponentVNode
} from "inferno";
import {
    InfernoComponent,
    InfernoEffect
} from "@devextreme/runtime/inferno";
import {
    createRef as infernoCreateRef
} from "inferno";
import {
    PAGINATION_PAGE_SIZES_CLASS
} from "../common/consts";
import {
    PaginationDefaultProps
} from "../common/pagination_props";
import {
    getLocalizationMessage
} from "../utils/compatibility_utils";
import {
    PageSizeLarge
} from "./large";
import {
    PageSizeSmall
} from "./small";
const PageSizeSelectorDefaultProps = {
    isLargeDisplayMode: true,
    pageSize: PaginationDefaultProps.pageSize,
    pageSizeChangedInternal: PaginationDefaultProps.pageSizeChangedInternal,
    allowedPageSizes: PaginationDefaultProps.allowedPageSizes
};
export class PageSizeSelector extends InfernoComponent {
    constructor(props) {
        super(props);
        this.state = {};
        this.refs = null;
        this.rootElementRef = infernoCreateRef();
        this.htmlRef = infernoCreateRef();
        this.__getterCache = {
            normalizedPageSizes: void 0
        };
        this.setRootElementRef = this.setRootElementRef.bind(this)
    }
    createEffects() {
        return [new InfernoEffect(this.setRootElementRef, [])]
    }
    setRootElementRef() {
        const {
            rootElementRef: rootElementRef
        } = this.props;
        if (rootElementRef) {
            rootElementRef.current = this.htmlRef.current
        }
    }
    getAllText() {
        return getLocalizationMessage(this.context, "dxPagination-pageSizesAllText")
    }
    getNormalizedPageSizes() {
        if (void 0 !== this.__getterCache.normalizedPageSizes) {
            return this.__getterCache.normalizedPageSizes
        }
        const result = this.props.allowedPageSizes.map((p => "all" === p || 0 === p ? {
            text: this.getAllText(),
            value: 0
        } : {
            text: String(p),
            value: p
        }));
        this.__getterCache.normalizedPageSizes = result;
        return result
    }
    componentWillUpdate(nextProps) {
        super.componentWillUpdate();
        if (this.props.allowedPageSizes !== nextProps.allowedPageSizes) {
            this.__getterCache.normalizedPageSizes = void 0
        }
    }
    render() {
        const normalizedPageSizes = this.getNormalizedPageSizes();
        const {
            pageSize: pageSize,
            pageSizeChangedInternal: pageSizeChangedInternal,
            isLargeDisplayMode: isLargeDisplayMode
        } = this.props;
        return createVNode(1, "div", PAGINATION_PAGE_SIZES_CLASS, [isLargeDisplayMode && createComponentVNode(2, PageSizeLarge, {
            allowedPageSizes: this.getNormalizedPageSizes(),
            pageSize: pageSize,
            pageSizeChangedInternal: pageSizeChangedInternal
        }), !isLargeDisplayMode && createComponentVNode(2, PageSizeSmall, {
            parentRef: this.htmlRef,
            allowedPageSizes: normalizedPageSizes,
            pageSize: pageSize,
            pageSizeChangedInternal: pageSizeChangedInternal
        })], 0, null, null, this.htmlRef)
    }
}
PageSizeSelector.defaultProps = PageSizeSelectorDefaultProps;