@coreui/react-pro/dist/esm/components/offcanvas/COffcanvas.js

UI Components Library for React.js

import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { CBackdrop } from '../backdrop/CBackdrop.js';
import { CConditionalPortal } from '../conditional-portal/CConditionalPortal.js';
import { CFocusTrap } from '../focus-trap/CFocusTrap.js';
import '@popperjs/core';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import Transition from '../../node_modules/react-transition-group/esm/Transition.js';

const COffcanvas = forwardRef((_a, ref) => {
    var { children, backdrop = true, className, dark, keyboard = true, onHide, onShow, placement, portal = false, responsive = true, scroll = false, visible = false } = _a, rest = __rest(_a, ["children", "backdrop", "className", "dark", "keyboard", "onHide", "onShow", "placement", "portal", "responsive", "scroll", "visible"]);
    const [_visible, setVisible] = useState(visible);
    const offcanvasRef = useRef(null);
    const forkedRef = useForkedRef(ref, offcanvasRef);
    useEffect(() => {
        setVisible(visible);
    }, [visible]);
    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, { in: _visible, nodeRef: offcanvasRef, onEnter: onShow, onExit: onHide, timeout: 300 }, (state) => (React.createElement(CConditionalPortal, { portal: portal },
            React.createElement(CFocusTrap, { active: _visible && Boolean(backdrop), restoreFocus: true },
                React.createElement("div", Object.assign({ className: classNames({
                        [`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, { portal: portal },
            React.createElement(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';

export { COffcanvas };
//# sourceMappingURL=COffcanvas.js.map