devextreme/esm/__internal/pagination/resizable_container.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/pagination/resizable_container.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,
    normalizeProps
} from "inferno";
import {
    InfernoComponent,
    InfernoEffect
} from "@devextreme/runtime/inferno";
import {
    createRef as infernoCreateRef
} from "inferno";
import resizeCallbacks from "../../core/utils/resize_callbacks";
import {
    isDefined
} from "../../core/utils/type";
import {
    PaginationDefaultProps
} from "./common/pagination_props";
import {
    getElementContentWidth,
    getElementStyle,
    getElementWidth
} from "./utils/get_element_width";
export function calculateLargeDisplayMode(_ref) {
    let {
        parent: parentWidth,
        allowedPageSizes: pageSizesWidth,
        pages: pagesWidth
    } = _ref;
    return parentWidth - (pageSizesWidth + pagesWidth) > 0
}
export function calculateInfoTextVisible(_ref2) {
    let {
        parent: parentWidth,
        allowedPageSizes: pageSizesWidth,
        pages: pagesWidth,
        info: infoWidth
    } = _ref2;
    const minimalWidth = pageSizesWidth + pagesWidth + infoWidth;
    return parentWidth - minimalWidth > 0
}

function getElementsWidth(_ref3) {
    let {
        parent: parent,
        allowedPageSizes: allowedPageSizes,
        pages: pages,
        info: info
    } = _ref3;
    const parentWidth = getElementContentWidth(parent);
    const pageSizesWidth = getElementWidth(allowedPageSizes);
    const infoWidth = getElementWidth(info);
    const pagesHtmlWidth = getElementWidth(pages);
    return {
        parent: parentWidth,
        allowedPageSizes: pageSizesWidth,
        info: infoWidth + getElementStyle("marginLeft", info) + getElementStyle("marginRight", info),
        pages: pagesHtmlWidth
    }
}
export const ResizableContainerDefaultProps = {
    paginationProps: _extends({}, PaginationDefaultProps)
};
export class ResizableContainer extends InfernoComponent {
    constructor(props) {
        super(props);
        this.state = {
            infoTextVisible: true,
            isLargeDisplayMode: true
        };
        this.refs = null;
        this.parentRef = infernoCreateRef();
        this.infoTextRef = infernoCreateRef();
        this.pagesRef = infernoCreateRef();
        this.allowedPageSizesRef = infernoCreateRef();
        this.elementsWidth = {};
        this.actualIsLargeDisplayMode = true;
        this.actualInfoTextVisible = true;
        this.subscribeToResize = this.subscribeToResize.bind(this);
        this.effectUpdateChildProps = this.effectUpdateChildProps.bind(this);
        this.updateAdaptivityProps = this.updateAdaptivityProps.bind(this)
    }
    componentWillUpdate(nextProps, nextState, context) {
        super.componentWillUpdate(nextProps, nextState, context)
    }
    createEffects() {
        return [new InfernoEffect(this.subscribeToResize, [this.state.infoTextVisible, this.state.isLargeDisplayMode]), new InfernoEffect(this.effectUpdateChildProps, [this.props, this.state.infoTextVisible, this.state.isLargeDisplayMode, this.props.paginationProps, this.props.contentTemplate])]
    }
    updateEffects() {
        var _this$_effects$, _this$_effects$2;
        null === (_this$_effects$ = this._effects[0]) || void 0 === _this$_effects$ || _this$_effects$.update([this.state.infoTextVisible, this.state.isLargeDisplayMode]);
        null === (_this$_effects$2 = this._effects[1]) || void 0 === _this$_effects$2 || _this$_effects$2.update([this.props, this.state.infoTextVisible, this.state.isLargeDisplayMode, this.props.paginationProps, this.props.contentTemplate])
    }
    subscribeToResize() {
        const callback = () => {
            if (this.getParentWidth() > 0) {
                this.updateAdaptivityProps()
            }
        };
        resizeCallbacks.add(callback);
        return () => {
            resizeCallbacks.remove(callback)
        }
    }
    effectUpdateChildProps() {
        if (this.getParentWidth() > 0) {
            this.updateAdaptivityProps()
        }
    }
    getContentAttributes() {
        const {
            className: className,
            displayMode: displayMode,
            isGridCompatibilityMode: isGridCompatibilityMode,
            hasKnownLastPage: hasKnownLastPage,
            infoText: infoText,
            label: label,
            lightModeEnabled: lightModeEnabled,
            maxPagesCount: maxPagesCount,
            onKeyDown: onKeyDown,
            pageCount: pageCount,
            pageIndex: pageIndex,
            pageIndexChangedInternal: pageIndexChangedInternal,
            pageSize: pageSize,
            pageSizeChangedInternal: pageSizeChangedInternal,
            allowedPageSizes: allowedPageSizes,
            pagesCountText: pagesCountText,
            pagesNavigatorVisible: pagesNavigatorVisible,
            rtlEnabled: rtlEnabled,
            showInfo: showInfo,
            showNavigationButtons: showNavigationButtons,
            showPageSizeSelector: showPageSizeSelector,
            itemCount: itemCount,
            visible: visible,
            style: style,
            width: width,
            height: height,
            elementAttr: elementAttr,
            hint: hint,
            disabled: disabled,
            tabIndex: tabIndex,
            accessKey: accessKey,
            activeStateEnabled: activeStateEnabled,
            focusStateEnabled: focusStateEnabled,
            hoverStateEnabled: hoverStateEnabled
        } = this.props.paginationProps;
        return {
            pageSize: pageSize,
            pageIndex: pageIndex,
            pageIndexChangedInternal: pageIndexChangedInternal,
            pageSizeChangedInternal: pageSizeChangedInternal,
            isGridCompatibilityMode: isGridCompatibilityMode,
            className: className,
            showInfo: showInfo,
            infoText: infoText,
            lightModeEnabled: lightModeEnabled,
            displayMode: displayMode,
            maxPagesCount: maxPagesCount,
            pageCount: pageCount,
            pagesCountText: pagesCountText,
            visible: visible,
            hasKnownLastPage: hasKnownLastPage,
            pagesNavigatorVisible: pagesNavigatorVisible,
            showPageSizeSelector: showPageSizeSelector,
            allowedPageSizes: allowedPageSizes,
            rtlEnabled: rtlEnabled,
            showNavigationButtons: showNavigationButtons,
            itemCount: itemCount,
            onKeyDown: onKeyDown,
            label: label,
            style: style,
            width: width,
            height: height,
            elementAttr: elementAttr,
            hint: hint,
            disabled: disabled,
            tabIndex: tabIndex,
            accessKey: accessKey,
            activeStateEnabled: activeStateEnabled,
            focusStateEnabled: focusStateEnabled,
            hoverStateEnabled: hoverStateEnabled
        }
    }
    getParentWidth() {
        var _this$parentRef;
        return null !== (_this$parentRef = this.parentRef) && void 0 !== _this$parentRef && _this$parentRef.current ? getElementWidth(this.parentRef.current) : 0
    }
    updateAdaptivityProps() {
        var _this$parentRef2, _this$allowedPageSize, _this$infoTextRef, _this$pagesRef;
        const currentElementsWidth = getElementsWidth({
            parent: null === (_this$parentRef2 = this.parentRef) || void 0 === _this$parentRef2 ? void 0 : _this$parentRef2.current,
            allowedPageSizes: null === (_this$allowedPageSize = this.allowedPageSizesRef) || void 0 === _this$allowedPageSize ? void 0 : _this$allowedPageSize.current,
            info: null === (_this$infoTextRef = this.infoTextRef) || void 0 === _this$infoTextRef ? void 0 : _this$infoTextRef.current,
            pages: null === (_this$pagesRef = this.pagesRef) || void 0 === _this$pagesRef ? void 0 : _this$pagesRef.current
        });
        if (this.actualInfoTextVisible !== this.state.infoTextVisible || this.actualIsLargeDisplayMode !== this.state.isLargeDisplayMode) {
            return
        }
        const isEmpty = !isDefined(this.elementsWidth);
        if (isEmpty) {
            this.elementsWidth = {}
        }
        if (isEmpty || this.state.isLargeDisplayMode) {
            this.elementsWidth.allowedPageSizes = currentElementsWidth.allowedPageSizes;
            this.elementsWidth.pages = currentElementsWidth.pages
        }
        if (isEmpty || this.state.infoTextVisible) {
            this.elementsWidth.info = currentElementsWidth.info
        }
        this.actualIsLargeDisplayMode = calculateLargeDisplayMode({
            parent: currentElementsWidth.parent,
            allowedPageSizes: this.elementsWidth.allowedPageSizes,
            pages: this.elementsWidth.pages
        });
        this.actualInfoTextVisible = calculateInfoTextVisible(_extends({}, currentElementsWidth, {
            info: this.elementsWidth.info
        }));
        this.setState((() => ({
            infoTextVisible: this.actualInfoTextVisible
        })));
        this.setState((() => ({
            isLargeDisplayMode: this.actualIsLargeDisplayMode
        })))
    }
    render() {
        const {
            infoTextVisible: infoTextVisible,
            isLargeDisplayMode: isLargeDisplayMode
        } = this.state;
        const {
            props: {
                contentTemplate: Content
            }
        } = this;
        return normalizeProps(createComponentVNode(2, Content, _extends({
            rootElementRef: this.parentRef,
            allowedPageSizesRef: this.allowedPageSizesRef,
            infoTextRef: this.infoTextRef,
            pagesRef: this.pagesRef,
            infoTextVisible: infoTextVisible,
            isLargeDisplayMode: isLargeDisplayMode
        }, this.getContentAttributes())))
    }
}
ResizableContainer.defaultProps = ResizableContainerDefaultProps;