@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
65 lines (64 loc) • 4.15 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';
import { PlusIcon } from 'lucide-react';
import { getItemTextLabel } from './comboboxUtils';
import { useFilteredItems, ComboboxItem, RESIZABLE_VIRTUALIZED_SCROLL_CLASS, } from '../ui/combobox';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
export function VirtualizedList({ open, virtualizerRef, showItemTooltip, renderCheckboxIndicator, renderItemLabel, }) {
const filteredItems = useFilteredItems();
const scrollElementRef = React.useRef(null);
const virtualizer = useVirtualizer({
enabled: open,
count: filteredItems.length,
getScrollElement: () => scrollElementRef.current,
estimateSize: () => 32,
overscan: 20,
paddingStart: 4,
paddingEnd: 4,
scrollPaddingEnd: 0,
scrollPaddingStart: 0,
});
React.useImperativeHandle(virtualizerRef, () => virtualizer);
const handleScrollElementRef = React.useCallback((element) => {
scrollElementRef.current = element;
if (element) {
virtualizer.measure();
}
}, [virtualizer]);
const totalSize = virtualizer.getTotalSize();
if (!filteredItems.length) {
return null;
}
return (_jsx("div", { role: "presentation", ref: handleScrollElementRef, tabIndex: -1, className: `twa:h-[min(22rem,var(--total-size))] twa:max-h-(--available-height) twa:scroll-p-2 twa:overflow-y-auto twa:overflow-x-hidden twa:overscroll-contain twa:outline-none ${RESIZABLE_VIRTUALIZED_SCROLL_CLASS}`, style: { '--total-size': `${totalSize}px` }, children: _jsx("div", { role: "presentation", className: "twa:relative twa:w-full twa:p-1", style: { height: totalSize }, children: virtualizer.getVirtualItems().map((virtualItem) => {
const item = filteredItems[virtualItem.index];
if (!item) {
return null;
}
const isUncreatedCreatable = item.creatable && !item.created;
const itemText = getItemTextLabel(item);
const tooltipText = showItemTooltip && itemText != null
? isUncreatedCreatable
? `Create "${itemText}"`
: itemText
: undefined;
let label = isUncreatedCreatable ? `Create "${item.label}"` : item.label;
if (label && typeof label === 'object') {
if (Object.prototype.hasOwnProperty.call(label, 'toString') &&
typeof label.toString === 'function') {
label = label.toString();
}
}
const itemLabel = renderItemLabel ? (renderItemLabel(label, item)) : (_jsx("span", { className: "twa:min-w-0 twa:flex-1 twa:truncate", children: label }));
const itemContent = isUncreatedCreatable ? (_jsxs(_Fragment, { children: [_jsx(PlusIcon, {}), itemLabel] })) : (itemLabel);
return (_jsx(ComboboxItem, { index: virtualItem.index, "data-index": virtualItem.index, ref: virtualizer.measureElement, value: item, renderCheckboxIndicator: renderCheckboxIndicator, "aria-setsize": filteredItems.length, "aria-posinset": virtualItem.index + 1, "aria-label": itemText ?? undefined, style: {
position: 'absolute',
left: `var(--ab-base-space)`,
right: `var(--ab-base-space)`,
top: 0,
width: 'auto',
height: virtualItem.size,
transform: `translateY(${virtualItem.start}px)`,
}, children: tooltipText != null ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { className: "twa:flex twa:min-w-0 twa:flex-1 twa:items-center twa:gap-2" }), children: itemContent }), _jsx(TooltipContent, { side: "right", children: tooltipText })] })) : (itemContent) }, virtualItem.key));
}) }) }));
}