@coreui/react-pro/dist/esm/components/multi-select/CMultiSelectOptions.js

UI Components Library for React.js

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { CElementCover } from '../element-cover/CElementCover.js';
import { CVirtualScroller } from '../virtual-scroller/CVirtualScroller.js';
import { getNextSibling } from '../../utils/getNextSibling.js';
import getPreviousSibling from '../../utils/getPreviousSibling.js';

const CMultiSelectOptions = forwardRef(({ loading, onKeyDown, onOptionOnClick, options, optionsMaxHeight, optionsStyle, optionsTemplate, optionsGroupsTemplate, searchNoResultsLabel, selected, virtualScroller, visibleItems = 10, }, ref) => {
    const handleKeyDown = (event, option) => {
        if (event.code === 'Space' || event.key === 'Enter') {
            event.preventDefault();
            onOptionOnClick === null || onOptionOnClick === void 0 ? void 0 : onOptionOnClick(option);
        }
        if (event.key === 'Down' || event.key === 'ArrowDown') {
            event.preventDefault();
            const target = event.target;
            const next = getNextSibling(target, '.form-multi-select-option');
            next && next.focus();
        }
        if (event.key === 'Up' || event.key === 'ArrowUp') {
            event.preventDefault();
            const target = event.target;
            const prev = getPreviousSibling(target, '.form-multi-select-option');
            prev && prev.focus();
        }
    };
    const createOptions = (options) => options.length > 0 ? (options.map((option, index) => 'value' in option ? (React.createElement("div", { className: classNames('form-multi-select-option', {
            'form-multi-select-option-with-checkbox': optionsStyle === 'checkbox',
            'form-multi-selected': selected.some((_option) => _option.value === option.value),
            disabled: option.disabled,
        }), key: index, onClick: () => onOptionOnClick && onOptionOnClick(option), onKeyDown: (event) => handleKeyDown(event, option), tabIndex: 0, role: "option", "aria-selected": selected.some((_option) => _option.value === option.value), "aria-disabled": Boolean(option.disabled) }, optionsTemplate ? optionsTemplate(option) : option.label)) : (React.createElement("div", { className: "form-multi-select-optgroup-label", key: index }, optionsGroupsTemplate ? optionsGroupsTemplate(option) : option.label)))) : (React.createElement("div", { className: "form-multi-select-options-empty" }, searchNoResultsLabel));
    return (React.createElement(React.Fragment, null,
        virtualScroller ? (React.createElement(CVirtualScroller, { className: "form-multi-select-options", onKeyDown: onKeyDown, visibleItems: visibleItems, ref: ref }, createOptions(options))) : (React.createElement("div", Object.assign({ className: "form-multi-select-options", onKeyDown: onKeyDown }, (optionsMaxHeight !== 'auto' && {
            style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
        }), { ref: ref }), createOptions(options))),
        loading && React.createElement(CElementCover, null)));
});
CMultiSelectOptions.propTypes = {
    loading: PropTypes.bool,
    onOptionOnClick: PropTypes.func,
    options: PropTypes.array.isRequired,
    optionsMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    optionsStyle: PropTypes.oneOf(['checkbox', 'text']),
    optionsTemplate: PropTypes.func,
    optionsGroupsTemplate: PropTypes.func,
    searchNoResultsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    virtualScroller: PropTypes.bool,
    visibleItems: PropTypes.number,
};
CMultiSelectOptions.displayName = 'CMultiSelectOptions';

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