Skip to content

Commit 0227ada

Browse files
amitamrutiyaamitamrutiya
committed
feat: add component in the filter sidbar state
Signed-off-by: Amit Amrutiya <[email protected]>
1 parent 6619cb2 commit 0227ada

File tree

5 files changed

+112
-75
lines changed

5 files changed

+112
-75
lines changed

‎src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,24 @@ export interface FilterOption {
2929
export interface FilterList {
3030
filterKey: string;
3131
sectionDisplayName?: string;
32-
options: FilterOption[];
3332
defaultOpen?: boolean;
3433
isMultiSelect?: boolean;
34+
options?: FilterOption[];
35+
customComponent?: React.ComponentType;
3536
}
3637

38+
type FilterListWithOptions = FilterList & { options: FilterOption[]; customComponent?: never };
39+
40+
type FilterListWithCustomComponent = FilterList & {
41+
customComponent: React.ComponentType;
42+
options?: never;
43+
};
44+
45+
export type FilterListType = FilterListWithOptions | FilterListWithCustomComponent;
46+
3747
export interface CatalogFilterSidebarProps {
3848
setData: (callback: (prevFilters: FilterValues) => FilterValues) => void;
39-
lists: FilterList[];
49+
lists: FilterListType[];
4050
value?: FilterValues;
4151
styleProps?: StyleProps;
4252
}

‎src/custom/CatalogFilterSection/CatalogFilterSidebarState.tsx

+32-15
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useCallback, useState } from 'react';
22
import {
33
CatalogFilterSidebarProps,
4-
FilterList,
4+
FilterListType,
55
FilterValues,
66
StyleProps
77
} from './CatalogFilterSidebar';
@@ -16,7 +16,7 @@ import FilterSection from './FilterSection';
1616
* @param {Object} styleProps - The style properties for the component.
1717
*/
1818
const CatalogFilterSidebarState: React.FC<{
19-
lists: FilterList[];
19+
lists: FilterListType[];
2020
onApplyFilters: CatalogFilterSidebarProps['setData'];
2121
value: FilterValues;
2222
styleProps: StyleProps;
@@ -78,19 +78,36 @@ const CatalogFilterSidebarState: React.FC<{
7878

7979
return (
8080
<>
81-
{lists.map((list) => (
82-
<FilterSection
83-
key={list.filterKey}
84-
filterKey={list.filterKey}
85-
sectionDisplayName={list.sectionDisplayName}
86-
options={list.options}
87-
filters={value}
88-
openSections={openSections}
89-
onCheckboxChange={handleCheckboxChange}
90-
onSectionToggle={handleSectionToggle}
91-
styleProps={styleProps}
92-
/>
93-
))}
81+
{lists.map((list) => {
82+
if (list.customComponent) {
83+
return (
84+
<FilterSection
85+
key={list.filterKey}
86+
filterKey={list.filterKey}
87+
filters={value}
88+
sectionDisplayName={list.sectionDisplayName}
89+
onSectionToggle={handleSectionToggle}
90+
styleProps={styleProps}
91+
openSections={openSections}
92+
customComponent={list.customComponent}
93+
/>
94+
);
95+
}
96+
97+
return (
98+
<FilterSection
99+
key={list.filterKey}
100+
filterKey={list.filterKey}
101+
sectionDisplayName={list.sectionDisplayName}
102+
options={list.options}
103+
filters={value}
104+
openSections={openSections}
105+
onCheckboxChange={handleCheckboxChange}
106+
onSectionToggle={handleSectionToggle}
107+
styleProps={styleProps}
108+
/>
109+
);
110+
})}
94111
</>
95112
);
96113
};

‎src/custom/CatalogFilterSection/FilterSection.tsx

+65-55
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,13 @@ import { EndAdornmentText, FilterTitleButton } from './style';
1010
interface FilterSectionProps {
1111
filterKey: string;
1212
sectionDisplayName?: string;
13-
options: FilterOption[];
13+
options?: FilterOption[];
1414
filters: FilterValues;
1515
openSections: Record<string, boolean>;
16-
onCheckboxChange: (filterKey: string, value: string, checked: boolean) => void;
16+
onCheckboxChange?: (filterKey: string, value: string, checked: boolean) => void;
1717
onSectionToggle: (filterKey: string) => void;
1818
styleProps: StyleProps;
19+
customComponent?: React.ComponentType;
1920
}
2021

2122
/**
@@ -33,12 +34,13 @@ interface FilterSectionProps {
3334
const FilterSection: React.FC<FilterSectionProps> = ({
3435
filterKey,
3536
sectionDisplayName,
36-
options,
37+
options = [],
3738
filters,
3839
openSections,
3940
onCheckboxChange,
4041
onSectionToggle,
41-
styleProps
42+
styleProps,
43+
customComponent: CustomComponent
4244
}) => {
4345
const [searchQuery, setSearchQuery] = useState<string>('');
4446

@@ -47,9 +49,10 @@ const FilterSection: React.FC<FilterSectionProps> = ({
4749
}, []);
4850

4951
const showSearch = options.length > 10;
50-
const searchedOptions = searchQuery
51-
? options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()))
52-
: options;
52+
const searchedOptions =
53+
searchQuery && options.length
54+
? options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()))
55+
: options;
5356

5457
return (
5558
<>
@@ -65,59 +68,66 @@ const FilterSection: React.FC<FilterSectionProps> = ({
6568
{openSections[filterKey] ? <ExpandLessIcon /> : <ExpandMoreIcon />}
6669
</FilterTitleButton>
6770
<Collapse in={openSections[filterKey]} timeout="auto" unmountOnExit>
68-
<List
69-
component="div"
70-
sx={{
71-
overflowY: 'auto',
72-
maxHeight: '25rem',
73-
backgroundColor: styleProps.backgroundColor
74-
}}
75-
>
76-
{showSearch && (
77-
<Box px={'0.5rem'} mb={'0.5rem'}>
78-
<StyledSearchBar
79-
value={searchQuery}
80-
onChange={handleTextFieldChange}
81-
placeholder="Search"
82-
endAdornment={
83-
<EndAdornmentText> Total : {searchedOptions.length ?? 0}</EndAdornmentText>
84-
}
85-
/>
86-
</Box>
87-
)}
88-
{searchedOptions.map((option, index) => (
89-
<Stack
90-
key={`${option.value}-${index}`}
91-
direction="row"
92-
alignItems="center"
93-
px={'0.5rem'}
94-
justifyContent="space-between"
95-
>
96-
<Stack direction="row" alignItems="center" gap="0.35rem">
97-
<Checkbox
98-
id={`checkbox-${option.label}`}
99-
checked={
100-
Array.isArray(filters[filterKey])
101-
? (filters[filterKey] as string[]).includes(option.value)
102-
: filters[filterKey] === option.value
71+
{CustomComponent ? (
72+
<CustomComponent />
73+
) : (
74+
<List
75+
component="div"
76+
sx={{
77+
overflowY: 'auto',
78+
maxHeight: '25rem',
79+
backgroundColor: styleProps.backgroundColor
80+
}}
81+
>
82+
{showSearch && (
83+
<Box px={'0.5rem'} mb={'0.5rem'}>
84+
<StyledSearchBar
85+
value={searchQuery}
86+
onChange={handleTextFieldChange}
87+
placeholder="Search"
88+
endAdornment={
89+
<EndAdornmentText>Total : {searchedOptions.length ?? 0}</EndAdornmentText>
10390
}
104-
onChange={(e) => onCheckboxChange(filterKey, option.value, e.target.checked)}
105-
value={option.value}
10691
/>
92+
</Box>
93+
)}
94+
{searchedOptions.map((option, index) => (
95+
<Stack
96+
key={`${option.value}-${index}`}
97+
direction="row"
98+
alignItems="center"
99+
px={'0.5rem'}
100+
justifyContent="space-between"
101+
>
102+
<Stack direction="row" alignItems="center" gap="0.35rem">
103+
<Checkbox
104+
id={`checkbox-${option.label}`}
105+
checked={
106+
Array.isArray(filters[filterKey])
107+
? (filters[filterKey] as string[]).includes(option.value)
108+
: filters[filterKey] === option.value
109+
}
110+
onChange={(e) =>
111+
onCheckboxChange &&
112+
onCheckboxChange(filterKey, option.value, e.target.checked)
113+
}
114+
value={option.value}
115+
/>
107116

108-
{option.Icon && <option.Icon width="20px" height="20px" />}
117+
{option.Icon && <option.Icon width="20px" height="20px" />}
109118

110-
<Typography fontFamily={styleProps.fontFamily}>{option.label}</Typography>
119+
<Typography fontFamily={styleProps.fontFamily}>{option.label}</Typography>
120+
</Stack>
121+
<Stack direction="row" alignItems="center" gap="0.35rem">
122+
{option.totalCount !== undefined && `(${option.totalCount || 0})`}
123+
{option.description && (
124+
<InfoTooltip variant="standard" helpText={option.description} />
125+
)}
126+
</Stack>
111127
</Stack>
112-
<Stack direction="row" alignItems="center" gap="0.35rem">
113-
{option.totalCount !== undefined && `(${option.totalCount || 0})`}
114-
{option.description && (
115-
<InfoTooltip variant="standard" helpText={option.description} />
116-
)}
117-
</Stack>
118-
</Stack>
119-
))}
120-
</List>
128+
))}
129+
</List>
130+
)}
121131
</Collapse>
122132
</>
123133
);

‎src/custom/CatalogFilterSection/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import CatalogFilterSidebar, { FilterList } from './CatalogFilterSidebar';
1+
import CatalogFilterSidebar, { FilterListType } from './CatalogFilterSidebar';
22

33
export { CatalogFilterSidebar };
4-
export type { FilterList };
4+
export type { FilterListType };

‎src/custom/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ import { TransferListProps } from './TransferModal/TransferList/TransferList';
4545
import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
4646
export { CatalogCard } from './CatalogCard';
4747
export { CatalogFilterSidebar } from './CatalogFilterSection';
48-
export type { FilterList } from './CatalogFilterSection';
48+
export type { FilterListType } from './CatalogFilterSection';
4949
export { StyledChartDialog } from './ChartDialog';
5050
export { LearningContent } from './LearningContent';
5151
export { NavigationNavbar } from './NavigationNavbar';

0 commit comments

Comments
 (0)