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

UI Components Library for React.js

import { __rest, __assign } 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 { useForkedRef } from '../../hooks/useForkedRef.js';
import '@popperjs/core';
import Transition from '../../node_modules/react-transition-group/esm/Transition.js';

var COffcanvas = forwardRef(function (_a, ref) {
    var children = _a.children, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, dark = _a.dark, _c = _a.keyboard, keyboard = _c === void 0 ? true : _c, onHide = _a.onHide, onShow = _a.onShow, placement = _a.placement, _d = _a.portal, portal = _d === void 0 ? false : _d, _e = _a.responsive, responsive = _e === void 0 ? true : _e, _f = _a.scroll, scroll = _f === void 0 ? false : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest(_a, ["children", "backdrop", "className", "dark", "keyboard", "onHide", "onShow", "placement", "portal", "responsive", "scroll", "visible"]);
    var _h = useState(visible), _visible = _h[0], setVisible = _h[1];
    var offcanvasRef = useRef(null);
    var forkedRef = useForkedRef(ref, offcanvasRef);
    useEffect(function () {
        setVisible(visible);
    }, [visible]);
    useEffect(function () {
        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]);
    var handleDismiss = function () {
        setVisible(false);
    };
    var handleBackdropDismiss = function () {
        if (backdrop !== 'static') {
            setVisible(false);
        }
    };
    var handleKeyDown = function (event) {
        if (event.key === 'Escape' && keyboard) {
            return handleDismiss();
        }
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(Transition, { in: _visible, nodeRef: offcanvasRef, onEnter: onShow, onEntered: function () { var _a; return (_a = offcanvasRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, onExit: onHide, timeout: 300 }, function (state) {
            var _a;
            return (React.createElement(CConditionalPortal, { portal: portal },
                React.createElement("div", __assign({ className: classNames((_a = {},
                        _a["offcanvas".concat(typeof responsive === 'string' ? '-' + responsive : '')] = responsive,
                        _a["offcanvas-".concat(placement)] = placement,
                        _a.showing = state === 'entering',
                        _a.show = state === 'entered',
                        _a['show hiding'] = state === 'exiting',
                        _a), 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