Skip to content

Add native selects to mobile create tip page #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
selfire1 wants to merge 1 commit into from
Closed

Add native selects to mobile create tip page #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 37 additions & 43 deletions components/select-constructor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
CommandItem,
CommandList,
} from '@/components/ui/command'
import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
import {
Popover,
PopoverContent,
Expand All @@ -23,6 +22,10 @@ import { FormControl } from '@/components/ui/form'
import ConstructorOption, {
type ConstructorProps,
} from '@/components/constructor'
import {
NativeSelect,
NativeSelectOption,
} from '@/components/ui/native-select'

export function SelectConstructor({
constructors,
Expand All @@ -48,7 +51,22 @@ export function SelectConstructor({
if (isDesktop) {
return (
<Popover open={open} onOpenChange={setOpen}>
<TriggerButton selected={selected} type='popover' disabled={disabled} />
<PopoverTrigger asChild>
<FormControl>
<Button
variant='outline'
className='justify-between'
disabled={disabled}
>
{selected ? (
<ConstructorOption constructor={selected} isSelected={false} />
) : (
<span>Select constructor</span>
)}
<ChevronsUpDown className='opacity-50' />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className='w-[300px] p-0' align='start'>
<ConstructorsList setOpen={setOpen} />
</PopoverContent>
Expand All @@ -57,14 +75,23 @@ export function SelectConstructor({
}

return (
<Drawer open={open} onOpenChange={setOpen}>
<TriggerButton selected={selected} type='drawer' disabled={disabled} />
<DrawerContent>
<div className='mt-4 border-t'>
<ConstructorsList setOpen={setOpen} />
</div>
</DrawerContent>
</Drawer>
<FormControl>
<NativeSelect
disabled={disabled}
value={value?.id || ''}
onChange={(e) => {
const constructor = constructors.find((c) => c.id === e.target.value)
onSelect(constructor)
}}
>
<NativeSelectOption value=''>Select constructor</NativeSelectOption>
{constructors.map((constructor) => (
<NativeSelectOption key={constructor.id} value={constructor.id}>
{constructor.name}
</NativeSelectOption>
))}
</NativeSelect>
</FormControl>
)
function ConstructorsList({ setOpen }: { setOpen: (open: boolean) => void }) {
return (
Expand Down Expand Up @@ -98,36 +125,3 @@ export function SelectConstructor({
)
}
}

function TriggerButton({
selected,
type,
disabled,
}: {
selected: ConstructorProps | undefined
type: 'drawer' | 'popover'
disabled?: boolean
}) {
const Trigger = type === 'drawer' ? DrawerTrigger : PopoverTrigger
return (
<Trigger asChild>
<FormControl>
<Button
variant='outline'
className='justify-between'
disabled={disabled}
>
{selected ? (
<ConstructorOption constructor={selected} isSelected={false} />
) : (
<EmptyState />
)}
<ChevronsUpDown className='opacity-50' />
</Button>
</FormControl>
</Trigger>
)
function EmptyState() {
return <span>Select constructor</span>
}
}
78 changes: 37 additions & 41 deletions components/select-driver.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
CommandItem,
CommandList,
} from '@/components/ui/command'
import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
import {
Popover,
PopoverContent,
Expand All @@ -21,7 +20,10 @@ import {
import { ChevronsUpDown } from 'lucide-react'
import { FormControl } from '@/components/ui/form'
import DriverOption, { DriverOptionProps } from '@/components/driver-option'
// import DriverOption from '@/components/driver-option'
import {
NativeSelect,
NativeSelectOption,
} from '@/components/ui/native-select'

export function SelectDriver({
drivers,
Expand All @@ -48,7 +50,22 @@ export function SelectDriver({
if (isDesktop) {
return (
<Popover open={open} onOpenChange={setOpen}>
<TriggerButton type='popover' disabled={disabled} />
<PopoverTrigger asChild>
<FormControl>
<Button
disabled={disabled}
variant='outline'
className='justify-between flex'
>
{selected ? (
<DriverOption driver={selected} isSelected={false} />
) : (
<span>Select driver</span>
)}
<ChevronsUpDown className='opacity-50' />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className='w-[300px] p-0' align='start'>
<DriverList setOpen={setOpen} />
</PopoverContent>
Expand All @@ -57,14 +74,23 @@ export function SelectDriver({
}

return (
<Drawer open={open} onOpenChange={setOpen}>
<TriggerButton type='drawer' disabled={disabled} />
<DrawerContent>
<div className='mt-4 border-t'>
<DriverList setOpen={setOpen} />
</div>
</DrawerContent>
</Drawer>
<FormControl>
<NativeSelect
disabled={disabled}
value={value?.id || ''}
onChange={(e) => {
const driver = drivers.find((d) => d.id === e.target.value)
onSelect(driver)
}}
>
<NativeSelectOption value=''>Select driver</NativeSelectOption>
{drivers.map((driver) => (
<NativeSelectOption key={driver.id} value={driver.id}>
{driver.givenName} {driver.familyName}
</NativeSelectOption>
))}
</NativeSelect>
</FormControl>
)

function DriverList({ setOpen }: { setOpen: (open: boolean) => void }) {
Expand Down Expand Up @@ -102,34 +128,4 @@ export function SelectDriver({
}
}

function TriggerButton({
type,
disabled,
}: {
type: 'drawer' | 'popover'
disabled?: boolean
}) {
const Trigger = type === 'drawer' ? DrawerTrigger : PopoverTrigger
return (
<Trigger asChild>
<FormControl>
<Button
disabled={disabled}
variant='outline'
className='justify-between flex'
>
{selected ? (
<DriverOption driver={selected} isSelected={false} />
) : (
<EmptyState />
)}
<ChevronsUpDown className='opacity-50' />
</Button>
</FormControl>
</Trigger>
)
function EmptyState() {
return <span>Select driver</span>
}
}
}
Loading