Skip to content

Commit ce3fff1

Browse files
elad-nelad-n
committed
final bug fixes, before pixel perfect
1 parent a7debc8 commit ce3fff1

File tree

5 files changed

+109
-63
lines changed

5 files changed

+109
-63
lines changed

‎src/components/elements/controlledDisplayFiltersGroup/index.tsx

+31-13
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export interface ControlledDisplayFiltersGroupProps {
2222
onToggleShowAll: (show: boolean) => void;
2323
isToggleAll?: boolean;
2424
toggledFilters?: Set<string>;
25+
activeFiltersChanged: (activeFilters: string[]) => void;
2526
}
2627

2728
export function ControlledDisplayFiltersGroup({
@@ -30,11 +31,13 @@ export function ControlledDisplayFiltersGroup({
3031
toggleAllLabel,
3132
isToggleAll,
3233
toggledFilters,
34+
activeFiltersChanged
3335
}: ControlledDisplayFiltersGroupProps) {
3436
const [showAll, setShowAll] = useState<boolean>(isToggleAll ?? false);
3537
const [availableFiltersNames, setAvailableFiltersNames] = useState<Set<string>>(
3638
new Set(filters.map((filter) => filter.label))
3739
);
40+
const [displayedFilters, setDisplayedFilters] = useState<Set<string>>(getInitialState());
3841

3942
useEffect(() => {
4043
setAvailableFiltersNames(new Set(filters.map((filter) => filter.label)));
@@ -49,8 +52,6 @@ export function ControlledDisplayFiltersGroup({
4952
return new Set<string>();
5053
}
5154

52-
const [displayedFilters, setDisplayedFilters] = useState<Set<string>>(getInitialState());
53-
5455
useEffect(() => {
5556
setShowAll(isToggleAll ?? false);
5657
}, [isToggleAll]);
@@ -78,6 +79,31 @@ export function ControlledDisplayFiltersGroup({
7879
}
7980
}, [displayedFilters, availableFiltersNames]);
8081

82+
const onFilterChange = (label: string) => {
83+
const updatedFilters = new Set(displayedFilters);
84+
if (updatedFilters.has(label)) {
85+
updatedFilters.delete(label);
86+
} else {
87+
updatedFilters.add(label);
88+
}
89+
setDisplayedFilters(updatedFilters);
90+
// if (item.onChange) item.onChange(item.label);
91+
};
92+
93+
const addFilter = (value: string) => {
94+
setAvailableFiltersNames(new Set([...availableFiltersNames, value]));
95+
};
96+
97+
const removeFilter = (value: string) => {
98+
const updatedFilterList = new Set(availableFiltersNames);
99+
updatedFilterList.delete(value);
100+
setAvailableFiltersNames(updatedFilterList);
101+
};
102+
103+
useEffect(() => {
104+
activeFiltersChanged([...displayedFilters]);
105+
}, [displayedFilters]);
106+
81107
return (
82108
<Box sx={{ backgroundColor: 'rgba(248, 250, 252, 1)' }}>
83109
<Box>
@@ -87,20 +113,12 @@ export function ControlledDisplayFiltersGroup({
87113
return (
88114
<>
89115
<DisplayFilter
116+
addFilter={addFilter}
117+
removeFilter={removeFilter}
90118
showCompare={item?.showCompare}
91-
showAll={showAll}
92119
value={showAll || displayedFilters.has(item.label)}
93120
label={item.label}
94-
onChange={() => {
95-
const updatedFilters = new Set(displayedFilters);
96-
if (updatedFilters.has(item.label)) {
97-
updatedFilters.delete(item.label);
98-
} else {
99-
updatedFilters.add(item.label);
100-
}
101-
setDisplayedFilters(updatedFilters);
102-
if (item.onChange) item.onChange(item.label);
103-
}}
121+
onChange={onFilterChange}
104122
/>
105123
</>
106124
);

‎src/components/elements/dateManager/index.tsx

+13-20
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,18 @@ import theme from '../../../theme';
99
import PresetsContent from './Presets';
1010
import { Icon } from '../../icons';
1111

12+
const newOpenPickerButton = createSvgIcon(
13+
<svg width="20" height="20" viewBox="0 0 20 20" fill="#64748B" xmlns="http://www.w3.org/2000/svg">
14+
<path
15+
fill-rule="evenodd"
16+
clip-rule="evenodd"
17+
d="M6.66666 1.66663C7.1269 1.66663 7.5 2.03972 7.5 2.49996V3.33329H12.5V2.49996C12.5 2.03972 12.8731 1.66663 13.3333 1.66663C13.7936 1.66663 14.1667 2.03972 14.1667 2.49996V3.33329H15.8333C17.214 3.33329 18.3333 4.45258 18.3333 5.83329V15.8333C18.3333 17.214 17.214 18.3333 15.8333 18.3333H4.16666C2.78595 18.3333 1.66666 17.214 1.66666 15.8333V5.83329C1.66666 4.45258 2.78595 3.33329 4.16666 3.33329H5.83333V2.49996C5.83333 2.03972 6.20643 1.66663 6.66666 1.66663ZM5.83333 4.99996H4.16666C3.70643 4.99996 3.33333 5.37306 3.33333 5.83329V15.8333C3.33333 16.2935 3.70643 16.6666 4.16666 16.6666H15.8333C16.2936 16.6666 16.6667 16.2935 16.6667 15.8333V5.83329C16.6667 5.37306 16.2936 4.99996 15.8333 4.99996H14.1667V5.83329C14.1667 6.29353 13.7936 6.66663 13.3333 6.66663C12.8731 6.66663 12.5 6.29353 12.5 5.83329V4.99996H7.5V5.83329C7.5 6.29353 7.1269 6.66663 6.66666 6.66663C6.20643 6.66663 5.83333 6.29353 5.83333 5.83329V4.99996ZM5 9.16663C5 8.70639 5.37309 8.33329 5.83333 8.33329H14.1667C14.6269 8.33329 15 8.70639 15 9.16663C15 9.62686 14.6269 9.99996 14.1667 9.99996H5.83333C5.37309 9.99996 5 9.62686 5 9.16663Z"
18+
fill="#64748B"
19+
/>
20+
</svg>,
21+
'calendar'
22+
);
23+
1224
const NoResultsState = () => {
1325
return (
1426
<Box display={'flex'} alignItems={'center'} justifyContent={'center'} flexDirection={'column'}>
@@ -86,32 +98,13 @@ export const DateManager = ({
8698
value={date}
8799
onChange={setDate}
88100
onError={(reason, value) => {
89-
console.log('reason, ',reason)
90101
if (reason) {
91102
setErrorDate(true);
92103
} else {
93104
setErrorDate(false);
94105
}
95106
}}
96-
slots={{
97-
openPickerIcon: createSvgIcon(
98-
<svg
99-
width="20"
100-
height="20"
101-
viewBox="0 0 20 20"
102-
fill="#64748B"
103-
xmlns="http://www.w3.org/2000/svg"
104-
>
105-
<path
106-
fill-rule="evenodd"
107-
clip-rule="evenodd"
108-
d="M6.66666 1.66663C7.1269 1.66663 7.5 2.03972 7.5 2.49996V3.33329H12.5V2.49996C12.5 2.03972 12.8731 1.66663 13.3333 1.66663C13.7936 1.66663 14.1667 2.03972 14.1667 2.49996V3.33329H15.8333C17.214 3.33329 18.3333 4.45258 18.3333 5.83329V15.8333C18.3333 17.214 17.214 18.3333 15.8333 18.3333H4.16666C2.78595 18.3333 1.66666 17.214 1.66666 15.8333V5.83329C1.66666 4.45258 2.78595 3.33329 4.16666 3.33329H5.83333V2.49996C5.83333 2.03972 6.20643 1.66663 6.66666 1.66663ZM5.83333 4.99996H4.16666C3.70643 4.99996 3.33333 5.37306 3.33333 5.83329V15.8333C3.33333 16.2935 3.70643 16.6666 4.16666 16.6666H15.8333C16.2936 16.6666 16.6667 16.2935 16.6667 15.8333V5.83329C16.6667 5.37306 16.2936 4.99996 15.8333 4.99996H14.1667V5.83329C14.1667 6.29353 13.7936 6.66663 13.3333 6.66663C12.8731 6.66663 12.5 6.29353 12.5 5.83329V4.99996H7.5V5.83329C7.5 6.29353 7.1269 6.66663 6.66666 6.66663C6.20643 6.66663 5.83333 6.29353 5.83333 5.83329V4.99996ZM5 9.16663C5 8.70639 5.37309 8.33329 5.83333 8.33329H14.1667C14.6269 8.33329 15 8.70639 15 9.16663C15 9.62686 14.6269 9.99996 14.1667 9.99996H5.83333C5.37309 9.99996 5 9.62686 5 9.16663Z"
109-
fill="#64748B"
110-
/>
111-
</svg>,
112-
'calendar'
113-
)
114-
}}
107+
slots={{ openPickerIcon: newOpenPickerButton }}
115108
/>
116109
</Box>
117110

‎src/components/elements/displayFilter/ComparePopover.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,11 @@ const ComparePopover = ({
7171
>
7272
<DateManager
7373
close={handleClose}
74-
search={search}
74+
search={(val) => {
75+
search(val);
76+
// todo if no results, show empty message, showNoResults prop.
77+
handleClose();
78+
}}
7579
presets={presets?.length ? presets : defaultPresets}
7680
/>
7781
</Popover>

‎src/components/elements/displayFilter/index.tsx

+54-26
Original file line numberDiff line numberDiff line change
@@ -18,50 +18,79 @@ import ComparePopover from './ComparePopover';
1818

1919
export interface DisplayFilterProps {
2020
label: string;
21-
showAll?: boolean;
22-
onChange: () => void;
21+
onChange: (filterName: string) => void;
2322
value: boolean;
24-
showCancel?: boolean;
2523
showCompare?: boolean;
2624
isChild?: boolean;
27-
cancelFilter?: (e: any) => void;
25+
showRemoveButton?: boolean;
26+
removeFilter?: (e: any) => void;
27+
addFilter?: (value: string) => void;
2828
}
2929

30-
export function DisplayFilter({ label, onChange, value, showCancel, showAll, showCompare, cancelFilter,
30+
export function DisplayFilter({
31+
label,
32+
onChange,
33+
value,
34+
showCompare,
35+
removeFilter,
36+
addFilter,
37+
showRemoveButton
3138
}: DisplayFilterProps) {
32-
const [show, setShow] = useState<boolean>(false);
39+
const [show, setShow] = useState<boolean>(true);
40+
const [showAllChildren, setShowAllChildren] = useState<boolean>(true);
3341
const [open, setOpen] = useState<boolean>(false);
34-
const [children, setChildren] = useState<{ name: string; value: string }[]>([{
35-
value: '',
36-
name: 'as of now'
37-
}]);
42+
const [children, setChildren] = useState<{ name: string; value: string }[]>([
43+
{
44+
value: '',
45+
name: 'as of now'
46+
}
47+
]);
3848

3949
const filterClicked = () => {
40-
setShow(!show);
41-
onChange();
50+
if (children.length > 1) {
51+
children.map((item) => onChange(item.value));
52+
setShowAllChildren(!showAllChildren);
53+
setShow(!showAllChildren);
54+
} else {
55+
onChange(label);
56+
setShow(!show);
57+
}
4258
};
4359

4460
const onToggle = (e: React.SyntheticEvent) => {
4561
e.stopPropagation();
4662
setOpen(!open);
4763
};
4864

65+
// control the show indication from outside when value changes (toggle all button)
4966
useEffect(() => {
5067
setShow(value);
68+
if (value) {
69+
setShowAllChildren(value);
70+
}
5171
}, [value]);
5272

73+
// when show changes from outside
74+
useEffect(() => {
75+
if (children.length > 1) {
76+
setShowAllChildren(show);
77+
}
78+
}, [show]);
79+
5380
const search = ({ name, value }: { name: string; value: string }) => {
54-
console.log('value ', value);
55-
console.log('name ', name);
5681
// has results -
5782
// add the tag to the children list.
58-
const newChildren = [...children || [], { name, value}];
83+
const newChildren = [...(children || []), { name, value }];
5984
setChildren(newChildren);
85+
addFilter && addFilter(value);
86+
setOpen(true);
87+
6088
// empty - toggle on no results
6189
};
6290

63-
const removeChildFilter = (e: any) => {
64-
console.log('e', e);
91+
const removeChildFilter = (filterToRemove: string) => {
92+
const newChildren = children.filter((item) => item.name !== filterToRemove);
93+
setChildren(newChildren);
6594
};
6695

6796
return (
@@ -125,8 +154,8 @@ export function DisplayFilter({ label, onChange, value, showCancel, showAll, sho
125154
</Box>
126155

127156
<Stack direction={'row'} gap={1}>
128-
{!!cancelFilter && (
129-
<IconButton onClick={() => cancelFilter(label) } sx={{ padding: 0 }}>
157+
{showRemoveButton && (
158+
<IconButton onClick={() => removeFilter && removeFilter(label)} sx={{ padding: 0 }}>
130159
<CancelIcon
131160
id={'cancel'}
132161
sx={{
@@ -140,7 +169,7 @@ export function DisplayFilter({ label, onChange, value, showCancel, showAll, sho
140169
</IconButton>
141170
)}
142171

143-
{showCompare && <ComparePopover search={search}/>}
172+
{showCompare && <ComparePopover search={search} />}
144173

145174
<IconButton
146175
sx={{ padding: 0, height: '20px', width: '21.08px' }}
@@ -152,21 +181,20 @@ export function DisplayFilter({ label, onChange, value, showCancel, showAll, sho
152181
</Box>
153182
</Stack>
154183

155-
{/*annotations */}
156184
{children?.length > 1 && (
157185
<Collapse in={open} timeout="auto" unmountOnExit>
158186
<List component="div" disablePadding>
159187
<Box paddingLeft={2}>
160-
{children?.map((item) => (
188+
{children?.map((item, index) => (
161189
<Tooltip title={item?.name}>
162190
<div>
163191
<DisplayFilter
192+
showRemoveButton={index > 0}
164193
isChild
165-
value={!!showAll}
194+
value={showAllChildren}
166195
label={item?.name}
167-
onChange={() => console.log('changed')}
168-
showCancel
169-
cancelFilter={removeChildFilter}
196+
onChange={() => onChange(item.name)}
197+
removeFilter={removeChildFilter}
170198
/>
171199
</div>
172200
</Tooltip>

‎src/stories/elements/controlledDisplayFiltersGroup/ControlledDisplayFiltersGroup.stories.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -41,15 +41,17 @@ export const filterGroupNotControlled: StoryFn<typeof ControlledDisplayFiltersGr
4141
Template.bind({});
4242
filterGroupNotControlled.args = {
4343
filters: filters,
44-
onToggleShowAll: (value) => console.log('toggle show all', value),
44+
activeFiltersChanged: (activeFilters) => {},
45+
onToggleShowAll: (value) => {},
4546
toggleAllLabel: 'Show all'
4647
};
4748

4849
export const filterGroupControlledAndToggledAll: StoryFn<typeof ControlledDisplayFiltersGroup> =
4950
Template.bind({});
5051
filterGroupControlledAndToggledAll.args = {
5152
filters: filters,
52-
onToggleShowAll: (value) => console.log('toggle show all', value),
53+
activeFiltersChanged: (activeFilters) => {},
54+
onToggleShowAll: (value) => {},
5355
toggleAllLabel: 'Show all',
5456
isToggleAll: true //Make the component controlled from outside and toggle all filters
5557
};
@@ -59,7 +61,8 @@ export const filterGroupControlledAndPartiallyToggled: StoryFn<
5961
> = Template.bind({});
6062
filterGroupControlledAndPartiallyToggled.args = {
6163
filters: filters,
62-
onToggleShowAll: (value) => console.log('toggle show all', value),
64+
activeFiltersChanged: (activeFilters) => {},
65+
onToggleShowAll: (value) => {},
6366
toggleAllLabel: 'Show all',
6467
toggledFilters: new Set(['metadata_key_2']) //Make the component controlled from outside and toggle 1 filter out of three
6568
};

0 commit comments

Comments
 (0)