From df1c11a308cb8617a3fc89712892156b62c48dd0 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 9 Oct 2019 12:49:08 +0700
Subject: [PATCH] added tag input field

---
 src/components/node/Tag/index.tsx          | 19 ++++++++--
 src/components/node/Tag/styles.scss        | 37 +++++++++++++++++--
 src/components/node/Tags/index.tsx         | 42 ++++++++++++----------
 src/containers/node/NodeLayout/index.tsx   |  2 +-
 src/containers/node/NodeLayout/styles.scss |  1 +
 src/redux/types.ts                         |  2 +-
 6 files changed, 78 insertions(+), 25 deletions(-)

diff --git a/src/components/node/Tag/index.tsx b/src/components/node/Tag/index.tsx
index dc4619ef..6b1e84be 100644
--- a/src/components/node/Tag/index.tsx
+++ b/src/components/node/Tag/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, ReactElement, ChangeEvent, ChangeEventHandler } from 'react';
 import * as styles from './styles.scss';
 import { ITag } from '~/redux/types';
 
@@ -9,6 +9,7 @@ interface IProps {
   feature?: ITag['feature'];
 
   is_hoverable?: boolean;
+  onInput?: ChangeEventHandler<HTMLInputElement>;
 }
 
 const Tag: FC<IProps> = ({
@@ -16,11 +17,25 @@ const Tag: FC<IProps> = ({
   feature,
 
   is_hoverable,
+  onInput,
 }) => (
-  <div className={classNames(styles.tag, feature, { is_hoverable })}>
+  <div className={classNames(styles.tag, feature, { is_hoverable, input: !!onInput })}>
     <div className={styles.hole} />
     <div className={styles.title}>{title}</div>
+
+    {onInput && (
+      <input
+        type="text"
+        value={title}
+        onChange={onInput}
+        size={1}
+        placeholder="Добавить"
+        maxLength={24}
+      />
+    )}
   </div>
 );
 
 export { Tag };
+
+// </div>
diff --git a/src/components/node/Tag/styles.scss b/src/components/node/Tag/styles.scss
index 6b70882d..34f20e30 100644
--- a/src/components/node/Tag/styles.scss
+++ b/src/components/node/Tag/styles.scss
@@ -6,11 +6,12 @@
   align-items: center;
   justify-content: stretch;
   border-radius: ($tag_height / 2) 3px 3px ($tag_height / 2);
-  font: $font_12_semibold;
+  font: $font_14_semibold;
   align-self: flex-start;
   padding: 0 8px 0 0;
   box-shadow: $shadow_depth_2;
   margin: ($gap / 2) $gap ($gap / 2) 0;
+  position: relative;
 
   &:global(.is_hoverable) {
     cursor: pointer;
@@ -37,9 +38,35 @@
     background: transparentize(black, 0.7);
     box-shadow: none;
     color: transparentize(white, 0.6);
-    font: $font_12_medium;
+    font: $font_14_medium;
 
-    .hole::after { background: transparentize(white, 0.98); }
+    .hole::after {
+      background: transparentize(white, 0.98);
+    }
+  }
+
+  &:global(.input) {
+    color: transparent !important;
+    min-width: 100px;
+  }
+
+  input {
+    background: none;
+    border: none;
+    color: white;
+    outline: none;
+    display: inline-flex;
+    position: absolute;
+    font: inherit;
+
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    padding-left: 23px;
+    padding-right: 5px;
+    box-sizing: border-box;
   }
 }
 
@@ -50,6 +77,7 @@
   margin-right: 3px;
   align-items: center;
   justify-content: center;
+  flex: 0 0 22px;
 
   &::after {
     content: ' ';
@@ -63,4 +91,7 @@
 
 .title {
   white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
diff --git a/src/components/node/Tags/index.tsx b/src/components/node/Tags/index.tsx
index 06a7b109..3792513a 100644
--- a/src/components/node/Tags/index.tsx
+++ b/src/components/node/Tags/index.tsx
@@ -1,25 +1,31 @@
-import React, { FC, HTMLAttributes } from 'react';
+import React, { FC, HTMLAttributes, useState, useCallback, ChangeEvent } from 'react';
 import { TagField } from '~/components/containers/TagField';
 import { ITag } from '~/redux/types';
 import { Tag } from '~/components/node/Tag';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   tags: ITag[];
-}
+  is_editable?: boolean;
+  onChange?: (tags: string[]) => void;
+};
 
-export const Tags: FC<IProps> = ({
-  tags,
-  ...props
-}) => (
-  <TagField {...props}>
-    {
-      tags.map(tag => (
-        <Tag
-          key={tag.title}
-          title={tag.title}
-          feature={tag.feature}
-        />
-      ))
-    }
-  </TagField>
-);
+export const Tags: FC<IProps> = ({ tags, is_editable, onChange, ...props }) => {
+  const [input, setInput] = useState('asdasdasdasdasdasdasdasdasdasdasasdasdasdasdasdasdasda');
+
+  const onInput = useCallback(
+    ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+      setInput(value);
+    },
+    [setInput]
+  );
+
+  return (
+    <TagField {...props}>
+      {tags.map(tag => (
+        <Tag key={tag.title} title={tag.title} feature={tag.feature} />
+      ))}
+
+      <Tag title={input} onInput={onInput} />
+    </TagField>
+  );
+};
diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx
index 833596eb..31aad017 100644
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@@ -63,7 +63,7 @@ const NodeLayoutUnconnected: FC<IProps> = ({
             </Group>
 
             <div className={styles.panel}>
-              <Group style={{ flex: 1 }}>
+              <Group style={{ flex: 1, minWidth: 0 }}>
                 <NodeTags />
 
                 <NodeRelated title="First album" />
diff --git a/src/containers/node/NodeLayout/styles.scss b/src/containers/node/NodeLayout/styles.scss
index 14d1de5e..2e5e7f78 100644
--- a/src/containers/node/NodeLayout/styles.scss
+++ b/src/containers/node/NodeLayout/styles.scss
@@ -14,6 +14,7 @@
   align-items: flex-start;
   justify-content: flex-start;
   padding-left: $gap / 2;
+  min-width: 0;
 
   @include tablet {
     padding-left: 0;
diff --git a/src/redux/types.ts b/src/redux/types.ts
index 792c839f..8fa3b730 100644
--- a/src/redux/types.ts
+++ b/src/redux/types.ts
@@ -5,7 +5,7 @@ import { IUser } from './auth/types';
 
 export interface ITag {
   title: string;
-  feature?: 'red' | 'blue' | 'green' | 'olive' | 'black';
+  feature?: 'red' | 'blue' | 'green' | 'olive' | 'black' | 'input';
 }
 
 export type IInputTextProps = DetailedHTMLProps<