From 1414245a1a2b678e46220a6d49cb1667552d19b1 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 18:17:57 +0700
Subject: [PATCH] made autocomplete popup

---
 src/components/tags/Tag/index.tsx             | 21 +++++-------
 src/components/tags/Tag/styles.scss           |  4 ---
 .../tags/TagAutocomplete/styles.module.scss   | 15 ++++++--
 src/components/tags/TagInput/index.tsx        | 34 ++++++++++---------
 .../tags/TagInput/styles.module.scss          |  4 +++
 .../tags/TagWrapper/styles.module.scss        |  2 +-
 src/components/tags/Tags/index.tsx            |  2 +-
 7 files changed, 45 insertions(+), 37 deletions(-)
 create mode 100644 src/components/tags/TagInput/styles.module.scss

diff --git a/src/components/tags/Tag/index.tsx b/src/components/tags/Tag/index.tsx
index 2dcbc077..8207e65a 100644
--- a/src/components/tags/Tag/index.tsx
+++ b/src/components/tags/Tag/index.tsx
@@ -1,5 +1,4 @@
-import React, { FC, FocusEventHandler, useCallback, } from 'react';
-import * as styles from './styles.scss';
+import React, { FC, FocusEventHandler, useCallback } from 'react';
 import { ITag } from '~/redux/types';
 import { TagWrapper } from '~/components/tags/TagWrapper';
 
@@ -27,16 +26,14 @@ const Tag: FC<IProps> = ({ tag, is_hoverable, is_editing, size = 'normal', onBlu
   }, [tag, onClick]);
 
   return (
-    <div className={styles.wrap}>
-      <TagWrapper
-        feature={getTagFeature(tag)}
-        size={size}
-        is_hoverable={is_hoverable}
-        is_editing={is_editing}
-        onClick={onClick && onClickHandler}
-        title={tag.title}
-      />
-    </div>
+    <TagWrapper
+      feature={getTagFeature(tag)}
+      size={size}
+      is_hoverable={is_hoverable}
+      is_editing={is_editing}
+      onClick={onClick && onClickHandler}
+      title={tag.title}
+    />
   );
 };
 
diff --git a/src/components/tags/Tag/styles.scss b/src/components/tags/Tag/styles.scss
index a834b87e..e69de29b 100644
--- a/src/components/tags/Tag/styles.scss
+++ b/src/components/tags/Tag/styles.scss
@@ -1,4 +0,0 @@
-.wrap {
-  background-color: blue;
-  position: relative;
-}
diff --git a/src/components/tags/TagAutocomplete/styles.module.scss b/src/components/tags/TagAutocomplete/styles.module.scss
index 740c4a96..7d620f93 100644
--- a/src/components/tags/TagAutocomplete/styles.module.scss
+++ b/src/components/tags/TagAutocomplete/styles.module.scss
@@ -1,11 +1,20 @@
+@keyframes appear {
+  0% { opacity: 0 }
+  100% { opacity: 100 }
+}
+
 .window {
-  display: none;
+  box-shadow: transparentize(black, 0.5) 4px 4px 4px, inset transparentize(white, 0.95) 1px 1px;
+
   position: absolute;
   top: 0;
   right: 0;
   width: calc(90vw - 20px);
   max-width: 300px;
-  background: red;
+  background: lighten($content_bg, 4%);
   height: 100px;
-  z-index: -1;
+  z-index: 10;
+  border-radius: 3px;
+  padding-top: $tag_height;
+  animation: appear 0.25s forwards;
 }
diff --git a/src/components/tags/TagInput/index.tsx b/src/components/tags/TagInput/index.tsx
index cae76eb1..4211faff 100644
--- a/src/components/tags/TagInput/index.tsx
+++ b/src/components/tags/TagInput/index.tsx
@@ -10,6 +10,7 @@ import React, {
 } from 'react';
 import { TagAutocomplete } from '~/components/tags/TagAutocomplete';
 import { TagWrapper } from '~/components/tags/TagWrapper';
+import styles from './styles.module.scss';
 
 const placeholder = 'Добавить';
 
@@ -99,22 +100,23 @@ const TagInput: FC<IProps> = ({ onAppend, onClearTag, onSubmit }) => {
   const feature = useMemo(() => (input.substr(0, 1) === '/' ? 'green' : ''), [input]);
 
   return (
-    <TagWrapper title={input || placeholder} has_input={true} feature={feature}>
-      {onInput && <TagAutocomplete />}
-
-      <input
-        type="text"
-        value={input}
-        size={1}
-        placeholder={placeholder}
-        maxLength={24}
-        onChange={onInput}
-        onKeyUp={onKeyUp}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        ref={ref}
-      />
-    </TagWrapper>
+    <div className={styles.wrap}>
+      {onInput && focused && <TagAutocomplete />}
+      <TagWrapper title={input || placeholder} has_input={true} feature={feature}>
+        <input
+          type="text"
+          value={input}
+          size={1}
+          placeholder={placeholder}
+          maxLength={24}
+          onChange={onInput}
+          onKeyUp={onKeyUp}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          ref={ref}
+        />
+      </TagWrapper>
+    </div>
   );
 };
 
diff --git a/src/components/tags/TagInput/styles.module.scss b/src/components/tags/TagInput/styles.module.scss
new file mode 100644
index 00000000..57fac5fd
--- /dev/null
+++ b/src/components/tags/TagInput/styles.module.scss
@@ -0,0 +1,4 @@
+.wrap {
+  position: relative;
+  z-index: 13;
+}
diff --git a/src/components/tags/TagWrapper/styles.module.scss b/src/components/tags/TagWrapper/styles.module.scss
index 87e71e1b..a16a6358 100644
--- a/src/components/tags/TagWrapper/styles.module.scss
+++ b/src/components/tags/TagWrapper/styles.module.scss
@@ -16,7 +16,7 @@ $big: 1.2;
   padding: 0 8px 0 0;
   //margin: 0 $gap $gap 0;
   position: relative;
-  z-index: 4;
+  z-index: 12;
 
   &:global(.big) {
     height: $tag_height * $big;
diff --git a/src/components/tags/Tags/index.tsx b/src/components/tags/Tags/index.tsx
index 2cf064fb..2b4b8f3a 100644
--- a/src/components/tags/Tags/index.tsx
+++ b/src/components/tags/Tags/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes, useCallback, useEffect, useMemo, useState, } from 'react';
+import React, { FC, HTMLAttributes, useCallback, useEffect, useMemo, useState } from 'react';
 import { TagField } from '~/components/containers/TagField';
 import { ITag } from '~/redux/types';
 import uniq from 'ramda/es/uniq';