@keycloakify/keycloak-account-ui
Version:
Repackaged Keycloak Account UI
30 lines • 2.15 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Divider, InputGroup, SearchInput, Toolbar, ToolbarContent, ToolbarItem, } from "@patternfly/react-core";
import { useState } from "react";
import { useTranslation } from "react-i18next";
export const TableToolbar = ({ toolbarItem, subToolbar, toolbarItemFooter, children, searchTypeComponent, inputGroupName, inputGroupPlaceholder, inputGroupOnEnter, }) => {
const { t } = useTranslation();
const [searchValue, setSearchValue] = useState("");
const onSearch = () => {
if (searchValue !== "") {
setSearchValue(searchValue);
inputGroupOnEnter === null || inputGroupOnEnter === void 0 ? void 0 : inputGroupOnEnter(searchValue);
}
else {
setSearchValue("");
inputGroupOnEnter === null || inputGroupOnEnter === void 0 ? void 0 : inputGroupOnEnter("");
}
};
const handleKeyDown = (e) => {
if (e.key === "Enter") {
onSearch();
}
};
return (_jsxs(_Fragment, { children: [_jsx(Toolbar, { children: _jsxs(ToolbarContent, { children: [inputGroupName && (_jsx(ToolbarItem, { children: _jsxs(InputGroup, { "data-testid": inputGroupName, children: [searchTypeComponent, inputGroupPlaceholder && (_jsx(SearchInput, { "data-testid": "table-search-input", placeholder: inputGroupPlaceholder, "aria-label": t("search"), value: searchValue, onChange: (_, value) => {
setSearchValue(value);
}, onSearch: onSearch, onKeyDown: handleKeyDown, onClear: () => {
setSearchValue("");
inputGroupOnEnter === null || inputGroupOnEnter === void 0 ? void 0 : inputGroupOnEnter("");
} }))] }) })), toolbarItem] }) }), subToolbar && (_jsx(Toolbar, { children: _jsx(ToolbarContent, { children: subToolbar }) })), _jsx(Divider, {}), children, _jsx(Toolbar, { children: toolbarItemFooter })] }));
};
//# sourceMappingURL=TableToolbar.js.map