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}>

src/components/flow/FlowStamp/styles.scss

@@ -13,6 +13,19 @@
   flex: 1;
   border-radius: $radius;
   overflow: hidden;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 60px;
+    width: 100%;
+    background: linear-gradient(transparentize($content_bg, 1), $content_bg 90%);
+    pointer-events: none;
+    touch-action: none;
+  }
 
   @include outer_shadow();
 }
@@ -53,9 +66,28 @@
 }
 
 .search {
-  background: lighten($content_bg, 4%);
+  background: lighten($content_bg, 3%);
   border-radius: $radius $radius 0 0;
   padding: $gap;
 
   @include outer_shadow();
 }
+
+.search_icon {
+  fill: white;
+  opacity: 0.1;
+  stroke: white;
+  stroke-width: 0.5;
+}
+
+.close_icon {
+  cursor: pointer;
+  stroke: white;
+  stroke-width: 0.5;
+  opacity: 0.5;
+  transition: opacity 0.25s;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}