@coreui/react-pro/dist/esm/components/element-cover/CElementCover.js

UI Components Library for React.js

import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import PropTypes from 'prop-types';
import React, { forwardRef, useRef, useState, useEffect } from 'react';
import classNames from '../../_virtual/index.js';
import '@popperjs/core';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import { CSpinner } from '../spinner/CSpinner.js';

var CElementCover = forwardRef(function (_a, ref) {
    var children = _a.children, className = _a.className, boundaries = _a.boundaries, _b = _a.opacity, opacity = _b === void 0 ? 0.4 : _b, rest = __rest(_a, ["children", "className", "boundaries", "opacity"]);
    var elementCoverRef = useRef(null);
    var forkedRef = useForkedRef(ref, elementCoverRef);
    var _c = useState({}), customBoundaries = _c[0], setCustomBoundaries = _c[1];
    var getCustomBoundaries = function () {
        if (!elementCoverRef || !elementCoverRef.current || !boundaries) {
            return {};
        }
        var parent = elementCoverRef.current.parentElement;
        if (!parent) {
            return {};
        }
        var parentCoords = parent.getBoundingClientRect();
        var customBoundaries = {};
        boundaries.forEach(function (_a) {
            var sides = _a.sides, query = _a.query;
            var element = parent.querySelector(query);
            if (!element || !sides) {
                return;
            }
            var coords = element.getBoundingClientRect();
            sides.forEach(function (side) {
                var sideMargin = Math.abs(coords[side] - parentCoords[side]);
                customBoundaries[side] = "".concat(sideMargin, "px");
            });
        });
        return customBoundaries;
    };
    useEffect(function () {
        setCustomBoundaries(getCustomBoundaries());
    }, [JSON.stringify(getCustomBoundaries())]);
    var classes = classNames(className);
    var containerCoords = __assign({ top: 0, left: 0, right: 0, bottom: 0 }, customBoundaries);
    var coverStyles = __assign(__assign({}, containerCoords), { position: 'absolute', zIndex: 2, backgroundColor: "rgba(255,255,255,".concat(opacity, ")") });
    return (React.createElement("div", __assign({ className: classes, style: coverStyles }, rest, { ref: forkedRef }),
        React.createElement("div", { style: {
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
            } }, children || React.createElement(CSpinner, { variant: "grow", color: "primary" }))));
});
CElementCover.propTypes = {
    boundaries: PropTypes.array,
    children: PropTypes.node,
    className: PropTypes.string,
    opacity: PropTypes.number,
};
CElementCover.displayName = 'CElementCover';

export { CElementCover };
//# sourceMappingURL=CElementCover.js.map