@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('../../_virtual/index.js');
var CBackdrop = require('../backdrop/CBackdrop.js');
var isInViewport = require('../../utils/isInViewport.js');
require('@popperjs/core');
var useForkedRef = require('../../hooks/useForkedRef.js');

const isOnMobile = (element) => Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'));
const CSidebar = React.forwardRef((_a, ref) => {
    var { children, as: Component = 'div', className, colorScheme, narrow, onHide, onShow, onVisibleChange, overlaid, placement, position, size, unfoldable, visible } = _a, rest = tslib_es6.__rest(_a, ["children", "as", "className", "colorScheme", "narrow", "onHide", "onShow", "onVisibleChange", "overlaid", "placement", "position", "size", "unfoldable", "visible"]);
    const sidebarRef = React.useRef(null);
    const forkedRef = useForkedRef.useForkedRef(ref, sidebarRef);
    const [inViewport, setInViewport] = React.useState();
    const [mobile, setMobile] = React.useState(false);
    const [visibleMobile, setVisibleMobile] = React.useState(false);
    const [visibleDesktop, setVisibleDesktop] = React.useState(visible !== undefined ? visible : overlaid ? false : true);
    React.useEffect(() => {
        sidebarRef.current && setMobile(isOnMobile(sidebarRef.current));
        visible !== undefined && handleVisibleChange(visible);
    }, [visible]);
    React.useEffect(() => {
        inViewport !== undefined && onVisibleChange && onVisibleChange(inViewport);
        !inViewport && onHide && onHide();
        inViewport && onShow && onShow();
    }, [inViewport]);
    React.useEffect(() => {
        mobile && setVisibleMobile(false);
    }, [mobile]);
    React.useEffect(() => {
        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', () => {
            sidebarRef.current && setInViewport(isInViewport.default(sidebarRef.current));
        });
        return () => {
            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', () => {
                sidebarRef.current && setInViewport(isInViewport.default(sidebarRef.current));
            });
        };
    });
    const handleVisibleChange = (visible) => {
        if (mobile) {
            setVisibleMobile(visible);
            return;
        }
        setVisibleDesktop(visible);
    };
    const handleHide = () => {
        handleVisibleChange(false);
    };
    const handleResize = () => {
        sidebarRef.current && setMobile(isOnMobile(sidebarRef.current));
        sidebarRef.current && setInViewport(isInViewport.default(sidebarRef.current));
    };
    const handleKeyup = (event) => {
        if (mobile &&
            sidebarRef.current &&
            !sidebarRef.current.contains(event.target)) {
            handleHide();
        }
    };
    const handleClickOutside = (event) => {
        if (mobile &&
            sidebarRef.current &&
            !sidebarRef.current.contains(event.target)) {
            handleHide();
        }
    };
    const handleOnClick = (event) => {
        const 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, Object.assign({ className: index.default('sidebar', {
                [`sidebar-${colorScheme}`]: colorScheme,
                'sidebar-narrow': narrow,
                'sidebar-overlaid': overlaid,
                [`sidebar-${placement}`]: placement,
                [`sidebar-${position}`]: position,
                [`sidebar-${size}`]: size,
                'sidebar-narrow-unfoldable': unfoldable,
                show: (mobile && visibleMobile) || (overlaid && visibleDesktop),
                hide: visibleDesktop === false && !mobile && !overlaid,
            }, 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 = {
    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';

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