@jobber/components 4.36.0 → 4.37.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.
- package/dist/DataList/DataList.d.ts +1 -1
- package/dist/DataList/DataList.types.d.ts +14 -0
- package/dist/DataList/components/DataListHeaderTile/DataListHeaderTile.d.ts +8 -0
- package/dist/DataList/components/DataListHeaderTile/SortingArrows.d.ts +4 -0
- package/dist/DataList/components/DataListHeaderTile/index.d.ts +1 -0
- package/dist/DataList/index.d.ts +1 -1
- package/dist/DataList/index.js +93 -46
- package/package.json +3 -3
|
@@ -6,7 +6,7 @@ import { DataListEmptyState } from "./components/DataListEmptyState";
|
|
|
6
6
|
import { DataListObject, DataListProps } from "./DataList.types";
|
|
7
7
|
import { DataListItemActions } from "./components/DataListItemActions";
|
|
8
8
|
import { DataListAction } from "./components/DataListAction";
|
|
9
|
-
export declare function DataList<T extends DataListObject>(props: DataListProps<T>): JSX.Element;
|
|
9
|
+
export declare function DataList<T extends DataListObject>({ sorting, ...props }: DataListProps<T>): JSX.Element;
|
|
10
10
|
export declare namespace DataList {
|
|
11
11
|
var Layout: typeof DataListLayout;
|
|
12
12
|
var EmptyState: typeof DataListEmptyState;
|
|
@@ -30,6 +30,10 @@ export interface DataListObject {
|
|
|
30
30
|
export type DataListHeader<T extends DataListObject> = {
|
|
31
31
|
readonly [K in keyof T]?: string;
|
|
32
32
|
};
|
|
33
|
+
export interface DataListSorting {
|
|
34
|
+
readonly key: string;
|
|
35
|
+
readonly direction: "asc" | "desc";
|
|
36
|
+
}
|
|
33
37
|
export interface DataListProps<T extends DataListObject> {
|
|
34
38
|
/**
|
|
35
39
|
* The data to render in the DataList.
|
|
@@ -77,6 +81,16 @@ export interface DataListProps<T extends DataListObject> {
|
|
|
77
81
|
* The callback function when the user scrolls to the bottom of the list.
|
|
78
82
|
*/
|
|
79
83
|
readonly onLoadMore?: () => void;
|
|
84
|
+
/**
|
|
85
|
+
* `sortable`: List of keys that are sortable.
|
|
86
|
+
* `state`: The state of the sorting.
|
|
87
|
+
* `onSort`: The callback function when the user sorting a column.
|
|
88
|
+
*/
|
|
89
|
+
readonly sorting?: {
|
|
90
|
+
readonly sortable: (keyof DataListHeader<T>)[];
|
|
91
|
+
readonly state: DataListSorting | undefined;
|
|
92
|
+
readonly onSort: (sorting?: DataListSorting) => void;
|
|
93
|
+
};
|
|
80
94
|
/**
|
|
81
95
|
* Callback when an item checkbox is clicked.
|
|
82
96
|
*/
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { DataListHeader, DataListObject } from "../../DataList.types";
|
|
3
|
+
interface DataListHeaderTileProps<T extends DataListObject> {
|
|
4
|
+
readonly headers: DataListHeader<T>;
|
|
5
|
+
readonly headerKey: string;
|
|
6
|
+
}
|
|
7
|
+
export declare function DataListHeaderTile<T extends DataListObject>({ headers, headerKey, }: DataListHeaderTileProps<T>): JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./DataListHeaderTile";
|
package/dist/DataList/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from "./DataList";
|
|
2
|
-
export { DataListItemType } from "./DataList.types";
|
|
2
|
+
export { DataListItemType, DataListSorting } from "./DataList.types";
|
package/dist/DataList/index.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var tslib_es6 = require('../tslib.es6-5b8768b7.js');
|
|
5
6
|
var React = require('react');
|
|
6
7
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
7
8
|
var Text = require('../Text-e7ed0974.js');
|
|
@@ -10,9 +11,10 @@ var framerMotion = require('framer-motion');
|
|
|
10
11
|
var design = require('@jobber/design');
|
|
11
12
|
var isEmpty = require('lodash/isEmpty');
|
|
12
13
|
var InlineLabel = require('../InlineLabel-afd5fc6f.js');
|
|
14
|
+
var classnames = require('classnames');
|
|
15
|
+
var Icon = require('../Icon-405a216c.js');
|
|
13
16
|
var FormatDate = require('../FormatDate-70ea5b43.js');
|
|
14
17
|
var Heading = require('../Heading-a1191b15.js');
|
|
15
|
-
var classnames = require('classnames');
|
|
16
18
|
require('uuid');
|
|
17
19
|
require('react-hook-form');
|
|
18
20
|
var Checkbox = require('../Checkbox-3bccf65c.js');
|
|
@@ -25,13 +27,11 @@ require('react-popper');
|
|
|
25
27
|
var useFocusTrap = require('@jobber/hooks/useFocusTrap');
|
|
26
28
|
var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
|
|
27
29
|
var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
|
|
28
|
-
var Icon = require('../Icon-405a216c.js');
|
|
29
30
|
var useInView = require('@jobber/hooks/useInView');
|
|
30
31
|
var debounce = require('lodash/debounce');
|
|
31
32
|
var InputText = require('../InputText-bb03f6d1.js');
|
|
32
33
|
var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
|
|
33
34
|
var Spinner = require('../Spinner-9d8fc7ff.js');
|
|
34
|
-
require('../tslib.es6-5b8768b7.js');
|
|
35
35
|
require('../Content-2ca1ffe1.js');
|
|
36
36
|
require('../FormField-0f880b07.js');
|
|
37
37
|
require('../InputValidation-b5a3d92c.js');
|
|
@@ -43,13 +43,13 @@ var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
|
|
|
43
43
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
44
44
|
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
|
|
45
45
|
|
|
46
|
-
var css_248z$
|
|
47
|
-
var styles$
|
|
48
|
-
styleInject_es.styleInject(css_248z$
|
|
46
|
+
var css_248z$d = ".TkdrExYnvcY- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n z-index: 0;\n z-index: var(--elevation-default);\n -ms-flex: 1;\n flex: 1;\n}\n\n.IcAlZHoB4LI- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n z-index: 1;\n z-index: var(--elevation-base);\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.TFO76ysivmg- {\n display: grid;\n padding: calc(16px / 2) 0;\n padding: var(--space-small) 0;\n gap: calc(16px / 2);\n grid-gap: calc(16px / 2);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n grid-template-columns: auto -webkit-max-content;\n grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n padding: calc(16px / 2);\n padding: var(--space-small);\n border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.ise8kHCfhCY- {\n position: relative;\n padding: calc(16px / 2);\n padding: var(--space-small);\n border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.d-79rkMqufg- {\n display: grid;\n -webkit-column-gap: calc(16px / 2);\n -webkit-column-gap: var(--space-small);\n -moz-column-gap: calc(16px / 2);\n -moz-column-gap: var(--space-small);\n column-gap: calc(16px / 2);\n grid-column-gap: calc(16px / 2);\n grid-column-gap: var(--space-small);\n column-gap: var(--space-small);\n -ms-flex-align: start;\n align-items: flex-start;\n grid-template-columns: -webkit-max-content minmax(0px, auto);\n grid-template-columns: max-content minmax(0px, auto);\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n -ms-flex-align: center;\n align-items: center;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n -ms-flex-align: center;\n align-items: center;\n}\n }\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n padding-top: calc(16px / 4);\n padding-top: var(--space-smaller);\n opacity: 1;\n transition: opacity 100ms ease-in-out;\n transition: opacity var(--transition-properties);\n --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n padding-top: 0;\n opacity: 0;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n padding-top: 0;\n opacity: 0;\n}\n }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :first-child {\n opacity: 1;\n}\n\n.Kkp-IYmwq-s- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(255, 255, 255, 0.6);\n background-color: var(--color-overlay--dimmed);\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.m-eCShL7TU4- {\n position: sticky;\n top: 50vh;\n}\n";
|
|
47
|
+
var styles$d = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","listItem":"ise8kHCfhCY-","selectable":"d-79rkMqufg-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
|
|
48
|
+
styleInject_es.styleInject(css_248z$d);
|
|
49
49
|
|
|
50
|
-
var css_248z$
|
|
51
|
-
var styles$
|
|
52
|
-
styleInject_es.styleInject(css_248z$
|
|
50
|
+
var css_248z$c = ".F56prQsXm3A- {\n min-width: 80px;\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n";
|
|
51
|
+
var styles$c = {"results":"F56prQsXm3A-"};
|
|
52
|
+
styleInject_es.styleInject(css_248z$c);
|
|
53
53
|
|
|
54
54
|
const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
|
|
55
55
|
function DataListTotalCount({ totalCount, loading, }) {
|
|
@@ -65,12 +65,12 @@ function DataListTotalCount({ totalCount, loading, }) {
|
|
|
65
65
|
totalCount.toLocaleString(),
|
|
66
66
|
" results)"));
|
|
67
67
|
}
|
|
68
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
68
|
+
return (React__default["default"].createElement("div", { className: styles$c.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
var css_248z$
|
|
72
|
-
var styles$
|
|
73
|
-
styleInject_es.styleInject(css_248z$
|
|
71
|
+
var css_248z$b = ".Rh--6fVpkm4- {\n padding: calc(16px / 2);\n padding: var(--space-small);\n}\n\n.zbS7UvpVoWI- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n -ms-flex-pack: justify;\n justify-content: space-between;\n height: calc(16px * 3);\n height: var(--space-largest);\n padding: calc(16px * 1) 0;\n padding: var(--space-base) 0;\n}\n";
|
|
72
|
+
var styles$b = {"loadingItem":"Rh--6fVpkm4-","mobileLoadingState":"zbS7UvpVoWI-"};
|
|
73
|
+
styleInject_es.styleInject(css_248z$b);
|
|
74
74
|
|
|
75
75
|
const EMPTY_RESULTS_MESSAGE = "List is looking empty";
|
|
76
76
|
const EMPTY_FILTER_RESULTS_MESSAGE = "No results for selected filters";
|
|
@@ -93,9 +93,9 @@ const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
|
|
|
93
93
|
const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
|
|
94
94
|
const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
|
|
95
95
|
|
|
96
|
-
var css_248z$
|
|
97
|
-
var styles$
|
|
98
|
-
styleInject_es.styleInject(css_248z$
|
|
96
|
+
var css_248z$a = ".WRV-UmQmPzo- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n z-index: 0;\n z-index: var(--elevation-default);\n overflow: hidden;\n gap: calc(16px / 2);\n gap: var(--space-small);\n}\n\n.liQeWCMenD0- {\n --overflow-bg: var(--color-white);\n\n display: -ms-flexbox;\n\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n padding-left: calc(16px * 1);\n padding-left: var(--space-base);\n background-image: linear-gradient(\n 90deg,\n transparent 0,\n rgba(255, 255, 255, 1) calc(16px * 1),\n rgba(255, 255, 255, 1) 100%\n );\n background-image: linear-gradient(\n 90deg,\n transparent 0,\n var(--overflow-bg) var(--space-base),\n var(--overflow-bg) 100%\n );\n -ms-flex-align: center;\n align-items: center;\n}\n";
|
|
97
|
+
var styles$a = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
|
|
98
|
+
styleInject_es.styleInject(css_248z$a);
|
|
99
99
|
|
|
100
100
|
function DataListTags({ items }) {
|
|
101
101
|
const ref = React.useRef(null);
|
|
@@ -115,10 +115,10 @@ function DataListTags({ items }) {
|
|
|
115
115
|
elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
|
|
116
116
|
};
|
|
117
117
|
}, [items]);
|
|
118
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
118
|
+
return (React__default["default"].createElement("div", { className: styles$a.tags, ref: ref },
|
|
119
119
|
items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
|
|
120
120
|
React__default["default"].createElement(InlineLabel.InlineLabel, null, tag)))),
|
|
121
|
-
Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$
|
|
121
|
+
Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$a.tagCount },
|
|
122
122
|
React__default["default"].createElement(Text.Text, null,
|
|
123
123
|
"+",
|
|
124
124
|
visibleItems)))));
|
|
@@ -147,6 +147,63 @@ function buildIntersectionThreshold(items) {
|
|
|
147
147
|
return thresholds;
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
+
var css_248z$9 = ".fLmJZJJqMcE- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\n}\n\n.UG8cHUT3Hds- {\n cursor: pointer;\n}\n\n.fLmJZJJqMcE- > * {\n font-weight: 500;\n}\n";
|
|
151
|
+
var styles$9 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
|
|
152
|
+
styleInject_es.styleInject(css_248z$9);
|
|
153
|
+
|
|
154
|
+
var css_248z$8 = ".XWu7WFLqpYw- {\n position: absolute;\n bottom: calc((16px * 1) - (16px / 8));\n bottom: calc(calc(16px * 1) - calc(16px / 8));\n bottom: calc(var(--space-base) - var(--space-smallest));\n}\n\n.bZLExYQzHAk- {\n position: absolute;\n bottom: calc(16px / 2);\n bottom: var(--space-small);\n}\n";
|
|
155
|
+
var styles$8 = {"arrowUp":"XWu7WFLqpYw-","arrowDown":"bZLExYQzHAk-"};
|
|
156
|
+
styleInject_es.styleInject(css_248z$8);
|
|
157
|
+
|
|
158
|
+
function SortingArrows({ order }) {
|
|
159
|
+
const activeColor = "blue";
|
|
160
|
+
const inactiveColor = "greyBlueLighter";
|
|
161
|
+
return (React__default["default"].createElement("div", null,
|
|
162
|
+
React__default["default"].createElement("span", { className: styles$8.arrowUp },
|
|
163
|
+
React__default["default"].createElement(Icon.Icon, { name: "arrowUp", color: order === "asc" ? activeColor : inactiveColor, size: "small" })),
|
|
164
|
+
React__default["default"].createElement("span", { className: styles$8.arrowDown },
|
|
165
|
+
React__default["default"].createElement(Icon.Icon, { name: "arrowDown", color: order === "desc" ? activeColor : inactiveColor, size: "small" }))));
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
const defaultValues = {
|
|
169
|
+
title: "",
|
|
170
|
+
data: [],
|
|
171
|
+
headers: {},
|
|
172
|
+
children: [],
|
|
173
|
+
selected: [],
|
|
174
|
+
};
|
|
175
|
+
const DataListContext = React.createContext(defaultValues);
|
|
176
|
+
function useDataListContext() {
|
|
177
|
+
return React.useContext(DataListContext);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
function DataListHeaderTile({ headers, headerKey, }) {
|
|
181
|
+
const { sorting } = useDataListContext();
|
|
182
|
+
const isSortable = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.includes(headerKey);
|
|
183
|
+
const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
|
|
184
|
+
const Tag = isSortable ? "button" : "div";
|
|
185
|
+
return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$9.headerLabel, {
|
|
186
|
+
[styles$9.sortable]: isSortable,
|
|
187
|
+
}), onClick: handleOnClick },
|
|
188
|
+
React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
|
|
189
|
+
(sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey && (React__default["default"].createElement(SortingArrows, { order: sortingState.direction }))));
|
|
190
|
+
function toggleSorting(sortingKey) {
|
|
191
|
+
if ((sortingState === null || sortingState === void 0 ? void 0 : sortingState.direction) === "desc") {
|
|
192
|
+
sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
|
|
193
|
+
return;
|
|
194
|
+
}
|
|
195
|
+
sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
|
|
196
|
+
direction: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.direction) === "asc" ? "desc" : "asc",
|
|
197
|
+
key: sortingKey,
|
|
198
|
+
});
|
|
199
|
+
}
|
|
200
|
+
function handleOnClick() {
|
|
201
|
+
if (!isSortable)
|
|
202
|
+
return;
|
|
203
|
+
toggleSorting(headerKey);
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
150
207
|
/**
|
|
151
208
|
* Return the child component that matches the `type` provided
|
|
152
209
|
*/
|
|
@@ -196,8 +253,7 @@ function generateListItemElements(data) {
|
|
|
196
253
|
* Generate the header elements with the default styling
|
|
197
254
|
*/
|
|
198
255
|
function generateHeaderElements(headers) {
|
|
199
|
-
const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]:
|
|
200
|
-
React__default["default"].createElement(Text.Text, { variation: "subdued", maxLines: "single", size: "small" }, headers[key]))) })), {});
|
|
256
|
+
const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: React__default["default"].createElement(DataListHeaderTile, { headers: headers, headerKey: key }) })), {});
|
|
201
257
|
return isEmpty__default["default"](headerElements) ? undefined : headerElements;
|
|
202
258
|
}
|
|
203
259
|
function sortSizeProp(sizeProp) {
|
|
@@ -236,23 +292,11 @@ function isLayoutVisible({ layoutSize, mediaMatches, sizePropsOfLayouts, }) {
|
|
|
236
292
|
return isVisibleBreakpoint && largerLayoutIsNotVisible;
|
|
237
293
|
}
|
|
238
294
|
|
|
239
|
-
const defaultValues = {
|
|
240
|
-
title: "",
|
|
241
|
-
data: [],
|
|
242
|
-
headers: {},
|
|
243
|
-
children: [],
|
|
244
|
-
selected: [],
|
|
245
|
-
};
|
|
246
|
-
const DataListContext = React.createContext(defaultValues);
|
|
247
|
-
function useDataListContext() {
|
|
248
|
-
return React.useContext(DataListContext);
|
|
249
|
-
}
|
|
250
|
-
|
|
251
295
|
function DataListItemInternal({ children, item, }) {
|
|
252
296
|
const { selected, onSelect } = useDataListContext();
|
|
253
297
|
if (selected !== undefined && onSelect) {
|
|
254
|
-
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$
|
|
255
|
-
[styles$
|
|
298
|
+
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$d.selectable, {
|
|
299
|
+
[styles$d.selected]: selected === null || selected === void 0 ? void 0 : selected.length,
|
|
256
300
|
}) },
|
|
257
301
|
React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange }),
|
|
258
302
|
children));
|
|
@@ -398,7 +442,7 @@ function DataListItems({ layouts, mediaMatches, data, }) {
|
|
|
398
442
|
return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => {
|
|
399
443
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, elementData.map((child, i) => {
|
|
400
444
|
const item = data[i];
|
|
401
|
-
return (React__default["default"].createElement("div", { onMouseEnter: () => setHover(item.id), onMouseLeave: () => setHover(undefined), className: styles$
|
|
445
|
+
return (React__default["default"].createElement("div", { onMouseEnter: () => setHover(item.id), onMouseLeave: () => setHover(undefined), className: styles$d.listItem, key: item.id },
|
|
402
446
|
React__default["default"].createElement(DataListItemInternal, { item: data[i] }, layout.props.children(child)),
|
|
403
447
|
React__default["default"].createElement(framerMotion.AnimatePresence, null, hover === item.id && (React__default["default"].createElement(InternalDataListItemActions, { item: item })))));
|
|
404
448
|
})));
|
|
@@ -416,7 +460,7 @@ function DataListHeader({ layouts, mediaMatches, headerData, headerVisibility, }
|
|
|
416
460
|
if (!showHeader || !headerData)
|
|
417
461
|
return React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
418
462
|
return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, renderLayout: layout => {
|
|
419
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
463
|
+
return (React__default["default"].createElement("div", { className: styles$d.headerTitles }, layout.props.children(headerData)));
|
|
420
464
|
}, mediaMatches: mediaMatches }));
|
|
421
465
|
}
|
|
422
466
|
|
|
@@ -432,13 +476,13 @@ function DataListLoadingState({ headers, layouts, mediaMatches, }) {
|
|
|
432
476
|
if (layout.props.size === "xs") {
|
|
433
477
|
return React__default["default"].createElement(LoadingStateXSBreakpoint, null);
|
|
434
478
|
}
|
|
435
|
-
return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingElements.map((child, i) => (React__default["default"].createElement("div", { className: styles$
|
|
479
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingElements.map((child, i) => (React__default["default"].createElement("div", { className: styles$b.loadingItem, key: i, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout.props.children(child))))));
|
|
436
480
|
} }));
|
|
437
481
|
}
|
|
438
482
|
function LoadingStateXSBreakpoint() {
|
|
439
483
|
const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(0);
|
|
440
484
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingData.map((_, i) => {
|
|
441
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
485
|
+
return (React__default["default"].createElement("div", { className: styles$b.mobileLoadingState, key: i },
|
|
442
486
|
React__default["default"].createElement(Glimmer.Glimmer.Text, null)));
|
|
443
487
|
})));
|
|
444
488
|
}
|
|
@@ -640,8 +684,9 @@ function breakpointToMediaQuery(breakpoint) {
|
|
|
640
684
|
return `(min-width: ${BREAKPOINT_SIZES[breakpoint]}px)`;
|
|
641
685
|
}
|
|
642
686
|
|
|
643
|
-
function DataList(
|
|
644
|
-
var
|
|
687
|
+
function DataList(_a) {
|
|
688
|
+
var _b;
|
|
689
|
+
var { sorting } = _a, props = tslib_es6.__rest(_a, ["sorting"]);
|
|
645
690
|
const searchComponent = getCompoundComponent(props.children, DataListSearch);
|
|
646
691
|
const filterComponent = getCompoundComponent(props.children, DataListFilters);
|
|
647
692
|
const layoutComponents = getCompoundComponents(props.children, DataListLayout);
|
|
@@ -651,7 +696,9 @@ function DataList(props) {
|
|
|
651
696
|
filterComponent,
|
|
652
697
|
layoutComponents,
|
|
653
698
|
emptyStateComponents,
|
|
654
|
-
itemActionComponent }, props), { selected: (
|
|
699
|
+
itemActionComponent }, props), { selected: (_b = props.selected) !== null && _b !== void 0 ? _b : [],
|
|
700
|
+
// T !== DataListObject
|
|
701
|
+
sorting: sorting }) },
|
|
655
702
|
React__default["default"].createElement(InternalDataList, null)));
|
|
656
703
|
}
|
|
657
704
|
function InternalDataList() {
|
|
@@ -662,21 +709,21 @@ function InternalDataList() {
|
|
|
662
709
|
const initialLoading = loadingState === "initial";
|
|
663
710
|
const showEmptyState = !initialLoading && data.length === 0;
|
|
664
711
|
const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
|
|
665
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
666
|
-
React__default["default"].createElement("div", { className: styles$
|
|
712
|
+
return (React__default["default"].createElement("div", { className: styles$d.wrapper },
|
|
713
|
+
React__default["default"].createElement("div", { className: styles$d.titleContainer },
|
|
667
714
|
title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
|
|
668
715
|
React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
|
|
669
716
|
React__default["default"].createElement("div", { ref: backToTopRef }),
|
|
670
717
|
React__default["default"].createElement(DataListStickyHeader, null,
|
|
671
|
-
React__default["default"].createElement("div", { className: styles$
|
|
718
|
+
React__default["default"].createElement("div", { className: styles$d.headerFilters },
|
|
672
719
|
React__default["default"].createElement(InternalDataListFilters, null),
|
|
673
720
|
React__default["default"].createElement(InternalDataListSearch, null)),
|
|
674
721
|
headerData && (React__default["default"].createElement(DataListHeader, { layouts: layoutComponents, headerData: headerData, headerVisibility: headerVisibility, mediaMatches: mediaMatches }))),
|
|
675
722
|
initialLoading && (React__default["default"].createElement(DataListLoadingState, { headers: headers, layouts: layoutComponents, mediaMatches: mediaMatches })),
|
|
676
723
|
showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
|
|
677
724
|
!initialLoading && (React__default["default"].createElement(DataListItems, { data: data, layouts: layoutComponents, mediaMatches: mediaMatches })),
|
|
678
|
-
loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$
|
|
679
|
-
React__default["default"].createElement("div", { className: styles$
|
|
725
|
+
loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$d.filtering },
|
|
726
|
+
React__default["default"].createElement("div", { className: styles$d.filteringSpinner },
|
|
680
727
|
React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
|
|
681
728
|
shouldRenderLoadMoreTrigger && (React__default["default"].createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
|
|
682
729
|
function handleBackToTop() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.37.0",
|
|
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.45.0",
|
|
23
23
|
"@jobber/formatters": "*",
|
|
24
24
|
"@jobber/hooks": "^2.3.0",
|
|
25
25
|
"@popperjs/core": "^2.0.6",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"> 1%",
|
|
85
85
|
"IE 10"
|
|
86
86
|
],
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "dda25792fbf293e140e1e07367dccbbe0f2d022e"
|
|
88
88
|
}
|