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

UI Components Library for React.js

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

var CMultiSelectOptions = forwardRef(function (_a, ref) {
    var handleOptionOnClick = _a.handleOptionOnClick, loading = _a.loading, options = _a.options, optionsMaxHeight = _a.optionsMaxHeight, optionsStyle = _a.optionsStyle, optionsTemplate = _a.optionsTemplate, optionsGroupsTemplate = _a.optionsGroupsTemplate, searchNoResultsLabel = _a.searchNoResultsLabel, selected = _a.selected, virtualScroller = _a.virtualScroller, _b = _a.visibleItems, visibleItems = _b === void 0 ? 10 : _b;
    var handleKeyDown = function (event, option) {
        if (event.code === 'Space' || event.key === 'Enter') {
            event.preventDefault();
            handleOptionOnClick && handleOptionOnClick(option);
        }
        if (event.key === 'Down' || event.key === 'ArrowDown') {
            event.preventDefault();
            var target = event.target;
            var next = getNextSibling(target, '.form-multi-select-option');
            next && next.focus();
        }
        if (event.key === 'Up' || event.key === 'ArrowUp') {
            event.preventDefault();
            var target = event.target;
            var prev = getPreviousSibling(target, '.form-multi-select-option');
            prev && prev.focus();
        }
    };
    var createOptions = function (options) {
        return options.length > 0 ? (options.map(function (option, index) {
            return '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(function (_option) { return _option.value === option.value; }),
                    disabled: option.disabled,
                }), key: index, onClick: function () { return handleOptionOnClick && handleOptionOnClick(option); }, onKeyDown: function (event) { return handleKeyDown(event, option); }, tabIndex: 0 }, 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", visibleItems: visibleItems, ref: ref }, createOptions(options))) : (React.createElement("div", __assign({ className: "form-multi-select-options" }, (optionsMaxHeight !== 'auto' && {
            style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
        }), { ref: ref }), createOptions(options))),
        loading && React.createElement(CElementCover, null)));
});
CMultiSelectOptions.propTypes = {
    handleOptionOnClick: PropTypes.func,
    loading: PropTypes.bool,
    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