From d10ef10265c75e22f31b91ae6f0308842c0bb780 Mon Sep 17 00:00:00 2001
From: Vasilica <olariu.vasilica@gmail.com>
Date: Tue, 18 Jul 2023 14:39:24 +0300
Subject: [PATCH] TAL-27 - add more skills placeholder

---
 .../InputSkillSelector.tsx                    |  2 ++
 .../InputMultiselect.module.scss              | 11 +++++++++++
 .../input-multiselect/InputMultiselect.tsx    | 19 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx b/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx
index e90789408..a59380471 100644
--- a/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx
+++ b/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx
@@ -37,6 +37,7 @@ interface InputSkillSelectorProps {
     readonly theme?: InputMultiselectThemes
     readonly useWrapper?: boolean
     readonly dropdownIcon?: ReactNode
+    readonly additionalPlaceholder?: string
 }
 
 const InputSkillSelector: FC<InputSkillSelectorProps> = props => (
@@ -52,6 +53,7 @@ const InputSkillSelector: FC<InputSkillSelectorProps> = props => (
         theme={props.theme}
         useWrapper={props.useWrapper}
         dropdownIcon={props.dropdownIcon}
+        additionalPlaceholder={props.additionalPlaceholder}
     />
 )
 
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.module.scss b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.module.scss
index 02c728e01..4487afb40 100644
--- a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.module.scss
+++ b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.module.scss
@@ -24,6 +24,13 @@
     }
 }
 
+.additionalPlaceholder {
+    color: $black-60;
+    width: 0;
+    pointer-events: none;
+    white-space: nowrap;
+}
+
 .multiselect .ms {
     display: block;
 
@@ -77,6 +84,7 @@
         grid-template-columns: 0 min-content;
         padding: 0;
         visibility: visible;
+        order: 999;
     }
 
     &:global(__multi-value) {
@@ -164,6 +172,9 @@
             color: $tc-white;
         }
     }
+    &:global(__control--is-focused) .additionalPlaceholder {
+        display: none;
+    }
 }
 
 .theme-clear.multiselect .ms {
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx
index 4b1ba1cb2..9c1480a5c 100644
--- a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx
+++ b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx
@@ -36,6 +36,7 @@ export interface InputMultiselectProps {
     readonly onFetchOptions?: (query: string) => Promise<InputMultiselectOption[]>
     readonly options?: ReadonlyArray<InputMultiselectOption>
     readonly placeholder?: string
+    readonly additionalPlaceholder?: string
     readonly tabIndex?: number
     readonly theme?: InputMultiselectThemes
     readonly useWrapper?: boolean
@@ -61,6 +62,18 @@ const dropdownIndicator = (dropdownIcon: ReactNode): FC => (props: any) => (
     </components.DropdownIndicator>
 )
 
+// eslint-disable-next-line react/function-component-definition
+const valueContainer = (additionalPlaceholder: string): FC => (props: any) => (
+    <components.ValueContainer {...props}>
+        {props.children}
+        {props.hasValue && additionalPlaceholder && (
+            <span className={classNames('body-small', styles.additionalPlaceholder)}>
+                {additionalPlaceholder}
+            </span>
+        )}
+    </components.ValueContainer>
+)
+
 const InputMultiselect: FC<InputMultiselectProps> = (props: InputMultiselectProps) => {
 
     function handleOnChange(options: readonly InputMultiselectOption[]): void {
@@ -97,7 +110,11 @@ const InputMultiselect: FC<InputMultiselectProps> = (props: InputMultiselectProp
             isLoading={props.loading}
             isOptionDisabled={isOptionDisabled}
             isSearchable={!isOptionDisabled()}
-            components={{ DropdownIndicator: dropdownIndicator(props.dropdownIcon), MultiValueRemove }}
+            components={{
+                DropdownIndicator: dropdownIndicator(props.dropdownIcon),
+                MultiValueRemove,
+                ValueContainer: valueContainer(props.additionalPlaceholder ?? 'Add more...'),
+            }}
             value={props.value}
             openMenuOnClick={false}
         />