@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
87 lines (86 loc) • 5.39 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from '../ui/select';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
import { cn } from '../../lib/utils';
import React from 'react';
const getItemTitle = (label, value) => {
if (typeof label === 'string')
return label;
if (typeof label === 'number')
return String(label);
return String(value);
};
const isItemEqualToValue = (itemValue, value) => {
return itemValue === value;
};
const NewSelect = (props) => {
const isInvalid = !!props.invalid;
let allItems = [];
let groups = [];
if ('groups' in props) {
groups = props.groups;
allItems = groups.flatMap((group) => group.items);
}
else {
groups = [
{
label: null,
items: props.items,
},
];
allItems = props.items;
}
const maxLabelLength = allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string' || typeof item.label === 'number'
? String(item.label).length
: typeof item.tooltip === 'string' || typeof item.tooltip === 'number'
? String(item.tooltip).length
: 0), 0);
const contentStyle = {
width: `max(${maxLabelLength + (props.extraWidthChars ?? 3)}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
};
const renderValueProp = props.renderValue;
const renderValueChild = renderValueProp
? (rawValue) => {
if (props.multiple) {
const values = Array.isArray(rawValue) ? rawValue : rawValue == null ? [] : [rawValue];
const selectedItems = values
.map((v) => allItems.find((item) => isItemEqualToValue(item.value, v)))
.filter((item) => item !== undefined);
return renderValueProp(selectedItems);
}
const item = allItems.find((i) => isItemEqualToValue(i.value, rawValue));
return item !== undefined ? renderValueProp(item) : undefined;
}
: undefined;
return (_jsxs(Select, { multiple: props.multiple, open: props.open, onOpenChange: props.onOpenChange, isItemEqualToValue: isItemEqualToValue, items: allItems, disabled: props.disabled, value: props.value, onValueChange: props.onValueChange, "aria-label": props.ariaLabel, defaultValue: props.defaultValue, children: [_jsx(SelectTrigger, { size: props.size === 'small' ? 'sm' : 'default', className: cn('twa:max-w-80 ab-Select', props.className), "aria-invalid": isInvalid, "aria-label": props.ariaLabel, "data-name": props['data-name'], icon: props.chevronIcon, onMouseDown: props.stopMouseDownPropagation
? (e) => {
e.stopPropagation();
e.nativeEvent?.stopPropagation?.();
}
: undefined, onClick: props.stopMouseDownPropagation
? (e) => {
e.stopPropagation();
e.nativeEvent?.stopPropagation?.();
}
: undefined, children: _jsx(SelectValue, { placeholder: props.placeholder, className: 'twa:truncate twa:block!', children: renderValueChild }) }), _jsx(SelectContent, { "aria-label": props.ariaLabel ? `${props.ariaLabel} content` : undefined, alignItemWithTrigger: false, container: props.container, stopMouseDownPropagation: props.stopMouseDownPropagation, style: contentStyle, children: groups.map((group, index) => {
return (_jsxs(React.Fragment, { children: [_jsxs(SelectGroup, { children: [group.label && _jsx(SelectLabel, { children: group.label }), group.items.map((item) => {
const itemTitle = getItemTitle(item.label, item.value);
const tooltipText = props.showItemTooltip ? item.tooltip ?? itemTitle : undefined;
const itemContent = item.label;
const itemElement = (_jsx(SelectItem, { value: item.value, "aria-label": item.ariaLabel ||
itemTitle ||
(typeof item.tooltip === 'string' ? item.tooltip : undefined) ||
undefined, className: 'ab-Select-Row', disabled: item.disabled, children: itemContent }, item.value));
if (tooltipText != null) {
return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: itemElement, children: itemContent }), _jsx(TooltipContent, { side: "right", children: tooltipText })] }, item.value));
}
return itemElement;
})] }), index < groups.length - 1 && _jsx(SelectSeparator, {})] }, typeof group.label === 'string' ? group.label : `${index}`));
}) })] }));
};
export const SingleSelect = (props) => {
return _jsx(NewSelect, { ...props, multiple: false });
};
export const MultiSelect = (props) => {
return _jsx(NewSelect, { ...props, multiple: true });
};