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, CommandGroup,
CommandInput, CommandInput,
CommandItem, CommandItem,
CommandList,
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
@ -40,17 +41,19 @@ export const LocaleCombobox = ({ value, onValueChange }: Props) => {
onValueChange={setSearch} onValueChange={setSearch}
placeholder={t`Search for a language`} placeholder={t`Search for a language`}
/> />
<CommandList>
<CommandEmpty>{t`No results found`}</CommandEmpty> <CommandEmpty>{t`No results found`}</CommandEmpty>
<CommandGroup> <CommandGroup>
<ScrollArea orientation="vertical"> <ScrollArea orientation="vertical">
<div className="max-h-60"> <div className="max-h-60">
{options.map(({ original }) => ( {options.map(({ original }) => (
<CommandItem <CommandItem
disabled={false}
key={original.locale} key={original.locale}
value={original.locale.trim().toLowerCase()} value={original.locale.trim()}
onSelect={async (selectedValue) => { onSelect={async (selectedValue) => {
const result = options.find( const result = options.find(
({ original }) => original.locale.trim().toLowerCase() === selectedValue, ({ original }) => original.locale.trim() === selectedValue,
); );
if (!result) return null; if (!result) return null;
@ -64,12 +67,14 @@ export const LocaleCombobox = ({ value, onValueChange }: Props) => {
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}{" "}
<span className="ml-1 text-xs opacity-50">({original.locale})</span>
</CommandItem> </CommandItem>
))} ))}
</div> </div>
</ScrollArea> </ScrollArea>
</CommandGroup> </CommandGroup>
</CommandList>
</Command> </Command>
); );
}; };

View File

@ -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>

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}