Add support custom component in the filter sidbar state

src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx

@@ -29,14 +29,24 @@ export interface FilterOption {
 export interface FilterList {
   filterKey: string;
   sectionDisplayName?: string;
-  options: FilterOption[];
   defaultOpen?: boolean;
   isMultiSelect?: boolean;
+  options?: FilterOption[];
+  customComponent?: React.ComponentType;
 }
 
+type FilterListWithOptions = FilterList & { options: FilterOption[]; customComponent?: never };
+
+type FilterListWithCustomComponent = FilterList & {
+  customComponent: React.ComponentType;
+  options?: never;
+};
+
+export type FilterListType = FilterListWithOptions | FilterListWithCustomComponent;
+
 export interface CatalogFilterSidebarProps {
   setData: (callback: (prevFilters: FilterValues) => FilterValues) => void;
-  lists: FilterList[];
+  lists: FilterListType[];
   value?: FilterValues;
   styleProps?: StyleProps;
 }

src/custom/CatalogFilterSection/CatalogFilterSidebarState.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import {
   CatalogFilterSidebarProps,
-  FilterList,
+  FilterListType,
   FilterValues,
   StyleProps
 } from './CatalogFilterSidebar';
@@ -16,7 +16,7 @@ import FilterSection from './FilterSection';
  * @param {Object} styleProps - The style properties for the component.
  */
 const CatalogFilterSidebarState: React.FC<{
-  lists: FilterList[];
+  lists: FilterListType[];
   onApplyFilters: CatalogFilterSidebarProps['setData'];
   value: FilterValues;
   styleProps: StyleProps;
@@ -78,19 +78,36 @@ const CatalogFilterSidebarState: React.FC<{
 
   return (
     <>
-      {lists.map((list) => (
-        <FilterSection
-          key={list.filterKey}
-          filterKey={list.filterKey}
-          sectionDisplayName={list.sectionDisplayName}
-          options={list.options}
-          filters={value}
-          openSections={openSections}
-          onCheckboxChange={handleCheckboxChange}
-          onSectionToggle={handleSectionToggle}
-          styleProps={styleProps}
-        />
-      ))}
+      {lists.map((list) => {
+        if (list.customComponent) {
+          return (
+            <FilterSection
+              key={list.filterKey}
+              filterKey={list.filterKey}
+              filters={value}
+              sectionDisplayName={list.sectionDisplayName}
+              onSectionToggle={handleSectionToggle}
+              styleProps={styleProps}
+              openSections={openSections}
+              customComponent={list.customComponent}
+            />
+          );
+        }
+
+        return (
+          <FilterSection
+            key={list.filterKey}
+            filterKey={list.filterKey}
+            sectionDisplayName={list.sectionDisplayName}
+            options={list.options}
+            filters={value}
+            openSections={openSections}
+            onCheckboxChange={handleCheckboxChange}
+            onSectionToggle={handleSectionToggle}
+            styleProps={styleProps}
+          />
+        );
+      })}
     </>
   );
 };

src/custom/CatalogFilterSection/FilterSection.tsx

@@ -10,12 +10,13 @@ import { EndAdornmentText, FilterTitleButton } from './style';
 interface FilterSectionProps {
   filterKey: string;
   sectionDisplayName?: string;
-  options: FilterOption[];
+  options?: FilterOption[];
   filters: FilterValues;
   openSections: Record<string, boolean>;
-  onCheckboxChange: (filterKey: string, value: string, checked: boolean) => void;
+  onCheckboxChange?: (filterKey: string, value: string, checked: boolean) => void;
   onSectionToggle: (filterKey: string) => void;
   styleProps: StyleProps;
+  customComponent?: React.ComponentType;
 }
 
 /**
@@ -33,12 +34,13 @@ interface FilterSectionProps {
 const FilterSection: React.FC<FilterSectionProps> = ({
   filterKey,
   sectionDisplayName,
-  options,
+  options = [],
   filters,
   openSections,
   onCheckboxChange,
   onSectionToggle,
-  styleProps
+  styleProps,
+  customComponent: CustomComponent
 }) => {
   const [searchQuery, setSearchQuery] = useState<string>('');
 
@@ -47,9 +49,10 @@ const FilterSection: React.FC<FilterSectionProps> = ({
   }, []);
 
   const showSearch = options.length > 10;
-  const searchedOptions = searchQuery
-    ? options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()))
-    : options;
+  const searchedOptions =
+    searchQuery && options.length
+      ? options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()))
+      : options;
 
   return (
     <>
@@ -65,59 +68,66 @@ const FilterSection: React.FC<FilterSectionProps> = ({
         {openSections[filterKey] ? <ExpandLessIcon /> : <ExpandMoreIcon />}
       </FilterTitleButton>
       <Collapse in={openSections[filterKey]} timeout="auto" unmountOnExit>
-        <List
-          component="div"
-          sx={{
-            overflowY: 'auto',
-            maxHeight: '25rem',
-            backgroundColor: styleProps.backgroundColor
-          }}
-        >
-          {showSearch && (
-            <Box px={'0.5rem'} mb={'0.5rem'}>
-              <StyledSearchBar
-                value={searchQuery}
-                onChange={handleTextFieldChange}
-                placeholder="Search"
-                endAdornment={
-                  <EndAdornmentText> Total : {searchedOptions.length ?? 0}</EndAdornmentText>
-                }
-              />
-            </Box>
-          )}
-          {searchedOptions.map((option, index) => (
-            <Stack
-              key={`${option.value}-${index}`}
-              direction="row"
-              alignItems="center"
-              px={'0.5rem'}
-              justifyContent="space-between"
-            >
-              <Stack direction="row" alignItems="center" gap="0.35rem">
-                <Checkbox
-                  id={`checkbox-${option.label}`}
-                  checked={
-                    Array.isArray(filters[filterKey])
-                      ? (filters[filterKey] as string[]).includes(option.value)
-                      : filters[filterKey] === option.value
+        {CustomComponent ? (
+          <CustomComponent />
+        ) : (
+          <List
+            component="div"
+            sx={{
+              overflowY: 'auto',
+              maxHeight: '25rem',
+              backgroundColor: styleProps.backgroundColor
+            }}
+          >
+            {showSearch && (
+              <Box px={'0.5rem'} mb={'0.5rem'}>
+                <StyledSearchBar
+                  value={searchQuery}
+                  onChange={handleTextFieldChange}
+                  placeholder="Search"
+                  endAdornment={
+                    <EndAdornmentText>Total : {searchedOptions.length ?? 0}</EndAdornmentText>
                   }
-                  onChange={(e) => onCheckboxChange(filterKey, option.value, e.target.checked)}
-                  value={option.value}
                 />
+              </Box>
+            )}
+            {searchedOptions.map((option, index) => (
+              <Stack
+                key={`${option.value}-${index}`}
+                direction="row"
+                alignItems="center"
+                px={'0.5rem'}
+                justifyContent="space-between"
+              >
+                <Stack direction="row" alignItems="center" gap="0.35rem">
+                  <Checkbox
+                    id={`checkbox-${option.label}`}
+                    checked={
+                      Array.isArray(filters[filterKey])
+                        ? (filters[filterKey] as string[]).includes(option.value)
+                        : filters[filterKey] === option.value
+                    }
+                    onChange={(e) =>
+                      onCheckboxChange &&
+                      onCheckboxChange(filterKey, option.value, e.target.checked)
+                    }
+                    value={option.value}
+                  />
 
-                {option.Icon && <option.Icon width="20px" height="20px" />}
+                  {option.Icon && <option.Icon width="20px" height="20px" />}
 
-                <Typography fontFamily={styleProps.fontFamily}>{option.label}</Typography>
+                  <Typography fontFamily={styleProps.fontFamily}>{option.label}</Typography>
+                </Stack>
+                <Stack direction="row" alignItems="center" gap="0.35rem">
+                  {option.totalCount !== undefined && `(${option.totalCount || 0})`}
+                  {option.description && (
+                    <InfoTooltip variant="standard" helpText={option.description} />
+                  )}
+                </Stack>
               </Stack>
-              <Stack direction="row" alignItems="center" gap="0.35rem">
-                {option.totalCount !== undefined && `(${option.totalCount || 0})`}
-                {option.description && (
-                  <InfoTooltip variant="standard" helpText={option.description} />
-                )}
-              </Stack>
-            </Stack>
-          ))}
-        </List>
+            ))}
+          </List>
+        )}
       </Collapse>
     </>
   );

src/custom/CatalogFilterSection/index.tsx

@@ -1,4 +1,4 @@
-import CatalogFilterSidebar, { FilterList } from './CatalogFilterSidebar';
+import CatalogFilterSidebar, { FilterListType } from './CatalogFilterSidebar';
 
 export { CatalogFilterSidebar };
-export type { FilterList };
+export type { FilterListType };

src/custom/index.tsx

@@ -45,7 +45,7 @@ import { TransferListProps } from './TransferModal/TransferList/TransferList';
 import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
 export { CatalogCard } from './CatalogCard';
 export { CatalogFilterSidebar } from './CatalogFilterSection';
-export type { FilterList } from './CatalogFilterSection';
+export type { FilterListType } from './CatalogFilterSection';
 export { StyledChartDialog } from './ChartDialog';
 export { LearningContent } from './LearningContent';
 export { NavigationNavbar } from './NavigationNavbar';