@trackunit/filters-filter-bar 0.0.404 → 0.0.407
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.
- package/index.cjs.js +122 -34
- package/index.esm.js +121 -27
- package/package.json +5 -4
- package/src/lib/FilterBar.d.ts +1 -2
- package/src/lib/components/DefaultCheckboxFilter.d.ts +1 -2
- package/src/lib/components/DefaultDateRangeFilter.d.ts +1 -2
- package/src/lib/components/DefaultRadioFilter.d.ts +0 -1
- package/src/lib/components/Filter.d.ts +0 -1
- package/src/lib/components/FilterHeader.d.ts +0 -1
- package/src/lib/components/FilterResults.d.ts +1 -2
- package/src/lib/components/StarredFilters.d.ts +0 -1
- package/src/lib/components/StarredFiltersMenu.d.ts +0 -1
- package/src/lib/utils/createInitialState.d.ts +1 -1
- package/src/translation.d.ts +1 -2
- package/translation.cjs.js +1 -1
- package/translation.cjs10.js +1 -1
- package/translation.cjs11.js +1 -1
- package/translation.cjs12.js +1 -1
- package/translation.cjs13.js +1 -1
- package/translation.cjs14.js +1 -1
- package/translation.cjs15.js +1 -1
- package/translation.cjs16.js +1 -1
- package/translation.cjs17.js +1 -1
- package/translation.cjs2.js +1 -1
- package/translation.cjs3.js +1 -1
- package/translation.cjs4.js +1 -1
- package/translation.cjs5.js +1 -1
- package/translation.cjs6.js +1 -1
- package/translation.cjs7.js +1 -1
- package/translation.cjs8.js +1 -1
- package/translation.cjs9.js +1 -1
package/index.cjs.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
4
|
var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
|
|
7
5
|
var tailwindMerge = require('tailwind-merge');
|
|
@@ -17,10 +15,6 @@ var reactDateAndTimeComponents = require('@trackunit/react-date-and-time-compone
|
|
|
17
15
|
var dequal = require('dequal');
|
|
18
16
|
var isEqual = require('lodash/isEqual');
|
|
19
17
|
|
|
20
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
21
|
-
|
|
22
|
-
var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
|
|
23
|
-
|
|
24
18
|
var defaultTranslations = {
|
|
25
19
|
"access.management.filter.operator.role.keyAdmin": "Key Admin",
|
|
26
20
|
"access.management.keys.filter.active": "Active Keys",
|
|
@@ -665,11 +659,11 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
|
|
|
665
659
|
setUndefinedCount({ count: (_b = (_a = results[index]) === null || _a === void 0 ? void 0 : _a.count) !== null && _b !== void 0 ? _b : 0, index });
|
|
666
660
|
}
|
|
667
661
|
}, [results]);
|
|
668
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilterHeader,
|
|
662
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilterHeader, { ...filterDefinition, ...filterBarActions, loading: loading, searchEnabled: true, searchProps: {
|
|
669
663
|
value: (_a = customSearch === null || customSearch === void 0 ? void 0 : customSearch.value) !== null && _a !== void 0 ? _a : searchText,
|
|
670
664
|
onChange: (_b = customSearch === null || customSearch === void 0 ? void 0 : customSearch.onChange) !== null && _b !== void 0 ? _b : setSearchText,
|
|
671
665
|
count: undefinedCount ? filteredOptions.length - 1 : filteredOptions.length,
|
|
672
|
-
} })
|
|
666
|
+
} }), jsxRuntime.jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsxRuntime.jsx(DynamicFilterList, { checked: index => {
|
|
673
667
|
var _a, _b;
|
|
674
668
|
return filterDefinition.type === "valueName"
|
|
675
669
|
? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || "")
|
|
@@ -789,11 +783,11 @@ const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loadi
|
|
|
789
783
|
}
|
|
790
784
|
};
|
|
791
785
|
const selectedRadioId = ((_a = filteredOptions.find(partner => filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, partner.key))) === null || _a === void 0 ? void 0 : _a.key) || "";
|
|
792
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilterHeader,
|
|
786
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FilterHeader, { ...filterBarActions, ...filterDefinition, loading: loading, searchEnabled: true, searchProps: {
|
|
793
787
|
value: (_b = customSearch === null || customSearch === void 0 ? void 0 : customSearch.value) !== null && _b !== void 0 ? _b : searchText,
|
|
794
788
|
onChange: (_c = customSearch === null || customSearch === void 0 ? void 0 : customSearch.onChange) !== null && _c !== void 0 ? _c : setSearchText,
|
|
795
789
|
count: filteredOptions.length,
|
|
796
|
-
} })
|
|
790
|
+
} }), jsxRuntime.jsx(FilterResults, { loading: loading, results: customSearch ? options : filteredOptions, children: res => (jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "DefaultRadioFilter", onChange: e => {
|
|
797
791
|
handleClick(e.currentTarget.value);
|
|
798
792
|
}, value: selectedRadioId, children: jsxRuntime.jsx(DynamicFilterList, { checked: index => { var _a; return filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""); }, count: index => { var _a; return (_a = res[index]) === null || _a === void 0 ? void 0 : _a.count; }, keyMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""; }, labelMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.label) || ""; }, prefixMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.prefix) || ""; }, rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, showTooltip: showTooltip, type: "Radio" }) })) })] }));
|
|
799
793
|
};
|
|
@@ -849,21 +843,28 @@ const createInitialState = (name, mainFilters, initialState, setValue) => {
|
|
|
849
843
|
var _a, _b;
|
|
850
844
|
const key = curr.filterKey;
|
|
851
845
|
const type = curr.type;
|
|
852
|
-
return
|
|
846
|
+
return {
|
|
847
|
+
...prev,
|
|
853
848
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
854
|
-
[key]: (_b = (_a = initialState[key]) !== null && _a !== void 0 ? _a : curr.defaultValue) !== null && _b !== void 0 ? _b : getInitialValueFromType(type)
|
|
849
|
+
[key]: (_b = (_a = initialState[key]) !== null && _a !== void 0 ? _a : curr.defaultValue) !== null && _b !== void 0 ? _b : getInitialValueFromType(type),
|
|
850
|
+
};
|
|
855
851
|
}, {});
|
|
856
852
|
const setters = mainFilters.reduce((prev, curr) => {
|
|
857
853
|
const key = curr.filterKey;
|
|
858
|
-
return
|
|
854
|
+
return {
|
|
855
|
+
...prev,
|
|
856
|
+
[`set${capitalize(key)}`]: (callback) => setValue(key, callback),
|
|
857
|
+
};
|
|
859
858
|
}, {});
|
|
860
859
|
const updatedInitialState = mainFilters.reduce((prev, curr) => {
|
|
861
860
|
var _a, _b;
|
|
862
861
|
const key = curr.filterKey;
|
|
863
862
|
const type = curr.type;
|
|
864
|
-
return
|
|
863
|
+
return {
|
|
864
|
+
...prev,
|
|
865
865
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
866
|
-
[key]: (_b = (_a = initialState[key]) !== null && _a !== void 0 ? _a : curr.defaultValue) !== null && _b !== void 0 ? _b : getInitialValueFromType(type)
|
|
866
|
+
[key]: (_b = (_a = initialState[key]) !== null && _a !== void 0 ? _a : curr.defaultValue) !== null && _b !== void 0 ? _b : getInitialValueFromType(type),
|
|
867
|
+
};
|
|
867
868
|
}, {});
|
|
868
869
|
const newFilter = {
|
|
869
870
|
name,
|
|
@@ -983,7 +984,7 @@ const validateFilter = (filter, filterDefinitions) => {
|
|
|
983
984
|
}
|
|
984
985
|
});
|
|
985
986
|
stateKeys.sort((a, b) => a.localeCompare(b));
|
|
986
|
-
const filterKeysNotEqual = !
|
|
987
|
+
const filterKeysNotEqual = !isEqual(stateKeys, filterDefinitions.map(f => f.filterKey).sort((a, b) => a.localeCompare(b)));
|
|
987
988
|
return inBadState || filterKeysNotEqual ? false : true;
|
|
988
989
|
};
|
|
989
990
|
|
|
@@ -996,7 +997,13 @@ const validateFilter = (filter, filterDefinitions) => {
|
|
|
996
997
|
const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState, }) => {
|
|
997
998
|
const setValue = react.useCallback((key, callback) => {
|
|
998
999
|
setFilterBarConfig(prevState => {
|
|
999
|
-
return
|
|
1000
|
+
return {
|
|
1001
|
+
...prevState,
|
|
1002
|
+
values: {
|
|
1003
|
+
...prevState.values,
|
|
1004
|
+
[key]: callback(prevState.values[key]),
|
|
1005
|
+
},
|
|
1006
|
+
};
|
|
1000
1007
|
});
|
|
1001
1008
|
}, []);
|
|
1002
1009
|
const [filterBarConfig, setFilterBarConfig] = react.useState(() => {
|
|
@@ -1087,20 +1094,32 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1087
1094
|
const resetIndividualFilterToInitialState = (key) => {
|
|
1088
1095
|
const tmpInitialState = createInitialState(name, sharedUtils.objectValues(filterBarDefinition), initialState || {}, setValue);
|
|
1089
1096
|
setFilterBarConfig(prevState => {
|
|
1090
|
-
return
|
|
1097
|
+
return {
|
|
1098
|
+
...prevState,
|
|
1099
|
+
values: {
|
|
1100
|
+
...prevState.values,
|
|
1101
|
+
[key]: tmpInitialState.values[key],
|
|
1102
|
+
},
|
|
1103
|
+
};
|
|
1091
1104
|
});
|
|
1092
1105
|
};
|
|
1093
1106
|
return {
|
|
1094
1107
|
updateStarredFilters(filterKey) {
|
|
1095
1108
|
setFilterBarConfig(prevState => {
|
|
1096
1109
|
if (prevState.starredFilterKeys.includes(filterKey)) {
|
|
1097
|
-
return
|
|
1110
|
+
return {
|
|
1111
|
+
...prevState,
|
|
1112
|
+
starredFilterKeys: prevState.starredFilterKeys.filter(obj => obj !== filterKey),
|
|
1113
|
+
};
|
|
1098
1114
|
}
|
|
1099
1115
|
else {
|
|
1100
|
-
return
|
|
1116
|
+
return {
|
|
1117
|
+
...prevState,
|
|
1118
|
+
starredFilterKeys: [
|
|
1101
1119
|
...prevState.starredFilterKeys,
|
|
1102
1120
|
filterKey,
|
|
1103
|
-
]
|
|
1121
|
+
],
|
|
1122
|
+
};
|
|
1104
1123
|
}
|
|
1105
1124
|
});
|
|
1106
1125
|
resetIndividualFilterToInitialState(filterKey);
|
|
@@ -1109,22 +1128,46 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1109
1128
|
setFilterBarConfig(prevState => {
|
|
1110
1129
|
const filterValue = prevState.values[key];
|
|
1111
1130
|
if (filterValue === null || filterValue === void 0 ? void 0 : filterValue.includes(value)) {
|
|
1112
|
-
return
|
|
1131
|
+
return {
|
|
1132
|
+
...prevState,
|
|
1133
|
+
values: {
|
|
1134
|
+
...prevState.values,
|
|
1135
|
+
[key]: filterValue.filter(obj => obj !== value),
|
|
1136
|
+
},
|
|
1137
|
+
};
|
|
1113
1138
|
}
|
|
1114
1139
|
else {
|
|
1115
|
-
return
|
|
1140
|
+
return {
|
|
1141
|
+
...prevState,
|
|
1142
|
+
values: {
|
|
1143
|
+
...prevState.values,
|
|
1144
|
+
[key]: filterValue ? [...filterValue, value] : [value],
|
|
1145
|
+
},
|
|
1146
|
+
};
|
|
1116
1147
|
}
|
|
1117
1148
|
});
|
|
1118
1149
|
},
|
|
1119
1150
|
setStringValue(key, value) {
|
|
1120
1151
|
setFilterBarConfig(prevState => {
|
|
1121
|
-
return
|
|
1152
|
+
return {
|
|
1153
|
+
...prevState,
|
|
1154
|
+
values: {
|
|
1155
|
+
...prevState.values,
|
|
1156
|
+
[key]: value,
|
|
1157
|
+
},
|
|
1158
|
+
};
|
|
1122
1159
|
});
|
|
1123
1160
|
},
|
|
1124
1161
|
// Setting independent values(string[])
|
|
1125
1162
|
setArrayValue(key, value) {
|
|
1126
1163
|
setFilterBarConfig(prevState => {
|
|
1127
|
-
return
|
|
1164
|
+
return {
|
|
1165
|
+
...prevState,
|
|
1166
|
+
values: {
|
|
1167
|
+
...prevState.values,
|
|
1168
|
+
[key]: value,
|
|
1169
|
+
},
|
|
1170
|
+
};
|
|
1128
1171
|
});
|
|
1129
1172
|
},
|
|
1130
1173
|
//For bounding box
|
|
@@ -1136,7 +1179,13 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1136
1179
|
nw: { latitude: boundingBox.nw.latitude, longitude: boundingBox.nw.longitude },
|
|
1137
1180
|
se: { latitude: boundingBox.se.latitude, longitude: boundingBox.se.longitude },
|
|
1138
1181
|
};
|
|
1139
|
-
return
|
|
1182
|
+
return {
|
|
1183
|
+
...prevState,
|
|
1184
|
+
values: {
|
|
1185
|
+
...prevState.values,
|
|
1186
|
+
BoundingBox: { ...cleanedBoundingBox, zoom: (_a = boundingBox.zoom) !== null && _a !== void 0 ? _a : 0 },
|
|
1187
|
+
},
|
|
1188
|
+
};
|
|
1140
1189
|
});
|
|
1141
1190
|
},
|
|
1142
1191
|
setMinMaxValue(key, minMax) {
|
|
@@ -1146,7 +1195,13 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1146
1195
|
min: minMax.min,
|
|
1147
1196
|
max: minMax.max,
|
|
1148
1197
|
};
|
|
1149
|
-
return
|
|
1198
|
+
return {
|
|
1199
|
+
...prevState,
|
|
1200
|
+
values: {
|
|
1201
|
+
...prevState.values,
|
|
1202
|
+
[key]: cleanedMinMax,
|
|
1203
|
+
},
|
|
1204
|
+
};
|
|
1150
1205
|
});
|
|
1151
1206
|
},
|
|
1152
1207
|
setBooleanValue(key, booleanValue) {
|
|
@@ -1159,7 +1214,13 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1159
1214
|
const cleanedBooleanValue = {
|
|
1160
1215
|
booleanValue: booleanValue.booleanValue,
|
|
1161
1216
|
};
|
|
1162
|
-
return
|
|
1217
|
+
return {
|
|
1218
|
+
...prevState,
|
|
1219
|
+
values: {
|
|
1220
|
+
...prevState.values,
|
|
1221
|
+
[key]: cleanedBooleanValue,
|
|
1222
|
+
},
|
|
1223
|
+
};
|
|
1163
1224
|
});
|
|
1164
1225
|
},
|
|
1165
1226
|
setNumberValue(key, numberValue) {
|
|
@@ -1172,7 +1233,13 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1172
1233
|
const cleanedNumberValue = {
|
|
1173
1234
|
numberValue: numberValue.numberValue,
|
|
1174
1235
|
};
|
|
1175
|
-
return
|
|
1236
|
+
return {
|
|
1237
|
+
...prevState,
|
|
1238
|
+
values: {
|
|
1239
|
+
...prevState.values,
|
|
1240
|
+
[key]: cleanedNumberValue,
|
|
1241
|
+
},
|
|
1242
|
+
};
|
|
1176
1243
|
});
|
|
1177
1244
|
},
|
|
1178
1245
|
setDateRange(key, dateRange) {
|
|
@@ -1182,12 +1249,24 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1182
1249
|
from: dateRange.from,
|
|
1183
1250
|
to: dateRange.to,
|
|
1184
1251
|
};
|
|
1185
|
-
return
|
|
1252
|
+
return {
|
|
1253
|
+
...prevState,
|
|
1254
|
+
values: {
|
|
1255
|
+
...prevState.values,
|
|
1256
|
+
[key]: cleanedDateRange,
|
|
1257
|
+
},
|
|
1258
|
+
};
|
|
1186
1259
|
});
|
|
1187
1260
|
},
|
|
1188
1261
|
setArrayObjectValue(key, filterValue) {
|
|
1189
1262
|
setFilterBarConfig(prevState => {
|
|
1190
|
-
return
|
|
1263
|
+
return {
|
|
1264
|
+
...prevState,
|
|
1265
|
+
values: {
|
|
1266
|
+
...prevState.values,
|
|
1267
|
+
[key]: filterValue,
|
|
1268
|
+
},
|
|
1269
|
+
};
|
|
1191
1270
|
});
|
|
1192
1271
|
},
|
|
1193
1272
|
//Setting multiple value name objects
|
|
@@ -1201,13 +1280,22 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1201
1280
|
else {
|
|
1202
1281
|
array = [...array, filterValue];
|
|
1203
1282
|
}
|
|
1204
|
-
return
|
|
1283
|
+
return {
|
|
1284
|
+
...prevState,
|
|
1285
|
+
values: {
|
|
1286
|
+
...prevState.values,
|
|
1287
|
+
[key]: array,
|
|
1288
|
+
},
|
|
1289
|
+
};
|
|
1205
1290
|
});
|
|
1206
1291
|
},
|
|
1207
1292
|
// Reset filters to initial state
|
|
1208
1293
|
resetFiltersToInitialState() {
|
|
1209
1294
|
setFilterBarConfig(prevState => {
|
|
1210
|
-
return
|
|
1295
|
+
return {
|
|
1296
|
+
...prevState,
|
|
1297
|
+
values: createInitialState(name, sharedUtils.objectValues(filterBarDefinition), initialState || {}, setValue).values,
|
|
1298
|
+
};
|
|
1211
1299
|
});
|
|
1212
1300
|
},
|
|
1213
1301
|
resetIndividualFilterToInitialState,
|
|
@@ -1215,7 +1303,7 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1215
1303
|
}, [filterBarDefinition, initialState, name, setValue]);
|
|
1216
1304
|
return react.useMemo(() => {
|
|
1217
1305
|
return {
|
|
1218
|
-
filterBarConfig:
|
|
1306
|
+
filterBarConfig: { ...filterBarConfig, ...filterMapActions, ...filterMapGetter },
|
|
1219
1307
|
filterBarDefinition,
|
|
1220
1308
|
};
|
|
1221
1309
|
}, [filterBarConfig, filterMapActions, filterMapGetter, filterBarDefinition]);
|
package/index.esm.js
CHANGED
|
@@ -657,11 +657,11 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
|
|
|
657
657
|
setUndefinedCount({ count: (_b = (_a = results[index]) === null || _a === void 0 ? void 0 : _a.count) !== null && _b !== void 0 ? _b : 0, index });
|
|
658
658
|
}
|
|
659
659
|
}, [results]);
|
|
660
|
-
return (jsxs(Fragment, { children: [jsx(FilterHeader,
|
|
660
|
+
return (jsxs(Fragment, { children: [jsx(FilterHeader, { ...filterDefinition, ...filterBarActions, loading: loading, searchEnabled: true, searchProps: {
|
|
661
661
|
value: (_a = customSearch === null || customSearch === void 0 ? void 0 : customSearch.value) !== null && _a !== void 0 ? _a : searchText,
|
|
662
662
|
onChange: (_b = customSearch === null || customSearch === void 0 ? void 0 : customSearch.onChange) !== null && _b !== void 0 ? _b : setSearchText,
|
|
663
663
|
count: undefinedCount ? filteredOptions.length - 1 : filteredOptions.length,
|
|
664
|
-
} })
|
|
664
|
+
} }), jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsx(DynamicFilterList, { checked: index => {
|
|
665
665
|
var _a, _b;
|
|
666
666
|
return filterDefinition.type === "valueName"
|
|
667
667
|
? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || "")
|
|
@@ -781,11 +781,11 @@ const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loadi
|
|
|
781
781
|
}
|
|
782
782
|
};
|
|
783
783
|
const selectedRadioId = ((_a = filteredOptions.find(partner => filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, partner.key))) === null || _a === void 0 ? void 0 : _a.key) || "";
|
|
784
|
-
return (jsxs(Fragment, { children: [jsx(FilterHeader,
|
|
784
|
+
return (jsxs(Fragment, { children: [jsx(FilterHeader, { ...filterBarActions, ...filterDefinition, loading: loading, searchEnabled: true, searchProps: {
|
|
785
785
|
value: (_b = customSearch === null || customSearch === void 0 ? void 0 : customSearch.value) !== null && _b !== void 0 ? _b : searchText,
|
|
786
786
|
onChange: (_c = customSearch === null || customSearch === void 0 ? void 0 : customSearch.onChange) !== null && _c !== void 0 ? _c : setSearchText,
|
|
787
787
|
count: filteredOptions.length,
|
|
788
|
-
} })
|
|
788
|
+
} }), jsx(FilterResults, { loading: loading, results: customSearch ? options : filteredOptions, children: res => (jsx(RadioGroup, { id: "DefaultRadioFilter", onChange: e => {
|
|
789
789
|
handleClick(e.currentTarget.value);
|
|
790
790
|
}, value: selectedRadioId, children: jsx(DynamicFilterList, { checked: index => { var _a; return filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""); }, count: index => { var _a; return (_a = res[index]) === null || _a === void 0 ? void 0 : _a.count; }, keyMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""; }, labelMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.label) || ""; }, prefixMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.prefix) || ""; }, rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, showTooltip: showTooltip, type: "Radio" }) })) })] }));
|
|
791
791
|
};
|
|
@@ -841,21 +841,28 @@ const createInitialState = (name, mainFilters, initialState, setValue) => {
|
|
|
841
841
|
var _a, _b;
|
|
842
842
|
const key = curr.filterKey;
|
|
843
843
|
const type = curr.type;
|
|
844
|
-
return
|
|
844
|
+
return {
|
|
845
|
+
...prev,
|
|
845
846
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
846
|
-
[key]: (_b = (_a = initialState[key]) !== null && _a !== void 0 ? _a : curr.defaultValue) !== null && _b !== void 0 ? _b : getInitialValueFromType(type)
|
|
847
|
+
[key]: (_b = (_a = initialState[key]) !== null && _a !== void 0 ? _a : curr.defaultValue) !== null && _b !== void 0 ? _b : getInitialValueFromType(type),
|
|
848
|
+
};
|
|
847
849
|
}, {});
|
|
848
850
|
const setters = mainFilters.reduce((prev, curr) => {
|
|
849
851
|
const key = curr.filterKey;
|
|
850
|
-
return
|
|
852
|
+
return {
|
|
853
|
+
...prev,
|
|
854
|
+
[`set${capitalize(key)}`]: (callback) => setValue(key, callback),
|
|
855
|
+
};
|
|
851
856
|
}, {});
|
|
852
857
|
const updatedInitialState = mainFilters.reduce((prev, curr) => {
|
|
853
858
|
var _a, _b;
|
|
854
859
|
const key = curr.filterKey;
|
|
855
860
|
const type = curr.type;
|
|
856
|
-
return
|
|
861
|
+
return {
|
|
862
|
+
...prev,
|
|
857
863
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
858
|
-
[key]: (_b = (_a = initialState[key]) !== null && _a !== void 0 ? _a : curr.defaultValue) !== null && _b !== void 0 ? _b : getInitialValueFromType(type)
|
|
864
|
+
[key]: (_b = (_a = initialState[key]) !== null && _a !== void 0 ? _a : curr.defaultValue) !== null && _b !== void 0 ? _b : getInitialValueFromType(type),
|
|
865
|
+
};
|
|
859
866
|
}, {});
|
|
860
867
|
const newFilter = {
|
|
861
868
|
name,
|
|
@@ -988,7 +995,13 @@ const validateFilter = (filter, filterDefinitions) => {
|
|
|
988
995
|
const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState, }) => {
|
|
989
996
|
const setValue = useCallback((key, callback) => {
|
|
990
997
|
setFilterBarConfig(prevState => {
|
|
991
|
-
return
|
|
998
|
+
return {
|
|
999
|
+
...prevState,
|
|
1000
|
+
values: {
|
|
1001
|
+
...prevState.values,
|
|
1002
|
+
[key]: callback(prevState.values[key]),
|
|
1003
|
+
},
|
|
1004
|
+
};
|
|
992
1005
|
});
|
|
993
1006
|
}, []);
|
|
994
1007
|
const [filterBarConfig, setFilterBarConfig] = useState(() => {
|
|
@@ -1079,20 +1092,32 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1079
1092
|
const resetIndividualFilterToInitialState = (key) => {
|
|
1080
1093
|
const tmpInitialState = createInitialState(name, objectValues(filterBarDefinition), initialState || {}, setValue);
|
|
1081
1094
|
setFilterBarConfig(prevState => {
|
|
1082
|
-
return
|
|
1095
|
+
return {
|
|
1096
|
+
...prevState,
|
|
1097
|
+
values: {
|
|
1098
|
+
...prevState.values,
|
|
1099
|
+
[key]: tmpInitialState.values[key],
|
|
1100
|
+
},
|
|
1101
|
+
};
|
|
1083
1102
|
});
|
|
1084
1103
|
};
|
|
1085
1104
|
return {
|
|
1086
1105
|
updateStarredFilters(filterKey) {
|
|
1087
1106
|
setFilterBarConfig(prevState => {
|
|
1088
1107
|
if (prevState.starredFilterKeys.includes(filterKey)) {
|
|
1089
|
-
return
|
|
1108
|
+
return {
|
|
1109
|
+
...prevState,
|
|
1110
|
+
starredFilterKeys: prevState.starredFilterKeys.filter(obj => obj !== filterKey),
|
|
1111
|
+
};
|
|
1090
1112
|
}
|
|
1091
1113
|
else {
|
|
1092
|
-
return
|
|
1114
|
+
return {
|
|
1115
|
+
...prevState,
|
|
1116
|
+
starredFilterKeys: [
|
|
1093
1117
|
...prevState.starredFilterKeys,
|
|
1094
1118
|
filterKey,
|
|
1095
|
-
]
|
|
1119
|
+
],
|
|
1120
|
+
};
|
|
1096
1121
|
}
|
|
1097
1122
|
});
|
|
1098
1123
|
resetIndividualFilterToInitialState(filterKey);
|
|
@@ -1101,22 +1126,46 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1101
1126
|
setFilterBarConfig(prevState => {
|
|
1102
1127
|
const filterValue = prevState.values[key];
|
|
1103
1128
|
if (filterValue === null || filterValue === void 0 ? void 0 : filterValue.includes(value)) {
|
|
1104
|
-
return
|
|
1129
|
+
return {
|
|
1130
|
+
...prevState,
|
|
1131
|
+
values: {
|
|
1132
|
+
...prevState.values,
|
|
1133
|
+
[key]: filterValue.filter(obj => obj !== value),
|
|
1134
|
+
},
|
|
1135
|
+
};
|
|
1105
1136
|
}
|
|
1106
1137
|
else {
|
|
1107
|
-
return
|
|
1138
|
+
return {
|
|
1139
|
+
...prevState,
|
|
1140
|
+
values: {
|
|
1141
|
+
...prevState.values,
|
|
1142
|
+
[key]: filterValue ? [...filterValue, value] : [value],
|
|
1143
|
+
},
|
|
1144
|
+
};
|
|
1108
1145
|
}
|
|
1109
1146
|
});
|
|
1110
1147
|
},
|
|
1111
1148
|
setStringValue(key, value) {
|
|
1112
1149
|
setFilterBarConfig(prevState => {
|
|
1113
|
-
return
|
|
1150
|
+
return {
|
|
1151
|
+
...prevState,
|
|
1152
|
+
values: {
|
|
1153
|
+
...prevState.values,
|
|
1154
|
+
[key]: value,
|
|
1155
|
+
},
|
|
1156
|
+
};
|
|
1114
1157
|
});
|
|
1115
1158
|
},
|
|
1116
1159
|
// Setting independent values(string[])
|
|
1117
1160
|
setArrayValue(key, value) {
|
|
1118
1161
|
setFilterBarConfig(prevState => {
|
|
1119
|
-
return
|
|
1162
|
+
return {
|
|
1163
|
+
...prevState,
|
|
1164
|
+
values: {
|
|
1165
|
+
...prevState.values,
|
|
1166
|
+
[key]: value,
|
|
1167
|
+
},
|
|
1168
|
+
};
|
|
1120
1169
|
});
|
|
1121
1170
|
},
|
|
1122
1171
|
//For bounding box
|
|
@@ -1128,7 +1177,13 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1128
1177
|
nw: { latitude: boundingBox.nw.latitude, longitude: boundingBox.nw.longitude },
|
|
1129
1178
|
se: { latitude: boundingBox.se.latitude, longitude: boundingBox.se.longitude },
|
|
1130
1179
|
};
|
|
1131
|
-
return
|
|
1180
|
+
return {
|
|
1181
|
+
...prevState,
|
|
1182
|
+
values: {
|
|
1183
|
+
...prevState.values,
|
|
1184
|
+
BoundingBox: { ...cleanedBoundingBox, zoom: (_a = boundingBox.zoom) !== null && _a !== void 0 ? _a : 0 },
|
|
1185
|
+
},
|
|
1186
|
+
};
|
|
1132
1187
|
});
|
|
1133
1188
|
},
|
|
1134
1189
|
setMinMaxValue(key, minMax) {
|
|
@@ -1138,7 +1193,13 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1138
1193
|
min: minMax.min,
|
|
1139
1194
|
max: minMax.max,
|
|
1140
1195
|
};
|
|
1141
|
-
return
|
|
1196
|
+
return {
|
|
1197
|
+
...prevState,
|
|
1198
|
+
values: {
|
|
1199
|
+
...prevState.values,
|
|
1200
|
+
[key]: cleanedMinMax,
|
|
1201
|
+
},
|
|
1202
|
+
};
|
|
1142
1203
|
});
|
|
1143
1204
|
},
|
|
1144
1205
|
setBooleanValue(key, booleanValue) {
|
|
@@ -1151,7 +1212,13 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1151
1212
|
const cleanedBooleanValue = {
|
|
1152
1213
|
booleanValue: booleanValue.booleanValue,
|
|
1153
1214
|
};
|
|
1154
|
-
return
|
|
1215
|
+
return {
|
|
1216
|
+
...prevState,
|
|
1217
|
+
values: {
|
|
1218
|
+
...prevState.values,
|
|
1219
|
+
[key]: cleanedBooleanValue,
|
|
1220
|
+
},
|
|
1221
|
+
};
|
|
1155
1222
|
});
|
|
1156
1223
|
},
|
|
1157
1224
|
setNumberValue(key, numberValue) {
|
|
@@ -1164,7 +1231,13 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1164
1231
|
const cleanedNumberValue = {
|
|
1165
1232
|
numberValue: numberValue.numberValue,
|
|
1166
1233
|
};
|
|
1167
|
-
return
|
|
1234
|
+
return {
|
|
1235
|
+
...prevState,
|
|
1236
|
+
values: {
|
|
1237
|
+
...prevState.values,
|
|
1238
|
+
[key]: cleanedNumberValue,
|
|
1239
|
+
},
|
|
1240
|
+
};
|
|
1168
1241
|
});
|
|
1169
1242
|
},
|
|
1170
1243
|
setDateRange(key, dateRange) {
|
|
@@ -1174,12 +1247,24 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1174
1247
|
from: dateRange.from,
|
|
1175
1248
|
to: dateRange.to,
|
|
1176
1249
|
};
|
|
1177
|
-
return
|
|
1250
|
+
return {
|
|
1251
|
+
...prevState,
|
|
1252
|
+
values: {
|
|
1253
|
+
...prevState.values,
|
|
1254
|
+
[key]: cleanedDateRange,
|
|
1255
|
+
},
|
|
1256
|
+
};
|
|
1178
1257
|
});
|
|
1179
1258
|
},
|
|
1180
1259
|
setArrayObjectValue(key, filterValue) {
|
|
1181
1260
|
setFilterBarConfig(prevState => {
|
|
1182
|
-
return
|
|
1261
|
+
return {
|
|
1262
|
+
...prevState,
|
|
1263
|
+
values: {
|
|
1264
|
+
...prevState.values,
|
|
1265
|
+
[key]: filterValue,
|
|
1266
|
+
},
|
|
1267
|
+
};
|
|
1183
1268
|
});
|
|
1184
1269
|
},
|
|
1185
1270
|
//Setting multiple value name objects
|
|
@@ -1193,13 +1278,22 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1193
1278
|
else {
|
|
1194
1279
|
array = [...array, filterValue];
|
|
1195
1280
|
}
|
|
1196
|
-
return
|
|
1281
|
+
return {
|
|
1282
|
+
...prevState,
|
|
1283
|
+
values: {
|
|
1284
|
+
...prevState.values,
|
|
1285
|
+
[key]: array,
|
|
1286
|
+
},
|
|
1287
|
+
};
|
|
1197
1288
|
});
|
|
1198
1289
|
},
|
|
1199
1290
|
// Reset filters to initial state
|
|
1200
1291
|
resetFiltersToInitialState() {
|
|
1201
1292
|
setFilterBarConfig(prevState => {
|
|
1202
|
-
return
|
|
1293
|
+
return {
|
|
1294
|
+
...prevState,
|
|
1295
|
+
values: createInitialState(name, objectValues(filterBarDefinition), initialState || {}, setValue).values,
|
|
1296
|
+
};
|
|
1203
1297
|
});
|
|
1204
1298
|
},
|
|
1205
1299
|
resetIndividualFilterToInitialState,
|
|
@@ -1207,7 +1301,7 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
|
|
|
1207
1301
|
}, [filterBarDefinition, initialState, name, setValue]);
|
|
1208
1302
|
return useMemo(() => {
|
|
1209
1303
|
return {
|
|
1210
|
-
filterBarConfig:
|
|
1304
|
+
filterBarConfig: { ...filterBarConfig, ...filterMapActions, ...filterMapGetter },
|
|
1211
1305
|
filterBarDefinition,
|
|
1212
1306
|
};
|
|
1213
1307
|
}, [filterBarConfig, filterMapActions, filterMapGetter, filterBarDefinition]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/filters-filter-bar",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.407",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"@trackunit/shared-utils": "*",
|
|
12
12
|
"@trackunit/react-components": "*",
|
|
13
13
|
"@trackunit/react-filter-components": "*",
|
|
14
|
-
"react": "
|
|
14
|
+
"react": "18.3.1",
|
|
15
15
|
"@trackunit/react-form-components": "*",
|
|
16
16
|
"dequal": "^2.0.3",
|
|
17
17
|
"lodash": "4.17.21",
|
|
@@ -23,5 +23,6 @@
|
|
|
23
23
|
"@trackunit/react-date-and-time-components": "*"
|
|
24
24
|
},
|
|
25
25
|
"module": "./index.esm.js",
|
|
26
|
-
"main": "./index.cjs.js"
|
|
27
|
-
|
|
26
|
+
"main": "./index.cjs.js",
|
|
27
|
+
"types": "./index.esm.d.ts"
|
|
28
|
+
}
|
package/src/lib/FilterBar.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { FilterBarConfig, FilterBarDefinition, FilterMapActions, FilterMapGetter } from "./types/FilterTypes";
|
|
3
2
|
interface FilterBarProps<TFilterBarDefinition extends FilterBarDefinition> {
|
|
4
3
|
/**
|
|
@@ -27,5 +26,5 @@ interface FilterBarProps<TFilterBarDefinition extends FilterBarDefinition> {
|
|
|
27
26
|
/**
|
|
28
27
|
* The FilterBar component serves as a wrapper for managing filters.
|
|
29
28
|
*/
|
|
30
|
-
export declare const FilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ hiddenFilters, className, filterBarDefinition, filterBarConfig, disableCollapse, }: FilterBarProps<TFilterBarDefinition>) => JSX.Element;
|
|
29
|
+
export declare const FilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ hiddenFilters, className, filterBarDefinition, filterBarConfig, disableCollapse, }: FilterBarProps<TFilterBarDefinition>) => import("react/jsx-runtime").JSX.Element;
|
|
31
30
|
export {};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { ValueName } from "../types/FilterTypes";
|
|
3
2
|
import { DefaultFilterProps } from "./DefaultFilterTypes";
|
|
4
3
|
type FilterDefinitionValue = string[] | ValueName[];
|
|
@@ -7,5 +6,5 @@ type FilterDefinitionValue = string[] | ValueName[];
|
|
|
7
6
|
*
|
|
8
7
|
* @param {DefaultFilterProps<string[]>} props - The properties required for the `DefaultCheckboxFilter` component.
|
|
9
8
|
*/
|
|
10
|
-
export declare const DefaultCheckboxFilter: <T extends FilterDefinitionValue>({ filterDefinition, filterBarActions, options, loading, setValue, filterName, customSearch, showRequestMoreUseSearch, showUndefinedOptionWithCountAtBottom, showTooltip, }: DefaultFilterProps<T>) => JSX.Element;
|
|
9
|
+
export declare const DefaultCheckboxFilter: <T extends FilterDefinitionValue>({ filterDefinition, filterBarActions, options, loading, setValue, filterName, customSearch, showRequestMoreUseSearch, showUndefinedOptionWithCountAtBottom, showTooltip, }: DefaultFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
11
10
|
export {};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { ShowQuickOption } from "@trackunit/react-date-and-time-components";
|
|
3
2
|
import { DateRangeValue } from "../types/FilterTypes";
|
|
4
3
|
import { DefaultFilterProps } from "./DefaultFilterTypes";
|
|
@@ -14,5 +13,5 @@ interface DefaultDateRangeFilterProps extends DefaultFilterProps<DateRangeValue>
|
|
|
14
13
|
*
|
|
15
14
|
* @param {DefaultFilterProps<DateRangeValue>} props - The properties required for the `DefaultDateRangeFilter` component.
|
|
16
15
|
*/
|
|
17
|
-
export declare const DefaultDateRangeFilter: ({ filterDefinition, filterName, value, setValue, showQuickOptions, }: DefaultDateRangeFilterProps) => JSX.Element;
|
|
16
|
+
export declare const DefaultDateRangeFilter: ({ filterDefinition, filterName, value, setValue, showQuickOptions, }: DefaultDateRangeFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
17
|
export {};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
interface Props<T> {
|
|
3
2
|
results: T[] | undefined | null;
|
|
4
3
|
loading?: boolean;
|
|
@@ -11,5 +10,5 @@ interface Props<T> {
|
|
|
11
10
|
* shows no results if length or array is 0
|
|
12
11
|
* otherwise it calls children as a render prop
|
|
13
12
|
*/
|
|
14
|
-
export declare const FilterResults: <T extends
|
|
13
|
+
export declare const FilterResults: <T extends object | string>({ results, ignoreUndefined, loading, children }: Props<T>) => import("react/jsx-runtime").JSX.Element | null;
|
|
15
14
|
export {};
|
|
@@ -30,7 +30,7 @@ type InitialTypes = {
|
|
|
30
30
|
* @param {FilterTypes} type - The filter type for which to retrieve the initial value.
|
|
31
31
|
* @returns {string[] | ValueName[] | null | { min: undefined, max: undefined } | { from: undefined, to: undefined }} - The initial value corresponding to the given filter type.
|
|
32
32
|
*/
|
|
33
|
-
export declare const getInitialValueFromType: <InitialType extends InitialTypes>(type: InitialType[
|
|
33
|
+
export declare const getInitialValueFromType: <InitialType extends InitialTypes>(type: InitialType["Arg"]) => InitialType["Init"];
|
|
34
34
|
/**
|
|
35
35
|
* Creates an initial state object for a filter bar configuration based on the provided parameters.
|
|
36
36
|
*
|
package/src/translation.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { NamespaceTransProps, TransForLibs, TranslationResource } from "@trackunit/i18n-library-translation";
|
|
3
2
|
import defaultTranslations from "./locales/en/translation.json";
|
|
4
3
|
/** A type for all available translation keys in this library */
|
|
@@ -27,7 +26,7 @@ export type TranslationFunction = TransForLibs<TranslationKeys>;
|
|
|
27
26
|
/**
|
|
28
27
|
* Trans for this specific library.
|
|
29
28
|
*/
|
|
30
|
-
export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => JSX.Element;
|
|
29
|
+
export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => import("react/jsx-runtime").JSX.Element;
|
|
31
30
|
/**
|
|
32
31
|
* Registers the translations for this library
|
|
33
32
|
*/
|
package/translation.cjs.js
CHANGED
package/translation.cjs10.js
CHANGED
package/translation.cjs11.js
CHANGED
package/translation.cjs12.js
CHANGED
package/translation.cjs13.js
CHANGED
package/translation.cjs14.js
CHANGED
package/translation.cjs15.js
CHANGED
package/translation.cjs16.js
CHANGED
package/translation.cjs17.js
CHANGED
package/translation.cjs2.js
CHANGED
package/translation.cjs3.js
CHANGED
package/translation.cjs4.js
CHANGED
package/translation.cjs5.js
CHANGED
package/translation.cjs6.js
CHANGED
package/translation.cjs7.js
CHANGED
package/translation.cjs8.js
CHANGED
package/translation.cjs9.js
CHANGED