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

UI Components Library for React.js

'use strict';

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

var CElementCover = React.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 = tslib_es6.__rest(_a, ["children", "className", "boundaries", "opacity"]);
    var elementCoverRef = React.useRef(null);
    var forkedRef = useForkedRef.useForkedRef(ref, elementCoverRef);
    var _c = React.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;
    };
    React.useEffect(function () {
        setCustomBoundaries(getCustomBoundaries());
    }, [JSON.stringify(getCustomBoundaries())]);
    var classes = index.default(className);
    var containerCoords = tslib_es6.__assign({ top: 0, left: 0, right: 0, bottom: 0 }, customBoundaries);
    var coverStyles = tslib_es6.__assign(tslib_es6.__assign({}, containerCoords), { position: 'absolute', zIndex: 2, backgroundColor: "rgba(255,255,255,".concat(opacity, ")") });
    return (React.createElement("div", tslib_es6.__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.CSpinner, { variant: "grow", color: "primary" }))));
});
CElementCover.propTypes = {
    boundaries: PropTypes.array,
    children: PropTypes.node,
    className: PropTypes.string,
    opacity: PropTypes.number,
};
CElementCover.displayName = 'CElementCover';

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