feat: add support for rendering footer

Author: eshankvaish

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

@@ -1,8 +1,14 @@
-import ReactSelect, { ControlProps, Props as ReactSelectProps } from 'react-select'
-import { ReactNode, useCallback, useMemo } from 'react'
+import ReactSelect, { ControlProps, MenuProps, Props as ReactSelectProps } from 'react-select'
+import { ReactElement, ReactNode, useCallback, useMemo } from 'react'
 import { ReactComponent as ErrorIcon } from '@Icons/ic-warning.svg'
 import { getCommonSelectStyle } from './utils'
-import { ControlWithIcon, DropdownIndicator, SingleSelectOption, LoadingIndicator } from './common'
+import {
+    SelectPickerControl,
+    SelectPickerDropdownIndicator,
+    SelectPickerMenu,
+    SelectPickerOption,
+    SelectPickerLoadingIndicator,
+} from './common'
 import { SelectPickerOptionType } from './type'
 
 export interface SelectPickerProps
@@ -22,13 +28,20 @@ export interface SelectPickerProps
         | 'isLoading'
         | 'inputId'
     > {
-    icon?: ReactNode
+    icon?: ReactElement
     error?: ReactNode
     options: SelectPickerOptionType[]
     value?: SelectPickerOptionType
+    renderMenuListFooter: () => ReactNode
 }
 
-const SelectPicker = ({ error, icon, placeholder = 'Select a option', ...props }: SelectPickerProps) => {
+const SelectPicker = ({
+    error,
+    icon,
+    renderMenuListFooter,
+    placeholder = 'Select a option',
+    ...props
+}: SelectPickerProps) => {
     const selectStyles = useMemo(
         () =>
             getCommonSelectStyle({
@@ -38,24 +51,30 @@ const SelectPicker = ({ error, icon, placeholder = 'Select a option', ...props }
     )
 
     const renderControl = useCallback(
-        (controlProps: ControlProps) => <ControlWithIcon {...controlProps} icon={icon} />,
+        (controlProps: ControlProps) => <SelectPickerControl {...controlProps} icon={icon} />,
         [icon],
     )
 
+    const renderMenu = useCallback(
+        (menuProps: MenuProps) => <SelectPickerMenu {...menuProps} renderMenuListFooter={renderMenuListFooter} />,
+        [],
+    )
+
     return (
         <div>
             <ReactSelect<SelectPickerOptionType, boolean>
                 {...props}
                 placeholder={placeholder}
                 components={{
                     IndicatorSeparator: null,
-                    LoadingIndicator,
-                    DropdownIndicator,
+                    LoadingIndicator: SelectPickerLoadingIndicator,
+                    DropdownIndicator: SelectPickerDropdownIndicator,
                     Control: renderControl,
-                    Option: SingleSelectOption,
-                    // ValueContainer,
+                    Option: SelectPickerOption,
+                    Menu: renderMenu,
                 }}
                 styles={selectStyles}
+                menuIsOpen
             />
             {error && (
                 <div className="flex left dc__gap-4 cr-5 fs-11 lh-16 fw-4">

src/Shared/Components/SelectPicker/common.tsx

@@ -1,10 +1,10 @@
-import { components, DropdownIndicatorProps, ControlProps, OptionProps } from 'react-select'
+import { components, DropdownIndicatorProps, ControlProps, OptionProps, MenuProps } from 'react-select'
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 import { Progressing } from '@Common/Progressing'
 import { SelectPickerProps } from './SelectPicker.component'
 import { SelectPickerOptionType } from './type'
 
-export const DropdownIndicator = (props: DropdownIndicatorProps) => {
+export const SelectPickerDropdownIndicator = (props: DropdownIndicatorProps) => {
     const { isDisabled } = props
 
     return (
@@ -14,7 +14,7 @@ export const DropdownIndicator = (props: DropdownIndicatorProps) => {
     )
 }
 
-export const ControlWithIcon = ({ icon, ...props }: ControlProps & Pick<SelectPickerProps, 'icon'>) => {
+export const SelectPickerControl = ({ icon, ...props }: ControlProps & Pick<SelectPickerProps, 'icon'>) => {
     const { children } = props
 
     return (
@@ -25,9 +25,9 @@ export const ControlWithIcon = ({ icon, ...props }: ControlProps & Pick<SelectPi
     )
 }
 
-export const LoadingIndicator = () => <Progressing />
+export const SelectPickerLoadingIndicator = () => <Progressing />
 
-export const SingleSelectOption = (props: OptionProps<SelectPickerOptionType>) => {
+export const SelectPickerOption = (props: OptionProps<SelectPickerOptionType>) => {
     const { label, data } = props
     const { description, startIcon, endIcon } = data ?? {}
     const showDescription = !!description
@@ -48,3 +48,17 @@ export const SingleSelectOption = (props: OptionProps<SelectPickerOptionType>) =
         </components.Option>
     )
 }
+
+export const SelectPickerMenu = ({
+    renderMenuListFooter,
+    ...props
+}: MenuProps & Pick<SelectPickerProps, 'renderMenuListFooter'>) => {
+    const { children } = props
+
+    return (
+        <components.Menu {...props}>
+            {children}
+            {renderMenuListFooter()}
+        </components.Menu>
+    )
+}

src/Shared/Components/SelectPicker/type.ts

@@ -1,9 +1,8 @@
 import { OptionType } from '@Common/Types'
-import { ReactNode } from 'react'
+import { ReactElement, ReactNode } from 'react'
 
-// TODO Eshank: Make this configurable
 export interface SelectPickerOptionType extends OptionType<number | string, ReactNode> {
     description?: string
-    startIcon?: ReactNode
-    endIcon?: ReactNode
+    startIcon?: ReactElement
+    endIcon?: ReactElement
 }