Skip to content

Commit

Permalink
replace select with toggle group in popup due to firefox popup not ha…
Browse files Browse the repository at this point in the history
…ndling select properly
  • Loading branch information
Herobread committed Jul 23, 2024
1 parent 670f1f9 commit 2dc5890
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 204 deletions.
Binary file modified bun.lockb
Binary file not shown.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.1",
"@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",
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-toast": "^1.2.1",
"@radix-ui/react-toggle": "^1.1.0",
"@radix-ui/react-toggle-group": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
"@radix-ui/react-visually-hidden": "^1.1.0",
"@tanstack/react-query": "^5.51.11",
Expand Down
158 changes: 0 additions & 158 deletions src/components/ui/select.tsx

This file was deleted.

62 changes: 62 additions & 0 deletions src/components/ui/toggle-group.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
import { type VariantProps } from "class-variance-authority"
import * as React from "react"

import { toggleVariants } from "@src/components/ui/toggle"
import { cn } from "@src/lib/utils"

const ToggleGroupContext = React.createContext<
VariantProps<typeof toggleVariants>
>({
size: "default",
variant: "default",
})

const ToggleGroup = React.forwardRef<
React.ElementRef<typeof ToggleGroupPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
VariantProps<typeof toggleVariants>
>(({ className, variant, size, children, ...props }, ref) => (
<ToggleGroupPrimitive.Root
ref={ref}
className={cn(
"flex items-center justify-center gap-1 rounded-sm bg-background-layer-1",
className
)}
{...props}
>
<ToggleGroupContext.Provider value={{ variant, size }}>
{children}
</ToggleGroupContext.Provider>
</ToggleGroupPrimitive.Root>
))

ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName

const ToggleGroupItem = React.forwardRef<
React.ElementRef<typeof ToggleGroupPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
const context = React.useContext(ToggleGroupContext)

return (
<ToggleGroupPrimitive.Item
ref={ref}
className={cn(
toggleVariants({
variant: context.variant || variant,
size: context.size || size,
}),
className
)}
{...props}
>
{children}
</ToggleGroupPrimitive.Item>
)
})

ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName

export { ToggleGroup, ToggleGroupItem }
87 changes: 42 additions & 45 deletions src/pages/popup/PopupActive.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,8 @@ import {
FormLabel,
FormMessage,
} from "@src/components/ui/form"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@src/components/ui/select"
import { Switch } from "@src/components/ui/switch"
import { ToggleGroup, ToggleGroupItem } from "@src/components/ui/toggle-group"
import { CONFIG_FALLBACK } from "@src/features/config/configFallback"
import { loadConfig } from "@src/features/config/loadConfig"
import { saveConfig } from "@src/features/config/saveConfig"
Expand Down Expand Up @@ -99,25 +93,26 @@ export default function PopupActive() {
name="date"
render={({ field }) => (
<FormItem>
<FormLabel>📅 Date display:</FormLabel>
<Select
onValueChange={field.onChange}
value={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Date display" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="relative">
Relative (N days ago)
</SelectItem>
<SelectItem value="full">
Full (YYYY-MM-DD HH:MM)
</SelectItem>
</SelectContent>
</Select>
<FormLabel>Date display:</FormLabel>
<FormControl>
<ToggleGroup
type="single"
className="grid grid-cols-2"
value={field.value}
onValueChange={(value) => {
if (value) {
field.onChange(value)
}
}}
>
<ToggleGroupItem value="relative">
⏲️ Relative
</ToggleGroupItem>
<ToggleGroupItem value="full">
📅 Full
</ToggleGroupItem>
</ToggleGroup>
</FormControl>
<FormMessage />
</FormItem>
)}
Expand All @@ -127,29 +122,31 @@ export default function PopupActive() {
name="fileIcons"
render={({ field }) => (
<FormItem>
<FormLabel>📁 File icons:</FormLabel>
<Select
onValueChange={field.onChange}
value={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="File icons" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="emoji">
Emoji
</SelectItem>
<SelectItem value="pictures">
Original icons
</SelectItem>
</SelectContent>
</Select>
<FormLabel>File icons:</FormLabel>
<FormControl>
<ToggleGroup
type="single"
className="grid grid-cols-2"
value={field.value}
onValueChange={(value) => {
if (value) {
field.onChange(value)
}
}}
>
<ToggleGroupItem value="emoji">
📁 Emoji
</ToggleGroupItem>
<ToggleGroupItem value="pictures">
🖼️ Picture
</ToggleGroupItem>
</ToggleGroup>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormLabel>Other view options:</FormLabel>
<FormField
control={form.control}
name="imagePreviewAsIcon"
Expand Down

0 comments on commit 2dc5890

Please sign in to comment.