@coreui/react-pro/dist/cjs/components/modal/CModal.js

UI Components Library for React.js

'use strict';

var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var PropTypes = require('prop-types');
var index = require('../../_virtual/index.js');
var CBackdrop = require('../backdrop/CBackdrop.js');
var CConditionalPortal = require('../conditional-portal/CConditionalPortal.js');
var CFocusTrap = require('../focus-trap/CFocusTrap.js');
var CModalContent = require('./CModalContent.js');
var CModalContext = require('./CModalContext.js');
var CModalDialog = require('./CModalDialog.js');
require('@popperjs/core');
var useForkedRef = require('../../hooks/useForkedRef.js');
var Transition = require('../../node_modules/react-transition-group/esm/Transition.js');

const CModal = React.forwardRef((_a, ref) => {
    var { children, alignment, backdrop = true, className, container, duration = 150, focus = true, fullscreen, keyboard = true, onClose, onClosePrevented, onShow, portal = true, scrollable, size, transition = true, unmountOnClose = true, visible } = _a, rest = tslib_es6.__rest(_a, ["children", "alignment", "backdrop", "className", "container", "duration", "focus", "fullscreen", "keyboard", "onClose", "onClosePrevented", "onShow", "portal", "scrollable", "size", "transition", "unmountOnClose", "visible"]);
    const modalRef = React.useRef(null);
    const forkedRef = useForkedRef.useForkedRef(ref, modalRef);
    const [_visible, setVisible] = React.useState(visible);
    const [staticBackdrop, setStaticBackdrop] = React.useState(false);
    const contextValues = {
        visible: _visible,
        setVisible,
    };
    React.useEffect(() => {
        setVisible(visible);
    }, [visible]);
    React.useEffect(() => {
        if (_visible) {
            document.addEventListener('mouseup', handleClickOutside);
            document.addEventListener('keydown', handleKeyDown);
        }
        return () => {
            document.removeEventListener('mouseup', handleClickOutside);
            document.removeEventListener('keydown', handleKeyDown);
        };
    }, [_visible]);
    const handleDismiss = () => {
        if (backdrop === 'static') {
            return setStaticBackdrop(true);
        }
        setVisible(false);
    };
    React.useLayoutEffect(() => {
        onClosePrevented === null || onClosePrevented === void 0 ? void 0 : onClosePrevented();
        setTimeout(() => setStaticBackdrop(false), duration);
    }, [staticBackdrop]);
    // Set focus to modal after open
    React.useLayoutEffect(() => {
        if (_visible) {
            document.body.classList.add('modal-open');
            if (backdrop) {
                document.body.style.overflow = 'hidden';
                document.body.style.paddingRight = '0px';
            }
        }
        else {
            document.body.classList.remove('modal-open');
            if (backdrop) {
                document.body.style.removeProperty('overflow');
                document.body.style.removeProperty('padding-right');
            }
        }
        return () => {
            document.body.classList.remove('modal-open');
            if (backdrop) {
                document.body.style.removeProperty('overflow');
                document.body.style.removeProperty('padding-right');
            }
        };
    }, [_visible]);
    const handleClickOutside = (event) => {
        if (modalRef.current && modalRef.current == event.target) {
            handleDismiss();
        }
    };
    const handleKeyDown = (event) => {
        if (event.key === 'Escape' && keyboard) {
            handleDismiss();
        }
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(Transition.default, { in: _visible, mountOnEnter: true, nodeRef: modalRef, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: transition ? duration : 0 }, (state) => (React.createElement(CConditionalPortal.CConditionalPortal, { container: container, portal: portal },
            React.createElement(CModalContext.CModalContext.Provider, { value: contextValues },
                React.createElement(CFocusTrap.CFocusTrap, { active: focus && state === 'entered' },
                    React.createElement("div", Object.assign({ className: index.default('modal', {
                            'modal-static': staticBackdrop,
                            fade: transition,
                            show: state === 'entered',
                        }, className), tabIndex: -1 }, (_visible
                        ? { 'aria-modal': true, role: 'dialog' }
                        : { 'aria-hidden': 'true' }), { style: Object.assign({}, (state !== 'exited' && { display: 'block' })) }, rest, { ref: forkedRef }),
                        React.createElement(CModalDialog.CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
                            React.createElement(CModalContent.CModalContent, null, children)))))))),
        backdrop && (React.createElement(CConditionalPortal.CConditionalPortal, { container: container, portal: portal },
            React.createElement(CBackdrop.CBackdrop, { visible: _visible })))));
});
CModal.propTypes = {
    alignment: PropTypes.oneOf(['top', 'center']),
    backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
    children: PropTypes.node,
    className: PropTypes.string,
    container: PropTypes.any, // HTMLElement
    duration: PropTypes.number,
    focus: PropTypes.bool,
    fullscreen: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
    ]),
    keyboard: PropTypes.bool,
    onClose: PropTypes.func,
    onClosePrevented: PropTypes.func,
    onShow: PropTypes.func,
    portal: PropTypes.bool,
    scrollable: PropTypes.bool,
    size: PropTypes.oneOf(['sm', 'lg', 'xl']),
    transition: PropTypes.bool,
    unmountOnClose: PropTypes.bool,
    visible: PropTypes.bool,
};
CModal.displayName = 'CModal';

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