feat: add filter icon, custom icon support, option value using prop

Author: eshankvaish

src/Shared/Components/SelectPicker/FilterSelectPicker.tsx

@@ -2,7 +2,9 @@
  * Copyright (c) 2024. Devtron Inc.
  */
 
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
+import { ReactComponent as ICFilter } from '@Icons/ic-filter.svg'
+import { ReactComponent as ICFilterApplied } from '@Icons/ic-filter-applied.svg'
 import SelectPicker from './SelectPicker.component'
 import { FilterSelectPickerProps, SelectPickerOptionType, SelectPickerProps } from './type'
 
@@ -17,6 +19,13 @@ const FilterSelectPicker = ({
         structuredClone(appliedFilterOptions ?? []),
     )
 
+    const appliedFiltersCount = appliedFilterOptions?.length ?? 0
+
+    const filterIcon = useMemo(
+        () => (appliedFiltersCount ? <ICFilterApplied className="scn-6" /> : <ICFilter className="scn-6" />),
+        [appliedFiltersCount],
+    )
+
     const openMenu = () => {
         setIsMenuOpen(true)
     }
@@ -34,40 +43,46 @@ const FilterSelectPicker = ({
         setSelectedOptions(structuredClone(appliedFilterOptions ?? []))
     }
 
-    const handleApplyClick = () => {
-        handleApplyFilter(selectedOptions)
-        closeMenu()
-    }
+    const renderApplyButton = (optionsSelected: Parameters<FilterSelectPickerProps['handleApplyFilter']>[0]) => {
+        const handleApplyClick = () => {
+            handleApplyFilter(optionsSelected)
+            closeMenu()
+        }
 
-    const renderApplyButton = () => (
-        <div className="p-8 dc__border-top-n1">
-            <button
-                type="button"
-                className="dc__unset-button-styles w-100 br-4 h-28 flex bcb-5 cn-0 fw-6 lh-28 fs-12 h-28 br-4 pt-5 pr-12 pb-5 pl-12"
-                onClick={handleApplyClick}
-                aria-label="Apply filters"
-            >
-                Apply
-            </button>
-        </div>
-    )
+        return (
+            <div className="p-8 dc__border-top-n1">
+                <button
+                    type="button"
+                    className="dc__unset-button-styles w-100 br-4 h-28 flex bcb-5 cn-0 fw-6 lh-28 fs-12 h-28 br-4 pt-5 pr-12 pb-5 pl-12"
+                    onClick={handleApplyClick}
+                    aria-label="Apply filters"
+                >
+                    Apply
+                </button>
+            </div>
+        )
+    }
 
     return (
-        <SelectPicker
-            {...props}
-            options={options}
-            value={selectedOptions}
-            isMulti
-            menuIsOpen={isMenuOpen}
-            onMenuOpen={openMenu}
-            onMenuClose={handleMenuClose}
-            onChange={handleSelectOnChange}
-            renderMenuListFooter={renderApplyButton}
-            controlShouldRenderValue={false}
-            showSelectedOptionsCount
-            isSearchable
-            isClearable={false}
-        />
+        <div className="dc__mxw-250">
+            <SelectPicker
+                {...props}
+                options={options}
+                value={selectedOptions}
+                isMulti
+                menuIsOpen={isMenuOpen}
+                onMenuOpen={openMenu}
+                onMenuClose={handleMenuClose}
+                onChange={handleSelectOnChange}
+                renderMenuListFooter={renderApplyButton}
+                controlShouldRenderValue={false}
+                showSelectedOptionsCount
+                isSearchable
+                isClearable={false}
+                customSelectedOptionsCount={appliedFiltersCount}
+                icon={filterIcon}
+            />
+        </div>
     )
 }
 

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

@@ -207,6 +207,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     selectRef,
     shouldMenuAlignRight = false,
     fullWidth = false,
+    customSelectedOptionsCount = null,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options } = props
@@ -268,14 +269,18 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                 shouldRenderCustomOptions={shouldRenderCustomOptions}
             />
         ),
