mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 02:15:05 +03:00
Gildas GarciaandIvan Vasilov
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { ArrowDownNarrowWide, ArrowDownWideNarrow } from 'lucide-react'
|
|
import {
|
|
Button,
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuTrigger,
|
|
} from 'ui'
|
|
|
|
type SortOption = {
|
|
label: string
|
|
value: string
|
|
}
|
|
|
|
interface SortDropdownProps {
|
|
options: SortOption[]
|
|
value: string
|
|
setValue: (value: string) => void
|
|
}
|
|
|
|
export const SortDropdown = ({ options, value, setValue }: SortDropdownProps) => {
|
|
const [sortColumn, sortOrder] = value.split('_')
|
|
const columnLabel = options.find((x) => x.value === sortColumn)?.label
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="default"
|
|
icon={sortOrder === 'desc' ? <ArrowDownWideNarrow /> : <ArrowDownNarrowWide />}
|
|
>
|
|
Sorted by {columnLabel ?? sortColumn}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent className="w-44" align="start">
|
|
<DropdownMenuRadioGroup value={value} onValueChange={setValue}>
|
|
{options.map((option) => {
|
|
return (
|
|
<DropdownMenuSub key={option.value}>
|
|
<DropdownMenuSubTrigger>Sort by {option.label}</DropdownMenuSubTrigger>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuRadioItem value={`${option.value}_asc`}>
|
|
Ascending
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value={`${option.value}_desc`}>
|
|
Descending
|
|
</DropdownMenuRadioItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuSub>
|
|
)
|
|
})}
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|