fix: migrate select to Base UI items API (#4655)

This commit is contained in:
yyhhyyyyyy
2026-05-06 21:38:58 +08:00
committed by GitHub
parent 38a3314b9b
commit d98f0e8ac3
38 changed files with 1187 additions and 485 deletions
@@ -13,6 +13,7 @@ import {
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -270,6 +271,12 @@ export function SubscriptionPurchaseDialog(props: Props) {
{hasEpay && (
<div className='grid grid-cols-[minmax(0,1fr)_auto] gap-2'>
<Select
items={[
...(props.epayMethods || []).map((m) => ({
value: m.type,
label: m.name || m.type,
})),
]}
value={selectedEpayMethod}
onValueChange={(v) =>
v !== null && setSelectedEpayMethod(v)
@@ -279,12 +286,14 @@ export function SubscriptionPurchaseDialog(props: Props) {
<SelectTrigger className='flex-1'>
<SelectValue>{selectedEpayMethodLabel}</SelectValue>
</SelectTrigger>
<SelectContent>
{(props.epayMethods || []).map((m) => (
<SelectItem key={m.type} value={m.type}>
{m.name || m.type}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{(props.epayMethods || []).map((m) => (
<SelectItem key={m.type} value={m.type}>
{m.name || m.type}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<Button
@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -183,19 +184,32 @@ export function UserSubscriptionsDialog(props: Props) {
<div className='mt-4 space-y-4'>
<div className='flex gap-2'>
<Select
items={[
...plans.map((p) => ({
value: String(p.plan.id),
label: (
<>
{p.plan.title}($
{Number(p.plan.price_amount || 0).toFixed(2)})
</>
),
})),
]}
value={selectedPlanId}
onValueChange={(v) => v !== null && setSelectedPlanId(v)}
>
<SelectTrigger className='flex-1'>
<SelectValue placeholder={t('Select subscription plan')} />
</SelectTrigger>
<SelectContent>
{plans.map((p) => (
<SelectItem key={p.plan.id} value={String(p.plan.id)}>
{p.plan.title} ($
{Number(p.plan.price_amount || 0).toFixed(2)})
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{plans.map((p) => (
<SelectItem key={p.plan.id} value={String(p.plan.id)}>
{p.plan.title} ($
{Number(p.plan.price_amount || 0).toFixed(2)})
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<Button
@@ -18,6 +18,7 @@ import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -237,6 +238,10 @@ export function SubscriptionsMutateDrawer({
<FormItem>
<FormLabel>{t('Upgrade Group')}</FormLabel>
<Select
items={[
{ value: '__none__', label: t('No Upgrade') },
...groupOptions.map((g) => ({ value: g, label: g })),
]}
onValueChange={(v) =>
field.onChange(v === '__none__' ? '' : v)
}
@@ -247,15 +252,17 @@ export function SubscriptionsMutateDrawer({
<SelectValue placeholder={t('No Upgrade')} />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value='__none__'>
{t('No Upgrade')}
</SelectItem>
{groupOptions.map((g) => (
<SelectItem key={g} value={g}>
{g}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
<SelectItem value='__none__'>
{t('No Upgrade')}
</SelectItem>
))}
{groupOptions.map((g) => (
<SelectItem key={g} value={g}>
{g}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<FormMessage />
@@ -344,6 +351,12 @@ export function SubscriptionsMutateDrawer({
<FormItem>
<FormLabel>{t('Duration Unit')}</FormLabel>
<Select
items={[
...durationUnitOpts.map((o) => ({
value: o.value,
label: o.label,
})),
]}
onValueChange={field.onChange}
value={field.value}
>
@@ -352,12 +365,14 @@ export function SubscriptionsMutateDrawer({
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
{durationUnitOpts.map((o) => (
<SelectItem key={o.value} value={o.value}>
{o.label}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{durationUnitOpts.map((o) => (
<SelectItem key={o.value} value={o.value}>
{o.label}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<FormMessage />
@@ -426,6 +441,12 @@ export function SubscriptionsMutateDrawer({
<FormItem>
<FormLabel>{t('Reset Cycle')}</FormLabel>
<Select
items={[
...resetPeriodOpts.map((o) => ({
value: o.value,
label: o.label,
})),
]}
onValueChange={field.onChange}
value={field.value}
>
@@ -434,12 +455,14 @@ export function SubscriptionsMutateDrawer({
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
{resetPeriodOpts.map((o) => (
<SelectItem key={o.value} value={o.value}>
{o.label}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{resetPeriodOpts.map((o) => (
<SelectItem key={o.value} value={o.value}>
{o.label}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<FormMessage />