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

UI Components Library for React.js

import { __rest } 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';

const CElementCover = forwardRef((_a, ref) => {
    var { children, className, boundaries, opacity = 0.4 } = _a, rest = __rest(_a, ["children", "className", "boundaries", "opacity"]);
    const elementCoverRef = useRef(null);
    const forkedRef = useForkedRef(ref, elementCoverRef);
    const [customBoundaries, setCustomBoundaries] = 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;
    };
    useEffect(() => {
        setCustomBoundaries(getCustomBoundaries());
    }, [JSON.stringify(getCustomBoundaries())]);
    const classes = classNames(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, { 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