select multi value container & dropdown indicator added

Author: shivani170

src/Common/Hooks/useStateFilters/types.ts

@@ -21,7 +21,14 @@ export interface UseStateFiltersProps<T> extends Pick<UseUrlFiltersProps<T, neve
 export interface UseStateFiltersReturnType<T>
     extends Pick<
         UseUrlFiltersReturnType<T>,
-        'sortBy' | 'sortOrder' | 'handleSorting' | 'clearFilters' | 'changePage' | 'changePageSize'
+        | 'sortBy'
+        | 'sortOrder'
+        | 'handleSorting'
+        | 'clearFilters'
+        | 'changePage'
+        | 'changePageSize'
+        | 'offset'
+        | 'pageSize'
     > {
     /*
      *  Handler for resetting the pagination to the initial state
@@ -32,5 +39,4 @@ export interface UseStateFiltersReturnType<T>
 export interface PaginationType {
     pageSize: number
     offset: number
-    size: number
 }

src/Common/Hooks/useStateFilters/useStateFilters.tsx

@@ -43,7 +43,6 @@ const useStateFilters = <T = string,>({
     const [pagination, setPagination] = useState<PaginationType>({
         pageSize: DEFAULT_BASE_PAGE_SIZE,
         offset: 0,
-        size: 0,
     })
 
     const changePage = (pageNo: number): void => {
@@ -89,7 +88,6 @@ const useStateFilters = <T = string,>({
         setPagination({
             pageSize: DEFAULT_BASE_PAGE_SIZE,
             offset: 0,
-            size: 0,
         })
     }
 

src/Common/MultiSelectCustomization.tsx

@@ -61,6 +61,10 @@ export const SingleSelectOption = (props) => {
     )
 }
 
+/**
+ *  Multi value container 
+*/
+
 export const MultiValueContainer = (props) => {
     const { children, data, innerProps, selectProps } = props
     const { label, value } = data
@@ -71,6 +75,28 @@ export const MultiValueContainer = (props) => {
         </components.MultiValueContainer>
     )
 }
+/**
+ * 
+ * Multi value container with count
+ */
+export const MultiValueContainerWithCount = (props: any) => {
+    const { children, data, innerProps, selectProps } = props
+    const selectedLen = selectProps.value?.length ?? 0
+
+    return (
+        <components.MultiValueContainer {...{ data, innerProps, selectProps }}>
+            {(!selectProps.menuIsOpen || !selectProps.inputValue) && (
+                <span className="cn-9 fs-13 lh-20">
+                    {selectProps.placeholder}
+                    {selectedLen > 0 && (
+                        <span className="bcb-5 cn-0 fw-6 fs-12 br-8 ml-4 pr-8 pl-8">{selectedLen}</span>
+                    )}
+                </span>
+            )}
+            {children[1]}
+        </components.MultiValueContainer>
+    )
+}
 
 export const ClearIndicator = (props) => {
     const {

src/Shared/Components/ReactSelect/utils.tsx

@@ -17,6 +17,7 @@
 import Tippy from '@tippyjs/react'
 import { components } from 'react-select'
 import { Progressing, stopPropagation } from '../../../Common'
+import { ReactComponent as ICCaretDown } from '../../../Assets/Icon/ic-chevron-down.svg'
 
 export const getCommonSelectStyle = (styleOverrides = {}) => ({
     container: (base, state) => ({
@@ -165,4 +166,10 @@ export const GroupHeading = (props: any) => {
     )
 }
 
+export const DropdownIndicator = (props) => (
+    <components.DropdownIndicator {...props}>
+        <ICCaretDown className="icon-dim-20 icon-n5" data-testId />
+    </components.DropdownIndicator>
+)
+
 export const commonSelectStyles = getCommonSelectStyle()