feat: add support for icon

Author: eshankvaish

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -10,6 +10,7 @@ import {
     SelectPickerLoadingIndicator,
     SelectPickerMenu,
     SelectPickerOption,
+    SelectPickerValueContainer,
 } from './common'
 import { SelectPickerOptionType, SelectPickerProps } from './type'
 
@@ -20,6 +21,7 @@ const SelectPicker = ({
     helperText,
     placeholder = 'Select a option',
     label,
+    showSelectedOptionIcon = true,
     ...props
 }: SelectPickerProps) => {
     const { inputId, required } = props
@@ -33,15 +35,26 @@ const SelectPicker = ({
     )
 
     const renderControl = useCallback(
-        (controlProps: ControlProps) => <SelectPickerControl {...controlProps} icon={icon} />,
-        [icon],
+        (controlProps: ControlProps<SelectPickerOptionType>) => (
+            <SelectPickerControl {...controlProps} icon={icon} showSelectedOptionIcon={showSelectedOptionIcon} />
+        ),
+        [icon, showSelectedOptionIcon],
     )
 
     const renderMenu = useCallback(
-        (menuProps: MenuProps) => <SelectPickerMenu {...menuProps} renderMenuListFooter={renderMenuListFooter} />,
+        (menuProps: MenuProps<SelectPickerOptionType>) => (
+            <SelectPickerMenu {...menuProps} renderMenuListFooter={renderMenuListFooter} />
+        ),
         [],
     )
 
+    const renderValueContainer = useCallback(
+        (valueContainerProps) => (
+            <SelectPickerValueContainer {...valueContainerProps} showSelectedOptionIcon={showSelectedOptionIcon} />
+        ),
+        [showSelectedOptionIcon],
+    )
+
     return (
         <div className="flex column left top dc__gap-4">
             {/* TODO Eshank: Common out for fields */}
@@ -73,7 +86,7 @@ const SelectPicker = ({
                         Option: SelectPickerOption,
                         Menu: renderMenu,
                         ClearIndicator: SelectPickerClearIndicator,
-                        // TODO Eshank: need to export variants of ValueContainer: Icon, No Icon etc
+                        ValueContainer: renderValueContainer,
                     }}
                     styles={selectStyles}
                     className="w-100"

src/Shared/Components/SelectPicker/common.tsx

@@ -5,13 +5,14 @@ import {
     OptionProps,
     MenuProps,
     ClearIndicatorProps,
+    ValueContainerProps,
 } from 'react-select'
 import { Progressing } from '@Common/Progressing'
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
 import { SelectPickerOptionType, SelectPickerProps } from './type'
 
-export const SelectPickerDropdownIndicator = (props: DropdownIndicatorProps) => {
+export const SelectPickerDropdownIndicator = (props: DropdownIndicatorProps<SelectPickerOptionType>) => {
     const { isDisabled } = props
 
     return (
@@ -21,23 +22,52 @@ export const SelectPickerDropdownIndicator = (props: DropdownIndicatorProps) =>
     )
 }
 
-export const SelectPickerClearIndicator = (props: ClearIndicatorProps) => (
+export const SelectPickerClearIndicator = (props: ClearIndicatorProps<SelectPickerOptionType>) => (
     <components.ClearIndicator {...props}>
         <ICClose className="icon-dim-16 fcn-6 dc__no-shrink" />
     </components.ClearIndicator>
 )
 
-export const SelectPickerControl = ({ icon, ...props }: ControlProps & Pick<SelectPickerProps, 'icon'>) => {
-    const { children } = props
+export const SelectPickerControl = ({
+    icon,
+    showSelectedOptionIcon,
+    ...props
+}: ControlProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'icon' | 'showSelectedOptionIcon'>) => {
+    const { children, getValue } = props
+    const { startIcon, endIcon } = getValue()?.[0] ?? {}
+    // Show the display icon if either the selected option icon is not to be shown or not available
+    const showDisplayIcon = !!(icon && (!showSelectedOptionIcon || !(startIcon || endIcon)))
 
     return (
         <components.Control {...props}>
-            {icon && <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{icon}</div>}
+            {showDisplayIcon && <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{icon}</div>}
             {children}
         </components.Control>
     )
 }
 
+export const SelectPickerValueContainer = ({
+    showSelectedOptionIcon,
+    ...props
+}: ValueContainerProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'showSelectedOptionIcon'>) => {
+    const { children, getValue, hasValue } = props
+    const { startIcon, endIcon } = getValue()?.[0] ?? {}
+    const showIcon = !!(showSelectedOptionIcon && hasValue && (startIcon || endIcon))
+
+    return (
+        <components.ValueContainer {...props}>
+            <div className="flex left dc__gap-8">
+                {showIcon && (
+                    <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">
+                        {startIcon || endIcon}
+                    </div>
+                )}
+                {children}
+            </div>
+        </components.ValueContainer>
+    )
+}
+
 export const SelectPickerLoadingIndicator = () => <Progressing />
 
 export const SelectPickerOption = (props: OptionProps<SelectPickerOptionType>) => {
@@ -65,7 +95,7 @@ export const SelectPickerOption = (props: OptionProps<SelectPickerOptionType>) =
 export const SelectPickerMenu = ({
     renderMenuListFooter,
     ...props
-}: MenuProps & Pick<SelectPickerProps, 'renderMenuListFooter'>) => {
+}: MenuProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'renderMenuListFooter'>) => {
     const { children } = props
 
     return (

src/Shared/Components/SelectPicker/type.ts

@@ -2,7 +2,6 @@ import { OptionType } from '@Common/Types'
 import { ReactElement, ReactNode } from 'react'
 import { Props as ReactSelectProps } from 'react-select'
 
-// TODO Eshank: Add customization using generics
 export interface SelectPickerOptionType extends OptionType<number | string, ReactNode> {
     description?: string
     startIcon?: ReactElement
@@ -11,6 +10,7 @@ export interface SelectPickerOptionType extends OptionType<number | string, Reac
 
 type SelectProps = ReactSelectProps<SelectPickerOptionType>
 
+// TODO Eshank: Add support for border less
 export interface SelectPickerProps
     extends Pick<
             SelectProps,
@@ -28,11 +28,17 @@ export interface SelectPickerProps
             | 'isLoading'
             | 'required'
         >,
-        Required<Pick<SelectProps, 'classNamePrefix' | 'inputId'>> {
+        Required<Pick<SelectProps, 'classNamePrefix' | 'inputId' | 'name'>> {
     icon?: ReactElement
     error?: ReactNode
     renderMenuListFooter?: () => ReactNode
     helperText?: ReactNode
     label?: ReactNode
-    // TODO Eshank: Add support for border less
+    /**
+     * If true, the selected option icon is shown in the container.
+     * startIcon has higher priority than endIcon.
+     *
+     * @default 'true'
+     */
+    showSelectedOptionIcon?: boolean
 }

src/Shared/Components/SelectPicker/utils.ts

@@ -122,4 +122,12 @@ export const getCommonSelectStyle = ({ hasError }: { hasError: boolean }) => ({
         gap: '4px',
         flexShrink: 0,
     }),
+    singleValue: (base) => ({
+        ...base,
+        margin: 0,
+        color: 'var(--N900)',
+        fontSize: '13px',
+        fontWeight: 400,
+        lineHeight: '20px',
+    }),
 })