@coreui/react-pro/dist/cjs/components/sidebar/CSidebar.js

UI Components Library for React.js

'use strict';

var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var ReactDOM = require('react-dom');
var PropTypes = require('prop-types');
var index = require('../../node_modules/classnames/index.js');
var CBackdrop = require('../backdrop/CBackdrop.js');
var isInViewport = require('../../utils/isInViewport.js');
var useForkedRef = require('../../hooks/useForkedRef.js');
require('@popperjs/core');

var isOnMobile = function (element) {
    return Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'));
};
var CSidebar = React.forwardRef(function (_a, ref) {
    var _b;
    var children = _a.children, className = _a.className, colorScheme = _a.colorScheme, narrow = _a.narrow, onHide = _a.onHide, onShow = _a.onShow, onVisibleChange = _a.onVisibleChange, overlaid = _a.overlaid, placement = _a.placement, position = _a.position, size = _a.size, unfoldable = _a.unfoldable, visible = _a.visible, rest = tslib_es6.__rest(_a, ["children", "className", "colorScheme", "narrow", "onHide", "onShow", "onVisibleChange", "overlaid", "placement", "position", "size", "unfoldable", "visible"]);
    var sidebarRef = React.useRef(null);
    var forkedRef = useForkedRef.useForkedRef(ref, sidebarRef);
    var _c = React.useState(), inViewport = _c[0], setInViewport = _c[1];
    var _d = React.useState(false), mobile = _d[0], setMobile = _d[1];
    var _e = React.useState(false), visibleMobile = _e[0], setVisibleMobile = _e[1];
    var _f = React.useState(visible !== undefined ? visible : overlaid ? false : true), visibleDesktop = _f[0], setVisibleDesktop = _f[1];
    React.useEffect(function () {
        sidebarRef.current && setMobile(isOnMobile(sidebarRef.current));
        visible !== undefined && handleVisibleChange(visible);
    }, [visible]);
    React.useEffect(function () {
        inViewport !== undefined && onVisibleChange && onVisibleChange(inViewport);
        !inViewport && onHide && onHide();
        inViewport && onShow && onShow();
    }, [inViewport]);
    React.useEffect(function () {
        mobile && setVisibleMobile(false);
    }, [mobile]);
    React.useEffect(function () {
        var _a, _b;
        sidebarRef.current && setMobile(isOnMobile(sidebarRef.current));
        sidebarRef.current && setInViewport(isInViewport.default(sidebarRef.current));
        window.addEventListener('resize', handleResize);
        window.addEventListener('mouseup', handleClickOutside);
        window.addEventListener('keyup', handleKeyup);
        (_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', handleOnClick);
        (_b = sidebarRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('transitionend', function () {
            sidebarRef.current && setInViewport(isInViewport.default(sidebarRef.current));
        });
        return function () {
            var _a, _b;
            window.removeEventListener('resize', handleResize);
            window.removeEventListener('mouseup', handleClickOutside);
            window.removeEventListener('keyup', handleKeyup);
            (_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', handleOnClick);
            (_b = sidebarRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('transitionend', function () {
                sidebarRef.current && setInViewport(isInViewport.default(sidebarRef.current));
            });
        };
    });
    var handleVisibleChange = function (visible) {
        if (mobile) {
            setVisibleMobile(visible);
            return;
        }
        setVisibleDesktop(visible);
    };
    var handleHide = function () {
        handleVisibleChange(false);
    };
    var handleResize = function () {
        sidebarRef.current && setMobile(isOnMobile(sidebarRef.current));
        sidebarRef.current && setInViewport(isInViewport.default(sidebarRef.current));
    };
    var handleKeyup = function (event) {
        if (mobile &&
            sidebarRef.current &&
            !sidebarRef.current.contains(event.target)) {
            handleHide();
        }
    };
    var handleClickOutside = function (event) {
        if (mobile &&
            sidebarRef.current &&
            !sidebarRef.current.contains(event.target)) {
            handleHide();
        }
    };
    var handleOnClick = function (event) {
        var target = event.target;
        target &&
            target.classList.contains('nav-link') &&
            !target.classList.contains('nav-group-toggle') &&
            mobile &&
            handleHide();
    };
    return (React.createElement(React.Fragment, null,
        React.createElement("div", tslib_es6.__assign({ className: index.default('sidebar', (_b = {},
                _b["sidebar-".concat(colorScheme)] = colorScheme,
                _b['sidebar-narrow'] = narrow,
                _b['sidebar-overlaid'] = overlaid,
                _b["sidebar-".concat(placement)] = placement,
                _b["sidebar-".concat(position)] = position,
                _b["sidebar-".concat(size)] = size,
                _b['sidebar-narrow-unfoldable'] = unfoldable,
                _b.show = (mobile && visibleMobile) || (overlaid && visibleDesktop),
                _b.hide = visibleDesktop === false && !mobile && !overlaid,
                _b), className) }, rest, { ref: forkedRef }), children),
        typeof window !== 'undefined' &&
            mobile &&
            ReactDOM.createPortal(React.createElement(CBackdrop.CBackdrop, { className: "sidebar-backdrop", visible: mobile && visibleMobile }), document.body)));
});
CSidebar.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    colorScheme: PropTypes.oneOf(['dark', 'light']),
    narrow: PropTypes.bool,
    onHide: PropTypes.func,
    onShow: PropTypes.func,
    onVisibleChange: PropTypes.func,
    overlaid: PropTypes.bool,
    placement: PropTypes.oneOf(['start', 'end']),
    position: PropTypes.oneOf(['fixed', 'sticky']),
    size: PropTypes.oneOf(['sm', 'lg', 'xl']),
    unfoldable: PropTypes.bool,
    visible: PropTypes.bool,
};
CSidebar.displayName = 'CSidebar';

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