made tags panel

src/components/node/NodeTags/index.tsx

@@ -6,10 +6,13 @@ interface IProps {
   is_editable?: boolean;
   tags: ITag[];
   onChange?: (tags: string[]) => void;
+  onTagClick?: (tag: Partial<ITag>) => void;
 }
 
-const NodeTags: FC<IProps> = memo(({ is_editable, tags, onChange }) => (
-  <Tags tags={tags} is_editable={is_editable} onTagsChange={onChange} />
-));
+const NodeTags: FC<IProps> = memo(({ is_editable, tags, onChange, onTagClick }) => {
+  return (
+    <Tags tags={tags} is_editable={is_editable} onTagsChange={onChange} onTagClick={onTagClick} />
+  );
+});
 
 export { NodeTags };

src/components/node/Tag/index.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEventHandler, FC, FocusEventHandler, KeyboardEventHandler } from 'react';
+import React, { ChangeEventHandler, FC, FocusEventHandler, KeyboardEventHandler, useCallback, } from 'react';
 import * as styles from './styles.scss';
 import { ITag } from '~/redux/types';
 import classNames = require('classnames');
@@ -11,6 +11,7 @@ const getTagFeature = (tag: Partial<ITag>) => {
 
 interface IProps {
   tag: Partial<ITag>;
+  size?: 'normal' | 'big';
 
   is_hoverable?: boolean;
   is_editing?: boolean;
@@ -18,32 +19,51 @@ interface IProps {
   onInput?: ChangeEventHandler<HTMLInputElement>;
   onKeyUp?: KeyboardEventHandler;
   onBlur?: FocusEventHandler<HTMLInputElement>;
+  onClick?: (tag: Partial<ITag>) => void;
 }
 
-const Tag: FC<IProps> = ({ tag, is_hoverable, is_editing, onInput, onKeyUp, onBlur }) => (
-  <div
-    className={classNames(styles.tag, getTagFeature(tag), {
-      is_hoverable,
-      is_editing,
-      input: !!onInput,
-    })}
-  >
-    <div className={styles.hole} />
-    <div className={styles.title}>{tag.title}</div>
+const Tag: FC<IProps> = ({
+  tag,
+  is_hoverable,
+  is_editing,
+  size = 'normal',
+  onInput,
+  onKeyUp,
+  onBlur,
+  onClick,
+}) => {
+  const onClickHandler = useCallback(() => {
+    if (!onClick) return;
+    onClick(tag);
+  }, [tag, onClick]);
 
-    {onInput && (
-      <input
-        type="text"
-        value={tag.title}
-        size={1}
-        placeholder="Добавить"
-        maxLength={24}
-        onChange={onInput}
-        onKeyUp={onKeyUp}
-        onBlur={onBlur}
-      />
-    )}
-  </div>
-);
+  return (
+    <div
+      className={classNames(styles.tag, getTagFeature(tag), size, {
+        is_hoverable,
+        is_editing,
+        input: !!onInput,
+        clickable: !!onClick,
+      })}
+      onClick={onClickHandler}
+    >
+      <div className={styles.hole} />
+      <div className={styles.title}>{tag.title}</div>
+
+      {onInput && (
+        <input
+          type="text"
+          value={tag.title}
+          size={1}
+          placeholder="Добавить"
+          maxLength={24}
+          onChange={onInput}
+          onKeyUp={onKeyUp}
+          onBlur={onBlur}
+        />
+      )}
+    </div>
+  );
+};
 
 export { Tag };

src/components/node/Tag/styles.scss

@@ -1,6 +1,9 @@
+$big: 1.2;
+
 .tag {
   @include outer_shadow();
 
+  cursor: default;
   height: $tag_height;
   background: $tag_bg;
   display: flex;
@@ -14,6 +17,17 @@
   margin: 0 $gap $gap 0;
   position: relative;
 
+  &:global(.big) {
+    height: $tag_height * $big;
+    font: $font_16_semibold;
+    border-radius: ($tag_height * $big / 2) 3px 3px ($tag_height * $big / 2);
+
+    .hole {
+      width: $tag_height * $big;
+      height: $tag_height * $big;
+    }
+  }
+
   &:global(.is_hoverable) {
     cursor: pointer;
   }
@@ -56,6 +70,10 @@
     min-width: 100px;
   }
 
+  &:global(.clickable) {
+    cursor: pointer;
+  }
+
   input {
     background: none;
     border: none;
@@ -80,7 +98,6 @@
   width: $tag_height;
   height: $tag_height;
   display: flex;
-  // padding-right: 0px;
   align-items: center;
   justify-content: center;
   flex: 0 0 $tag_height;

src/components/node/Tags/index.tsx

@@ -1,13 +1,13 @@
 import React, {
+  ChangeEvent,
   FC,
   HTMLAttributes,
-  useState,
+  KeyboardEvent,
   useCallback,
   useEffect,
-  KeyboardEvent,
-  ChangeEvent,
-  useRef,
   useMemo,
+  useRef,
+  useState,
 } from 'react';
 import { TagField } from '~/components/containers/TagField';
 import { ITag } from '~/redux/types';
@@ -18,9 +18,10 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   tags: Partial<ITag>[];
   is_editable?: boolean;
   onTagsChange?: (tags: string[]) => void;
+  onTagClick?: (tag: Partial<ITag>) => void;
 };
 
-export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props }) => {
+export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, onTagClick, ...props }) => {
   const [input, setInput] = useState('');
   const [data, setData] = useState([]);
   const timer = useRef(null);
@@ -98,11 +99,11 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props })
   return (
     <TagField {...props}>
       {catTags.map(tag => (
-        <Tag key={tag.title} tag={tag} />
+        <Tag key={tag.title} tag={tag} onClick={onTagClick} />
       ))}
 
       {ordinaryTags.map(tag => (
-        <Tag key={tag.title} tag={tag} />
+        <Tag key={tag.title} tag={tag} onClick={onTagClick} />
       ))}
 
       {data.map(tag => (