@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('../../_virtual/index.js');
require('@popperjs/core');
var useForkedRef = require('../../hooks/useForkedRef.js');
var CSpinner = require('../spinner/CSpinner.js');

const CElementCover = React.forwardRef((_a, ref) => {
    var { children, className, boundaries, opacity = 0.4 } = _a, rest = tslib_es6.__rest(_a, ["children", "className", "boundaries", "opacity"]);
    const elementCoverRef = React.useRef(null);
    const forkedRef = useForkedRef.useForkedRef(ref, elementCoverRef);
    const [customBoundaries, setCustomBoundaries] = React.useState({});
    const getCustomBoundaries = () => {
        if (!elementCoverRef || !elementCoverRef.current || !boundaries) {
            return {};
        }
        const parent = elementCoverRef.current.parentElement;
        if (!parent) {
            return {};
        }
        const parentCoords = parent.getBoundingClientRect();
        const customBoundaries = {};
        boundaries.forEach(({ sides, query }) => {
            const element = parent.querySelector(query);
            if (!element || !sides) {
                return;
            }
            const coords = element.getBoundingClientRect();
            sides.forEach((side) => {
                const sideMargin = Math.abs(coords[side] - parentCoords[side]);
                customBoundaries[side] = `${sideMargin}px`;
            });
        });
        return customBoundaries;
    };
    React.useEffect(() => {
        setCustomBoundaries(getCustomBoundaries());
    }, [JSON.stringify(getCustomBoundaries())]);
    const classes = index.default(className);
    const containerCoords = Object.assign({ top: 0, left: 0, right: 0, bottom: 0 }, customBoundaries);
    const coverStyles = Object.assign(Object.assign({}, containerCoords), { position: 'absolute', zIndex: 2, backgroundColor: `rgba(255,255,255,${opacity})` });
    return (React.createElement("div", Object.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