libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

changed to use the SearchInput (#2314)

Browse source 
fixes: #1348
This commit is contained in:
Erik Jan de Wit 2022-03-22 12:16:24 +01:00 committed by GitHub
parent b68ddc2843
commit e641af0b16
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/table-toolbar/PaginatingTableToolbar.tsx
View file

@ -1,4 +1,4 @@
import React, { FormEvent, FunctionComponent, ReactNode } from "react";
import React, { FunctionComponent, ReactNode } from "react";
import {
Pagination,
ToggleTemplateProps,
@ -18,10 +18,6 @@ type TableToolbarProps = {
subToolbar?: ReactNode;
inputGroupName?: string;
inputGroupPlaceholder?: string;
inputGroupOnChange?: (
newInput: string,
event: FormEvent<HTMLInputElement>
) => void;
inputGroupOnEnter?: (value: string) => void;
};
@ -38,7 +34,6 @@ export const PaginatingTableToolbar: FunctionComponent<TableToolbarProps> = ({
children,
inputGroupName,
inputGroupPlaceholder,
inputGroupOnChange,
inputGroupOnEnter,
}) => {
const page = Math.round(first / max);
@ -77,7 +72,6 @@ export const PaginatingTableToolbar: FunctionComponent<TableToolbarProps> = ({
}
inputGroupName={inputGroupName}
inputGroupPlaceholder={inputGroupPlaceholder}
inputGroupOnChange={inputGroupOnChange}
inputGroupOnEnter={inputGroupOnEnter}
>
{children}

45
src/components/table-toolbar/TableToolbar.tsx
View file

@ -1,5 +1,4 @@
import React, {
FormEvent,
FunctionComponent,
ReactNode,
useState,
@ -10,12 +9,9 @@ import {
ToolbarContent,
ToolbarItem,
InputGroup,
TextInput,
Button,
ButtonVariant,
Divider,
SearchInput,
} from "@patternfly/react-core";
import { SearchIcon } from "@patternfly/react-icons";
import { useTranslation } from "react-i18next";
type TableToolbarProps = {
@ -25,10 +21,6 @@ type TableToolbarProps = {
searchTypeComponent?: ReactNode;
inputGroupName?: string;
inputGroupPlaceholder?: string;
inputGroupOnChange?: (
newInput: string,
event: FormEvent<HTMLInputElement>
) => void;
inputGroupOnEnter?: (value: string) => void;
};
@ -40,7 +32,6 @@ export const TableToolbar: FunctionComponent<TableToolbarProps> = ({
searchTypeComponent,
inputGroupName,
inputGroupPlaceholder,
inputGroupOnChange,
inputGroupOnEnter,
}) => {
const { t } = useTranslation();
@ -62,14 +53,6 @@ export const TableToolbar: FunctionComponent<TableToolbarProps> = ({
}
};
const handleInputChange = (
value: string,
event: FormEvent<HTMLInputElement>
) => {
inputGroupOnChange?.(value, event);
setSearchValue(value);
};
return (
<>
<Toolbar>
@ -79,24 +62,18 @@ export const TableToolbar: FunctionComponent<TableToolbarProps> = ({
<InputGroup>
{searchTypeComponent}
{inputGroupPlaceholder && (
<>
<TextInput
name={inputGroupName}
id={inputGroupName}
type="search"
aria-label={t("search")}
<SearchInput
placeholder={inputGroupPlaceholder}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
/>
<Button
variant={ButtonVariant.control}
aria-label={t("search")}
onClick={onSearch}
>
<SearchIcon />
</Button>
</>
value={searchValue}
onChange={setSearchValue}
onSearch={onSearch}
onKeyDown={handleKeyDown}
onClear={() => {
setSearchValue("");
inputGroupOnEnter?.("");
}}
/>
)}
</InputGroup>
</ToolbarItem>