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

UI Components Library for React.js

import React, { forwardRef, useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../node_modules/classnames/index.js';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import { usePopper } from '../../hooks/usePopper.js';
import isRTL from '../../utils/isRTL.js';

var CPicker = forwardRef(function (_a, ref) {
    var children = _a.children, className = _a.className, _b = _a.container, container = _b === void 0 ? 'dropdown' : _b, disabled = _a.disabled, dropdownClassNames = _a.dropdownClassNames, footer = _a.footer, footerContent = _a.footerContent, onHide = _a.onHide, onShow = _a.onShow, toggler = _a.toggler, visible = _a.visible;
    var pickerRef = useRef(null);
    var pickerForkedRef = useForkedRef(ref, pickerRef);
    var dropdownRef = useRef(null);
    var togglerRef = useRef(null);
    var _c = usePopper(), initPopper = _c.initPopper, destroyPopper = _c.destroyPopper;
    var _d = useState(visible), _visible = _d[0], setVisible = _d[1];
    var popperConfig = {
        placement: (isRTL(pickerRef.current) ? 'bottom-end' : 'bottom-start'),
        modifiers: [
            {
                name: 'preventOverflow',
                options: {
                    boundary: 'clippingParents',
                },
            },
            {
                name: 'offset',
                options: {
                    offset: [0, 2],
                },
            },
        ],
    };
    useEffect(function () {
        setVisible(visible);
    }, [visible]);
    useEffect(function () {
        if (container !== 'inline' && _visible) {
            onShow && onShow();
            window.addEventListener('mouseup', handleMouseUp);
            window.addEventListener('keyup', handleKeyUp);
            togglerRef.current &&
                dropdownRef.current &&
                initPopper(togglerRef.current, dropdownRef.current, popperConfig);
        }
        return function () {
            onHide && onHide();
            window.removeEventListener('mouseup', handleMouseUp);
            window.removeEventListener('keyup', handleKeyUp);
            destroyPopper();
        };
    }, [_visible]);
    var handleKeyUp = function (event) {
        if (event.key === 'Escape') {
            setVisible(false);
        }
    };
    var handleMouseUp = function (event) {
        if (pickerRef.current && pickerRef.current.contains(event.target)) {
            return;
        }
        setVisible(false);
    };
    switch (container) {
        case 'inline': {
            return (React.createElement("div", { className: classNames('picker', className), ref: pickerForkedRef }, children));
        }
        default: {
            return (React.createElement("div", { className: classNames(className, {
                    show: _visible,
                }), onClick: function () { return !disabled && setVisible(true); }, ref: pickerForkedRef },
                toggler &&
                    React.isValidElement(toggler) &&
                    React.cloneElement(toggler, {
                        ref: togglerRef,
                    }),
                React.createElement("div", { className: dropdownClassNames, 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,
    toggler: PropTypes.node,
    visible: PropTypes.bool,
};

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