This commit is contained in:
Mathew Pareles 2025-01-13 16:09:09 -08:00
parent 52d89e5815
commit 3e5ead2547
3 changed files with 12 additions and 8 deletions

View file

@ -299,7 +299,8 @@ export const VoidCustomSelectBox = <T extends any>({
options,
selectedOption: selectedOption_,
onChangeOption,
getOptionName,
getOptionDropdownName,
getOptionDisplayName,
getOptionsEqual,
className,
arrowTouchesText = true,
@ -310,7 +311,8 @@ export const VoidCustomSelectBox = <T extends any>({
options: T[];
selectedOption?: T;
onChangeOption: (newValue: T) => void;
getOptionName: (option: T) => string;
getOptionDropdownName: (option: T) => string;
getOptionDisplayName: (option: T) => string;
getOptionsEqual: (a: T, b: T) => boolean;
className?: string;
arrowTouchesText?: boolean;
@ -420,9 +422,9 @@ export const VoidCustomSelectBox = <T extends any>({
aria-hidden="true"
>
{options.map((option) => (
<div key={getOptionName(option)} className="flex items-center whitespace-nowrap">
<div key={getOptionDropdownName(option)} className="flex items-center whitespace-nowrap">
<div className="w-4" />
<span className="px-2">{getOptionName(option)}</span>
<span className="px-2">{getOptionDropdownName(option)}</span>
</div>
))}
</div>
@ -437,7 +439,7 @@ export const VoidCustomSelectBox = <T extends any>({
}}
>
<span className={`max-w-[120px] truncate ${arrowTouchesText ? 'mr-1' : ''}`}>
{getOptionName(selectedOption)}
{getOptionDisplayName(selectedOption)}
</span>
<svg
className={`size-3 flex-shrink-0 ${arrowTouchesText ? '' : 'ml-auto'}`}
@ -466,7 +468,7 @@ export const VoidCustomSelectBox = <T extends any>({
>
{options.map((option) => {
const thisOptionIsSelected = getOptionsEqual(option, selectedOption);
const optionName = getOptionName(option);
const optionName = getOptionDropdownName(option);
return (
<div

View file

@ -37,7 +37,8 @@ const ModelSelectBox = ({ options, featureName }: { options: ModelOption[], feat
options={options}
selectedOption={selectedOption}
onChangeOption={onChangeOption}
getOptionName={(option) => option.name}
getOptionDisplayName={(option) => option.selection.modelName}
getOptionDropdownName={(option) => option.name}
getOptionsEqual={(a, b) => optionsEqual([a], [b])}
className={`text-xs text-void-fg-3 px-1`}
matchInputWidth={false}

View file

@ -109,7 +109,8 @@ const AddModelMenu = ({ onSubmit }: { onSubmit: () => void }) => {
options={providerNames}
selectedOption={providerName}
onChangeOption={(pn) => setProviderName(pn)}
getOptionName={(pn) => pn ? displayInfoOfProviderName(pn).title : '(null)'}
getOptionDisplayName={(pn) => pn ? displayInfoOfProviderName(pn).title : '(null)'}
getOptionDropdownName={(pn) => pn ? displayInfoOfProviderName(pn).title : '(null)'}
getOptionsEqual={(a, b) => a === b}
className={`max-w-44 w-full border border-void-border-2 bg-void-bg-1 text-void-fg-3 text-root
py-[4px] px-[6px]