@coreui/react-pro/dist/cjs/components/autocomplete/CAutocompleteOptions.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('../../_virtual/index.js');
var CElementCover = require('../element-cover/CElementCover.js');
var CVirtualScroller = require('../virtual-scroller/CVirtualScroller.js');
var getNextSibling = require('../../utils/getNextSibling.js');
var getPreviousSibling = require('../../utils/getPreviousSibling.js');
var utils = require('./utils.js');

var CAutocompleteOptions = React.forwardRef(function (_a, ref) {
    var highlightOptionsOnSearch = _a.highlightOptionsOnSearch, loading = _a.loading, onOptionClick = _a.onOptionClick, options = _a.options, optionsMaxHeight = _a.optionsMaxHeight, optionsTemplate = _a.optionsTemplate, optionsGroupsTemplate = _a.optionsGroupsTemplate, searchNoResultsLabel = _a.searchNoResultsLabel, searchValue = _a.searchValue, 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();
            onOptionClick === null || onOptionClick === void 0 ? void 0 : onOptionClick(option);
        }
        if (event.key === 'Down' || event.key === 'ArrowDown') {
            event.preventDefault();
            var target = event.target;
            var next = getNextSibling.getNextSibling(target, '.autocomplete-option:not(.disabled):not(:disabled)');
            if (next) {
                next.focus();
            }
        }
        if (event.key === 'Up' || event.key === 'ArrowUp') {
            event.preventDefault();
            var target = event.target;
            var prev = getPreviousSibling.default(target, '.autocomplete-option:not(.disabled):not(:disabled)');
            if (prev) {
                prev.focus();
            }
        }
    };
    var createOption = function (option, index$1) { return (React.createElement("div", { className: index.default('autocomplete-option', {
            disabled: utils.isOptionDisabled(option),
            selected: utils.isOptionSelected(option, selected),
        }), key: index$1, onClick: function () { return onOptionClick && onOptionClick(option); }, onKeyDown: function (event) { return handleKeyDown(event, option); }, tabIndex: 0 }, optionsTemplate ? (optionsTemplate(option)) : highlightOptionsOnSearch ? (React.createElement("div", { dangerouslySetInnerHTML: {
            __html: utils.highlightSubstring(utils.getOptionLabel(option), searchValue),
        } })) : (utils.getOptionLabel(option)))); };
    var createOptions = function (options) {
        return options.length > 0 ? (options.map(function (option, index) {
            return typeof option !== 'string' && 'options' in option ? (React.createElement(React.Fragment, { key: index },
                React.createElement("div", { className: "autocomplete-optgroup-label" }, optionsGroupsTemplate
                    ? optionsGroupsTemplate(option)
                    : option.label),
                option.options.map(function (option, index) { return createOption(option, index); }))) : (createOption(option, index));
        })) : (React.createElement("div", { className: "autocomplete-options-empty" }, searchNoResultsLabel));
    };
    return (React.createElement(React.Fragment, null,
        virtualScroller ? (React.createElement(CVirtualScroller.CVirtualScroller, { className: "autocomplete-options", visibleItems: visibleItems, role: "listbox", ref: ref }, createOptions(options))) : (React.createElement("div", tslib_es6.__assign({ className: "autocomplete-options" }, (optionsMaxHeight !== 'auto' && {
            style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
        }), { role: "listbox", ref: ref }), createOptions(options))),
        loading && React.createElement(CElementCover.CElementCover, null)));
});
CAutocompleteOptions.propTypes = {
    loading: PropTypes.bool,
    onOptionClick: PropTypes.func,
    options: PropTypes.array.isRequired,
    optionsMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    optionsTemplate: PropTypes.func,
    optionsGroupsTemplate: PropTypes.func,
    searchNoResultsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    virtualScroller: PropTypes.bool,
    visibleItems: PropTypes.number,
};
CAutocompleteOptions.displayName = 'CAutocompleteOptions';

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