fix language selector

This commit is contained in:
Amruth Pillai
2024-03-10 11:12:15 +01:00
parent 7ceb0f6e39
commit 53dfd4cb09
3 changed files with 35 additions and 30 deletions

View File

@ -7,6 +7,7 @@ import {
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@ -40,36 +41,40 @@ export const LocaleCombobox = ({ value, onValueChange }: Props) => {
onValueChange={setSearch}
placeholder={t`Search for a language`}
/>
<CommandEmpty>{t`No results found`}</CommandEmpty>
<CommandGroup>
<ScrollArea orientation="vertical">
<div className="max-h-60">
{options.map(({ original }) => (
<CommandItem
key={original.locale}
value={original.locale.trim().toLowerCase()}
onSelect={async (selectedValue) => {
const result = options.find(
({ original }) => original.locale.trim().toLowerCase() === selectedValue,
);
<CommandList>
<CommandEmpty>{t`No results found`}</CommandEmpty>
<CommandGroup>
<ScrollArea orientation="vertical">
<div className="max-h-60">
{options.map(({ original }) => (
<CommandItem
disabled={false}
key={original.locale}
value={original.locale.trim()}
onSelect={async (selectedValue) => {
const result = options.find(
({ original }) => original.locale.trim() === selectedValue,
);
if (!result) return null;
if (!result) return null;
onValueChange(result.original.locale);
}}
>
<Check
className={cn(
"mr-2 size-4 opacity-0",
value === original.locale && "opacity-100",
)}
/>
{original.name} <span className="ml-1 text-xs opacity-50">({original.locale})</span>
</CommandItem>
))}
</div>
</ScrollArea>
</CommandGroup>
onValueChange(result.original.locale);
}}
>
<Check
className={cn(
"mr-2 size-4 opacity-0",
value === original.locale && "opacity-100",
)}
/>
{original.name}{" "}
<span className="ml-1 text-xs opacity-50">({original.locale})</span>
</CommandItem>
))}
</div>
</ScrollArea>
</CommandGroup>
</CommandList>
</Command>
);
};

View File

@ -291,7 +291,7 @@ export const ImportDialog = () => {
<DialogFooter>
<AnimatePresence presenceAffectsLayout>
{(!validationResult ?? false) && (
{(!validationResult || false) && (
<Button type="button" onClick={onValidate}>
{t`Validate`}
</Button>