@coreui/react-pro/dist/cjs/components/picker/CPicker.js

UI Components Library for React.js

'use strict';

var React = require('react');
var PropTypes = require('prop-types');
var index = require('../../_virtual/index.js');
var CConditionalPortal = require('../conditional-portal/CConditionalPortal.js');
var CFocusTrap = require('../focus-trap/CFocusTrap.js');
require('../../node_modules/tslib/tslib.es6.js');
var usePopper = require('../../hooks/usePopper.js');
var isRTL = require('../../utils/isRTL.js');
var useForkedRef = require('../../hooks/useForkedRef.js');

const CPicker = React.forwardRef(({ children, className, container = 'dropdown', disabled, dropdownClassNames, footer, footerContent, onHide, onShow, portal = true, toggler, visible = false, }, ref) => {
    const pickerRef = React.useRef(null);
    const pickerForkedRef = useForkedRef.useForkedRef(ref, pickerRef);
    const dropdownRef = React.useRef(null);
    const togglerRef = React.useRef(null);
    const { initPopper, destroyPopper } = usePopper.usePopper();
    const [_visible, setVisible] = React.useState(visible);
    const popperConfig = {
        placement: (isRTL.default(pickerRef.current) ? 'bottom-end' : 'bottom-start'),
        modifiers: [
            {
                name: 'preventOverflow',
                options: {
                    boundary: 'clippingParents',
                },
            },
            {
                name: 'offset',
                options: {
                    offset: [0, 2],
                },
            },
        ],
    };
    React.useEffect(() => {
        setVisible(visible);
    }, [visible]);
    React.useEffect(() => {
        if (container !== 'inline' && _visible) {
            onShow === null || onShow === void 0 ? void 0 : onShow();
            window.addEventListener('mouseup', handleMouseUp);
            window.addEventListener('keyup', handleKeyUp);
            if (togglerRef.current && dropdownRef.current) {
                initPopper(togglerRef.current, dropdownRef.current, popperConfig);
            }
        }
        return () => {
            onHide === null || onHide === void 0 ? void 0 : onHide();
            window.removeEventListener('mouseup', handleMouseUp);
            window.removeEventListener('keyup', handleKeyUp);
            destroyPopper();
        };
    }, [_visible]);
    const handleKeyUp = (event) => {
        if (event.key === 'Escape') {
            setVisible(false);
        }
    };
    const handleMouseUp = (event) => {
        if (pickerRef.current && pickerRef.current.contains(event.target)) {
            return;
        }
        if (dropdownRef.current && dropdownRef.current.contains(event.target)) {
            return;
        }
        setVisible(false);
    };
    switch (container) {
        case 'inline': {
            return (React.createElement("div", { className: index.default('picker', className), ref: pickerForkedRef }, children));
        }
        default: {
            return (React.createElement(CFocusTrap.CFocusTrap, Object.assign({ active: _visible }, (portal && { additionalContainer: dropdownRef })),
                React.createElement("div", { className: index.default(className, {
                        show: _visible,
                    }), onClick: () => !disabled && setVisible(true), ref: pickerForkedRef },
                    toggler &&
                        React.isValidElement(toggler) &&
                        React.cloneElement(toggler, {
                            ref: togglerRef,
                        }),
                    React.createElement(CConditionalPortal.CConditionalPortal, { portal: portal },
                        React.createElement("div", { className: index.default(dropdownClassNames, {
                                show: portal && _visible,
                            }), ref: dropdownRef },
                            children,
                            footer && footerContent)))));
        }
    }
});
CPicker.displayName = 'CPicker';
CPicker.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    container: PropTypes.oneOf(['dropdown', 'inline']),
    disabled: PropTypes.bool,
    dropdownClassNames: PropTypes.string,
    footer: PropTypes.bool,
    footerContent: PropTypes.node,
    onHide: PropTypes.func,
    onShow: PropTypes.func,
    portal: PropTypes.bool,
    toggler: PropTypes.node,
    visible: PropTypes.bool,
};

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