denozord/vps-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): ReUI Autocomplete для страны/города и вертикальная раскладка локации

Browse Source 
Co-authored-by: Cursor <[email protected]>
This commit is contained in:
Denozordec
2026-06-27 02:11:45 +07:00
co-authored by Cursor
parent f681f72e8c
commit a954591493
2 changed files with 111 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/auto-complete-input.tsx
+85 -108
View File
@@ -1,26 +1,22 @@
'use client'
import * as React from 'react' import * as React from 'react'
import { CheckIcon, ChevronsUpDownIcon, SearchIcon } from 'lucide-react' import { CheckIcon } from 'lucide-react'
import { Button } from '@cfdm/ui/components/button'
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from '@cfdm/ui/components/command'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@cfdm/ui/components/popover'
import { cn } from '@cfdm/ui/lib/utils' import { cn } from '@cfdm/ui/lib/utils'
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteList,
} from '@/components/reui/autocomplete'
export interface AutoCompleteOption { export interface AutoCompleteOption {
value: string value: string
label: string label: string
/** Левый префикс (например эмодзи-флаг). */ /** Левый префикс (например флаг страны). */
leading?: React.ReactNode leading?: React.ReactNode
} }
@@ -33,7 +29,7 @@ interface AutoCompleteInputProps {
searchPlaceholder?: string searchPlaceholder?: string
emptyText?: string emptyText?: string
className?: string className?: string
/** Показывать ли выбранный leading в триггере (например флаг). */ /** Показывать ли выбранный leading в поле (например флаг). */
showLeadingInInput?: boolean showLeadingInInput?: boolean
/** Разрешать ли произвольный ввод (не только из списка). По умолчанию true. */ /** Разрешать ли произвольный ввод (не только из списка). По умолчанию true. */
allowFreeText?: boolean allowFreeText?: boolean
@@ -45,107 +41,88 @@ export function AutoCompleteInput({
onChange, onChange,
options, options,
placeholder = 'Выбрать…', placeholder = 'Выбрать…',
searchPlaceholder = 'Поиск…', searchPlaceholder,
emptyText = 'Ничего не найдено', emptyText = 'Ничего не найдено',
className, className,
showLeadingInInput = true, showLeadingInInput = true,
allowFreeText = true, allowFreeText = true,
}: AutoCompleteInputProps) { }: AutoCompleteInputProps) {
const [open, setOpen] = React.useState(false) const trimmedValue = value.trim()
const [query, setQuery] = React.useState('')
const filtered = React.useMemo(() => { const selected = React.useMemo(
const q = query.trim().toLowerCase() () => options.find((o) => o.value.toLowerCase() === trimmedValue.toLowerCase()),
if (!q) return options [options, trimmedValue],
return options.filter(
(o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q),
)
}, [options, query])
const selected = options.find(
(o) => o.value.toLowerCase() === value.trim().toLowerCase(),
) )
const displayLabel = selected?.label ?? value
const leading = showLeadingInInput ? selected?.leading : undefined const leading = showLeadingInInput ? selected?.leading : undefined
const handleSelect = (next: string) => { const inputPlaceholder = searchPlaceholder ?? placeholder
onChange(next)
setQuery('') const handleValueChange = React.useCallback(
setOpen(false) (inputVal: string) => {
} const q = inputVal.trim()
const match = options.find(
(o) =>
o.label.toLowerCase() === q.toLowerCase() ||
o.value.toLowerCase() === q.toLowerCase(),
)
if (match) {
onChange(match.value)
return
}
if (allowFreeText) {
onChange(inputVal)
}
},
[options, onChange, allowFreeText],
)
return ( return (
<Popover open={open} onOpenChange={(o) => { <Autocomplete
setOpen(o) items={options}
if (!o) setQuery('') value={value}
}}> onValueChange={handleValueChange}
<PopoverTrigger itemToStringValue={(item) => item.label}
render={ mode="list"
<Button autoHighlight
id={id} openOnInputClick
variant="outline" >
role="combobox" <div className="relative w-full">
aria-expanded={open} {leading ? (
className={cn('w-full justify-between font-normal', className)} <span className="pointer-events-none absolute start-2.5 top-1/2 z-10 size-4 -translate-y-1/2 [&_svg]:size-full">
> {leading}
<span className="flex min-w-0 items-center gap-2"> </span>
{leading ? <span className="size-4 shrink-0 leading-none">{leading}</span> : null} ) : null}
<span className={cn('truncate', !value && 'text-muted-foreground')}> <AutocompleteInput
{value ? displayLabel : placeholder} id={id}
</span> placeholder={trimmedValue ? undefined : inputPlaceholder}
</span> showTrigger
<ChevronsUpDownIcon className="size-4 shrink-0 opacity-50" /> showClear={Boolean(trimmedValue)}
</Button> className={cn(leading && 'ps-8', className)}
} />
/> </div>
<PopoverContent align="start" className="w-[--anchor-width] min-w-[220px] p-0"> <AutocompleteContent>
<Command shouldFilter={false} loop> <AutocompleteEmpty>{emptyText}</AutocompleteEmpty>
<CommandInput <AutocompleteList>
placeholder={searchPlaceholder} {(item) => {
value={query} const isSelected = item.value.toLowerCase() === trimmedValue.toLowerCase()
onValueChange={setQuery} return (
autoComplete="off" <AutocompleteItem
autoCorrect="off" key={item.value}
spellCheck={false} value={item}
/> className="gap-2.5 px-2 py-1.5"
<CommandList className="py-1"> >
<CommandEmpty>{emptyText}</CommandEmpty> {item.leading ? (
<CommandGroup> <span className="relative z-1 size-4 shrink-0">{item.leading}</span>
{allowFreeText && query.trim() && !filtered.some( ) : null}
(o) => o.label.toLowerCase() === query.trim().toLowerCase(), <span className="relative z-1 min-w-0 flex-1 truncate">{item.label}</span>
) ? ( {isSelected ? (
<CommandItem <CheckIcon className="relative z-1 size-4 shrink-0 opacity-60" />
value={`__free__:${query.trim()}`} ) : null}
onSelect={() => handleSelect(query.trim())} </AutocompleteItem>
className="gap-2.5" )
> }}
<SearchIcon className="size-4 opacity-50" /> </AutocompleteList>
<span className="flex-1 truncate"> </AutocompleteContent>
Использовать: <b>{query.trim()}</b> </Autocomplete>
</span>
</CommandItem>
) : null}
{filtered.map((opt) => {
const isSelected = opt.value.toLowerCase() === value.trim().toLowerCase()
return (
<CommandItem
key={opt.value}
value={opt.value}
onSelect={() => handleSelect(opt.value)}
className="gap-2.5"
>
{opt.leading ? (
<span className="size-4 shrink-0 leading-none">{opt.leading}</span>
) : null}
<span className="flex-1">{opt.label}</span>
{isSelected ? <CheckIcon className="size-4 opacity-60" /> : null}
</CommandItem>
)
})}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
) )
} }
apps/web/src/routes/_auth/vps.tsx
+26 -28
View File
@@ -421,34 +421,32 @@ function VpsPage() {
<FormField label="Проект" htmlFor="vps-project"> <FormField label="Проект" htmlFor="vps-project">
<Input id="vps-project" {...register('project')} /> <Input id="vps-project" {...register('project')} />
</FormField> </FormField>
<div className="grid grid-cols-3 gap-3"> <FormField label="Страна" htmlFor="vps-country">
<FormField label="Страна" htmlFor="vps-country"> <AutoCompleteInput
<AutoCompleteInput id="vps-country"
id="vps-country" placeholder="Любая"
placeholder="Любая" value={watch('country') ?? ''}
value={watch('country') ?? ''} onChange={(v) => setValue('country', v)}
onChange={(v) => setValue('country', v)} options={countryOptions}
options={countryOptions} searchPlaceholder="Поиск страны…"
searchPlaceholder="Поиск страны…" emptyText="Нет вариантов"
emptyText="Нет вариантов" />
/> </FormField>
</FormField> <FormField label="Город" htmlFor="vps-city">
<FormField label="Город" htmlFor="vps-city"> <AutoCompleteInput
<AutoCompleteInput id="vps-city"
id="vps-city" placeholder="Любой"
placeholder="Любой" value={watch('city') ?? ''}
value={watch('city') ?? ''} onChange={(v) => setValue('city', v)}
onChange={(v) => setValue('city', v)} options={cityOptions}
options={cityOptions} searchPlaceholder="Поиск города…"
searchPlaceholder="Поиск города…" emptyText="Нет вариантов"
emptyText="Нет вариантов" showLeadingInInput={false}
showLeadingInInput={false} />
/> </FormField>
</FormField> <FormField label="Дата-центр" htmlFor="vps-dc">
<FormField label="Дата-центр" htmlFor="vps-dc"> <Input id="vps-dc" {...register('datacenter')} />
<Input id="vps-dc" {...register('datacenter')} /> </FormField>
</FormField>
</div>
<div className="grid grid-cols-3 gap-3"> <div className="grid grid-cols-3 gap-3">
<FormField label="vCPU" htmlFor="vps-vcpu" error={errors.vcpu?.message}> <FormField label="vCPU" htmlFor="vps-vcpu" error={errors.vcpu?.message}>
<Controller <Controller