From 550a5e2892e01e45e3c81ca8f70ae63f5c03c2cd Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Mon, 22 Apr 2024 12:33:22 +0300
Subject: [PATCH] Fix react-select scaling

---
 .../src/components/ui/SelectMulti.tsx         | 56 ++++++++++++++++-
 .../src/components/ui/SelectSingle.tsx        | 60 +++++++++++++++++--
 .../RSFormPage/EditorTermGraph/ViewHidden.tsx |  2 +-
 3 files changed, 111 insertions(+), 7 deletions(-)

diff --git a/rsconcept/frontend/src/components/ui/SelectMulti.tsx b/rsconcept/frontend/src/components/ui/SelectMulti.tsx
index d7bfddd9..81eb7551 100644
--- a/rsconcept/frontend/src/components/ui/SelectMulti.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectMulti.tsx
@@ -1,11 +1,45 @@
 'use client';
 
 import { useMemo } from 'react';
-import Select, { GroupBase, Props, StylesConfig } from 'react-select';
+import Select, {
+  ClearIndicatorProps,
+  components,
+  DropdownIndicatorProps,
+  GroupBase,
+  Props,
+  StylesConfig
+} from 'react-select';
 
 import { useConceptOptions } from '@/context/OptionsContext';
+import useWindowSize from '@/hooks/useWindowSize';
 import { selectDarkT, selectLightT } from '@/styling/color';
 
+import { IconClose, IconDropArrow, IconDropArrowUp } from '../Icons';
+
+function DropdownIndicator<Option, Group extends GroupBase<Option> = GroupBase<Option>>(
+  props: DropdownIndicatorProps<Option, true, Group>
+) {
+  return (
+    components.DropdownIndicator && (
+      <components.DropdownIndicator {...props}>
+        {props.selectProps.menuIsOpen ? <IconDropArrow size='1.25rem' /> : <IconDropArrowUp size='1.25rem' />}
+      </components.DropdownIndicator>
+    )
+  );
+}
+
+function ClearIndicator<Option, Group extends GroupBase<Option> = GroupBase<Option>>(
+  props: ClearIndicatorProps<Option, true, Group>
+) {
+  return (
+    components.ClearIndicator && (
+      <components.ClearIndicator {...props}>
+        <IconClose size='1.25rem' />
+      </components.ClearIndicator>
+    )
+  );
+}
+
 export interface SelectMultiProps<Option, Group extends GroupBase<Option> = GroupBase<Option>>
   extends Omit<Props<Option, true, Group>, 'theme' | 'menuPortalTarget'> {
   noPortal?: boolean;
@@ -16,6 +50,7 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
   ...restProps
 }: SelectMultiProps<Option, Group>) {
   const { darkMode, colors } = useConceptOptions();
+  const size = useWindowSize();
   const themeColors = useMemo(() => (!darkMode ? selectLightT : selectDarkT), [darkMode]);
 
   const adjustedStyles: StylesConfig<Option, true, Group> = useMemo(
@@ -39,7 +74,7 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
       }),
       menuList: styles => ({
         ...styles,
-        padding: '0px'
+        padding: 0
       }),
       input: styles => ({ ...styles }),
       placeholder: styles => ({ ...styles }),
@@ -47,6 +82,16 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
         ...styles,
         borderRadius: '0.5rem',
         backgroundColor: colors.bgSelected
+      }),
+      dropdownIndicator: base => ({
+        ...base,
+        paddingTop: 0,
+        paddingBottom: 0
+      }),
+      clearIndicator: base => ({
+        ...base,
+        paddingTop: 0,
+        paddingBottom: 0
       })
     }),
     [colors]
@@ -56,9 +101,16 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
     <Select
       isMulti
       noOptionsMessage={() => 'Список пуст'}
