@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
59 lines (58 loc) • 4.05 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, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from "classnames";
import { VuiOptionsListItem } from "./OptionsListItem";
import { useEffect, useRef } from "react";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiSpinner } from "../spinner/Spinner";
import { VuiText } from "../typography/Text";
import { VuiSpacer } from "../spacer/Spacer";
const SIZE = ["s", "m", "l"];
// https://github.com/typescript-eslint/typescript-eslint/issues/4062
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
export const VuiOptionsList = (_a) => {
var { className, options, onSelectOption, selected, onScrollToBottom, isSelectable = false, isScrollable = false, size = "s", isLoading } = _a, rest = __rest(_a, ["className", "options", "onSelectOption", "selected", "onScrollToBottom", "isSelectable", "isScrollable", "size", "isLoading"]);
const isScrolledToBottomRef = useRef(false);
const scrollableContainerRef = useRef(null);
useEffect(() => {
const scrollableContainer = scrollableContainerRef.current;
const onScroll = () => {
const newIsScrolledToBottom = scrollableContainerRef.current
? Math.abs(scrollableContainerRef.current.scrollHeight -
scrollableContainerRef.current.clientHeight -
scrollableContainerRef.current.scrollTop) < 10
: true;
// Only dispatch onScrollToBottom once the threshold is crossed.
if (!isScrolledToBottomRef.current && newIsScrolledToBottom) {
onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom();
}
isScrolledToBottomRef.current = newIsScrolledToBottom;
};
scrollableContainer === null || scrollableContainer === void 0 ? void 0 : scrollableContainer.addEventListener("scroll", onScroll);
return () => {
scrollableContainer === null || scrollableContainer === void 0 ? void 0 : scrollableContainer.removeEventListener("scroll", onScroll);
};
}, []);
const classes = classNames("vuiOptionsList", `vuiOptionsList--${size}`, {
"vuiOptionsList--scrollable": isScrollable
}, className);
return (_jsxs("div", Object.assign({ className: classes }, rest, { ref: scrollableContainerRef }, { children: [options.map((_a) => {
var { value, label, onClick } = _a, rest = __rest(_a, ["value", "label", "onClick"]);
const isSelected = Array.isArray(selected) ? selected.includes(value) : value === selected;
return (_jsx(VuiOptionsListItem, Object.assign({ value: value, label: label, onClick: () => {
onClick === null || onClick === void 0 ? void 0 : onClick(value);
onSelectOption === null || onSelectOption === void 0 ? void 0 : onSelectOption(value);
}, isSelectable: isSelectable, isSelected: isSelected }, rest), label));
}), isLoading && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xxs" }), _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiSpinner, { size: "xs" }) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: "Loading options\u2026" }) }) }))] }))] }))] })));
};