@coreui/react-pro/dist/cjs/components/offcanvas/COffcanvas.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');
require('@popperjs/core');
var useForkedRef = require('../../hooks/useForkedRef.js');
var Transition = require('../../node_modules/react-transition-group/esm/Transition.js');

const COffcanvas = React.forwardRef((_a, ref) => {
    var { children, backdrop = true, className, dark, keyboard = true, onHide, onShow, placement, portal = false, responsive = true, scroll = false, visible = false } = _a, rest = tslib_es6.__rest(_a, ["children", "backdrop", "className", "dark", "keyboard", "onHide", "onShow", "placement", "portal", "responsive", "scroll", "visible"]);
    const [_visible, setVisible] = React.useState(visible);
    const offcanvasRef = React.useRef(null);
    const forkedRef = useForkedRef.useForkedRef(ref, offcanvasRef);
    React.useEffect(() => {
        setVisible(visible);
    }, [visible]);
    React.useEffect(() => {
        if (_visible && !scroll) {
            document.body.style.overflow = 'hidden';
            document.body.style.paddingRight = '0px';
            return;
        }
        if (!scroll) {
            document.body.style.removeProperty('overflow');
            document.body.style.removeProperty('padding-right');
        }
    }, [_visible]);
    const handleDismiss = () => {
        setVisible(false);
    };
    const handleBackdropDismiss = () => {
        if (backdrop !== 'static') {
            setVisible(false);
        }
    };
    const handleKeyDown = (event) => {
        if (event.key === 'Escape' && keyboard) {
            return handleDismiss();
        }
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(Transition.default, { in: _visible, nodeRef: offcanvasRef, onEnter: onShow, onExit: onHide, timeout: 300 }, (state) => (React.createElement(CConditionalPortal.CConditionalPortal, { portal: portal },
            React.createElement(CFocusTrap.CFocusTrap, { active: _visible && Boolean(backdrop), restoreFocus: true },
                React.createElement("div", Object.assign({ className: index.default({
                        [`offcanvas${typeof responsive === 'string' ? '-' + responsive : ''}`]: responsive,
                        [`offcanvas-${placement}`]: placement,
                        showing: state === 'entering',
                        show: state === 'entered',
                        'show hiding': state === 'exiting',
                    }, className), role: "dialog", tabIndex: -1, onKeyDown: handleKeyDown }, (dark && { 'data-coreui-theme': 'dark' }), rest, { ref: forkedRef }), children))))),
        backdrop && (React.createElement(CConditionalPortal.CConditionalPortal, { portal: portal },
            React.createElement(CBackdrop.CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible })))));
});
COffcanvas.propTypes = {
    backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
    children: PropTypes.node,
    className: PropTypes.string,
    dark: PropTypes.bool,
    keyboard: PropTypes.bool,
    onHide: PropTypes.func,
    onShow: PropTypes.func,
    placement: PropTypes.oneOf(['start', 'end', 'top', 'bottom'])
        .isRequired,
    portal: PropTypes.bool,
    responsive: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
    ]),
    scroll: PropTypes.bool,
    visible: PropTypes.bool,
};
COffcanvas.displayName = 'COffcanvas';

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