Merge pull request afadil#79 from CanglongCl/fix-currency-scroll

feat: make currencies selection popover scrollable
fbertoia · Sep 9, 2024 · 3cf34af · 3cf34af
2 parents 3fd5ac6 + 890ff7e
commit 3cf34af
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/src/pages/settings/accounts/components/account-form.tsx b/src/pages/settings/accounts/components/account-form.tsx
@@ -50,6 +50,7 @@ const accountTypes = [
 import { worldCurrencies } from '@/lib/currencies';
 import { newAccountSchema } from '@/lib/schemas';
 import { createAccount, updateAccount } from '@/commands/account';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 type NewAccount = z.infer<typeof newAccountSchema>;
 
@@ -119,7 +120,7 @@ export function AccountForm({ defaultValues, onSuccess = () => {} }: AccountForm
           </DialogDescription>
         </DialogHeader>
 
-        <div className="grid gap-10 p-4 ">
+        <div className="grid gap-10 p-4">
           {/* add input hidden for id */}
           <input type="hidden" name="id" />
 
@@ -181,7 +182,7 @@ export function AccountForm({ defaultValues, onSuccess = () => {} }: AccountForm
               render={({ field }) => (
                 <FormItem className="flex flex-col">
                   <FormLabel>Currency</FormLabel>
-                  <Popover>
+                  <Popover modal={true}>
                     <PopoverTrigger asChild>
                       <FormControl>
                         <Button
@@ -202,23 +203,25 @@ export function AccountForm({ defaultValues, onSuccess = () => {} }: AccountForm
                         <CommandInput placeholder="Search currency..." />
                         <CommandEmpty>No currency found.</CommandEmpty>
                         <CommandGroup>
-                          {worldCurrencies.map((currency) => (
-                            <CommandItem
-                              value={currency.label}
-                              key={currency.value}
-                              onSelect={() => {
-                                form.setValue(field.name, currency.value);
-                              }}
-                            >
-                              <Icons.Check
-                                className={cn(
-                                  'mr-2 h-4 w-4',
-                                  currency.value === field.value ? 'opacity-100' : 'opacity-0',
-                                )}
-                              />
-                              {currency.label}
-                            </CommandItem>
-                          ))}
+                          <ScrollArea className="max-h-96 overflow-y-auto">
+                            {worldCurrencies.map((currency) => (
+                              <CommandItem
+                                value={currency.label}
+                                key={currency.value}
+                                onSelect={() => {
+                                  form.setValue(field.name, currency.value);
+                                }}
+                              >
+                                <Icons.Check
+                                  className={cn(
+                                    'mr-2 h-4 w-4',
+                                    currency.value === field.value ? 'opacity-100' : 'opacity-0',
+                                  )}
+                                />
+                                {currency.label}
+                              </CommandItem>
+                            ))}
+                          </ScrollArea>
                         </CommandGroup>
                       </Command>
                     </PopoverContent>

diff --git a/src/pages/settings/general/general-form.tsx b/src/pages/settings/general/general-form.tsx
@@ -25,6 +25,7 @@ import {
   CommandItem,
 } from '@/components/ui/command';
 import { useSettingsContext } from '@/lib/settings-provider';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 const appearanceFormSchema = z.object({
   baseCurrency: z.string({ required_error: 'Please select a base currency.' }),
@@ -61,9 +62,9 @@ export function GeneralSettingForm() {
           render={({ field }) => (
             <FormItem className="flex flex-col">
               <FormLabel>Currency</FormLabel>
-              <Popover>
+              <Popover modal={true}>
                 <PopoverTrigger asChild>
-                  <FormControl className="w-[300px] ">
+                  <FormControl className="w-[300px]">
                     <Button
                       variant="outline"
                       role="combobox"
@@ -81,23 +82,25 @@ export function GeneralSettingForm() {
                     <CommandInput placeholder="Search currency..." />
                     <CommandEmpty>No currency found.</CommandEmpty>
                     <CommandGroup>
-                      {worldCurrencies.map((currency) => (
-                        <CommandItem
-                          value={currency.label}
-                          key={currency.value}
-                          onSelect={() => {
-                            form.setValue(field.name, currency.value);
-                          }}
-                        >
-                          <Icons.Check
-                            className={cn(
-                              'mr-2 h-4 w-4',
-                              currency.value === field.value ? 'opacity-100' : 'opacity-0',
-                            )}
-                          />
-                          {currency.label}
-                        </CommandItem>
-                      ))}
+                      <ScrollArea className="max-h-96 overflow-y-auto">
+                        {worldCurrencies.map((currency) => (
+                          <CommandItem
+                            value={currency.label}
+                            key={currency.value}
+                            onSelect={() => {
+                              form.setValue(field.name, currency.value);
+                            }}
+                          >
+                            <Icons.Check
+                              className={cn(
+                                'mr-2 h-4 w-4',
+                                currency.value === field.value ? 'opacity-100' : 'opacity-0',
+                              )}
+                            />
+                            {currency.label}
+                          </CommandItem>
+                        ))}
+                      </ScrollArea>
                     </CommandGroup>
                   </Command>
                 </PopoverContent>