fix(web): селекты показывают label вместо технического значения; редактирование VPS подтягивает данные
- SelectField: обёртка над base-ui Select с items prop (Select.Value рендерит label выбранного элемента, а не raw value) - все Select в forms (vps/providers/accounts/payments/balance/settings) переписаны на SelectField - FormSheetRhf: useEffect reset(defaultValues) при открытии sheet — теперь форма редактирования заполняется текущими данными Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Denozordec
@@ -1,3 +1,4 @@
|
||||
import { useEffect } from 'react'
|
||||
import type { ReactNode } from 'react'
|
||||
import {
|
||||
useForm,
|
||||
@@ -42,6 +43,14 @@ export function FormSheetRhf<TField extends FieldValues>({
|
||||
mode: 'onBlur',
|
||||
})
|
||||
|
||||
// Re-sync form values when the sheet opens or defaultValues change (e.g. edit vs create).
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
form.reset(defaultValues as DefaultValues<TField>)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [open, defaultValues])
|
||||
|
||||
const submit: SubmitHandler<TField> = (values) => onSubmit(values)
|
||||
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
import * as React from 'react'
|
||||
import {
|
||||
Select as SelectPrimitive,
|
||||
type SelectRootProps,
|
||||
} from '@base-ui/react/select'
|
||||
|
||||
import { cn } from '@cfdm/ui/lib/utils'
|
||||
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react'
|
||||
|
||||
export interface SelectOption {
|
||||
value: string
|
||||
label: React.ReactNode
|
||||
}
|
||||
|
||||
interface SelectFieldProps extends Omit<SelectRootProps<string>, 'items' | 'value' | 'onValueChange'> {
|
||||
options: SelectOption[]
|
||||
placeholder?: string
|
||||
triggerClassName?: string
|
||||
triggerId?: string
|
||||
size?: 'sm' | 'default'
|
||||
value?: string | null
|
||||
onValueChange?: (value: string | null) => void
|
||||
}
|
||||
|
||||
export function SelectField({
|
||||
options,
|
||||
placeholder,
|
||||
triggerClassName,
|
||||
triggerId,
|
||||
size = 'default',
|
||||
value,
|
||||
onValueChange,
|
||||
...props
|
||||
}: SelectFieldProps) {
|
||||
const items = React.useMemo(() => options.map((o) => ({ value: o.value, label: o.label })), [options])
|
||||
|
||||
return (
|
||||
<SelectPrimitive.Root
|
||||
items={items}
|
||||
value={value}
|
||||
onValueChange={onValueChange}
|
||||
{...props}
|
||||
>
|
||||
<SelectPrimitive.Trigger
|
||||
id={triggerId}
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
'flex w-full items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
|
||||
triggerClassName,
|
||||
)}
|
||||
>
|
||||
<SelectPrimitive.Value
|
||||
data-slot="select-value"
|
||||
placeholder={placeholder}
|
||||
className="flex flex-1 text-left"
|
||||
/>
|
||||
<SelectPrimitive.Icon
|
||||
render={<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />}
|
||||
/>
|
||||
</SelectPrimitive.Trigger>
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Positioner
|
||||
side="bottom"
|
||||
sideOffset={4}
|
||||
align="center"
|
||||
alignOffset={0}
|
||||
alignItemWithTrigger
|
||||
className="isolate z-50"
|
||||
>
|
||||
<SelectPrimitive.Popup
|
||||
data-slot="select-content"
|
||||
className="relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95"
|
||||
>
|
||||
<SelectPrimitive.ScrollUpArrow className="top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*=\'size-\'])]:size-4">
|
||||
<ChevronUpIcon />
|
||||
</SelectPrimitive.ScrollUpArrow>
|
||||
<SelectPrimitive.List>
|
||||
{options.map((opt) => (
|
||||
<SelectPrimitive.Item
|
||||
key={opt.value}
|
||||
value={opt.value}
|
||||
data-slot="select-item"
|
||||
className="relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2"
|
||||
>
|
||||
<SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
|
||||
{opt.label}
|
||||
</SelectPrimitive.ItemText>
|
||||
<SelectPrimitive.ItemIndicator
|
||||
render={
|
||||
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
|
||||
}
|
||||
>
|
||||
<CheckIcon className="pointer-events-none" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</SelectPrimitive.Item>
|
||||
))}
|
||||
</SelectPrimitive.List>
|
||||
<SelectPrimitive.ScrollDownArrow className="bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*=\'size-\'])]:size-4">
|
||||
<ChevronDownIcon />
|
||||
</SelectPrimitive.ScrollDownArrow>
|
||||
</SelectPrimitive.Popup>
|
||||
</SelectPrimitive.Positioner>
|
||||
</SelectPrimitive.Portal>
|
||||
</SelectPrimitive.Root>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user