@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
79 lines (78 loc) • 4.22 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { VuiOptionsList } from "../optionsList/OptionsList";
import { VuiPopover } from "../popover/Popover";
import { VuiTextInput } from "../form";
import { VuiSpacer } from "../spacer/Spacer";
import { sortSelectedOptions } from "./sortSelectedOptions";
// https://github.com/typescript-eslint/typescript-eslint/issues/4062
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
export const VuiSearchSelect = ({ children, title, isOpen, setIsOpen, options, searchValue, setSearchValue, asyncSearch, selectedOptions, onSelect, isMultiSelect = true }) => {
const [orderedOptions, setOrderedOptions] = useState([]);
// Async-only. Cache all options in case they get selected.
const [optionsCache, setOptionsCache] = useState({});
const addOptionsToCache = (optionsToAdd) => {
setOptionsCache((prev) => {
const newOptionsCache = Object.assign({}, prev);
optionsToAdd.forEach((option) => {
newOptionsCache[option.value] = option;
});
return newOptionsCache;
});
};
useEffect(() => {
// When the popover is opened, initialize the selected options,
// and sort the options so the selected ones are on top.
if (isOpen) {
if (asyncSearch)
addOptionsToCache(options);
const isAsyncSearchInactive = asyncSearch && !searchValue;
const newOrderedOptions = sortSelectedOptions(selectedOptions, options, isAsyncSearchInactive ? optionsCache : undefined);
setOrderedOptions(newOrderedOptions);
}
}, [isOpen, options]);
const onSelectOption = (value) => {
if (isMultiSelect) {
const updatedSelectedOptions = selectedOptions.concat();
const index = selectedOptions.findIndex((item) => item === value);
if (index === -1) {
// Select item.
updatedSelectedOptions.push(value);
}
else {
// Delect item.
updatedSelectedOptions.splice(index, 1);
}
onSelect(updatedSelectedOptions);
}
else {
if (selectedOptions[0] === value) {
// If the user clicks on the selected option, deselect it.
onSelect([]);
return;
}
onSelect([value]);
}
};
// If onSearchChange is provided, we don't filter the options here because
// we assume the consumer has already filtered them.
const visibleOptions = (asyncSearch === null || asyncSearch === void 0 ? void 0 : asyncSearch.onSearchChange)
? orderedOptions
: orderedOptions.filter((option) => {
if (!searchValue.trim())
return true;
if (option.label.toLowerCase().includes(searchValue.toLowerCase()))
return true;
return false;
});
return (_jsxs(VuiPopover, Object.assign({ isOpen: isOpen, setIsOpen: (isOpen) => {
setIsOpen(isOpen);
if (!isOpen)
setSearchValue("");
}, button: children, header: title }, { children: [_jsxs("div", Object.assign({ className: "vuiSearchSelect__search" }, { children: [_jsx(VuiTextInput, { placeholder: "Search", value: searchValue, onChange: (event) => {
var _a;
const { value } = event.target;
(_a = asyncSearch === null || asyncSearch === void 0 ? void 0 : asyncSearch.onSearchChange) === null || _a === void 0 ? void 0 : _a.call(asyncSearch, value);
setSearchValue(value);
} }), _jsx(VuiSpacer, { size: "xxs" })] })), _jsx(VuiOptionsList, { isSelectable: true, isScrollable: true, onScrollToBottom: asyncSearch === null || asyncSearch === void 0 ? void 0 : asyncSearch.onLazyLoad, onSelectOption: onSelectOption, selected: selectedOptions, options: visibleOptions, isLoading: asyncSearch === null || asyncSearch === void 0 ? void 0 : asyncSearch.isSearching })] })));
};