@coreui/react/dist/esm/components/sidebar/CSidebar.js

UI Components Library for React.js

import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useRef, useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { CBackdrop } from '../backdrop/CBackdrop.js';
import isInViewport from '../../utils/isInViewport.js';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import '@popperjs/core';

var isOnMobile = function (element) {
    return Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'));
};
var CSidebar = forwardRef(function (_a, ref) {
    var _b;
    var children = _a.children, _c = _a.as, Component = _c === void 0 ? 'div' : _c, 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 = __rest(_a, ["children", "as", "className", "colorScheme", "narrow", "onHide", "onShow", "onVisibleChange", "overlaid", "placement", "position", "size", "unfoldable", "visible"]);
    var sidebarRef = useRef(null);
    var forkedRef = useForkedRef(ref, sidebarRef);
    var _d = useState(), inViewport = _d[0], setInViewport = _d[1];
    var _e = useState(false), mobile = _e[0], setMobile = _e[1];
    var _f = useState(false), visibleMobile = _f[0], setVisibleMobile = _f[1];
    var _g = useState(visible !== undefined ? visible : overlaid ? false : true), visibleDesktop = _g[0], setVisibleDesktop = _g[1];
    useEffect(function () {
        sidebarRef.current && setMobile(isOnMobile(sidebarRef.current));
        visible !== undefined && handleVisibleChange(visible);
    }, [visible]);
    useEffect(function () {
        inViewport !== undefined && onVisibleChange && onVisibleChange(inViewport);
        !inViewport && onHide && onHide();
        inViewport && onShow && onShow();
    }, [inViewport]);
    useEffect(function () {
        mobile && setVisibleMobile(false);
    }, [mobile]);
    useEffect(function () {
        var _a, _b;
        sidebarRef.current && setMobile(isOnMobile(sidebarRef.current));
        sidebarRef.current && setInViewport(isInViewport(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(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(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(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(Component, __assign({ className: classNames('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 &&
            createPortal(React.createElement(CBackdrop, { className: "sidebar-backdrop", visible: mobile && visibleMobile }), document.body)));
});
CSidebar.propTypes = {
    as: PropTypes.elementType,
    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';

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