Merge pull request #797 from topcoder-platform/TAL-27_add-more-text

TAL-27 - add more skills placeholder -> dev

Author: vas3a

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}
     />
 )
 

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 {

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}
         />