devextreme/cjs/__internal/pagination/resizable_container.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__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/
 */
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.ResizableContainerDefaultProps = exports.ResizableContainer = void 0;
exports.calculateInfoTextVisible = calculateInfoTextVisible;
exports.calculateLargeDisplayMode = calculateLargeDisplayMode;
var _inferno = require("inferno");
var _inferno2 = require("@devextreme/runtime/inferno");
var _resize_callbacks = _interopRequireDefault(require("../../core/utils/resize_callbacks"));
var _type = require("../../core/utils/type");
var _pagination_props = require("./common/pagination_props");
var _get_element_width = require("./utils/get_element_width");

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}

function _extends() {
    return _extends = Object.assign ? Object.assign.bind() : function(n) {
        for (var e = 1; e < arguments.length; e++) {
            var t = arguments[e];
            for (var r in t) {
                ({}).hasOwnProperty.call(t, r) && (n[r] = t[r])
            }
        }
        return n
    }, _extends.apply(null, arguments)
}

function calculateLargeDisplayMode(_ref) {
    let {
        parent: parentWidth,
        allowedPageSizes: pageSizesWidth,
        pages: pagesWidth
    } = _ref;
    return parentWidth - (pageSizesWidth + pagesWidth) > 0
}

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 = (0, _get_element_width.getElementContentWidth)(parent);
    const pageSizesWidth = (0, _get_element_width.getElementWidth)(allowedPageSizes);
    const infoWidth = (0, _get_element_width.getElementWidth)(info);
    const pagesHtmlWidth = (0, _get_element_width.getElementWidth)(pages);
    return {
        parent: parentWidth,
        allowedPageSizes: pageSizesWidth,
        info: infoWidth + (0, _get_element_width.getElementStyle)("marginLeft", info) + (0, _get_element_width.getElementStyle)("marginRight", info),
        pages: pagesHtmlWidth
    }
}
const ResizableContainerDefaultProps = exports.ResizableContainerDefaultProps = {
    paginationProps: _extends({}, _pagination_props.PaginationDefaultProps)
};
class ResizableContainer extends _inferno2.InfernoComponent {
    constructor(props) {
        super(props);
        this.state = {
            infoTextVisible: true,
            isLargeDisplayMode: true
        };
        this.refs = null;
        this.parentRef = (0, _inferno.createRef)();
        this.infoTextRef = (0, _inferno.createRef)();
        this.pagesRef = (0, _inferno.createRef)();
        this.allowedPageSizesRef = (0, _inferno.createRef)();
        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 _inferno2.InfernoEffect(this.subscribeToResize, [this.state.infoTextVisible, this.state.isLargeDisplayMode]), new _inferno2.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()
            }
        };
        _resize_callbacks.default.add(callback);
        return () => {
            _resize_callbacks.default.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 ? (0, _get_element_width.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 = !(0, _type.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 (0, _inferno.normalizeProps)((0, _inferno.createComponentVNode)(2, Content, _extends({
            rootElementRef: this.parentRef,
            allowedPageSizesRef: this.allowedPageSizesRef,
            infoTextRef: this.infoTextRef,
            pagesRef: this.pagesRef,
            infoTextVisible: infoTextVisible,
            isLargeDisplayMode: isLargeDisplayMode
        }, this.getContentAttributes())))
    }
}
exports.ResizableContainer = ResizableContainer;
ResizableContainer.defaultProps = ResizableContainerDefaultProps;