import { useState } from "react"; import { useTranslation } from "react-i18next"; import { Pagination, SearchInput, ToggleTemplateProps, Toolbar, ToolbarContent, ToolbarItem, } from "@patternfly/react-core"; type ResourceToolbarProps = { onFilter: (nameFilter: string) => void; count: number; first: number; max: number; onNextClick: (page: number) => void; onPreviousClick: (page: number) => void; onPerPageSelect: (max: number, first: number) => void; hasNext: boolean; }; export const ResourceToolbar = ({ count, first, max, onNextClick, onPreviousClick, onPerPageSelect, onFilter, hasNext, }: ResourceToolbarProps) => { const { t } = useTranslation(); const [nameFilter, setNameFilter] = useState(""); const page = Math.round(first / max) + 1; return ( { setNameFilter(value); }} onSearch={() => onFilter(nameFilter)} onKeyDown={(e) => { if (e.key === "Enter") { onFilter(nameFilter); } }} onClear={() => { setNameFilter(""); onFilter(""); }} /> ( {firstIndex} - {lastIndex} )} itemCount={count + (page - 1) * max + (hasNext ? 1 : 0)} page={page} perPage={max} onNextClick={(_, p) => onNextClick((p - 1) * max)} onPreviousClick={(_, p) => onPreviousClick((p - 1) * max)} onPerPageSelect={(_, m, f) => onPerPageSelect(f - 1, m)} /> ); };