@coreui/react-pro/dist/cjs/components/virtual-scroller/CVirtualScroller.js

UI Components Library for React.js

'use strict';

var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var PropTypes = require('prop-types');
var index = require('../../node_modules/classnames/index.js');
var useForkedRef = require('../../hooks/useForkedRef.js');
require('@popperjs/core');

var CVirtualScroller = React.forwardRef(function (_a, ref) {
    var children = _a.children, className = _a.className, visibleItems = _a.visibleItems, onScroll = _a.onScroll;
    var virtualScrollRef = React.useRef(null);
    var virtualScrollContentRef = React.useRef(null);
    var forkedRef = useForkedRef.useForkedRef(ref, virtualScrollRef);
    var _b = React.useState(Math.floor(visibleItems / 2)), buffer = _b[0], setBuffer = _b[1];
    var _c = React.useState(1), currentItemIndex = _c[0], setCurrentItemIndex = _c[1];
    var _d = React.useState(0), itemHeight = _d[0], setItemHeight = _d[1];
    var _e = React.useState(React.Children.count(children)), itemsNumber = _e[0], setItemsNumber = _e[1];
    var _f = React.useState(0), viewportPadding = _f[0], setViewportPadding = _f[1];
    var _g = React.useState(visibleItems * itemHeight + 2 * viewportPadding), viewportHeight = _g[0], setViewportHeight = _g[1];
    var _h = React.useState(itemsNumber * itemHeight + 2 * viewportPadding), maxHeight = _h[0], setMaxHeight = _h[1];
    React.useEffect(function () {
        virtualScrollRef.current && virtualScrollRef.current.scrollTop;
        virtualScrollRef.current &&
            setViewportPadding(Number.parseFloat(getComputedStyle(virtualScrollRef.current).paddingTop));
    });
    React.useEffect(function () {
        setItemsNumber(React.Children.count(children));
    }, [children]);
    React.useEffect(function () {
        setViewportHeight(Math.min(visibleItems, itemsNumber) * itemHeight + 2 * viewportPadding);
    }, [itemHeight, itemsNumber, viewportPadding, visibleItems]);
    React.useEffect(function () {
        setMaxHeight(itemsNumber * itemHeight);
        virtualScrollRef.current && virtualScrollRef.current.scrollTop;
    }, [itemHeight, itemsNumber]);
    React.useEffect(function () {
        setBuffer(Math.floor(visibleItems / 2));
    }, [visibleItems]);
    var handleScroll = function (scrollTop) {
        var _currentItemIndex = itemHeight && Math.max(Math.ceil(scrollTop / itemHeight), 1);
        setCurrentItemIndex(_currentItemIndex);
        onScroll && onScroll(_currentItemIndex);
    };
    return (React.createElement("div", { className: index.default('virtual-scroller', className), onScroll: function (event) {
            return handleScroll(event.target.scrollTop);
        }, ref: forkedRef, style: {
            height: viewportHeight,
            overflowY: 'auto',
        } },
        React.createElement("div", { className: "virtual-scroller-content", style: {
                height: maxHeight,
            }, ref: virtualScrollContentRef }, React.Children.map(children, function (child, index$1) {
            if (React.isValidElement(child) &&
                index$1 + 1 > Math.max(currentItemIndex - buffer, 0) &&
                index$1 + 1 <= currentItemIndex + visibleItems + buffer) {
                return React.cloneElement(child, {
                    className: index.default(child.props.className, {
                        'virtual-scroller-item-preload': index$1 + 1 > currentItemIndex + visibleItems || index$1 + 1 < currentItemIndex,
                    }),
                    key: index$1,
                    style: tslib_es6.__assign({}, (currentItemIndex > buffer && {
                        transform: "translateY(".concat((currentItemIndex - buffer) * itemHeight, "px)"),
                    })),
                    ref: function (node) {
                        return node &&
                            node.offsetHeight &&
                            setItemHeight(node.offsetHeight +
                                Number.parseFloat(getComputedStyle(node).marginTop) +
                                Number.parseFloat(getComputedStyle(node).marginBottom));
                    },
                });
            }
            return;
        }))));
});
CVirtualScroller.propTypes = {
    onScroll: PropTypes.func,
    visibleItems: PropTypes.number.isRequired,
};
CVirtualScroller.displayName = 'CVirtualScroller';

exports.CVirtualScroller = CVirtualScroller;
//# sourceMappingURL=CVirtualScroller.js.map