Denozordec
3859983ae5
Refactored multiple components, including PanelCard, SettingsCard, and DataGridShell, to replace Card with Frame for better organization and presentation. Enhanced the DataGridToolbar to support optional ReUI filters and improved the overall structure of the KPI stat grid. Updated .gitignore to include .env.local for local environment configurations, ensuring better management of environment variables.
78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
import { Field } from '@evobgp/ui/components/field'
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupButton,
|
|
InputGroupInput,
|
|
} from '@evobgp/ui/components/input-group'
|
|
import { ListFilterIcon, SearchIcon, XIcon } from 'lucide-react'
|
|
|
|
import { panelCardInsetClassName } from '@/components/panel-card'
|
|
import { cn } from '@evobgp/ui/lib/utils'
|
|
|
|
interface DataGridToolbarProps {
|
|
searchValue: string
|
|
onSearchChange: (value: string) => void
|
|
searchPlaceholder?: string
|
|
/** ReUI Filters trigger or custom filter controls. Preview: https://reui.io/preview/base/data-grid-filtering-2 */
|
|
filters?: ReactNode
|
|
actions?: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
/** Search + optional ReUI Filters row for Frame data grids. */
|
|
export function DataGridToolbar({
|
|
searchValue,
|
|
onSearchChange,
|
|
searchPlaceholder = 'Поиск…',
|
|
filters,
|
|
actions,
|
|
className,
|
|
}: DataGridToolbarProps) {
|
|
return (
|
|
<div className={cn('flex flex-wrap items-center gap-3 border-b', panelCardInsetClassName, className)}>
|
|
<Field className="min-w-[200px] flex-1">
|
|
<InputGroup>
|
|
<InputGroupAddon align="inline-start">
|
|
<SearchIcon aria-hidden="true" />
|
|
</InputGroupAddon>
|
|
<InputGroupInput
|
|
placeholder={searchPlaceholder}
|
|
value={searchValue}
|
|
onChange={(event) => onSearchChange(event.target.value)}
|
|
aria-label={searchPlaceholder}
|
|
/>
|
|
<InputGroupAddon align="inline-end" className="gap-1">
|
|
{searchValue.length > 0 ? (
|
|
<InputGroupButton
|
|
aria-label="Очистить поиск"
|
|
size="icon-xs"
|
|
variant="ghost"
|
|
onClick={() => onSearchChange('')}
|
|
>
|
|
<XIcon aria-hidden="true" />
|
|
</InputGroupButton>
|
|
) : null}
|
|
{filters ? (
|
|
filters
|
|
) : (
|
|
<InputGroupButton
|
|
aria-label="Фильтры"
|
|
size="icon-xs"
|
|
variant="ghost"
|
|
disabled
|
|
title="Передайте filters={<Filters … />} из @/components/reui/filters"
|
|
>
|
|
<ListFilterIcon aria-hidden="true" />
|
|
</InputGroupButton>
|
|
)}
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
{actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
|
|
</div>
|
|
)
|
|
}
|