smart-react-components/Overlay-95b8c50b.js

React UI library, wide variety of editable ready to use Styled and React components.

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var index = require('./index-6d498b59.js');
var DOMHelper = require('./DOMHelper-c0bd5a29.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var Div = require('./element/Div.js');
var reactDom = require('react-dom');

const overlayCSS = (theme, background) => `
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: ${theme.overlay.space};
    touch-action: none;

    ${background ? `
        background: ${theme.overlay.background};
    ` : ""}
`;
const OverlayElement = styled__default(Div)(({ theme, breakpoint, background }) => `
    position: fixed;
    z-index: ${theme.src.zIndex.overlay};

    ${breakpoint
    ? `
        @media(max-width:${theme.src.grid.breakpoint[breakpoint] - 1}px) {
            ${overlayCSS(theme.src, background)}
        }
    `
    : overlayCSS(theme.src, background)}
`);
const Overlay = React__default.forwardRef(({ children, elementProps = index.DV.JSX_ELEMENT_PROPS, renderInBody = true, breakpoint, background = true }, ref) => {
    const theme = React__default.useContext(styled.ThemeContext).src;
    const el = React__default.useRef(null);
    /**
     * Checks the target element, prevents default and stops propagation, if the element is in the overlay and not scrollable.
     *
     * @param e
     */
    const wheel = (e) => {
        const container = (ref || el).current;
        if ((breakpoint && window.innerWidth < theme.grid.breakpoint[breakpoint]) || !breakpoint) {
            const delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;
            const up = delta < 0;
            let el = e.target;
            let scrollEl = DOMHelper.DOMHelper.getScrollParent(el);
            while (scrollEl && (scrollEl == container || container.contains(scrollEl))) {
                if ((up && scrollEl.scrollTop > 0) ||
                    (!up && scrollEl.scrollHeight > scrollEl.scrollTop))
                    return;
                else
                    scrollEl = DOMHelper.DOMHelper.getScrollParent(scrollEl);
            }
            e.preventDefault();
            e.stopPropagation();
        }
    };
    const selectStart = (e) => {
        const container = (ref || el).current;
        if (e.target == container)
            e.preventDefault();
    };
    React__default.useEffect(() => {
        DOMHelper.DOMHelper.addEventListener(document, DOMHelper.DOMHelper.MOUSE_WHEEL, wheel, { passive: false });
        DOMHelper.DOMHelper.addEventListener(window, ["selectstart"], selectStart);
        return () => {
            DOMHelper.DOMHelper.removeEventListener(document, DOMHelper.DOMHelper.MOUSE_WHEEL, wheel, {});
            DOMHelper.DOMHelper.removeEventListener(window, ["selectstart"], selectStart);
        };
    }, []);
    const Element = React__default.createElement(OverlayElement, Object.assign({}, elementProps, { ref: ref || el, breakpoint: breakpoint, background: background }), children);
    return DOMHelper.DOMHelper.canBeRenderedInPortal(renderInBody) ? reactDom.createPortal(Element, document.body) : Element;
});

exports.Overlay = Overlay;