mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 19:35:06 +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>
110 lines
2.7 KiB
TypeScript
110 lines
2.7 KiB
TypeScript
import { Check, ChevronsUpDown } from 'lucide-react'
|
|
import { useId, useState } from 'react'
|
|
import {
|
|
Button,
|
|
cn,
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
FormControl,
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
ScrollArea,
|
|
} from 'ui'
|
|
|
|
// copied from https://docs.aws.amazon.com/general/latest/gr/cognito_identity.html
|
|
export const AWS_IDP_REGIONS = [
|
|
'af-south-1',
|
|
'ap-northeast-1',
|
|
'ap-northeast-2',
|
|
'ap-northeast-3',
|
|
'ap-south-1 ',
|
|
'ap-south-2 ',
|
|
'ap-southeast-1',
|
|
'ap-southeast-2',
|
|
'ap-southeast-3',
|
|
'ap-southeast-4',
|
|
'ca-central-1',
|
|
'eu-central-1',
|
|
'eu-central-2',
|
|
'eu-north-1',
|
|
'eu-south-1',
|
|
'eu-south-2',
|
|
'eu-west-1',
|
|
'eu-west-2',
|
|
'eu-west-3',
|
|
'il-central-1',
|
|
'me-central-1',
|
|
'me-south-1',
|
|
'sa-east-1',
|
|
'us-east-1',
|
|
'us-east-2',
|
|
'us-gov-west-1',
|
|
'us-west-1',
|
|
'us-west-2',
|
|
]
|
|
|
|
export const AwsRegionSelector = ({
|
|
value,
|
|
onChange,
|
|
}: {
|
|
value: string
|
|
onChange: (value: string) => void
|
|
}) => {
|
|
const [open, setOpen] = useState(false)
|
|
const listboxId = useId()
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<FormControl>
|
|
<Button
|
|
variant="default"
|
|
role="combobox"
|
|
aria-expanded={open}
|
|
aria-controls={listboxId}
|
|
className={cn('w-full justify-between', !value && 'text-muted-foreground')}
|
|
size="small"
|
|
iconRight={
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" strokeWidth={1} />
|
|
}
|
|
>
|
|
{value ?? 'Select a region'}
|
|
</Button>
|
|
</FormControl>
|
|
</PopoverTrigger>
|
|
<PopoverContent id={listboxId} className="p-0" sameWidthAsTrigger>
|
|
<Command>
|
|
<CommandInput placeholder="Search AWS regions..." />
|
|
<CommandList>
|
|
<CommandEmpty>No regions found.</CommandEmpty>
|
|
<CommandGroup>
|
|
<ScrollArea className="h-72">
|
|
{AWS_IDP_REGIONS.map((option) => (
|
|
<CommandItem
|
|
value={option}
|
|
key={option}
|
|
onSelect={(currentValue) => {
|
|
onChange(currentValue === value ? '' : currentValue)
|
|
setOpen(false)
|
|
}}
|
|
>
|
|
<Check
|
|
className={cn('mr-2 h-4 w-4', option === value ? 'opacity-100' : 'opacity-0')}
|
|
/>
|
|
{option}
|
|
</CommandItem>
|
|
))}
|
|
</ScrollArea>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|