@thehappycoder/react-responsive-pagination/lib/renderers/MaxWidthRenderer/index.js

React component for responsive pagination

import React, { useRef } from 'react';
import { lastWhere, iteratorNext } from '../../helpers/iterator';
import { useWidthCalculator } from './useWidthCalculator';
import { useFoutDetector } from './useFoutDetector';
export default function MaxWidthRenderer(_a) {
    var maxWidth = _a.maxWidth, narrowToWideCompositionsProvider = _a.narrowToWideCompositionsProvider, View = _a.View;
    var widthCalculator = useWidthCalculator(View);
    var viewRef = useRef(null);
    useFoutDetector(function () { return getItemsDomElements(viewRef.current); }, 'clearCache' in widthCalculator ? widthCalculator.clearCache : function () { });
    if ('measuringComponentNeedsRender' in widthCalculator) {
        return widthCalculator.measuringComponentNeedsRender;
    }
    var composition = getLargestFittingCompositionWithFallback(narrowToWideCompositionsProvider, widthCalculator.getWidth, maxWidth);
    return React.createElement(View, { items: composition, ref: viewRef });
}
function getLargestFittingCompositionWithFallback(getNarrowToWideCompositions, getCompositionWidth, maxWidth) {
    var _a, _b;
    var narrowToWideCompositions = getNarrowToWideCompositions();
    var firstComposition = (_a = iteratorNext(narrowToWideCompositions)) !== null && _a !== void 0 ? _a : [];
    var doesCompositionFit = function (composition) {
        return getCompositionWidth(composition) < maxWidth;
    };
    return (_b = lastWhere(narrowToWideCompositions, doesCompositionFit)) !== null && _b !== void 0 ? _b : firstComposition;
}
function getItemsDomElements(viewDomElement) {
    return viewDomElement && Array.from(viewDomElement.children);
}