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

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

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