@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
104 lines (103 loc) • 6.22 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
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";
import { VuiText } from "../typography/Text";
import { VuiTextColor } from "../typography/TextColor";
// https://github.com/typescript-eslint/typescript-eslint/issues/4062
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
export const VuiSearchSelect = (_a) => {
var { isOpen, setIsOpen, anchorSide, options, children, title, searchValue, setSearchValue, asyncSearch, selectedOptions, onSelect, isMultiSelect = true } = _a, rest = __rest(_a, ["isOpen", "setIsOpen", "anchorSide", "options", "children", "title", "searchValue", "setSearchValue", "asyncSearch", "selectedOptions", "onSelect", "isMultiSelect"]);
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;
});
// Update popover position when selected options change (height might change)
useEffect(() => {
if (isOpen) {
// Small delay to ensure DOM has updated before recalculating position
const timer = setTimeout(() => {
// Trigger a window resize event to force popover position recalculation
window.dispatchEvent(new Event("resize"));
}, 0);
return () => clearTimeout(timer);
}
}, [selectedOptions, isOpen]);
return (_jsxs(VuiPopover, Object.assign({ isOpen: isOpen, setIsOpen: (isOpen) => {
setIsOpen(isOpen);
if (!isOpen)
setSearchValue("");
}, button: children, header: title, anchorSide: anchorSide }, { children: [_jsxs("div", Object.assign({ className: "vuiSearchSelect__search" }, { children: [_jsx(VuiTextInput, { fullWidth: true, 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);
}, "data-testid": rest["data-testid"] }), _jsx(VuiSpacer, { size: "xxs" })] })), visibleOptions.length > 0 || (asyncSearch === null || asyncSearch === void 0 ? void 0 : asyncSearch.isSearching) ? (_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 })) : searchValue.trim().length > 0 ? (_jsx(VuiText, Object.assign({ className: "vuiSearchSelect__emptyMessage", align: "center" }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: "No results found" })) }) }))) : (_jsx(VuiText, Object.assign({ className: "vuiSearchSelect__emptyMessage", align: "center" }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: "No options available" })) }) })))] })));
};