Skip to content

Commit

Permalink
refac: use ScrollArea in PhoneInput (#23)
Browse files Browse the repository at this point in the history 
* Install scroll area from radix ui
* Add scroll area component
* Use scroll area component

---------

Co-authored-by: babucarr32 <baboucarry@gmai.com>
Co-authored-by: omeralpi <omeralpi@icloud.com>
  • Loading branch information
@babucarr32 @omeralpi
3 people authored Apr 13, 2024
1 parent 0c4eda9 commit a2c14f1
Show file tree
Hide file tree
Showing 6 changed files with 8,004 additions and 50 deletions.
51 changes: 27 additions & 24 deletions components/ui/phone-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { Input, InputProps } from "@/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";

import { cn } from "@/lib/utils";
import { ScrollArea } from "./scroll-area";

type PhoneInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> &
Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
Expand Down Expand Up @@ -90,30 +91,32 @@ const CountrySelect = ({ disabled, value, onChange, options }: CountrySelectProp
<PopoverContent className="p-0 w-[300px]">
<Command>
<CommandList>
<CommandInput placeholder="Search country..." />
<CommandEmpty>No country found.</CommandEmpty>
<CommandGroup>
{options
.filter((x) => x.value)
.map((option) => (
<CommandItem
className="gap-2"
key={option.value}
onSelect={() => handleSelect(option.value)}
>
<FlagComponent country={option.value} countryName={option.label} />
<span className="text-sm flex-1">{option.label}</span>
{option.value && (
<span className="text-sm text-foreground/50">
{`+${RPNInput.getCountryCallingCode(option.value)}`}
</span>
)}
<CheckIcon
className={cn("ml-auto h-4 w-4", option.value === value ? "opacity-100" : "opacity-0")}
/>
</CommandItem>
))}
</CommandGroup>
<ScrollArea className="h-72">
<CommandInput placeholder="Search country..." />
<CommandEmpty>No country found.</CommandEmpty>
<CommandGroup>
{options
.filter((x) => x.value)
.map((option) => (
<CommandItem
className="gap-2"
key={option.value}
onSelect={() => handleSelect(option.value)}
>
<FlagComponent country={option.value} countryName={option.label} />
<span className="text-sm flex-1">{option.label}</span>
{option.value && (
<span className="text-sm text-foreground/50">
{`+${RPNInput.getCountryCallingCode(option.value)}`}
</span>
)}
<CheckIcon
className={cn("ml-auto h-4 w-4", option.value === value ? "opacity-100" : "opacity-0")}
/>
</CommandItem>
))}
</CommandGroup>
</ScrollArea>
</CommandList>
</Command>
</PopoverContent>
Expand Down
48 changes: 48 additions & 0 deletions components/ui/scroll-area.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
"use client"

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 }
55 changes: 29 additions & 26 deletions content/snippets/phone-input.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
} from "@/components/ui/popover";

import { cn } from "@/lib/utils";
import { ScrollArea } from "./scroll-area";

type PhoneInputProps = Omit<
React.InputHTMLAttributes<HTMLInputElement>,
Expand Down Expand Up @@ -120,33 +121,35 @@ const CountrySelect = ({
<CommandList>
<CommandInput placeholder="Search country..." />
<CommandEmpty>No country found.</CommandEmpty>
<CommandGroup>
{options
.filter((x) => x.value)
.map((option) => (
<CommandItem
className="gap-2"
key={option.value}
onSelect={() => handleSelect(option.value)}>
<FlagComponent
country={option.value}
countryName={option.label}
/>
<span className="text-sm flex-1">{option.label}</span>
{option.value && (
<span className="text-sm text-foreground/50">
{`+${RPNInput.getCountryCallingCode(option.value)}`}
</span>
)}
<CheckIcon
className={cn(
"ml-auto h-4 w-4",
option.value === value ? "opacity-100" : "opacity-0",
<ScrollArea className="h-72">
<CommandGroup>
{options
.filter((x) => x.value)
.map((option) => (
<CommandItem
className="gap-2"
key={option.value}
onSelect={() => handleSelect(option.value)}>
<FlagComponent
country={option.value}
countryName={option.label}
/>
<span className="text-sm flex-1">{option.label}</span>
{option.value && (
<span className="text-sm text-foreground/50">
{`+${RPNInput.getCountryCallingCode(option.value)}`}
</span>
)}
/>
</CommandItem>
))}
</CommandGroup>
<CheckIcon
className={cn(
"ml-auto h-4 w-4",
option.value === value ? "opacity-100" : "opacity-0",
)}
/>
</CommandItem>
))}
</CommandGroup>
</ScrollArea>
</CommandList>
</Command>
</PopoverContent>
Expand Down
Loading

0 comments on commit a2c14f1

Please sign in to comment.