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

UI Components Library for React.js

'use strict';

var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var PropTypes = require('prop-types');
var index = require('../../node_modules/classnames/index.js');
var CElementCover = require('../element-cover/CElementCover.js');
var CVirtualScroller = require('../virtual-scroller/CVirtualScroller.js');
var utils = require('./utils.js');

var CMultiSelectOptions = React.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 = utils.getNextSibling(target, '.form-multi-select-option');
            next && next.focus();
        }
        if (event.key === 'Up' || event.key === 'ArrowUp') {
            event.preventDefault();
            var target = event.target;
            var prev = utils.getPreviousSibling(target, '.form-multi-select-option');
            prev && prev.focus();
        }
    };
    var createOptions = function (options) {
        return options.length > 0 ? (options.map(function (option, index$1) {
            return 'value' in option ? (React.createElement("div", { className: index.default('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$1, 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$1 }, 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.CVirtualScroller, { className: "form-multi-select-options", visibleItems: visibleItems, ref: ref }, createOptions(options))) : (React.createElement("div", tslib_es6.__assign({ className: "form-multi-select-options" }, (optionsMaxHeight !== 'auto' && {
            style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
        }), { ref: ref }), createOptions(options))),
        loading && React.createElement(CElementCover.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';

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