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

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/pagination/page_size/small.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 _extends from "@babel/runtime/helpers/esm/extends";
import {
    createComponentVNode
} from "inferno";
import {
    InfernoComponent,
    InfernoEffect
} from "@devextreme/runtime/inferno";
import {
    PaginationDefaultProps
} from "../common/pagination_props";
import {
    SelectBox
} from "../drop_down_editors/select_box";
import {
    calculateValuesFittedWidth
} from "../utils/calculate_values_fitted_width";
import {
    getLocalizationMessage
} from "../utils/compatibility_utils";
import {
    getElementMinWidth
} from "../utils/get_element_width";
const PaginationSmallDefaultProps = {
    allowedPageSizes: []
};
const PageSizeSmallDefaultProps = _extends({}, PaginationSmallDefaultProps, {
    pageSize: PaginationDefaultProps.pageSize,
    pageSizeChangedInternal: PaginationDefaultProps.pageSizeChangedInternal
});
export class PageSizeSmall extends InfernoComponent {
    constructor(props) {
        super(props);
        this.state = {
            minWidth: 10
        };
        this.refs = null;
        this.updateWidth = this.updateWidth.bind(this)
    }
    componentWillUpdate(nextProps, nextState, context) {
        super.componentWillUpdate(nextProps, nextState, context)
    }
    createEffects() {
        const dependency = [this.props, this.state.minWidth, this.props.pageSize, this.props.pageSizeChangedInternal, this.props.allowedPageSizes];
        return [new InfernoEffect(this.updateWidth, dependency)]
    }
    updateEffects() {
        var _this$_effects$;
        const dependency = [this.props, this.state.minWidth, this.props.pageSize, this.props.pageSizeChangedInternal, this.props.allowedPageSizes];
        null === (_this$_effects$ = this._effects[0]) || void 0 === _this$_effects$ || _this$_effects$.update(dependency)
    }
    updateWidth() {
        var _this$props$parentRef;
        const minWidth = getElementMinWidth(null === (_this$props$parentRef = this.props.parentRef) || void 0 === _this$props$parentRef ? void 0 : _this$props$parentRef.current);
        this.setState((state => ({
            minWidth: minWidth > 0 ? minWidth : state.minWidth
        })))
    }
    getWidth() {
        var _this$props$allowedPa;
        return calculateValuesFittedWidth(this.state.minWidth, null === (_this$props$allowedPa = this.props.allowedPageSizes) || void 0 === _this$props$allowedPa ? void 0 : _this$props$allowedPa.map((p => p.value)))
    }
    getInputAttributes() {
        return {
            "aria-label": getLocalizationMessage(this.context, "dxPagination-ariaPageSize")
        }
    }
    render() {
        const {
            allowedPageSizes: allowedPageSizes,
            pageSize: pageSize,
            pageSizeChangedInternal: pageSizeChangedInternal
        } = this.props;
        return createComponentVNode(2, SelectBox, {
            displayExpr: "text",
            valueExpr: "value",
            dataSource: allowedPageSizes,
            value: pageSize,
            valueChange: pageSizeChangedInternal,
            width: this.getWidth(),
            inputAttr: this.getInputAttributes()
        })
    }
}
PageSizeSmall.defaultProps = PageSizeSmallDefaultProps;