@luscii-healthtech/web-ui 7.0.0 → 7.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The object used to create a filter dropdown in the component.
|
|
3
|
+
* This is used based on the dataset passed to FilterBar, so we always calculate the filters
|
|
4
|
+
* looking at the data.
|
|
5
|
+
*/
|
|
6
|
+
export type FilterGenerator<T> = {
|
|
7
|
+
id: string;
|
|
8
|
+
label: string;
|
|
9
|
+
/**
|
|
10
|
+
*
|
|
11
|
+
* @param data the value from the dataset entry that will be used for the filter
|
|
12
|
+
* @returns the string value for the desired filter
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
*
|
|
16
|
+
* ```json
|
|
17
|
+
* {
|
|
18
|
+
id: "brand",
|
|
19
|
+
label: "Brand",
|
|
20
|
+
filterValuePredicate: (tshirt: TShirtFromApi) => tshirt.brand,
|
|
21
|
+
}
|
|
22
|
+
* ```
|
|
23
|
+
* in the above, all unique values from `brand` will be used to populate the `Brand` filter.
|
|
24
|
+
*/
|
|
25
|
+
filterValuePredicate: (data: T) => string;
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* Allows customization of labels related to filter.
|
|
29
|
+
*
|
|
30
|
+
*/
|
|
31
|
+
export type FilterBarLocalization = {
|
|
32
|
+
/**
|
|
33
|
+
* The string prefix displayed when a sorting value is selected in the menu.
|
|
34
|
+
*
|
|
35
|
+
* @default "Sorted by:"
|
|
36
|
+
* @example
|
|
37
|
+
*
|
|
38
|
+
* `sortedByLabel`: "Sorted by: "
|
|
39
|
+
*
|
|
40
|
+
* Example of sorting options
|
|
41
|
+
* - Name
|
|
42
|
+
* - Email (selected)
|
|
43
|
+
* - Date of birth
|
|
44
|
+
*
|
|
45
|
+
* UI shows: `Sorted by: Email`.
|
|
46
|
+
*/
|
|
47
|
+
sortedByLabel: string;
|
|
48
|
+
/**
|
|
49
|
+
* The string for unselected state of the sorting options.
|
|
50
|
+
*
|
|
51
|
+
* @default "Sort"
|
|
52
|
+
*/
|
|
53
|
+
sortLabel: string;
|
|
54
|
+
/**
|
|
55
|
+
* The string for the active filters and the mobile filter menu label.
|
|
56
|
+
*
|
|
57
|
+
* @default "Filters"
|
|
58
|
+
*/
|
|
59
|
+
filtersLabel: string;
|
|
60
|
+
};
|
|
61
|
+
export type TransformedFilterOption = {
|
|
62
|
+
id: string;
|
|
63
|
+
label: string;
|
|
64
|
+
value: string;
|
|
65
|
+
isChecked: boolean;
|
|
66
|
+
};
|
|
67
|
+
export type TransformedFilterOptions = TransformedFilterOption[];
|
|
68
|
+
type CategorisedFilter = {
|
|
69
|
+
key: string;
|
|
70
|
+
label: string;
|
|
71
|
+
options: TransformedFilterOptions;
|
|
72
|
+
};
|
|
73
|
+
export type CategorisedFilters = CategorisedFilter[];
|
|
74
|
+
export type TransformedSortingOption = {
|
|
75
|
+
id: string;
|
|
76
|
+
label: string;
|
|
77
|
+
value: string;
|
|
78
|
+
isChecked: boolean;
|
|
79
|
+
sortingCompare: (itemA: any, itemB: any) => number;
|
|
80
|
+
};
|
|
81
|
+
export type TransformedSortingOptions = TransformedSortingOption[];
|
|
82
|
+
export type OnFilterBarFilterChange = (params: {
|
|
83
|
+
category: string;
|
|
84
|
+
changedFilterOption: TransformedFilterOption;
|
|
85
|
+
}) => void;
|
|
86
|
+
export type OnFilterBarSortingChange = (changedSortingOption: TransformedSortingOption) => void;
|
|
87
|
+
export type FilterBarProps = {
|
|
88
|
+
categorizedFilters: CategorisedFilters;
|
|
89
|
+
sortingOptions: TransformedSortingOptions;
|
|
90
|
+
onFilterChange: (updatedFilters: CategorisedFilters) => void;
|
|
91
|
+
onSortingChange: (updatedSortingOptions: TransformedSortingOptions) => void;
|
|
92
|
+
localization: FilterBarLocalization;
|
|
93
|
+
};
|
|
94
|
+
export {};
|