-
Notifications
You must be signed in to change notification settings - Fork 4k
/
filters.js
113 lines (105 loc) · 2.36 KB
/
filters.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/**
* WordPress dependencies
*/
import { memo, useRef } from '@wordpress/element';
/**
* Internal dependencies
*/
import FilterSummary from './filter-summary';
import AddFilter from './add-filter';
import ResetFilters from './reset-filters';
import { sanitizeOperators } from './utils';
import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from './constants';
import { __experimentalHStack as HStack } from '@wordpress/components';
const Filters = memo( function Filters( {
fields,
view,
onChangeView,
openedFilter,
setOpenedFilter,
} ) {
const addFilterRef = useRef();
const filters = [];
fields.forEach( ( field ) => {
if ( ! field.elements?.length ) {
return;
}
const operators = sanitizeOperators( field );
if ( operators.length === 0 ) {
return;
}
const isPrimary = !! field.filterBy?.isPrimary;
filters.push( {
field: field.id,
name: field.header,
elements: field.elements,
singleSelection: operators.some( ( op ) =>
[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
),
operators,
isVisible:
isPrimary ||
view.filters.some(
( f ) =>
f.field === field.id &&
ALL_OPERATORS.includes( f.operator )
),
isPrimary,
} );
} );
// Sort filters by primary property. We need the primary filters to be first.
// Then we sort by name.
filters.sort( ( a, b ) => {
if ( a.isPrimary && ! b.isPrimary ) {
return -1;
}
if ( ! a.isPrimary && b.isPrimary ) {
return 1;
}
return a.name.localeCompare( b.name );
} );
const addFilter = (
<AddFilter
key="add-filter"
filters={ filters }
view={ view }
onChangeView={ onChangeView }
ref={ addFilterRef }
setOpenedFilter={ setOpenedFilter }
/>
);
const filterComponents = [
...filters.map( ( filter ) => {
if ( ! filter.isVisible ) {
return null;
}
return (
<FilterSummary
key={ filter.field }
filter={ filter }
view={ view }
onChangeView={ onChangeView }
addFilterRef={ addFilterRef }
openedFilter={ openedFilter }
/>
);
} ),
addFilter,
];
if ( filterComponents.length > 1 ) {
filterComponents.push(
<ResetFilters
key="reset-filters"
filters={ filters }
view={ view }
onChangeView={ onChangeView }
/>
);
}
return (
<HStack justify="flex-start" style={ { width: 'fit-content' } } wrap>
{ filterComponents }
</HStack>
);
} );
export default Filters;