Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 4x 4x 4x 4x 4x 25x 25x 25x 1x 1x 2x | /*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import { SvgCloseSmall, SvgSearch } from "@itwin/itwinui-icons-react";
import { IconButton, LabeledInput } from "@itwin/itwinui-react";
import React, { useState } from "react";
import "./SearchBar.scss";
interface SearchBarProps {
searchValue: string;
setSearchValue: React.Dispatch<React.SetStateAction<string>>;
disabled?: boolean;
}
export const SearchBar = ({ searchValue, setSearchValue, disabled }: SearchBarProps) => {
const [searchBarOpen, setSearchBarOpened] = useState<boolean>(false);
const [searchBarClosing, setSearchBarClosing] = useState<boolean>(false);
return searchBarOpen || searchValue ? (
<div
className="ec3w-search-button"
style={{
animation: searchBarClosing ? "ec3w-shrink .5s" : "ec3w-expand .5s",
}}
onAnimationEnd={() => {
Iif (searchBarClosing) {
setSearchBarClosing(false);
setSearchBarOpened(false);
setSearchValue("");
}
}}
>
<LabeledInput
aria-label="search-textbox"
placeholder="Search templates"
svgIcon={
<IconButton data-testid="ec3-close-search-bar" onClick={() => setSearchBarClosing(true)} styleType="borderless" title="Clear Search">
<SvgCloseSmall />
</IconButton>
}
iconDisplayStyle="inline"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
disabled={disabled}
/>{" "}
</div>
) : (
<IconButton styleType="borderless" title="Search" onClick={() => setSearchBarOpened(true)}>
<SvgSearch />
</IconButton>
);
};
|