+      components={{ DropdownIndicator, ClearIndicator }}
       theme={theme => ({
         ...theme,
         borderRadius: 0,
+        spacing: {
+          ...theme.spacing, // prettier: split-lines
+          baseUnit: size.isSmall ? 2 : 4,
+          menuGutter: size.isSmall ? 4 : 8,
+          controlHeight: size.isSmall ? 28 : 38
+        },
         colors: {
           ...theme.colors,
           ...themeColors
diff --git a/rsconcept/frontend/src/components/ui/SelectSingle.tsx b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
index 7d4e9c94..2492f3a8 100644
--- a/rsconcept/frontend/src/components/ui/SelectSingle.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
@@ -1,12 +1,46 @@
 'use client';
 
 import { useMemo } from 'react';
-import Select, { GroupBase, Props, StylesConfig } from 'react-select';
+import Select, {
+  ClearIndicatorProps,
+  components,
+  DropdownIndicatorProps,
+  GroupBase,
+  Props,
+  StylesConfig
+} from 'react-select';
 
 import { useConceptOptions } from '@/context/OptionsContext';
+import useWindowSize from '@/hooks/useWindowSize';
 import { selectDarkT, selectLightT } from '@/styling/color';
 
-interface SelectSingleProps<Option, Group extends GroupBase<Option> = GroupBase<Option>>
+import { IconClose, IconDropArrow, IconDropArrowUp } from '../Icons';
+
+function DropdownIndicator<Option, Group extends GroupBase<Option> = GroupBase<Option>>(
+  props: DropdownIndicatorProps<Option, false, Group>
+) {
+  return (
+    components.DropdownIndicator && (
+      <components.DropdownIndicator {...props}>
+        {props.selectProps.menuIsOpen ? <IconDropArrow size='1.25rem' /> : <IconDropArrowUp size='1.25rem' />}
+      </components.DropdownIndicator>
+    )
+  );
+}
+
+function ClearIndicator<Option, Group extends GroupBase<Option> = GroupBase<Option>>(
+  props: ClearIndicatorProps<Option, false, Group>
+) {
+  return (
+    components.ClearIndicator && (
+      <components.ClearIndicator {...props}>
+        <IconClose size='1.25rem' />
+      </components.ClearIndicator>
+    )
+  );
+}
+
+export interface SelectSingleProps<Option, Group extends GroupBase<Option> = GroupBase<Option>>
   extends Omit<Props<Option, false, Group>, 'theme' | 'menuPortalTarget'> {
   noPortal?: boolean;
   noBorder?: boolean;
@@ -18,6 +52,7 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
   ...restProps
 }: SelectSingleProps<Option, Group>) {
   const { darkMode, colors } = useConceptOptions();
+  const size = useWindowSize();
   const themeColors = useMemo(() => (!darkMode ? selectLightT : selectDarkT), [darkMode]);
 
   const adjustedStyles: StylesConfig<Option, false, Group> = useMemo(
@@ -35,7 +70,7 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
       }),
       menuList: defaultStyles => ({
         ...defaultStyles,
-        padding: '0px'
+        padding: 0
       }),
       option: (defaultStyles, { isSelected }) => ({
         ...defaultStyles,
@@ -46,7 +81,17 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
       }),
       input: defaultStyles => ({ ...defaultStyles }),
       placeholder: defaultStyles => ({ ...defaultStyles }),
-      singleValue: defaultStyles => ({ ...defaultStyles })
+      singleValue: defaultStyles => ({ ...defaultStyles }),
+      dropdownIndicator: base => ({
+        ...base,
+        paddingTop: 0,
+        paddingBottom: 0
+      }),
+      clearIndicator: base => ({
+        ...base,
+        paddingTop: 0,
+        paddingBottom: 0
+      })
     }),
     [colors, noBorder]
   );
@@ -54,9 +99,16 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
   return (
     <Select
       noOptionsMessage={() => 'Список пуст'}
+      components={{ DropdownIndicator, ClearIndicator }}
       theme={theme => ({
         ...theme,
         borderRadius: 0,
+        spacing: {
+          ...theme.spacing, // prettier: split-lines
+          baseUnit: size.isSmall ? 2 : 4,
+          menuGutter: size.isSmall ? 4 : 8,
+          controlHeight: size.isSmall ? 28 : 38
+        },
         colors: {
           ...theme.colors,
           ...themeColors
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
index 0791079e..9985e720 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
@@ -51,7 +51,7 @@ function ViewHidden({ items, selected, toggleSelection, setFocus, schema, colori
   }
   return (
     <div className='flex flex-col'>
-      <Overlay position='right-[calc(0.5rem+1px)] top-2'>
+      <Overlay position='right-[calc(0.7rem-2px)] top-2'>
         <MiniButton
           noPadding
           noHover