clearing search

src/components/flow/FlowStamp/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, FormEvent } from 'react';
+import React, { FC, useCallback, FormEvent, useMemo, KeyboardEvent } from 'react';
 import { IFlowState } from '~/redux/flow/reducer';
 import { InputText } from '~/components/input/InputText';
 import { FlowRecent } from '../FlowRecent';
@@ -7,6 +7,7 @@ import classnames from 'classnames';
 import * as styles from './styles.scss';
 import * as FLOW_ACTIONS from '~/redux/flow/actions';
 import { FlowSearchResults } from '../FlowSearchResults';
+import { Icon } from '~/components/input/Icon';
 
 interface IProps {
   recent: IFlowState['recent'];
@@ -25,10 +26,37 @@ const FlowStamp: FC<IProps> = ({ recent, updated, search, flowChangeSearch, onLo
     event.preventDefault();
   }, []);
 
+  const onClearSearch = useCallback(() => flowChangeSearch({ text: '' }), [flowChangeSearch]);
+
+  const onKeyUp = useCallback(
+    event => {
+      if (event.key !== 'Escape') return;
+      onClearSearch();
+      event.target.blur();
+    },
+    [onClearSearch]
+  );
+
+  const after = useMemo(
+    () =>
+      search.text ? (
+        <Icon icon="close" size={24} className={styles.close_icon} onClick={onClearSearch} />
+      ) : (
+        <Icon icon="search" size={24} className={styles.search_icon} />
+      ),
+    [search.text]
+  );
+
   return (
     <div className={styles.wrap}>
       <form className={styles.search} onSubmit={onSearchSubmit}>
-        <InputText title="Поиск" value={search.text} handler={onSearchChange} />
+        <InputText
+          title="Поиск"
+          value={search.text}
+          handler={onSearchChange}
+          after={after}
+          onKeyUp={onKeyUp}
+        />
       </form>
 
       <div className={styles.grid}>