-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4ad8477
commit c63b27d
Showing
14 changed files
with
489 additions
and
267 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { Icon } from "@/components/Utilities/Icon" | ||
| import { CheckCircle } from "@/icons/app" | ||
| import { cn } from "@/lib/utils.ts" | ||
| import * as SelectPrimitive from "@radix-ui/react-select" | ||
| import * as React from "react" | ||
|
|
||
| const SelectItem = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Item>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <SelectPrimitive.Item | ||
| ref={ref} | ||
| className={cn( | ||
| "relative grid w-full cursor-default select-none grid-cols-[1fr_20px] gap-x-1.5 rounded px-3 py-2 outline-none transition-colors after:absolute after:inset-x-1 after:inset-y-0 after:z-0 after:h-full after:rounded after:bg-f1-background-hover after:opacity-0 after:transition-opacity after:duration-75 after:content-[''] first:pt-3 first:after:top-1 first:after:h-[calc(100%-0.25rem)] last:pb-3 last:after:bottom-1 last:after:h-[calc(100%-0.25rem)] hover:after:opacity-100 focus:after:bg-f1-background-hover focus:after:text-f1-foreground focus:after:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_*]:z-10", | ||
| "data-[state=checked]:after:bg-f1-background-selected-bold/10 data-[state=checked]:after:opacity-100 hover:data-[state=checked]:after:bg-f1-background-selected-bold/10 dark:data-[state=checked]:after:bg-f1-background-selected-bold/20 dark:hover:data-[state=checked]:after:bg-f1-background-selected-bold/20", | ||
| "focus:outline-none focus:ring-0 focus:ring-transparent", // Temporal fix for Gamma issue | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> | ||
| <SelectPrimitive.ItemIndicator className="flex text-f1-icon-selected"> | ||
| <Icon icon={CheckCircle} size="md" /> | ||
| </SelectPrimitive.ItemIndicator> | ||
| </SelectPrimitive.Item> | ||
| )) | ||
| SelectItem.displayName = SelectPrimitive.Item.displayName | ||
|
|
||
| export { SelectItem } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import { useVirtualizer } from "@tanstack/react-virtual" | ||
| import { MutableRefObject, useCallback, useEffect } from "react" | ||
| import { VirtualItem } from "../typings" | ||
|
|
||
| type Props = { | ||
| items: VirtualItem[] | ||
| parentRef: MutableRefObject<HTMLDivElement | null> | ||
| positionIndex?: number | ||
| } | ||
| /** | ||
| * Renders the items as a virtual list | ||
| * @param items {VirtualItem} The items to render | ||
| * @param parentRef {Ref} The parent container reference to calculate position | ||
| * @param positionIndex {number} The index of the selected item | ||
| * @constructor | ||
| */ | ||
| export const SelectItemsVirtual = ({ | ||
| items, | ||
| parentRef, | ||
| positionIndex, | ||
| }: Props) => { | ||
| const virtualizer = useVirtualizer({ | ||
| count: items.length, | ||
| getScrollElement: () => parentRef.current, | ||
| estimateSize: (i: number) => items[i].height, | ||
| overscan: 5, | ||
| }) | ||
|
|
||
| /** | ||
| * Scroll to the selected item | ||
| * @param index {number} The index of the item to scroll to | ||
| * @returns {void} | ||
| */ | ||
| const scrollToIndex = useCallback( | ||
| (index: number) => { | ||
| virtualizer.scrollToIndex(index, { | ||
| align: "center", | ||
| }) | ||
| }, | ||
| [virtualizer] | ||
| ) | ||
|
|
||
| // Scroll to the selected item | ||
| useEffect(() => { | ||
| if (positionIndex !== undefined) { | ||
| scrollToIndex(positionIndex) | ||
| setTimeout(() => { | ||
| scrollToIndex(positionIndex) | ||
| }, 1) | ||
| } | ||
| }, [positionIndex, scrollToIndex]) | ||
|
|
||
| // Measure the virtual items | ||
| useEffect(() => { | ||
| virtualizer.measure() | ||
| }, [virtualizer, items]) | ||
|
|
||
| return ( | ||
| <div | ||
| style={{ | ||
| height: `${virtualizer.getTotalSize()}px`, | ||
| width: "100%", | ||
| position: "relative", | ||
| background: "#f00", | ||
| }} | ||
| > | ||
| {virtualizer.getVirtualItems().map((virtualItem) => ( | ||
| <div | ||
| key={virtualItem.key} | ||
| style={{ | ||
| position: "absolute", | ||
| top: 0, | ||
| left: 0, | ||
| height: `${virtualItem.size}px`, | ||
| width: "100%", | ||
| transform: `translateY(${virtualItem.start}px)`, | ||
| }} | ||
| > | ||
| {items[virtualItem.index].item} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { cn } from "@/lib/utils.ts" | ||
| import * as SelectPrimitive from "@radix-ui/react-select" | ||
| import * as React from "react" | ||
|
|
||
| const SelectLabel = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Label>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.Label | ||
| ref={ref} | ||
| className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| SelectLabel.displayName = SelectPrimitive.Label.displayName | ||
|
|
||
| export { SelectLabel } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { Icon } from "@/components/Utilities/Icon" | ||
| import { ChevronDown, ChevronUp } from "@/icons/app" | ||
| import { cn } from "@/lib/utils.ts" | ||
| import * as SelectPrimitive from "@radix-ui/react-select" | ||
| import { forwardRef } from "react" | ||
|
|
||
| type Props = { | ||
| variant: "up" | "down" | ||
| className?: string | ||
| } | ||
| const SelectScrollButton = ({ variant, ...props }: Props) => { | ||
| type ScrollButton = typeof variant extends "up" | ||
| ? typeof SelectPrimitive.ScrollUpButton | ||
| : typeof SelectPrimitive.ScrollDownButton | ||
|
|
||
| const Component = forwardRef< | ||
| React.ElementRef<ScrollButton>, | ||
| React.ComponentPropsWithoutRef<ScrollButton> | ||
| >(({ className, ...props }, ref) => { | ||
| const WrapperComponent = | ||
| variant === "up" | ||
| ? SelectPrimitive.ScrollUpButton | ||
| : SelectPrimitive.ScrollDownButton | ||
|
|
||
| return ( | ||
| <WrapperComponent | ||
| ref={ref} | ||
| className={cn( | ||
| "flex cursor-default items-center justify-center py-1 text-f1-icon", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <Icon icon={variant === "up" ? ChevronUp : ChevronDown} size="sm" /> | ||
| </WrapperComponent> | ||
| ) | ||
| }) | ||
| Component.displayName = | ||
| variant === "up" | ||
| ? SelectPrimitive.ScrollUpButton.displayName | ||
| : SelectPrimitive.ScrollDownButton.displayName | ||
|
|
||
| return <Component {...props} /> | ||
| } | ||
| export { SelectScrollButton } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { cn } from "@/lib/utils.ts" | ||
| import * as SelectPrimitive from "@radix-ui/react-select" | ||
| import * as React from "react" | ||
|
|
||
| const SelectSeparator = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Separator>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.Separator | ||
| ref={ref} | ||
| className={cn("-mx-1 my-1 h-px bg-f1-border-secondary", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| SelectSeparator.displayName = SelectPrimitive.Separator.displayName | ||
|
|
||
| export { SelectSeparator } |
Oops, something went wrong.