mirror of
https://github.com/voideditor/void
synced 2026-05-24 09:58:23 +00:00
dropdown
This commit is contained in:
parent
52d89e5815
commit
3e5ead2547
3 changed files with 12 additions and 8 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
Loading…
Reference in a new issue