@coreui/react-pro/dist/cjs/components/autocomplete/CAutocompleteOptions.js

UI Components Library for React.js

'use strict';

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');

const CAutocompleteOptions = React.forwardRef(({ highlightOptionsOnSearch, loading, onOptionClick, options, optionsMaxHeight, optionsTemplate, optionsGroupsTemplate, searchNoResultsLabel, searchValue, selected, virtualScroller, visibleItems = 10, }, ref) => {
    const handleKeyDown = (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();
            const target = event.target;
            const next = getNextSibling.getNextSibling(target, '.autocomplete-option:not(.disabled):not(:disabled)');
            if (next) {
                next.focus();
            }
        }
        if (event.key === 'Up' || event.key === 'ArrowUp') {
            event.preventDefault();
            const target = event.target;
            const prev = getPreviousSibling.default(target, '.autocomplete-option:not(.disabled):not(:disabled)');
            if (prev) {
                prev.focus();
            }
        }
    };
    const createOption = (option, index$1) => (React.createElement("div", { className: index.default('autocomplete-option', {
            disabled: utils.isOptionDisabled(option),
            selected: utils.isOptionSelected(option, selected),
        }), key: index$1, onClick: () => onOptionClick && onOptionClick(option), onKeyDown: (event) => handleKeyDown(event, option), tabIndex: 0 }, optionsTemplate ? (optionsTemplate(option)) : highlightOptionsOnSearch ? (React.createElement("div", { dangerouslySetInnerHTML: {
            __html: utils.highlightSubstring(utils.getOptionLabel(option), searchValue),
        } })) : (utils.getOptionLabel(option))));
    const createOptions = (options) => options.length > 0 ? (options.map((option, index) => 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((option, index) => 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", Object.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