@coreui/react-pro/dist/esm/components/dropdown/CDropdownToggle.js

UI Components Library for React.js

import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { CButton } from '../button/CButton.js';
import { CDropdownContext } from './CDropdownContext.js';
import { triggerPropType } from '../../props.js';

const CDropdownToggle = (_a) => {
    var { children, caret = true, custom, className, navLink = true, split, splitLabel = 'Toggle Dropdown', trigger = 'click' } = _a, rest = __rest(_a, ["children", "caret", "custom", "className", "navLink", "split", "splitLabel", "trigger"]);
    const { dropdownToggleRef, handleHide, handleShow, variant, visible } = useContext(CDropdownContext);
    const triggers = Object.assign(Object.assign(Object.assign({}, ((trigger === 'click' || trigger.includes('click')) && {
        onClick: (event) => {
            event.preventDefault();
            if (visible) {
                handleHide === null || handleHide === void 0 ? void 0 : handleHide();
            }
            else {
                handleShow === null || handleShow === void 0 ? void 0 : handleShow();
            }
        },
    })), ((trigger === 'focus' || trigger.includes('focus')) && {
        onFocus: () => handleShow === null || handleShow === void 0 ? void 0 : handleShow(),
        onBlur: () => handleHide === null || handleHide === void 0 ? void 0 : handleHide(),
    })), { onKeyDown: (event) => {
            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
                event.preventDefault();
                handleShow === null || handleShow === void 0 ? void 0 : handleShow(event.nativeEvent);
            }
        } });
    const togglerProps = Object.assign({ className: classNames({
            'nav-link': variant === 'nav-item' && navLink,
            'dropdown-toggle': caret,
            'dropdown-toggle-split': split,
            show: visible,
        }, className), 'aria-expanded': visible }, (!rest.disabled && Object.assign({}, triggers)));
    if (custom && React.isValidElement(children)) {
        return (React.createElement(React.Fragment, null, React.cloneElement(children, Object.assign(Object.assign({ 'aria-expanded': visible }, (!rest.disabled && Object.assign({}, triggers))), { ref: dropdownToggleRef }))));
    }
    if (variant === 'nav-item' && navLink) {
        return (React.createElement("a", Object.assign({ href: "#" }, togglerProps, { role: "button" }, rest, { ref: dropdownToggleRef }), children));
    }
    return (React.createElement(CButton, Object.assign({}, togglerProps, { tabIndex: 0 }, rest, { ref: dropdownToggleRef }),
        children,
        split && React.createElement("span", { className: "visually-hidden" }, splitLabel)));
};
CDropdownToggle.propTypes = {
    caret: PropTypes.bool,
    children: PropTypes.node,
    className: PropTypes.string,
    custom: PropTypes.bool,
    split: PropTypes.bool,
    splitLabel: PropTypes.string,
    trigger: triggerPropType,
};
CDropdownToggle.displayName = 'CDropdownToggle';

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