From 4d78254c1d872de40d8a5adae2889e38177e5137 Mon Sep 17 00:00:00 2001
From: Nikita Gorin <36075690+NikitaCG@users.noreply.github.com>
Date: Fri, 19 Jan 2024 16:51:10 +0300
Subject: [PATCH] feat: add clear button in services select (#158)

* feat: add clear button in services select

* feat: update icon clear icon size
---
 .../components/Controls/customRenders.tsx           |  3 ++-
 .../components/CustomSwitcher/CustomSwitcher.scss   | 13 +++++++++++++
 .../components/CustomSwitcher/CustomSwitcher.tsx    |  9 +++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/FeedHeader/components/Controls/customRenders.tsx b/src/components/FeedHeader/components/Controls/customRenders.tsx
index e6b6e000..75ca5722 100644
--- a/src/components/FeedHeader/components/Controls/customRenders.tsx
+++ b/src/components/FeedHeader/components/Controls/customRenders.tsx
@@ -27,7 +27,7 @@ type RenderSwitcherType = ({
 export const renderSwitcher: RenderSwitcherType =
     ({initial, list, defaultLabel}) =>
     // eslint-disable-next-line react/display-name
-    ({onClick, ref, onKeyDown, open}) => (
+    ({onClick, ref, onKeyDown, open, renderClear}) => (
         <CustomSwitcher
             initial={initial}
             defaultLabel={defaultLabel}
@@ -35,6 +35,7 @@ export const renderSwitcher: RenderSwitcherType =
             controlRef={ref}
             onClick={onClick}
             onKeyDown={onKeyDown}
+            renderClear={renderClear}
             open={open}
         />
     );
diff --git a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss
index 4e8895a5..9dba6004 100644
--- a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss
+++ b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.scss
@@ -3,6 +3,8 @@
 
 $block: '.#{$namespace}feed-custom-switcher';
 
+$clearIconSize: 11px;
+
 #{$block} {
     $root: &;
 
@@ -33,6 +35,12 @@ $block: '.#{$namespace}feed-custom-switcher';
             //stylelint-disable-next-line declaration-no-important
             transform: translate3d(0, 4px, 0) !important;
         }
+
+        .g-select-clear {
+            width: $clearIconSize;
+            height: $clearIconSize;
+            margin-right: 9px;
+        }
     }
 
     &__custom-switcher:hover {
@@ -75,4 +83,9 @@ $block: '.#{$namespace}feed-custom-switcher';
         width: $indentXS;
         height: $indentXS;
     }
+
+    &__clear {
+        width: $clearIconSize;
+        height: $clearIconSize;
+    }
 }
diff --git a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx
index 7ac71087..ab29ba1a 100644
--- a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx
+++ b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx
@@ -3,6 +3,7 @@ import React, {LegacyRef, useMemo} from 'react';
 import {Icon, SelectProps} from '@gravity-ui/uikit';
 
 import {DropdownArrow} from '../../../../icons/DropdownArrow';
+import {Close} from '../../../../icons/Close';
 import {block} from '../../../../utils/cn';
 import {SelectItem} from '../Controls/Controls';
 
@@ -20,6 +21,7 @@ export type CustomSwitcherProps = {
 } & Omit<RenderControlParameters, 'ref'>;
 
 const ICON_SIZE = 12;
+const CLEAR_ICON_SIZE = 11;
 
 export const CustomSwitcher = ({
     initial,
@@ -29,6 +31,7 @@ export const CustomSwitcher = ({
     controlRef,
     onKeyDown,
     open,
+    renderClear,
 }: CustomSwitcherProps) => {
     const itemsNames = useMemo(() => {
         const items = list
@@ -50,6 +53,12 @@ export const CustomSwitcher = ({
             <div className={b('custom-switcher-element', {content: true})}>
                 {itemsNames?.join(', ')}
             </div>
+            {renderClear &&
+                renderClear({
+                    renderIcon: () => (
+                        <Icon data={Close} size={CLEAR_ICON_SIZE} className={b('clear')} />
+                    ),
+                })}
             {hasCounter && (
                 <div className={b('custom-switcher-element', {counter: true})}>
                     {itemsNames.length}