refactor(Tag)!: move out clean button

taskany-inc · Aug 11, 2023 · 1955f13 · 1955f13
1 parent aa80970
commit 1955f13
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 48 deletions.
diff --git a/src/components/CleanButton.tsx b/src/components/CleanButton.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { gray10, gray7, gray8 } from '@taskany/colors';
 
-interface CleanButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CleanButtonProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
 
     onClick?: (e: React.MouseEvent) => void;

diff --git a/src/components/FormMultiInput.tsx b/src/components/FormMultiInput.tsx
@@ -8,7 +8,7 @@ import { formContext } from '../context/form';
 
 import { PlusIcon } from './Icon/PlusIcon';
 import { Text } from './Text';
-import { Tag } from './Tag';
+import { Tag, TagCleanButton } from './Tag';
 import { Input } from './Input';
 import { MenuItem } from './MenuItem';
 import { ComboBox } from './ComboBox';
@@ -111,7 +111,10 @@ export const FormMultiInput = React.forwardRef<HTMLDivElement, FormMultiInputPro
                 ))}
 
                 {value.map((item) => (
-                    <Tag key={item.id} title={item.title} onHide={onValueDelete(item)} />
+                    <Tag key={item.id}>
+                        <TagCleanButton onClick={onValueDelete(item)} />
+                        {item.title}
+                    </Tag>
                 ))}
 
                 <StyledComboBox

diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
@@ -1,28 +1,23 @@
-import React, { MouseEventHandler, useCallback } from 'react';
+import React, { MouseEventHandler } from 'react';
 import styled from 'styled-components';
 import { colorPrimary, gapXs, gray10, gray5, gray6, gray9, radiusL, textColorPrimary } from '@taskany/colors';
 
-import { nullable } from '../utils/nullable';
-
 import { CleanButton } from './CleanButton';
 
 interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
-    title: string;
+    children: React.ReactNode;
     description?: string;
     size?: 's' | 'm';
     className?: string;
     checked?: boolean;
 
     onClick?: MouseEventHandler<HTMLDivElement>;
-    onHide?: () => void;
 }
 
-const StyledCleanButton = styled(CleanButton)``;
+export const TagCleanButton = styled(CleanButton)``;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StyledTag = styled(({ onHide, ...props }: Partial<TagProps> & { children?: React.ReactNode }) => (
-    <div {...props} />
-))`
+const StyledTag = styled(({ size, ...props }: TagProps) => <div {...props} />)`
     display: inline-block;
     position: relative;
     padding: 4px 12px 5px;
@@ -45,8 +40,7 @@ const StyledTag = styled(({ onHide, ...props }: Partial<TagProps> & { children?:
         margin-left: ${gapXs};
     }
 
-    ${({ onHide, checked }) =>
-        !onHide &&
+    ${({ checked }) =>
         !checked &&
         `
             &:hover {
@@ -57,7 +51,7 @@ const StyledTag = styled(({ onHide, ...props }: Partial<TagProps> & { children?:
         `}
 
     &:hover {
-        ${StyledCleanButton} {
+        ${TagCleanButton} {
             visibility: visible;
 
             cursor: pointer;
@@ -86,40 +80,10 @@ const StyledTag = styled(({ onHide, ...props }: Partial<TagProps> & { children?:
         `}
 `;
 
-export const Tag: React.FC<TagProps> = ({
-    title,
-    description,
-    size = 'm',
-    onClick,
-    onHide,
-    className,
-    checked,
-    ...attrs
-}) => {
-    const onHideClick = useCallback(
-        (e: React.MouseEvent) => {
-            e.preventDefault();
-            e.stopPropagation();
-
-            onHide?.();
-        },
-        [onHide],
-    );
-
+export const Tag: React.FC<TagProps> = ({ children, description, size = 'm', ...props }) => {
     return (
-        <StyledTag
-            size={size}
-            onClick={onClick}
-            onHide={onHide}
-            title={description}
-            className={className}
-            checked={checked}
-            {...attrs}
-        >
-            {nullable(onHide, () => (
-                <StyledCleanButton onClick={onHideClick} />
-            ))}
-            {title}
+        <StyledTag size={size} title={description} {...props}>
+            {children}
         </StyledTag>
     );
 };