@coreui/react-pro
Version:
UI Components Library for React.js
65 lines (62 loc) • 4.04 kB
JavaScript
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';
import { isOptionSelected, isOptionDisabled, getOptionLabel, highlightSubstring } from './utils.js';
const CAutocompleteOptions = 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(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(target, '.autocomplete-option:not(.disabled):not(:disabled)');
if (prev) {
prev.focus();
}
}
};
const createOption = (option, index) => (React.createElement("div", { className: classNames('autocomplete-option', {
disabled: isOptionDisabled(option),
selected: isOptionSelected(option, selected),
}), key: index, onClick: () => onOptionClick && onOptionClick(option), onKeyDown: (event) => handleKeyDown(event, option), tabIndex: 0 }, optionsTemplate ? (optionsTemplate(option)) : highlightOptionsOnSearch ? (React.createElement("div", { dangerouslySetInnerHTML: {
__html: highlightSubstring(getOptionLabel(option), searchValue),
} })) : (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, { 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, 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';
export { CAutocompleteOptions };
//# sourceMappingURL=CAutocompleteOptions.js.map