-        [shouldRenderCustomOptions, renderMenuListFooter, renderCustomOptions],
+        [shouldRenderCustomOptions],
     )
 
     const renderValueContainer = useCallback(
         (valueContainerProps: ValueContainerProps<SelectPickerOptionType<OptionValue>>) => (
-            <SelectPickerValueContainer {...valueContainerProps} showSelectedOptionsCount={showSelectedOptionsCount} />
+            <SelectPickerValueContainer
+                {...valueContainerProps}
+                showSelectedOptionsCount={showSelectedOptionsCount}
+                customSelectedOptionsCount={customSelectedOptionsCount}
+            />
         ),
-        [showSelectedOptionsCount],
+        [showSelectedOptionsCount, customSelectedOptionsCount],
     )
 
     const renderOption = useCallback(

src/Shared/Components/SelectPicker/common.tsx

@@ -35,6 +35,7 @@ import { noop } from '@Common/Helper'
 import { CHECKBOX_VALUE } from '@Common/Types'
 import { Checkbox } from '@Common/Checkbox'
 import { ReactSelectInputAction } from '@Common/Constants'
+import { isNullOrUndefined } from '@Shared/Helpers'
 import { SelectPickerGroupHeadingProps, SelectPickerOptionType, SelectPickerProps } from './type'
 import { getGroupCheckboxValue } from './utils'
 
@@ -85,19 +86,22 @@ export const SelectPickerControl = <OptionValue, IsMulti extends boolean>({
 
 export const SelectPickerValueContainer = <OptionValue, IsMulti extends boolean>({
     showSelectedOptionsCount,
+    customSelectedOptionsCount,
     ...props
 }: ValueContainerProps<SelectPickerOptionType<OptionValue>> &
-    Pick<SelectPickerProps<OptionValue, IsMulti>, 'showSelectedOptionsCount'>) => {
+    Pick<SelectPickerProps<OptionValue, IsMulti>, 'showSelectedOptionsCount' | 'customSelectedOptionsCount'>) => {
     const { getValue } = props
-    const selectedOptionsLength = (getValue() ?? []).length
+    const selectedOptionsLength = isNullOrUndefined(customSelectedOptionsCount)
+        ? (getValue() ?? []).length
+        : customSelectedOptionsCount
 
     return (
         <div className="flex left dc__gap-8 flex-grow-1">
             <div className="flex left">
                 <components.ValueContainer {...props} />
             </div>
             {showSelectedOptionsCount && selectedOptionsLength > 0 && (
-                <div className="bcb-5 dc__border-radius-4-imp pl-5 pr-5 cn-0 fs-12 fw-6 lh-18 dc__truncate dc__no-shrink">
+                <div className="bcb-50 dc__border eb-2 dc__border-radius-4-imp pl-5 pr-5 cb-5 fs-12 fw-6 lh-18 dc__truncate dc__no-shrink">
                     {selectedOptionsLength}
                 </div>
             )}
@@ -181,7 +185,7 @@ export const SelectPickerMenuList = <OptionValue, IsMulti extends boolean>({
     >) => {
     const {
         children,
-        selectProps: { inputValue },
+        selectProps: { inputValue, value },
     } = props
 
     return (
@@ -191,7 +195,8 @@ export const SelectPickerMenuList = <OptionValue, IsMulti extends boolean>({
             {/* Added to the bottom of menu list to prevent from hiding when the menu is opened close to the bottom of the screen */}
             {!shouldRenderCustomOptions && renderMenuListFooter && (
                 <div className="dc__position-sticky dc__bottom-0 dc__bottom-radius-4 bcn-0 dc__zi-2">
-                    {renderMenuListFooter()}
+                    {/* Passing down value as a prop to ensure that the menu list is not re-rendered and scrolled to top on click */}
+                    {renderMenuListFooter(value)}
                 </div>
             )}
         </components.MenuList>

src/Shared/Components/SelectPicker/type.ts

@@ -85,7 +85,7 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
         /**
          * Render function for the footer at the bottom of menu list. It is sticky by default
          */
-        renderMenuListFooter?: () => ReactNode
+        renderMenuListFooter?: (selectedOptions: SelectProps<OptionValue, IsMulti>['value']) => ReactNode
         /**
          * Info text for the select, if any
          */
@@ -101,6 +101,10 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
          * @default 'true'
          */
         showSelectedOptionIcon?: boolean
+        /**
+         * Custom selected options count for use cases like filters
+         */
+        customSelectedOptionsCount?: number
         /**
          * Height of the dropdown
          *