From 993753a4858cfaba7788cf951d416f84d67d3b3c Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Sun, 6 Sep 2020 23:54:50 +0300
Subject: [PATCH] refactor(core-blocks): ItemListSearch improvements

---
 .../src/ItemList/ItemListSearch.tsx           | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/webapp/packages/core-blocks/src/ItemList/ItemListSearch.tsx b/webapp/packages/core-blocks/src/ItemList/ItemListSearch.tsx
index eeb0772f5e..280d0a1801 100644
--- a/webapp/packages/core-blocks/src/ItemList/ItemListSearch.tsx
+++ b/webapp/packages/core-blocks/src/ItemList/ItemListSearch.tsx
@@ -17,29 +17,35 @@ import { useStyles } from '@cloudbeaver/core-theming';
 import { StaticImage } from '../StaticImage';
 import { Styles } from './styles';
 
-type ItemListProps = React.PropsWithChildren<{
+type Props = React.PropsWithChildren<{
+  value?: string;
+  placeholder?: string;
   onSearch?(value: string): void;
   className?: string;
 }>
 
-export function ItemListSearch({ onSearch, className }: ItemListProps) {
+export function ItemListSearch({
+  value, placeholder, onSearch, className,
+}: Props) {
   const styles = useContext(Styles);
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useState(value ?? '');
   const translate = useTranslate();
   const searchHandler = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(event.target.value);
+    if (value !== undefined) {
+      setSearch(event.target.value);
+    }
     if (onSearch) {
       onSearch(event.target.value);
     }
-  }, [onSearch]);
+  }, [value, onSearch]);
 
   return styled(useStyles(...(styles || [])))(
     <list-search as="div" className={className}>
       <StaticImage icon='/icons/search.svg' />
       <input
         name='search'
-        placeholder={translate('ui_search')}
-        value={search}
+        placeholder={translate(placeholder || 'ui_search')}
+        value={value ?? search}
         onChange={searchHandler}
         autoComplete="off"
         {...use({ mod: 'surface' })}