@jobber/components 4.76.2 → 4.77.1
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/dist/DataList/index.js
CHANGED
|
@@ -310,7 +310,7 @@ function DataListSortingOptions({ options, selectedOption, onSelectChange, onClo
|
|
|
310
310
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
311
311
|
};
|
|
312
312
|
}, [optionsListRef, dataListHeaderTileRef, onClose]);
|
|
313
|
-
return (React__default["default"].createElement("ul", { className: styles$8.optionsList, ref: optionsListRef }, options.map((option, index) => (React__default["default"].createElement("li", { className: styles$8.option, key: index, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0 },
|
|
313
|
+
return (React__default["default"].createElement("ul", { className: styles$8.optionsList, ref: optionsListRef }, options.map((option, index) => (React__default["default"].createElement("li", { className: styles$8.option, key: index, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
|
|
314
314
|
option.label,
|
|
315
315
|
option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })))))));
|
|
316
316
|
function handleKeyDown(event, option) {
|
|
@@ -333,20 +333,20 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
|
|
|
333
333
|
useRefocusOnActivator.useRefocusOnActivator(visible);
|
|
334
334
|
const { sorting } = useDataListContext();
|
|
335
335
|
const [isDropDownOpen, setIsDropDownOpen] = React__default["default"].useState(false);
|
|
336
|
-
const [selectedSortOption, setSelectedSortOption] = React__default["default"].useState(null);
|
|
337
336
|
const optionsListRef = useFocusTrap.useFocusTrap(isDropDownOpen);
|
|
338
337
|
const dataListHeaderTileRef = React__default["default"].useRef(null);
|
|
339
338
|
const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
|
|
340
339
|
const isSortable = Boolean(sortableItem);
|
|
341
340
|
const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
|
|
342
341
|
const Tag = isSortable ? "button" : "div";
|
|
342
|
+
const selectedOption = (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null;
|
|
343
343
|
return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$a.headerLabel, {
|
|
344
344
|
[styles$a.sortable]: isSortable,
|
|
345
345
|
}), onClick: handleOnClick, ref: dataListHeaderTileRef },
|
|
346
346
|
React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
|
|
347
|
-
isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React__default["default"].createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption:
|
|
347
|
+
isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React__default["default"].createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: selectedOption, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
|
|
348
348
|
(sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? (React__default["default"].createElement(DataListSortingArrows, { order: sortingState.order })) : (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) !== headerKey && isSortable ? (React__default["default"].createElement(DataListSortingArrows, { order: "none" })) : null));
|
|
349
|
-
function toggleSorting(sortingKey, label, order) {
|
|
349
|
+
function toggleSorting(id, sortingKey, label, order) {
|
|
350
350
|
const isSameKey = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.label) === label && sortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
|
|
351
351
|
const isDescending = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc";
|
|
352
352
|
if (isSameKey && isDescending && order !== "asc") {
|
|
@@ -357,12 +357,14 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
|
|
|
357
357
|
}
|
|
358
358
|
const sortingOrder = order || (isSameKey && !isDescending ? "desc" : "asc");
|
|
359
359
|
sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
|
|
360
|
+
id,
|
|
360
361
|
key: sortingKey,
|
|
361
362
|
label,
|
|
362
363
|
order: sortingOrder,
|
|
363
364
|
});
|
|
364
365
|
}
|
|
365
366
|
function handleOnClick() {
|
|
367
|
+
var _a, _b;
|
|
366
368
|
if (!isSortable)
|
|
367
369
|
return;
|
|
368
370
|
if (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) {
|
|
@@ -370,16 +372,16 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
|
|
|
370
372
|
}
|
|
371
373
|
else {
|
|
372
374
|
const headerValue = headers[headerKey];
|
|
375
|
+
const id = ((_b = (_a = sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || headerKey;
|
|
373
376
|
if (headerValue !== undefined) {
|
|
374
|
-
toggleSorting(headerKey, headerValue);
|
|
377
|
+
toggleSorting(id, headerKey, headerValue);
|
|
375
378
|
}
|
|
376
379
|
}
|
|
377
380
|
}
|
|
378
|
-
function handleSelectChange(
|
|
381
|
+
function handleSelectChange(newSortOption) {
|
|
379
382
|
if (sortableItem) {
|
|
380
|
-
toggleSorting(sortableItem.key,
|
|
383
|
+
toggleSorting(newSortOption.id, sortableItem.key, newSortOption.label, newSortOption.order);
|
|
381
384
|
}
|
|
382
|
-
setSelectedSortOption(selectedOption);
|
|
383
385
|
setIsDropDownOpen(true);
|
|
384
386
|
}
|
|
385
387
|
}
|
|
@@ -890,7 +892,7 @@ function DataListSort() {
|
|
|
890
892
|
const sortByOptions = getSortByOptions();
|
|
891
893
|
return (React__default["default"].createElement(Combobox.Combobox, { onSelect: selection => handleKeyChange(selection[0].id.toString()), selected: [
|
|
892
894
|
{
|
|
893
|
-
id:
|
|
895
|
+
id: getSelectedSortID(),
|
|
894
896
|
label: (state === null || state === void 0 ? void 0 : state.order) || "",
|
|
895
897
|
},
|
|
896
898
|
] },
|
|
@@ -908,18 +910,33 @@ function DataListSort() {
|
|
|
908
910
|
customOptions.forEach(option => {
|
|
909
911
|
acc.push({
|
|
910
912
|
label: option.label || "",
|
|
911
|
-
value:
|
|
913
|
+
value: JSON.stringify({
|
|
914
|
+
key: sort.key,
|
|
915
|
+
order: option.order,
|
|
916
|
+
label: option.label,
|
|
917
|
+
id: option.id,
|
|
918
|
+
}),
|
|
912
919
|
});
|
|
913
920
|
});
|
|
914
921
|
return acc;
|
|
915
922
|
}
|
|
916
923
|
acc.push({
|
|
917
924
|
label: `${label} (A-Z)`,
|
|
918
|
-
value:
|
|
925
|
+
value: JSON.stringify({
|
|
926
|
+
key: sort.key,
|
|
927
|
+
order: "asc",
|
|
928
|
+
label: label,
|
|
929
|
+
id: sort.key,
|
|
930
|
+
}),
|
|
919
931
|
});
|
|
920
932
|
acc.push({
|
|
921
933
|
label: `${label} (Z-A)`,
|
|
922
|
-
value:
|
|
934
|
+
value: JSON.stringify({
|
|
935
|
+
key: sort.key,
|
|
936
|
+
order: "desc",
|
|
937
|
+
label: label,
|
|
938
|
+
id: sort.key,
|
|
939
|
+
}),
|
|
923
940
|
});
|
|
924
941
|
return acc;
|
|
925
942
|
}, []);
|
|
@@ -928,17 +945,26 @@ function DataListSort() {
|
|
|
928
945
|
return options;
|
|
929
946
|
}
|
|
930
947
|
function getButtonLabel() {
|
|
931
|
-
const selectedOption = sortByOptions.find(option => option.value ===
|
|
948
|
+
const selectedOption = sortByOptions.find(option => option.value === getSelectedSortID());
|
|
932
949
|
return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || "";
|
|
933
950
|
}
|
|
934
951
|
function handleKeyChange(value) {
|
|
935
952
|
if (value && value !== "none") {
|
|
936
|
-
const
|
|
937
|
-
onSort({ key, order: order, label });
|
|
953
|
+
const { key, order, label, id } = JSON.parse(value);
|
|
954
|
+
onSort({ key, order: order, label, id });
|
|
938
955
|
return;
|
|
939
956
|
}
|
|
940
957
|
onSort(undefined);
|
|
941
958
|
}
|
|
959
|
+
function getSelectedSortID() {
|
|
960
|
+
const selectedSortID = {
|
|
961
|
+
key: state === null || state === void 0 ? void 0 : state.key,
|
|
962
|
+
order: state === null || state === void 0 ? void 0 : state.order,
|
|
963
|
+
label: state === null || state === void 0 ? void 0 : state.label,
|
|
964
|
+
id: state === null || state === void 0 ? void 0 : state.id,
|
|
965
|
+
};
|
|
966
|
+
return JSON.stringify(selectedSortID);
|
|
967
|
+
}
|
|
942
968
|
}
|
|
943
969
|
|
|
944
970
|
function useShowHeader() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.77.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"dist/*"
|
|
20
20
|
],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@jobber/design": "^0.
|
|
22
|
+
"@jobber/design": "^0.53.0",
|
|
23
23
|
"@jobber/formatters": "*",
|
|
24
24
|
"@jobber/hooks": "^2.8.1",
|
|
25
25
|
"@popperjs/core": "^2.0.6",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"> 1%",
|
|
85
85
|
"IE 10"
|
|
86
86
|
],
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "fd6db5654246e3087409b5a5a9c4900235c9e9bd"
|
|
88
88
|
}
|