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
+33 -28
View File
@@ -7,6 +7,7 @@ import {
CommandGroup, CommandGroup,
CommandInput, CommandInput,
CommandItem, CommandItem,
CommandList,
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
@@ -40,36 +41,40 @@ export const LocaleCombobox = ({ value, onValueChange }: Props) => {
onValueChange={setSearch} onValueChange={setSearch}
placeholder={t`Search for a language`} placeholder={t`Search for a language`}
/> />
<CommandEmpty>{t`No results found`}</CommandEmpty> <CommandList>
<CommandGroup> <CommandEmpty>{t`No results found`}</CommandEmpty>
<ScrollArea orientation="vertical"> <CommandGroup>
<div className="max-h-60"> <ScrollArea orientation="vertical">
{options.map(({ original }) => ( <div className="max-h-60">
<CommandItem {options.map(({ original }) => (
key={original.locale} <CommandItem
value={original.locale.trim().toLowerCase()} disabled={false}
onSelect={async (selectedValue) => { key={original.locale}
const result = options.find( value={original.locale.trim()}
({ original }) => original.locale.trim().toLowerCase() === selectedValue, onSelect={async (selectedValue) => {
); const result = options.find(
({ original }) => original.locale.trim() === selectedValue,
);
if (!result) return null; if (!result) return null;
onValueChange(result.original.locale); onValueChange(result.original.locale);
}} }}
> >
<Check <Check
className={cn( className={cn(
"mr-2 size-4 opacity-0", "mr-2 size-4 opacity-0",
value === original.locale && "opacity-100", value === original.locale && "opacity-100",
)} )}
/> />
{original.name} <span className="ml-1 text-xs opacity-50">({original.locale})</span> {original.name}{" "}
</CommandItem> <span className="ml-1 text-xs opacity-50">({original.locale})</span>
))} </CommandItem>
</div> ))}
</ScrollArea> </div>
</CommandGroup> </ScrollArea>
</CommandGroup>
</CommandList>
</Command> </Command>
); );
}; };
@@ -291,7 +291,7 @@ export const ImportDialog = () => {
<DialogFooter> <DialogFooter>
<AnimatePresence presenceAffectsLayout> <AnimatePresence presenceAffectsLayout>
{(!validationResult ?? false) && ( {(!validationResult || false) && (
<Button type="button" onClick={onValidate}> <Button type="button" onClick={onValidate}>
{t`Validate`} {t`Validate`}
</Button> </Button>
+1 -1
View File
@@ -108,7 +108,7 @@ export const CommandItem = forwardRef<
<CommandPrimitive.Item <CommandPrimitive.Item
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm outline-none aria-selected:bg-secondary/40 aria-selected:text-secondary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm outline-none aria-selected:bg-secondary/40 aria-selected:text-secondary-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
className, className,
)} )}
{...props} {...props}