@stenajs-webui/grid 14.2.0 → 15.0.0-alpha.3
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/features/standard-table/components/TrWithHoverBackground.d.ts +1 -1
- package/dist/features/standard-table/context/StickyPropsPerColumnContext.d.ts +3 -2
- package/dist/features/standard-table/features/sticky-columns/StickyColumnGroupOffsetCalculator.d.ts +2 -2
- package/dist/features/standard-table/features/sticky-columns/StickyPropsPerColumnCalculator.d.ts +3 -3
- package/dist/features/standard-table/redux/StandardTableReducer.d.ts +1 -1
- package/dist/index.es.js +266 -260
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +283 -259
- package/dist/index.js.map +1 -1
- package/package.json +9 -10
package/dist/index.js
CHANGED
|
@@ -30,14 +30,33 @@ var styled = require('@emotion/styled');
|
|
|
30
30
|
|
|
31
31
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
32
32
|
|
|
33
|
+
function _interopNamespace(e) {
|
|
34
|
+
if (e && e.__esModule) return e;
|
|
35
|
+
var n = Object.create(null);
|
|
36
|
+
if (e) {
|
|
37
|
+
Object.keys(e).forEach(function (k) {
|
|
38
|
+
if (k !== 'default') {
|
|
39
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
40
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
41
|
+
enumerable: true,
|
|
42
|
+
get: function () { return e[k]; }
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
n["default"] = e;
|
|
48
|
+
return Object.freeze(n);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
33
52
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
34
53
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
35
54
|
|
|
36
|
-
var GridHooksContext =
|
|
55
|
+
var GridHooksContext = React__namespace.createContext({});
|
|
37
56
|
var GridHooksTable = function (_a) {
|
|
38
57
|
var children = _a.children, numCols = _a.numCols, numRows = _a.numRows, tableId = _a.tableId, wrap = _a.wrap;
|
|
39
58
|
var contextProps = React.useMemo(function () { return ({ numCols: numCols, numRows: numRows, tableId: tableId, wrap: wrap }); }, [numCols, numRows, tableId, wrap]);
|
|
40
|
-
return (
|
|
59
|
+
return (React__namespace.createElement(GridHooksContext.Provider, { value: contextProps }, children));
|
|
41
60
|
};
|
|
42
61
|
|
|
43
62
|
var hasIndicatorContent = function (status) {
|
|
@@ -51,11 +70,11 @@ var CrudStatusIndicator = function (_a) {
|
|
|
51
70
|
}
|
|
52
71
|
var errorMessage = crudStatus.errorMessage, hasError = crudStatus.hasError, loading = crudStatus.loading, creating = crudStatus.creating, deleting = crudStatus.deleting, updating = crudStatus.updating;
|
|
53
72
|
if (loading || creating || deleting || updating) {
|
|
54
|
-
return
|
|
73
|
+
return React__namespace.createElement(elements.InputSpinner, { color: theme.cssColor("--lhds-color-ui-500") });
|
|
55
74
|
}
|
|
56
75
|
if (hasError) {
|
|
57
|
-
var icon = (
|
|
58
|
-
return (
|
|
76
|
+
var icon = (React__namespace.createElement(elements.Icon, { icon: faExclamationTriangle.faExclamationTriangle, color: theme.cssColor("--lhds-color-orange-600"), size: 14 }));
|
|
77
|
+
return (React__namespace.createElement(React__namespace.Fragment, null, errorMessage ? (React__namespace.createElement(tooltip.Tooltip, { label: errorMessage, zIndex: 100 }, icon)) : (icon)));
|
|
59
78
|
}
|
|
60
79
|
return null;
|
|
61
80
|
};
|
|
@@ -65,15 +84,15 @@ var ModifiedField = function (_a) {
|
|
|
65
84
|
var showEmptyFieldWarning = warningOnEmpty && (modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.modified) && (modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.newValue) === "";
|
|
66
85
|
var hasCrudIndicator = crudStatus && hasIndicatorContent(crudStatus);
|
|
67
86
|
var hasRightIcon = showEmptyFieldWarning || hasCrudIndicator;
|
|
68
|
-
return (
|
|
69
|
-
|
|
70
|
-
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.newValue) !== undefined && (
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
hasRightIcon &&
|
|
75
|
-
showEmptyFieldWarning ? (
|
|
76
|
-
|
|
87
|
+
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
88
|
+
React__namespace.createElement(core.Text, { color: isEditable ? "var(--swui-primary-action-color)" : undefined, variant: (modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.modified) ? "bold" : undefined }, value),
|
|
89
|
+
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.newValue) !== undefined && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
90
|
+
React__namespace.createElement(core.Indent, null,
|
|
91
|
+
React__namespace.createElement(elements.Icon, { icon: elements.stenaArrowRight, size: 12 })),
|
|
92
|
+
React__namespace.createElement(core.Text, { color: "var(--swui-primary-action-color)", variant: "bold" }, modifiedField.newValue))),
|
|
93
|
+
hasRightIcon && React__namespace.createElement(core.Space, null),
|
|
94
|
+
showEmptyFieldWarning ? (React__namespace.createElement(tooltip.Tooltip, { label: warningOnEmpty, zIndex: 100 },
|
|
95
|
+
React__namespace.createElement(elements.Icon, { icon: faExclamationTriangle.faExclamationTriangle, color: theme.cssColor("--lhds-color-orange-600"), size: 14 }))) : (React__namespace.createElement(CrudStatusIndicator, { crudStatus: crudStatus }))));
|
|
77
96
|
};
|
|
78
97
|
|
|
79
98
|
/*! *****************************************************************************
|
|
@@ -114,13 +133,16 @@ function __rest(s, e) {
|
|
|
114
133
|
return t;
|
|
115
134
|
}
|
|
116
135
|
|
|
117
|
-
function
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
136
|
+
function __spreadArray(to, from, pack) {
|
|
137
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
138
|
+
if (ar || !(i in from)) {
|
|
139
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
140
|
+
ar[i] = from[i];
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
123
144
|
}
|
|
145
|
+
|
|
124
146
|
function __makeTemplateObject(cooked, raw) {
|
|
125
147
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
126
148
|
return cooked;
|
|
@@ -128,7 +150,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
128
150
|
|
|
129
151
|
var TableCell = function (_a) {
|
|
130
152
|
var _b = _a.alignItems, alignItems = _b === void 0 ? "center" : _b, _c = _a.justifyContent, justifyContent = _c === void 0 ? "flex-start" : _c, _d = _a.overflow, overflow = _d === void 0 ? "hidden" : _d, _e = _a.indent, indent = _e === void 0 ? 1 : _e, boxProps = __rest(_a, ["alignItems", "justifyContent", "overflow", "indent"]);
|
|
131
|
-
return (
|
|
153
|
+
return (React__namespace.createElement(core.Row, __assign({ height: "100%", alignItems: alignItems, justifyContent: justifyContent, overflow: overflow, indent: indent }, boxProps)));
|
|
132
154
|
};
|
|
133
155
|
|
|
134
156
|
var tableBorderColor = "var(--lhds-color-ui-300)";
|
|
@@ -143,13 +165,13 @@ var defaultTableHeadRowHeight = "40px";
|
|
|
143
165
|
var smallTableRowWidth = "40px";
|
|
144
166
|
|
|
145
167
|
var SmallTableCell = function (props) {
|
|
146
|
-
return (
|
|
168
|
+
return (React__namespace.createElement(TableCell, __assign({ width: smallTableRowWidth, justifyContent: "center" }, props)));
|
|
147
169
|
};
|
|
148
170
|
|
|
149
171
|
var SortOrderIcon = function (_a) {
|
|
150
172
|
var _b = _a.iconVariant, iconVariant = _b === void 0 ? "amount" : _b, direction = _a.direction;
|
|
151
|
-
return (
|
|
152
|
-
|
|
173
|
+
return (React__namespace.createElement(core.Box, { width: "14px" },
|
|
174
|
+
React__namespace.createElement(elements.Icon, { size: 14, color: theme.cssColor("--lhds-color-ui-500"), icon: getIcon(direction, iconVariant) })));
|
|
153
175
|
};
|
|
154
176
|
var getIcon = function (arrow, iconType) {
|
|
155
177
|
switch (iconType) {
|
|
@@ -164,60 +186,60 @@ var getIcon = function (arrow, iconType) {
|
|
|
164
186
|
}
|
|
165
187
|
};
|
|
166
188
|
|
|
167
|
-
var TableHeadItem =
|
|
168
|
-
var label = _a.label, arrow = _a.arrow, onClick = _a.onClick, children = _a.children
|
|
189
|
+
var TableHeadItem = React__namespace.memo(function (_a) {
|
|
190
|
+
var label = _a.label, arrow = _a.arrow, onClick = _a.onClick, children = _a.children; _a.selected; var popoverContent = _a.popoverContent, loading = _a.loading, infoIconTooltipText = _a.infoIconTooltipText, _b = _a.overflow, overflow = _b === void 0 ? "hidden" : _b, alignRight = _a.alignRight, sortOrderIconVariant = _a.sortOrderIconVariant, boxProps = __rest(_a, ["label", "arrow", "onClick", "children", "selected", "popoverContent", "loading", "infoIconTooltipText", "overflow", "alignRight", "sortOrderIconVariant"]);
|
|
169
191
|
var containerRef = React.useRef(null);
|
|
170
192
|
var cursorStyle = onClick
|
|
171
193
|
? { cursor: "pointer", userSelect: "none" }
|
|
172
194
|
: undefined;
|
|
173
195
|
var hasOnlyChildren = !label && !arrow && !infoIconTooltipText;
|
|
174
|
-
return (
|
|
175
|
-
|
|
176
|
-
!arrow && alignRight && (
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
(children || label) && (
|
|
181
|
-
children && (
|
|
196
|
+
return (React__namespace.createElement(core.Row, __assign({ height: "100%", alignItems: "center", ref: containerRef, overflow: overflow, justifyContent: alignRight ? "flex-end" : "flex-start" }, boxProps),
|
|
197
|
+
React__namespace.createElement(core.Row, { alignItems: "center", indent: true },
|
|
198
|
+
!arrow && alignRight && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
199
|
+
React__namespace.createElement(core.Space, null),
|
|
200
|
+
React__namespace.createElement(core.Box, { width: "14px" }),
|
|
201
|
+
React__namespace.createElement(core.Space, { num: 0.5 }))),
|
|
202
|
+
(children || label) && (React__namespace.createElement(core.Row, { onClick: onClick, style: cursorStyle, alignItems: "center" },
|
|
203
|
+
children && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
182
204
|
children,
|
|
183
|
-
!hasOnlyChildren &&
|
|
184
|
-
arrow && alignRight && (
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
label &&
|
|
189
|
-
arrow && !alignRight && (
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
infoIconTooltipText && (
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
!arrow && !alignRight && (
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
+
!hasOnlyChildren && React__namespace.createElement(core.Space, { num: 0.5 }))),
|
|
206
|
+
arrow && alignRight && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
207
|
+
React__namespace.createElement(core.Space, null),
|
|
208
|
+
React__namespace.createElement(SortOrderIcon, { direction: arrow, iconVariant: sortOrderIconVariant }),
|
|
209
|
+
React__namespace.createElement(core.Space, { num: 0.5 }))),
|
|
210
|
+
label && React__namespace.createElement(core.Heading, { variant: "h6" }, label),
|
|
211
|
+
arrow && !alignRight && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
212
|
+
React__namespace.createElement(core.Space, { num: 0.5 }),
|
|
213
|
+
React__namespace.createElement(SortOrderIcon, { direction: arrow, iconVariant: sortOrderIconVariant }),
|
|
214
|
+
React__namespace.createElement(core.Space, null))))),
|
|
215
|
+
infoIconTooltipText && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
216
|
+
React__namespace.createElement(core.Space, null),
|
|
217
|
+
React__namespace.createElement(core.Row, { onClick: function (ev) { return ev.stopPropagation(); } },
|
|
218
|
+
React__namespace.createElement(tooltip.Tooltip, { label: infoIconTooltipText, zIndex: "var(--swui-sticky-popover-z-index)" },
|
|
219
|
+
React__namespace.createElement(elements.Icon, { icon: faInfoCircle.faInfoCircle, size: 14, color: theme.cssColor("--lhds-color-blue-400") })),
|
|
220
|
+
React__namespace.createElement(core.Space, null))))),
|
|
221
|
+
React__namespace.createElement(core.Row, null, loading ? (React__namespace.createElement(elements.InputSpinner, null)) : popoverContent ? (React__namespace.createElement(tooltip.Popover, { content: popoverContent, trigger: "click", zIndex: 1000, disablePadding: true, variant: "outlined", arrow: false },
|
|
222
|
+
React__namespace.createElement(elements.FlatButton, { leftIcon: faEllipsisV.faEllipsisV, size: "small" }))) : null),
|
|
223
|
+
!arrow && !alignRight && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
224
|
+
React__namespace.createElement(core.Space, null),
|
|
225
|
+
React__namespace.createElement(core.Box, { width: "14px" }),
|
|
226
|
+
React__namespace.createElement(core.Space, { num: 0.5 })))));
|
|
205
227
|
});
|
|
206
228
|
|
|
207
229
|
var SmallTableHead = function (props) {
|
|
208
|
-
return (
|
|
230
|
+
return (React__namespace.createElement(TableHeadItem, __assign({ width: smallTableRowWidth, justifyContent: "center" }, props)));
|
|
209
231
|
};
|
|
210
232
|
|
|
211
233
|
var TableColumnGroupHead = function (_a) {
|
|
212
234
|
var label = _a.label, flex = _a.flex, width = _a.width, _b = _a.indent, indent = _b === void 0 ? 1 : _b, _c = _a.height, height = _c === void 0 ? defaultTableHeadRowHeight : _c;
|
|
213
|
-
return (
|
|
214
|
-
|
|
215
|
-
|
|
235
|
+
return (React__namespace.createElement(TableHeadItem, { width: width, flex: flex, height: height },
|
|
236
|
+
React__namespace.createElement(core.Box, { indent: indent, spacing: true },
|
|
237
|
+
React__namespace.createElement(core.Text, { variant: "bold" }, label))));
|
|
216
238
|
};
|
|
217
239
|
|
|
218
|
-
var TableHeadRow =
|
|
240
|
+
var TableHeadRow = React__namespace.memo(function (_a) {
|
|
219
241
|
var style = _a.style, _b = _a.height, height = _b === void 0 ? defaultTableHeadRowHeight : _b, boxProps = __rest(_a, ["style", "height"]);
|
|
220
|
-
return
|
|
242
|
+
return React__namespace.createElement(core.Row, __assign({ style: style, height: height }, boxProps));
|
|
221
243
|
});
|
|
222
244
|
|
|
223
245
|
function styleInject(css, ref) {
|
|
@@ -247,13 +269,13 @@ function styleInject(css, ref) {
|
|
|
247
269
|
}
|
|
248
270
|
}
|
|
249
271
|
|
|
250
|
-
var css_248z = ".TableRow-module_tableRow__hS0Sh:focus-within {\n background: var(--focus-within-background, var(--lhds-color-blue-50));\n }\n";
|
|
251
|
-
var styles = {"tableRow":"TableRow-module_tableRow__hS0Sh"};
|
|
252
|
-
styleInject(css_248z);
|
|
272
|
+
var css_248z$4 = ".TableRow-module_tableRow__hS0Sh:focus-within {\n background: var(--focus-within-background, var(--lhds-color-blue-50));\n }\n";
|
|
273
|
+
var styles$4 = {"tableRow":"TableRow-module_tableRow__hS0Sh"};
|
|
274
|
+
styleInject(css_248z$4);
|
|
253
275
|
|
|
254
276
|
var TableRow = function (_a) {
|
|
255
277
|
var _b = _a.height, height = _b === void 0 ? defaultTableHeadRowHeight : _b, className = _a.className, boxProps = __rest(_a, ["height", "className"]);
|
|
256
|
-
return (
|
|
278
|
+
return (React__namespace.createElement(core.Row, __assign({ borderTop: tableBorder, height: height, className: cx__default["default"](styles$4.tableRow, className) }, boxProps)));
|
|
257
279
|
};
|
|
258
280
|
|
|
259
281
|
var useRevertableValue = function (initialValue) {
|
|
@@ -342,7 +364,7 @@ var useEditableCell = function (value, _a) {
|
|
|
342
364
|
}
|
|
343
365
|
}, [isEditable, onStopEditing, revert, setIsEditing]);
|
|
344
366
|
var onKeyDown = React.useMemo(function () {
|
|
345
|
-
return createKeyDownHandler(isEditing, isEditable, startEditing, setLastKeyEvent, allowedInputType, transformEnteredValue, revertableValue);
|
|
367
|
+
return createKeyDownHandler$1(isEditing, isEditable, startEditing, setLastKeyEvent, allowedInputType, transformEnteredValue, revertableValue);
|
|
346
368
|
}, [
|
|
347
369
|
isEditing,
|
|
348
370
|
isEditable,
|
|
@@ -376,7 +398,7 @@ var allowsLetters = function (allowedInputType) {
|
|
|
376
398
|
var isCharacter = function (key) { return !!key.match(/^[-+*<>]$/); };
|
|
377
399
|
var isLetter = function (key) { return !!key.match(/^[a-zA-Z0-9]$/); };
|
|
378
400
|
var isNumeric = function (key) { return !isNaN(parseInt(key, 10)); };
|
|
379
|
-
var createKeyDownHandler = function (_, // isEditing
|
|
401
|
+
var createKeyDownHandler$1 = function (_, // isEditing
|
|
380
402
|
isEditable, startEditing, setLastKeyEvent, allowedInputType, transformEnteredValue, revertableValue) { return function (e) {
|
|
381
403
|
if (e.ctrlKey || e.metaKey || e.shiftKey) {
|
|
382
404
|
return;
|
|
@@ -522,7 +544,7 @@ var useGridNavigation = function (options) {
|
|
|
522
544
|
onCellMove,
|
|
523
545
|
onCellNavigation,
|
|
524
546
|
]);
|
|
525
|
-
var onKeyDown = React.useMemo(function () { return createKeyDownHandler
|
|
547
|
+
var onKeyDown = React.useMemo(function () { return createKeyDownHandler(moveHandler); }, [
|
|
526
548
|
moveHandler,
|
|
527
549
|
]);
|
|
528
550
|
var id = React.useMemo(function () { return createCellId(tableId, rowIndex, colIndex); }, [
|
|
@@ -573,7 +595,7 @@ var createMoveHandler = function (tableId, rowIndex, colIndex, numRows, numCols,
|
|
|
573
595
|
}
|
|
574
596
|
}; };
|
|
575
597
|
var createCellId = function (tableId, rowIndex, colIndex) { return ensureDomIdIsCorrect("table-" + tableId + "-" + rowIndex + "-" + colIndex); };
|
|
576
|
-
var createKeyDownHandler
|
|
598
|
+
var createKeyDownHandler = function (moveHandler) { return function (e) {
|
|
577
599
|
if (e.key === "ArrowLeft") {
|
|
578
600
|
moveHandler("left");
|
|
579
601
|
e.preventDefault();
|
|
@@ -716,22 +738,23 @@ var EditableTextCellWithCrudAndModified = function EditableTextCellWithCrudAndMo
|
|
|
716
738
|
modifiedFieldsRedux.actions,
|
|
717
739
|
crudStatusRedux.actions,
|
|
718
740
|
]);
|
|
719
|
-
return (
|
|
720
|
-
rowIndent &&
|
|
721
|
-
|
|
741
|
+
return (React__namespace.createElement(core.Row, { height: defaultTableRowHeight, width: "100%", borderBottom: tableBorder, hoverBackground: "var(--ui7)", alignItems: "center" },
|
|
742
|
+
rowIndent && React__namespace.createElement(core.Indent, { num: rowIndent }),
|
|
743
|
+
React__namespace.createElement(core.Row, __assign({ width: "100%", height: "100%", justifyContent: "flex-end", alignItems: "center", border: "1px solid transparent", borderRadius: "4px" , focusBorder: !isEditing
|
|
722
744
|
? "1px solid var(--primary-action-color)"
|
|
723
|
-
: undefined, hoverBorder:
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.newValue) !== undefined && (
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
crudStatus && hasIndicatorContent(crudStatus) && (
|
|
731
|
-
warningOnEmpty &&
|
|
732
|
-
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.
|
|
733
|
-
|
|
734
|
-
|
|
745
|
+
: undefined, hoverBorder: !isEditing ? "var(--ui5) solid 1px;" : undefined, onKeyDown: onKeyDownHandler }, (requiredProps )),
|
|
746
|
+
React__namespace.createElement(core.Indent, { row: true, alignItems: "center" }, isEditing ? (React__namespace.createElement(forms.TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (React__namespace.createElement(React__namespace.Fragment, null,
|
|
747
|
+
React__namespace.createElement(core.Text, { color: isEditable ? "var(--primary-action-color)" : undefined, variant: (modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.modified) ? "bold" : undefined }, value),
|
|
748
|
+
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.newValue) !== undefined && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
749
|
+
React__namespace.createElement(core.Indent, null,
|
|
750
|
+
React__namespace.createElement(elements.Icon, { icon: faArrowRight.faArrowRight, size: 12 })),
|
|
751
|
+
React__namespace.createElement(core.Text, { color: "var(--primary-action-color)", variant: "bold" }, modifiedField.newValue))),
|
|
752
|
+
crudStatus && hasIndicatorContent(crudStatus) && (React__namespace.createElement(core.Space, { num: 2 })),
|
|
753
|
+
warningOnEmpty &&
|
|
754
|
+
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.modified) &&
|
|
755
|
+
(modifiedField === null || modifiedField === void 0 ? void 0 : modifiedField.newValue) === "" ? (React__namespace.createElement(tooltip.Tooltip, { label: warningOnEmpty, zIndex: 100 },
|
|
756
|
+
React__namespace.createElement(elements.Icon, { icon: faExclamationTriangle.faExclamationTriangle, color: "var(--ui-alert1)", size: 14 }))) : (React__namespace.createElement(CrudStatusIndicator, { crudStatus: crudStatus })))))),
|
|
757
|
+
rowIndent && React__namespace.createElement(core.Indent, { num: rowIndent })));
|
|
735
758
|
};
|
|
736
759
|
|
|
737
760
|
var StandardTableTableIdContext = React.createContext("");
|
|
@@ -920,7 +943,7 @@ var ColumnInGroup = function ColumnGroupColumnItem(_a) {
|
|
|
920
943
|
(stickyColumnGroups === "last" || stickyColumnGroups === "both");
|
|
921
944
|
var isSticky = isStickyFirstGroup || isStickyLastGroup || stickyHeader;
|
|
922
945
|
var isStickyGroup = isStickyFirstGroup || isStickyLastGroup;
|
|
923
|
-
return (
|
|
946
|
+
return (React__namespace.createElement("th", { colSpan: colSpan, style: {
|
|
924
947
|
position: isSticky ? "sticky" : undefined,
|
|
925
948
|
height: "var(--current-row-height)",
|
|
926
949
|
width: width,
|
|
@@ -935,26 +958,27 @@ var ColumnInGroup = function ColumnGroupColumnItem(_a) {
|
|
|
935
958
|
: isStickyGroup
|
|
936
959
|
? "var(--swui-sticky-group-group-z-index)"
|
|
937
960
|
: stickyHeader
|
|
938
|
-
? zIndex !== null && zIndex !== void 0 ? zIndex : "var(--swui-sticky-header-column-group-z-index)"
|
|
961
|
+
? zIndex !== null && zIndex !== void 0 ? zIndex : "var(--swui-sticky-header-column-group-z-index)"
|
|
962
|
+
: zIndex !== null && zIndex !== void 0 ? zIndex : 1,
|
|
939
963
|
boxShadow: isStickyFirstGroup
|
|
940
964
|
? "var(--swui-sticky-column-shadow-right)"
|
|
941
965
|
: isStickyLastGroup
|
|
942
966
|
? "var(--swui-sticky-column-shadow-left)"
|
|
943
967
|
: undefined,
|
|
944
968
|
} },
|
|
945
|
-
|
|
946
|
-
contentLeft && (
|
|
947
|
-
|
|
969
|
+
React__namespace.createElement(core.Row, { alignItems: "center" }, React__namespace.createElement(React__namespace.Fragment, null,
|
|
970
|
+
contentLeft && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
971
|
+
React__namespace.createElement(core.Space, null),
|
|
948
972
|
contentLeft,
|
|
949
|
-
|
|
950
|
-
render ? (render(groupConfig)) : (
|
|
951
|
-
|
|
952
|
-
contentRight && (
|
|
953
|
-
|
|
973
|
+
React__namespace.createElement(core.Space, { num: 0.5 }))),
|
|
974
|
+
render ? (render(groupConfig)) : (React__namespace.createElement(core.Indent, null,
|
|
975
|
+
React__namespace.createElement(core.Heading, { variant: "h5", whiteSpace: "nowrap" }, label))),
|
|
976
|
+
contentRight && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
977
|
+
React__namespace.createElement(core.Space, { num: 0.5 }),
|
|
954
978
|
contentRight)),
|
|
955
|
-
(error || loading) &&
|
|
956
|
-
loading ? (
|
|
957
|
-
|
|
979
|
+
(error || loading) && React__namespace.createElement(core.Indent, null),
|
|
980
|
+
loading ? (React__namespace.createElement(elements.InputSpinner, null)) : error ? (React__namespace.createElement(tooltip.Tooltip, { label: error, placement: "bottom", appendTo: document.body },
|
|
981
|
+
React__namespace.createElement(elements.Icon, { icon: faExclamationTriangle.faExclamationTriangle, color: theme.cssColor("--lhds-color-red-500"), size: 14 }))) : undefined))));
|
|
958
982
|
};
|
|
959
983
|
var getActiveBorder = function (borderFromGroup, borderFromColumn) {
|
|
960
984
|
if (borderFromGroup) {
|
|
@@ -968,7 +992,7 @@ var getActiveBorder = function (borderFromGroup, borderFromColumn) {
|
|
|
968
992
|
|
|
969
993
|
var createStickyHeaderProps = function (stickyHeader, stickyColumn, headerRowOffsetTop, zIndexFromConfig) { return ({
|
|
970
994
|
top: stickyHeader
|
|
971
|
-
? getTopPosition(stickyHeader, headerRowOffsetTop)
|
|
995
|
+
? getTopPosition$1(stickyHeader, headerRowOffsetTop)
|
|
972
996
|
: undefined,
|
|
973
997
|
background: stickyHeader || stickyColumn ? "white" : undefined,
|
|
974
998
|
position: stickyHeader || stickyColumn ? "sticky" : undefined,
|
|
@@ -976,9 +1000,10 @@ var createStickyHeaderProps = function (stickyHeader, stickyColumn, headerRowOff
|
|
|
976
1000
|
? "var(--swui-sticky-column-shadow-right)"
|
|
977
1001
|
: undefined,
|
|
978
1002
|
zIndex: stickyHeader || stickyColumn
|
|
979
|
-
? zIndexFromConfig !== null && zIndexFromConfig !== void 0 ? zIndexFromConfig : "var(--swui-sticky-header-z-index)"
|
|
1003
|
+
? zIndexFromConfig !== null && zIndexFromConfig !== void 0 ? zIndexFromConfig : "var(--swui-sticky-header-z-index)"
|
|
1004
|
+
: zIndexFromConfig,
|
|
980
1005
|
}); };
|
|
981
|
-
var getTopPosition = function (stickyHeader, headerRowOffsetTop) {
|
|
1006
|
+
var getTopPosition$1 = function (stickyHeader, headerRowOffsetTop) {
|
|
982
1007
|
if (stickyHeader && headerRowOffsetTop) {
|
|
983
1008
|
return headerRowOffsetTop;
|
|
984
1009
|
}
|
|
@@ -991,7 +1016,7 @@ var getTopPosition = function (stickyHeader, headerRowOffsetTop) {
|
|
|
991
1016
|
return undefined;
|
|
992
1017
|
};
|
|
993
1018
|
|
|
994
|
-
var ColumnGroupRow =
|
|
1019
|
+
var ColumnGroupRow = React__namespace.memo(function ColumnGroupRow(_a) {
|
|
995
1020
|
var _b = _a.height, height = _b === void 0 ? defaultTableRowHeight : _b;
|
|
996
1021
|
var groupConfigAndIds = useGroupConfigsAndIdsForRows();
|
|
997
1022
|
var config = useStandardTableConfig();
|
|
@@ -1000,22 +1025,22 @@ var ColumnGroupRow = React.memo(function ColumnGroupRow(_a) {
|
|
|
1000
1025
|
var zIndexForCells = (stickyHeader
|
|
1001
1026
|
? "var(--swui-sticky-column-group-label-z-index)"
|
|
1002
1027
|
: "var(--swui-sticky-group-group-z-index)");
|
|
1003
|
-
return (
|
|
1028
|
+
return (React__namespace.createElement("tr", { style: {
|
|
1004
1029
|
height: height,
|
|
1005
1030
|
borderLeft: tableBorderLeft,
|
|
1006
1031
|
} },
|
|
1007
|
-
rowIndent &&
|
|
1008
|
-
enableExpandCollapse && (
|
|
1009
|
-
showHeaderCheckbox && (
|
|
1032
|
+
rowIndent && React__namespace.createElement("th", { style: stickyHeaderProps }),
|
|
1033
|
+
enableExpandCollapse && (React__namespace.createElement("th", { style: __assign(__assign({}, stickyHeaderProps), { width: "var(--swui-expand-cell-width)", left: stickyCheckboxColumn ? "0px" : undefined, zIndex: zIndexForCells }) })),
|
|
1034
|
+
showHeaderCheckbox && (React__namespace.createElement("th", { style: __assign(__assign({}, stickyHeaderProps), { left: stickyCheckboxColumn && enableExpandCollapse
|
|
1010
1035
|
? "var(--swui-expand-cell-width)"
|
|
1011
1036
|
: stickyCheckboxColumn
|
|
1012
1037
|
? "0px"
|
|
1013
1038
|
: undefined, zIndex: zIndexForCells }) })),
|
|
1014
1039
|
groupConfigAndIds.map(function (_a, groupIndex) {
|
|
1015
1040
|
var groupConfig = _a.groupConfig, groupId = _a.groupId;
|
|
1016
|
-
return (
|
|
1041
|
+
return (React__namespace.createElement(ColumnInGroup, { isFirstGroup: groupIndex === 0, isLastGroup: groupIndex === groupConfigAndIds.length - 1, groupConfig: groupConfig, columnId: groupConfig.columnOrder[0], key: groupId, colSpan: groupConfig.columnOrder.length, borderFromGroup: getCellBorderFromGroup(groupIndex, 0, groupConfig.borderLeft) }));
|
|
1017
1042
|
}),
|
|
1018
|
-
rowIndent &&
|
|
1043
|
+
rowIndent && React__namespace.createElement("th", { style: stickyHeaderProps })));
|
|
1019
1044
|
});
|
|
1020
1045
|
|
|
1021
1046
|
var calculateColumnIndexPerColumnId = function (config) {
|
|
@@ -1147,7 +1172,7 @@ var getColumnIdsForRightSideStickyGroup = function (config) {
|
|
|
1147
1172
|
if (!columnGroupConfig) {
|
|
1148
1173
|
return [];
|
|
1149
1174
|
}
|
|
1150
|
-
var r =
|
|
1175
|
+
var r = __spreadArray([], columnGroupConfig.columnOrder, true);
|
|
1151
1176
|
r.reverse();
|
|
1152
1177
|
return r;
|
|
1153
1178
|
};
|
|
@@ -1274,9 +1299,9 @@ var getNumUserColumns = function (config) {
|
|
|
1274
1299
|
return (_b = (_a = config.columnOrder) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
|
|
1275
1300
|
};
|
|
1276
1301
|
|
|
1277
|
-
var css_248z$
|
|
1278
|
-
var styles$
|
|
1279
|
-
styleInject(css_248z$
|
|
1302
|
+
var css_248z$3 = ".StandardTable-module_standardTable__2WNjA {\n --swui-standard-table-height: 40px;\n --swui-sticky-header-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.05);\n --swui-sticky-header-shadow-and-right: var(--swui-sticky-header-shadow),\n var(--swui-sticky-column-shadow-right);\n --swui-sticky-header-shadow-and-left: var(--swui-sticky-header-shadow),\n var(--swui-sticky-column-shadow-left);\n --swui-sticky-column-shadow-right: 4px 2px 4px 0 rgba(0, 0, 0, 0.05);\n --swui-sticky-column-shadow-left: -4px 2px 4px 0 rgba(0, 0, 0, 0.05);\n --swui-sticky-header-z-index: 10;\n --swui-sticky-column-z-index: 20;\n --swui-sticky-group-group-z-index: 25;\n --swui-sticky-group-header-z-index: 26;\n --swui-sticky-header-column-group-z-index: 30;\n --swui-sticky-column-group-label-z-index: 40;\n --swui-sticky-header-in-sticky-column-z-index: 50;\n --swui-sticky-popover-z-index: 60;\n --swui-expand-cell-width: 45px;\n --swui-checkbox-cell-width: 45px;\n --swui-expand-highlight-border-width: 2px;\n\n /* Current */\n --current-row-height: var(--swui-standard-table-height);\n --current-left-offset: 0px;\n\n border-spacing: 0;\n}\n\n .StandardTable-module_standardTable__2WNjA td {\n border-top: 1px solid var(--lhds-color-ui-300);\n padding: 0;\n }\n\n .StandardTable-module_standardTable__2WNjA th {\n padding: 0;\n }\n\n .StandardTable-module_standardTable__2WNjA.StandardTable-module_relaxed__3Gff3 {\n --current-row-height: 48px;\n }\n\n .StandardTable-module_standardTable__2WNjA.StandardTable-module_condensed__32B6k {\n --current-row-height: 32px;\n }\n\n .StandardTable-module_standardTable__2WNjA.StandardTable-module_compact__8du-I {\n --current-row-height: 24px;\n }\n";
|
|
1303
|
+
var styles$3 = {"standardTable":"StandardTable-module_standardTable__2WNjA","relaxed":"StandardTable-module_relaxed__3Gff3","condensed":"StandardTable-module_condensed__32B6k","compact":"StandardTable-module_compact__8du-I"};
|
|
1304
|
+
styleInject(css_248z$3);
|
|
1280
1305
|
|
|
1281
1306
|
var multitypeComparator = function (a, b) {
|
|
1282
1307
|
if (a != null && b == null) {
|
|
@@ -1313,7 +1338,7 @@ var useColumnValueResolver = function (columnId) {
|
|
|
1313
1338
|
return column.itemValueResolver;
|
|
1314
1339
|
};
|
|
1315
1340
|
|
|
1316
|
-
var StandardTableRowCheckbox =
|
|
1341
|
+
var StandardTableRowCheckbox = React__namespace.memo(function StandardTableRowCheckbox(_a) {
|
|
1317
1342
|
var value = _a.value, onValueChange = _a.onValueChange, colIndex = _a.colIndex, rowIndex = _a.rowIndex, numRows = _a.numRows, disabled = _a.disabled, onValueChangeAndShift = _a.onValueChangeAndShift, shiftPressedRef = _a.shiftPressedRef;
|
|
1318
1343
|
var totalNumColumns = useTotalNumColumnsForRows();
|
|
1319
1344
|
var tableId = useStandardTableId();
|
|
@@ -1333,7 +1358,7 @@ var StandardTableRowCheckbox = React.memo(function StandardTableRowCheckbox(_a)
|
|
|
1333
1358
|
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
|
|
1334
1359
|
}
|
|
1335
1360
|
}, [onValueChange, onValueChangeAndShift, shiftPressedRef]);
|
|
1336
|
-
return (
|
|
1361
|
+
return (React__namespace.createElement(forms.Checkbox, __assign({ size: "small", disabled: disabled, value: value, onValueChange: internalOnValueChange }, requiredProps)));
|
|
1337
1362
|
});
|
|
1338
1363
|
|
|
1339
1364
|
var getIdsBetweenSelected = function (idList, selected1, selected2) {
|
|
@@ -1445,14 +1470,14 @@ var StandardTableRowExpandButton = function (_a) {
|
|
|
1445
1470
|
}
|
|
1446
1471
|
return expandCollapseDisableResolver(item);
|
|
1447
1472
|
}, [expandCollapseDisableResolver, item]);
|
|
1448
|
-
return (
|
|
1473
|
+
return (React__namespace.createElement(core.Row, { alignItems: "center", justifyContent: "center", indent: true }, !buttonDisabled && (React__namespace.createElement(elements.FlatButton, __assign({ size: "small", leftIcon: isExpanded ? faChevronDown.faChevronDown : faChevronRight.faChevronRight, onClick: toggleRowExpanded }, requiredProps)))));
|
|
1449
1474
|
};
|
|
1450
1475
|
|
|
1451
|
-
var getBackgroundColor = function (backgroundResolver, item, background) {
|
|
1476
|
+
var getBackgroundColor$1 = function (backgroundResolver, item, background) {
|
|
1452
1477
|
return backgroundResolver ? backgroundResolver(item) : background;
|
|
1453
1478
|
};
|
|
1454
1479
|
var useBackground = function (backgroundResolver, item, background) {
|
|
1455
|
-
return React.useMemo(function () { return getBackgroundColor(backgroundResolver, item, background); }, [
|
|
1480
|
+
return React.useMemo(function () { return getBackgroundColor$1(backgroundResolver, item, background); }, [
|
|
1456
1481
|
backgroundResolver,
|
|
1457
1482
|
item,
|
|
1458
1483
|
background,
|
|
@@ -1489,27 +1514,27 @@ var css_248z$2 = ".StandardTableCellUi-module_standardTableCell__1lvps {\n outl
|
|
|
1489
1514
|
var styles$2 = {"standardTableCell":"StandardTableCellUi-module_standardTableCell__1lvps"};
|
|
1490
1515
|
styleInject(css_248z$2);
|
|
1491
1516
|
|
|
1492
|
-
var StandardTableCellUi =
|
|
1517
|
+
var StandardTableCellUi = React__namespace.memo(function StandardTableCellUi(_a) {
|
|
1493
1518
|
var enableGridCell = _a.enableGridCell, children = _a.children, background = _a.background, gridCellRequiredProps = _a.gridCellRequiredProps, isEditing = _a.isEditing, justifyContent = _a.justifyContent, onKeyDown = _a.onKeyDown, width = _a.width, minWidth = _a.minWidth;
|
|
1494
|
-
return (
|
|
1495
|
-
|
|
1519
|
+
return (React__namespace.createElement(core.Row, { width: width, minWidth: minWidth, height: "inherit", background: background, overflow: "hidden", onKeyDown: onKeyDown },
|
|
1520
|
+
React__namespace.createElement(core.Row, __assign({ border: "1px solid transparent", className: styles$2.standardTableCell, width: "100%", height: "100%", justifyContent: justifyContent, alignItems: "center", borderRadius: enableGridCell ? "4px" : undefined, focusBorder: enableGridCell && !isEditing
|
|
1496
1521
|
? "1px solid var(--swui-primary-action-color)"
|
|
1497
1522
|
: undefined, hoverBorder: enableGridCell && !isEditing
|
|
1498
1523
|
? "1px solid var(--lhds-color-ui-300)"
|
|
1499
1524
|
: undefined }, (enableGridCell ? gridCellRequiredProps : undefined)), children)));
|
|
1500
1525
|
});
|
|
1501
1526
|
|
|
1502
|
-
var css_248z$
|
|
1503
|
-
var styles$
|
|
1504
|
-
styleInject(css_248z$
|
|
1527
|
+
var css_248z$1 = ".TextCell-module_textCell__3nIGF {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n";
|
|
1528
|
+
var styles$1 = {"textCell":"TextCell-module_textCell__3nIGF"};
|
|
1529
|
+
styleInject(css_248z$1);
|
|
1505
1530
|
|
|
1506
|
-
var TextCell =
|
|
1531
|
+
var TextCell = React__namespace.memo(function TextCell(_a) {
|
|
1507
1532
|
var label = _a.label;
|
|
1508
|
-
return (
|
|
1509
|
-
|
|
1533
|
+
return (React__namespace.createElement(core.Indent, { overflow: "hidden" },
|
|
1534
|
+
React__namespace.createElement(core.Text, { className: styles$1.textCell, title: label }, label)));
|
|
1510
1535
|
});
|
|
1511
1536
|
|
|
1512
|
-
var StandardTableCell =
|
|
1537
|
+
var StandardTableCell = React__namespace.memo(function StandardTableCell(_a) {
|
|
1513
1538
|
var _b;
|
|
1514
1539
|
var columnId = _a.columnId, item = _a.item, colIndex = _a.colIndex, rowIndex = _a.rowIndex, numRows = _a.numRows, borderFromGroup = _a.borderFromGroup, disableBorderLeft = _a.disableBorderLeft;
|
|
1515
1540
|
var _c = useStandardTableConfig(), keyResolver = _c.keyResolver, enableGridCell = _c.enableGridCell, gridCellOptionsForTable = _c.gridCellOptions;
|
|
@@ -1550,15 +1575,14 @@ var StandardTableCell = React.memo(function StandardTableCell(_a) {
|
|
|
1550
1575
|
ev.stopPropagation();
|
|
1551
1576
|
}
|
|
1552
1577
|
}, [onKeyDownTable, columnId, item, onKeyDownCell]);
|
|
1553
|
-
var gridCell = useGridCell(label, __assign(__assign({ colIndex: colIndex,
|
|
1554
|
-
rowIndex: rowIndex,
|
|
1555
|
-
numRows: numRows, numCols: numNavigableColumns, tableId: tableId, isEditable: editable, onChange: onChange
|
|
1578
|
+
var gridCell = useGridCell(label, __assign(__assign({ colIndex: colIndex, rowIndex: rowIndex, numRows: numRows, numCols: numNavigableColumns, tableId: tableId, isEditable: editable, onChange: onChange
|
|
1556
1579
|
? function (value) { return onChange(item, value); }
|
|
1557
1580
|
: undefined }, gridCellOptionsForTable), gridCellOptionsForColumn));
|
|
1558
1581
|
var stickyProps = stickyPropsPerColumnContext[columnId];
|
|
1559
1582
|
var background = (_b = useCellBackgroundByColumnId(columnId, item)) !== null && _b !== void 0 ? _b : "inherit";
|
|
1560
1583
|
var currentZIndex = stickyProps.sticky
|
|
1561
|
-
? zIndex !== null && zIndex !== void 0 ? zIndex : "var(--swui-sticky-column-z-index)"
|
|
1584
|
+
? zIndex !== null && zIndex !== void 0 ? zIndex : "var(--swui-sticky-column-z-index)"
|
|
1585
|
+
: zIndex !== null && zIndex !== void 0 ? zIndex : 1;
|
|
1562
1586
|
var content = React.useMemo(function () {
|
|
1563
1587
|
return renderCell ? (renderCell({
|
|
1564
1588
|
label: label,
|
|
@@ -1568,7 +1592,7 @@ var StandardTableCell = React.memo(function StandardTableCell(_a) {
|
|
|
1568
1592
|
isEditable: editable,
|
|
1569
1593
|
isSelected: isSelected,
|
|
1570
1594
|
zIndex: currentZIndex,
|
|
1571
|
-
})) : (
|
|
1595
|
+
})) : (React__namespace.createElement(TextCell, { label: label }));
|
|
1572
1596
|
}, [
|
|
1573
1597
|
renderCell,
|
|
1574
1598
|
label,
|
|
@@ -1589,7 +1613,7 @@ var StandardTableCell = React.memo(function StandardTableCell(_a) {
|
|
|
1589
1613
|
: stickyProps.sticky
|
|
1590
1614
|
? "var(--swui-sticky-column-shadow-right)"
|
|
1591
1615
|
: undefined;
|
|
1592
|
-
return (
|
|
1616
|
+
return (React__namespace.createElement("td", { style: {
|
|
1593
1617
|
borderLeft: activeBorderLeft,
|
|
1594
1618
|
position: stickyProps.sticky ? "sticky" : undefined,
|
|
1595
1619
|
left: stickyProps.sticky ? stickyProps.left : undefined,
|
|
@@ -1599,7 +1623,7 @@ var StandardTableCell = React.memo(function StandardTableCell(_a) {
|
|
|
1599
1623
|
height: "var(--current-row-height)",
|
|
1600
1624
|
background: background,
|
|
1601
1625
|
} },
|
|
1602
|
-
|
|
1626
|
+
React__namespace.createElement(StandardTableCellUi, { enableGridCell: enableGridCell && !disableGridCell && !disableGridCellFocus, gridCellRequiredProps: gridCell.requiredProps, isEditing: gridCell.isEditing, width: width, minWidth: minWidth, justifyContent: justifyContentCell, onKeyDown: onKeyDownHandler }, content)));
|
|
1603
1627
|
});
|
|
1604
1628
|
|
|
1605
1629
|
var StandardTableRowExpansion = function StandardTableRowExpansion(_a) {
|
|
@@ -1607,16 +1631,14 @@ var StandardTableRowExpansion = function StandardTableRowExpansion(_a) {
|
|
|
1607
1631
|
var _b = useStandardTableConfig(), renderRowExpansion = _b.renderRowExpansion, enableExpandCollapse = _b.enableExpandCollapse;
|
|
1608
1632
|
var _c = useExpandCollapseActions(item), isExpanded = _c.isExpanded, toggleRowExpanded = _c.toggleRowExpanded;
|
|
1609
1633
|
var totalNumColumns = useTotalNumColumns();
|
|
1610
|
-
return (
|
|
1634
|
+
return (React__namespace.createElement(React__namespace.Fragment, null, enableExpandCollapse && renderRowExpansion && isExpanded && (React__namespace.createElement("tr", { style: {
|
|
1611
1635
|
borderLeft: tableBorderLeftExpanded,
|
|
1612
1636
|
background: tableBackgroundColorExpanded,
|
|
1613
1637
|
} },
|
|
1614
|
-
|
|
1638
|
+
React__namespace.createElement("td", { colSpan: totalNumColumns }, renderRowExpansion(item, { onRequestCollapse: toggleRowExpanded }))))));
|
|
1615
1639
|
};
|
|
1616
1640
|
|
|
1617
|
-
var TrWithHoverBackground = styled__default[
|
|
1618
|
-
"\n ", ";\n ", ";\n ", ";\n ",
|
|
1619
|
-
"\n"])), function (_a) {
|
|
1641
|
+
var TrWithHoverBackground = styled__default["default"].tr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n ", ";\n ", ";\n ", ";\n ", "\n"], ["\n ", "\n ", ";\n ", ";\n ", ";\n ", "\n"])), function (_a) {
|
|
1620
1642
|
var focusBackground = _a.focusBackground;
|
|
1621
1643
|
return focusBackground ? "--focus-within-background: " + focusBackground + ";" : "";
|
|
1622
1644
|
}, function (_a) {
|
|
@@ -1636,7 +1658,7 @@ var TrWithHoverBackground = styled__default['default'].tr(templateObject_1 || (t
|
|
|
1636
1658
|
});
|
|
1637
1659
|
var templateObject_1;
|
|
1638
1660
|
|
|
1639
|
-
var StandardTableRow =
|
|
1661
|
+
var StandardTableRow = React__namespace.memo(function StandardTableRow(_a) {
|
|
1640
1662
|
var item = _a.item, idListForEnabledItems = _a.idListForEnabledItems, rowIndex = _a.rowIndex, numRows = _a.numRows, colIndexOffset = _a.colIndexOffset, alwaysVisible = _a.alwaysVisible, shiftPressedRef = _a.shiftPressedRef;
|
|
1641
1663
|
var trRef = React.useRef(null);
|
|
1642
1664
|
var totalNumColumns = useTotalNumColumns();
|
|
@@ -1651,7 +1673,7 @@ var StandardTableRow = React.memo(function StandardTableRow(_a) {
|
|
|
1651
1673
|
threshold: 0,
|
|
1652
1674
|
});
|
|
1653
1675
|
var resolvedBackgroundResult = React.useMemo(function () { return rowBackgroundResolver === null || rowBackgroundResolver === void 0 ? void 0 : rowBackgroundResolver(item, isSelected); }, [isSelected, item, rowBackgroundResolver]);
|
|
1654
|
-
var background = getBackgroundColor
|
|
1676
|
+
var background = getBackgroundColor(resolvedBackgroundResult, isSelected, isExpanded);
|
|
1655
1677
|
var hoverBackground = getHoverBackgroundColor(resolvedBackgroundResult, isSelected, isExpanded);
|
|
1656
1678
|
var focusBackground = getFocusBackgroundColor(resolvedBackgroundResult, isSelected, hoverBackground);
|
|
1657
1679
|
var disabled = React.useMemo(function () { return checkboxDisabledResolver === null || checkboxDisabledResolver === void 0 ? void 0 : checkboxDisabledResolver(item); }, [
|
|
@@ -1662,13 +1684,13 @@ var StandardTableRow = React.memo(function StandardTableRow(_a) {
|
|
|
1662
1684
|
var firstColumnBackground = useCellBackgroundByColumnConfig(firstColumn, item);
|
|
1663
1685
|
var lastColumn = useLastColumnConfig();
|
|
1664
1686
|
var lastColumnBackground = useCellBackgroundByColumnConfig(lastColumn, item);
|
|
1665
|
-
var content = React.useMemo(function () { return (
|
|
1666
|
-
|
|
1667
|
-
rowIndent && (
|
|
1687
|
+
var content = React.useMemo(function () { return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
1688
|
+
React__namespace.createElement(React__namespace.Fragment, null,
|
|
1689
|
+
rowIndent && (React__namespace.createElement("td", { style: {
|
|
1668
1690
|
background: firstColumnBackground,
|
|
1669
1691
|
} },
|
|
1670
|
-
|
|
1671
|
-
enableExpandCollapse && (
|
|
1692
|
+
React__namespace.createElement(core.Indent, { num: rowIndent }))),
|
|
1693
|
+
enableExpandCollapse && (React__namespace.createElement("td", { style: {
|
|
1672
1694
|
background: stickyCheckboxColumn ? "inherit" : undefined,
|
|
1673
1695
|
position: stickyCheckboxColumn ? "sticky" : undefined,
|
|
1674
1696
|
left: stickyCheckboxColumn ? "0px" : undefined,
|
|
@@ -1679,9 +1701,9 @@ var StandardTableRow = React.memo(function StandardTableRow(_a) {
|
|
|
1679
1701
|
? "var(--swui-sticky-column-z-index)"
|
|
1680
1702
|
: undefined,
|
|
1681
1703
|
} },
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
showRowCheckbox && (
|
|
1704
|
+
React__namespace.createElement(core.Row, { width: "var(--swui-expand-cell-width)", minWidth: "var(--swui-expand-cell-width)", alignItems: "center", justifyContent: "center" },
|
|
1705
|
+
React__namespace.createElement(StandardTableRowExpandButton, { colIndex: colIndexOffset, rowIndex: enableGridCell ? rowIndex : 0, numRows: enableGridCell ? numRows : 0, item: item })))),
|
|
1706
|
+
showRowCheckbox && (React__namespace.createElement("td", { style: {
|
|
1685
1707
|
background: stickyCheckboxColumn ? "inherit" : undefined,
|
|
1686
1708
|
position: stickyCheckboxColumn ? "sticky" : undefined,
|
|
1687
1709
|
left: enableExpandCollapse && stickyCheckboxColumn
|
|
@@ -1697,17 +1719,17 @@ var StandardTableRow = React.memo(function StandardTableRow(_a) {
|
|
|
1697
1719
|
? "var(--swui-sticky-column-z-index)"
|
|
1698
1720
|
: undefined,
|
|
1699
1721
|
} },
|
|
1700
|
-
|
|
1701
|
-
|
|
1722
|
+
React__namespace.createElement(core.Row, { width: "var(--swui-checkbox-cell-width)", minWidth: "var(--swui-checkbox-cell-width)", alignItems: "center", justifyContent: "center" },
|
|
1723
|
+
React__namespace.createElement(StandardTableRowCheckbox, { disabled: disabled, value: isSelected, onValueChange: toggleSelected, onValueChangeAndShift: shiftAndToggleSelected, colIndex: colIndexOffset + (enableExpandCollapse ? 1 : 0), rowIndex: rowIndex, numRows: numRows, shiftPressedRef: shiftPressedRef })))),
|
|
1702
1724
|
groupConfigsAndIds.map(function (_a, groupIndex) {
|
|
1703
1725
|
var groupConfig = _a.groupConfig, groupId = _a.groupId;
|
|
1704
|
-
return (
|
|
1726
|
+
return (React__namespace.createElement(React__namespace.Fragment, { key: groupId }, groupConfig.columnOrder.map(function (columnId, index) { return (React__namespace.createElement(StandardTableCell, { key: columnId, columnId: columnId, item: item, colIndex: colIndexOffset + columnIndexPerColumnId[columnId], rowIndex: rowIndex, numRows: numRows, borderFromGroup: getCellBorderFromGroup(groupIndex, index, groupConfig.borderLeft), disableBorderLeft: groupIndex === 0 && index === 0 })); })));
|
|
1705
1727
|
}),
|
|
1706
|
-
rowIndent && (
|
|
1728
|
+
rowIndent && (React__namespace.createElement("td", { style: {
|
|
1707
1729
|
background: lastColumnBackground,
|
|
1708
1730
|
} },
|
|
1709
|
-
|
|
1710
|
-
|
|
1731
|
+
React__namespace.createElement(core.Indent, { num: rowIndent }))),
|
|
1732
|
+
React__namespace.createElement("td", null)))); }, [
|
|
1711
1733
|
colIndexOffset,
|
|
1712
1734
|
columnIndexPerColumnId,
|
|
1713
1735
|
disabled,
|
|
@@ -1727,11 +1749,11 @@ var StandardTableRow = React.memo(function StandardTableRow(_a) {
|
|
|
1727
1749
|
stickyCheckboxColumn,
|
|
1728
1750
|
toggleSelected,
|
|
1729
1751
|
]);
|
|
1730
|
-
return (
|
|
1731
|
-
|
|
1732
|
-
|
|
1752
|
+
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
1753
|
+
React__namespace.createElement(TrWithHoverBackground, { hoverBackground: hoverBackground, background: background, focusBackground: focusBackground, borderLeft: isExpanded ? tableBorderLeftExpanded : tableBorderLeft, ref: trRef }, visible || alwaysVisible || isExpanded ? (content) : (React__namespace.createElement("td", { colSpan: totalNumColumns, style: { height: "var(--current-row-height)" } }))),
|
|
1754
|
+
React__namespace.createElement(StandardTableRowExpansion, { item: item })));
|
|
1733
1755
|
});
|
|
1734
|
-
var getBackgroundColor
|
|
1756
|
+
var getBackgroundColor = function (resolvedBackground, isSelected, isExpanded) {
|
|
1735
1757
|
if (resolvedBackground) {
|
|
1736
1758
|
return typeof resolvedBackground === "string"
|
|
1737
1759
|
? resolvedBackground
|
|
@@ -1776,18 +1798,19 @@ var columnHasSummaryCell = function (columnConfig) {
|
|
|
1776
1798
|
return Boolean(columnConfig.renderSummaryCell || columnConfig.summaryText);
|
|
1777
1799
|
};
|
|
1778
1800
|
|
|
1779
|
-
var css_248z
|
|
1780
|
-
var styles
|
|
1781
|
-
styleInject(css_248z
|
|
1801
|
+
var css_248z = ".StandardTableSummaryRow-module_summaryRow__1qAAJ td {\n border-top: 1px solid var(--lhds-color-ui-500);\n border-bottom: 1px solid var(--lhds-color-ui-500);\n }\n";
|
|
1802
|
+
var styles = {"summaryRow":"StandardTableSummaryRow-module_summaryRow__1qAAJ"};
|
|
1803
|
+
styleInject(css_248z);
|
|
1782
1804
|
|
|
1783
|
-
var SummaryCell =
|
|
1805
|
+
var SummaryCell = React__namespace.memo(function SummaryCell(_a) {
|
|
1784
1806
|
var columnId = _a.columnId, items = _a.items, disableBorderLeft = _a.disableBorderLeft, borderFromGroup = _a.borderFromGroup, colSpan = _a.colSpan;
|
|
1785
1807
|
var stickyPropsPerColumnContext = useStickyPropsPerColumnContext();
|
|
1786
1808
|
var _b = useColumnConfigById(columnId), renderSummaryCell = _b.renderSummaryCell, summaryText = _b.summaryText, borderLeft = _b.borderLeft, zIndex = _b.zIndex, width = _b.width, minWidth = _b.minWidth, justifyContentCell = _b.justifyContentCell;
|
|
1787
1809
|
var activeBorderLeft = getCellBorder(borderFromGroup, disableBorderLeft, borderLeft);
|
|
1788
1810
|
var stickyProps = stickyPropsPerColumnContext[columnId];
|
|
1789
1811
|
var currentZIndex = stickyProps.sticky
|
|
1790
|
-
? zIndex !== null && zIndex !== void 0 ? zIndex : "var(--swui-sticky-column-z-index)"
|
|
1812
|
+
? zIndex !== null && zIndex !== void 0 ? zIndex : "var(--swui-sticky-column-z-index)"
|
|
1813
|
+
: zIndex !== null && zIndex !== void 0 ? zIndex : 1;
|
|
1791
1814
|
var shadow = stickyProps.sticky &&
|
|
1792
1815
|
stickyProps.type === "last-group" &&
|
|
1793
1816
|
stickyProps.isFirstColumnInLastGroup
|
|
@@ -1803,7 +1826,7 @@ var SummaryCell = React.memo(function SummaryCell(_a) {
|
|
|
1803
1826
|
renderSummaryCell,
|
|
1804
1827
|
text,
|
|
1805
1828
|
]);
|
|
1806
|
-
return (
|
|
1829
|
+
return (React__namespace.createElement("td", { colSpan: colSpan, style: {
|
|
1807
1830
|
borderLeft: activeBorderLeft,
|
|
1808
1831
|
position: stickyProps.sticky ? "sticky" : undefined,
|
|
1809
1832
|
left: stickyProps.sticky ? stickyProps.left : undefined,
|
|
@@ -1812,8 +1835,8 @@ var SummaryCell = React.memo(function SummaryCell(_a) {
|
|
|
1812
1835
|
zIndex: currentZIndex,
|
|
1813
1836
|
height: "var(--current-row-height)",
|
|
1814
1837
|
} },
|
|
1815
|
-
|
|
1816
|
-
|
|
1838
|
+
React__namespace.createElement(core.Row, { width: width, minWidth: minWidth, height: "inherit", overflow: "hidden", justifyContent: justifyContentCell, alignItems: "center" }, renderSummaryCell ? (renderResult) : (React__namespace.createElement(core.Indent, null,
|
|
1839
|
+
React__namespace.createElement(core.Text, { variant: "bold" }, text))))));
|
|
1817
1840
|
});
|
|
1818
1841
|
|
|
1819
1842
|
var getColumnsLimitedWithColSpan = function (columnOrder, columns) {
|
|
@@ -1830,18 +1853,18 @@ var getColumnsLimitedWithColSpan = function (columnOrder, columns) {
|
|
|
1830
1853
|
return list;
|
|
1831
1854
|
};
|
|
1832
1855
|
|
|
1833
|
-
var StandardTableSummaryRow =
|
|
1856
|
+
var StandardTableSummaryRow = React__namespace.memo(function StandardTableSummaryRow(_a) {
|
|
1834
1857
|
var items = _a.items;
|
|
1835
1858
|
var groupConfigsAndIds = useGroupConfigsAndIdsForRows();
|
|
1836
1859
|
var _b = useStandardTableConfig(), showRowCheckbox = _b.showRowCheckbox, enableExpandCollapse = _b.enableExpandCollapse, columns = _b.columns;
|
|
1837
|
-
return (
|
|
1838
|
-
enableExpandCollapse &&
|
|
1839
|
-
showRowCheckbox &&
|
|
1860
|
+
return (React__namespace.createElement("tr", { className: styles.summaryRow },
|
|
1861
|
+
enableExpandCollapse && React__namespace.createElement("td", null),
|
|
1862
|
+
showRowCheckbox && React__namespace.createElement("td", null),
|
|
1840
1863
|
groupConfigsAndIds.map(function (_a, groupIndex) {
|
|
1841
1864
|
var groupConfig = _a.groupConfig, groupId = _a.groupId;
|
|
1842
|
-
return (
|
|
1865
|
+
return (React__namespace.createElement(React__namespace.Fragment, { key: groupId }, getColumnsLimitedWithColSpan(groupConfig.columnOrder, columns).map(function (_a, index) {
|
|
1843
1866
|
var columnId = _a.columnId, colSpan = _a.colSpan;
|
|
1844
|
-
return (
|
|
1867
|
+
return (React__namespace.createElement(SummaryCell, { key: columnId, colSpan: colSpan, columnId: columnId, items: items, borderFromGroup: getCellBorderFromGroup(groupIndex, index, groupConfig.borderLeft), disableBorderLeft: groupIndex === 0 && index === 0 }));
|
|
1845
1868
|
})));
|
|
1846
1869
|
})));
|
|
1847
1870
|
});
|
|
@@ -1853,14 +1876,14 @@ var SummaryRowSwitcher = function SummaryRowSwitcher(_a) {
|
|
|
1853
1876
|
if (!visible) {
|
|
1854
1877
|
return null;
|
|
1855
1878
|
}
|
|
1856
|
-
return
|
|
1879
|
+
return React__namespace.createElement(StandardTableSummaryRow, { items: items });
|
|
1857
1880
|
};
|
|
1858
1881
|
|
|
1859
1882
|
var filterItemsOnEnabledCheckboxes = function (checkboxDisabledResolver) { return function (item) {
|
|
1860
|
-
return (checkboxDisabledResolver === null || checkboxDisabledResolver === void 0 ? void 0 : checkboxDisabledResolver(item)) ? false :
|
|
1883
|
+
return (checkboxDisabledResolver === null || checkboxDisabledResolver === void 0 ? void 0 : checkboxDisabledResolver(item)) ? false : true ;
|
|
1861
1884
|
}; };
|
|
1862
1885
|
|
|
1863
|
-
var StandardTableRowList =
|
|
1886
|
+
var StandardTableRowList = React__namespace.memo(function StandardTableRowList(_a) {
|
|
1864
1887
|
var items = _a.items, _b = _a.colIndexOffset, colIndexOffset = _b === void 0 ? 0 : _b, _c = _a.rowIndexOffset, rowIndexOffset = _c === void 0 ? 0 : _c;
|
|
1865
1888
|
/**
|
|
1866
1889
|
* This ref is used to force rerender of rows.
|
|
@@ -1879,7 +1902,7 @@ var StandardTableRowList = React.memo(function StandardTableRowList(_a) {
|
|
|
1879
1902
|
if (!valueResolver) {
|
|
1880
1903
|
return items;
|
|
1881
1904
|
}
|
|
1882
|
-
var sortedList =
|
|
1905
|
+
var sortedList = __spreadArray([], items, true);
|
|
1883
1906
|
sortedList.sort(function (a, b) {
|
|
1884
1907
|
return multitypeComparator(valueResolver(a), valueResolver(b));
|
|
1885
1908
|
});
|
|
@@ -1912,47 +1935,47 @@ var StandardTableRowList = React.memo(function StandardTableRowList(_a) {
|
|
|
1912
1935
|
document.removeEventListener("keydown", keyDown);
|
|
1913
1936
|
};
|
|
1914
1937
|
}, []);
|
|
1915
|
-
return (
|
|
1916
|
-
sortedItems.map(function (item, index) { return (
|
|
1917
|
-
|
|
1938
|
+
return (React__namespace.createElement(React__namespace.Fragment, { key: sortCounterRef.current },
|
|
1939
|
+
sortedItems.map(function (item, index) { return (React__namespace.createElement(StandardTableRow, { alwaysVisible: disableInfiniteList || sortedItems.length < 30, item: item, idListForEnabledItems: idListForEnabledItems, key: keyResolver(item), colIndexOffset: colIndexOffset, rowIndex: index + rowIndexOffset, numRows: sortedItems.length, shiftPressedRef: shiftPressedRef })); }),
|
|
1940
|
+
React__namespace.createElement(SummaryRowSwitcher, { items: sortedItems })));
|
|
1918
1941
|
});
|
|
1919
1942
|
|
|
1920
|
-
var StandardTableContent =
|
|
1943
|
+
var StandardTableContent = React__namespace.memo(function StandardTableContent(_a) {
|
|
1921
1944
|
var _b;
|
|
1922
1945
|
var error = _a.error, bannerError = _a.bannerError, loading = _a.loading, items = _a.items, _c = _a.noItemsLabel, noItemsLabel = _c === void 0 ? "There is no data available." : _c, noItemsContentRight = _a.noItemsContentRight, noItemsContentBottom = _a.noItemsContentBottom, noItemsHeader = _a.noItemsHeader, colIndexOffset = _a.colIndexOffset, rowIndexOffset = _a.rowIndexOffset, variant = _a.variant, errorLabel = _a.errorLabel;
|
|
1923
1946
|
var totalNumColumns = useTotalNumColumns();
|
|
1924
1947
|
if (bannerError) {
|
|
1925
|
-
return (
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1948
|
+
return (React__namespace.createElement("tbody", null,
|
|
1949
|
+
React__namespace.createElement("tr", null,
|
|
1950
|
+
React__namespace.createElement("td", { colSpan: totalNumColumns },
|
|
1951
|
+
React__namespace.createElement(core.Spacing, { num: 4, justifyContent: "center" },
|
|
1952
|
+
React__namespace.createElement(core.Box, { alignItems: "center" },
|
|
1953
|
+
React__namespace.createElement(elements.ResultListBanner, { bannerState: bannerError, variant: "error" })))))));
|
|
1931
1954
|
}
|
|
1932
1955
|
if (error || errorLabel) {
|
|
1933
|
-
return (
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1956
|
+
return (React__namespace.createElement("tbody", null,
|
|
1957
|
+
React__namespace.createElement("tr", null,
|
|
1958
|
+
React__namespace.createElement("td", { colSpan: totalNumColumns },
|
|
1959
|
+
React__namespace.createElement(core.Spacing, { num: 4, justifyContent: "center" },
|
|
1960
|
+
React__namespace.createElement(core.Box, { alignItems: "center" },
|
|
1961
|
+
React__namespace.createElement(elements.Banner, { headerText: (_b = (error ? error.message : errorLabel)) !== null && _b !== void 0 ? _b : "Unknown error", variant: "error" })))))));
|
|
1939
1962
|
}
|
|
1940
1963
|
if (loading) {
|
|
1941
|
-
return (
|
|
1942
|
-
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
1964
|
+
return (React__namespace.createElement("tbody", null,
|
|
1965
|
+
React__namespace.createElement("tr", null,
|
|
1966
|
+
React__namespace.createElement("td", { colSpan: totalNumColumns },
|
|
1967
|
+
React__namespace.createElement(core.Spacing, { num: 4 },
|
|
1968
|
+
React__namespace.createElement(panels.LoadingScreen, null))))));
|
|
1946
1969
|
}
|
|
1947
1970
|
if (!items || !items.length) {
|
|
1948
|
-
return (
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
}
|
|
1954
|
-
return (
|
|
1955
|
-
|
|
1971
|
+
return (React__namespace.createElement("tbody", null,
|
|
1972
|
+
React__namespace.createElement("tr", null,
|
|
1973
|
+
React__namespace.createElement("td", { colSpan: totalNumColumns },
|
|
1974
|
+
React__namespace.createElement(core.Row, { spacing: 4, justifyContent: "center" },
|
|
1975
|
+
React__namespace.createElement(elements.Banner, { text: noItemsLabel, headerText: noItemsHeader, contentRight: noItemsContentRight, variant: "info" }, noItemsContentBottom))))));
|
|
1976
|
+
}
|
|
1977
|
+
return (React__namespace.createElement("tbody", null,
|
|
1978
|
+
React__namespace.createElement(StandardTableRowList, { variant: variant, items: items, colIndexOffset: colIndexOffset, rowIndexOffset: rowIndexOffset })));
|
|
1956
1979
|
});
|
|
1957
1980
|
|
|
1958
1981
|
var useTableHeadCheckbox = function (items) {
|
|
@@ -2036,7 +2059,7 @@ var useTableSortHeader = function (columnId) {
|
|
|
2036
2059
|
}, [sortBy, desc, actions, columnId, dispatch]);
|
|
2037
2060
|
};
|
|
2038
2061
|
|
|
2039
|
-
var StandardTableHeadItem =
|
|
2062
|
+
var StandardTableHeadItem = React__namespace.memo(function StandardTableHeaderItem(_a) {
|
|
2040
2063
|
var columnId = _a.columnId, borderFromGroup = _a.borderFromGroup, disableBorderLeft = _a.disableBorderLeft, stickyHeader = _a.stickyHeader, top = _a.top;
|
|
2041
2064
|
var _b = useColumnConfigById(columnId), justifyContentHeader = _b.justifyContentHeader, columnLabel = _b.columnLabel, borderLeft = _b.borderLeft, infoIconTooltipText = _b.infoIconTooltipText, background = _b.background, zIndex = _b.zIndex, sortOrderIconVariant = _b.sortOrderIconVariant, width = _b.width, minWidth = _b.minWidth;
|
|
2042
2065
|
var _c = useStandardTableConfig(), disableSorting = _c.disableSorting, defaultSortOrderIconVariant = _c.sortOrderIconVariant;
|
|
@@ -2047,7 +2070,7 @@ var StandardTableHeadItem = React.memo(function StandardTableHeaderItem(_a) {
|
|
|
2047
2070
|
: formatColumnIdToHeaderCellLabel(columnId);
|
|
2048
2071
|
var activeBorderLeft = getCellBorder(borderFromGroup, disableBorderLeft, borderLeft);
|
|
2049
2072
|
var stickyProps = stickyPropsPerColumnContext[columnId];
|
|
2050
|
-
return (
|
|
2073
|
+
return (React__namespace.createElement("th", { style: {
|
|
2051
2074
|
background: background !== null && background !== void 0 ? background : "white",
|
|
2052
2075
|
borderLeft: activeBorderLeft,
|
|
2053
2076
|
position: stickyHeader || stickyProps.sticky ? "sticky" : undefined,
|
|
@@ -2077,10 +2100,10 @@ var StandardTableHeadItem = React.memo(function StandardTableHeaderItem(_a) {
|
|
|
2077
2100
|
width: width,
|
|
2078
2101
|
minWidth: minWidth,
|
|
2079
2102
|
} },
|
|
2080
|
-
|
|
2103
|
+
React__namespace.createElement(TableHeadItem, { width: "inherit", minWidth: "inherit", arrow: !disableSorting && label ? arrow : undefined, onClick: !disableSorting ? onClickColumnHead : undefined, label: label, infoIconTooltipText: infoIconTooltipText, alignRight: justifyContentHeader === "flex-end", sortOrderIconVariant: sortOrderIconVariant !== null && sortOrderIconVariant !== void 0 ? sortOrderIconVariant : defaultSortOrderIconVariant })));
|
|
2081
2104
|
});
|
|
2082
2105
|
|
|
2083
|
-
var getTopPosition
|
|
2106
|
+
var getTopPosition = function (headerRowOffsetTop, columnGroupOrder, height, stickyHeader) {
|
|
2084
2107
|
if (headerRowOffsetTop && columnGroupOrder !== undefined) {
|
|
2085
2108
|
return "calc(" + headerRowOffsetTop + " + " + height + ")";
|
|
2086
2109
|
}
|
|
@@ -2095,7 +2118,7 @@ var getTopPosition$1 = function (headerRowOffsetTop, columnGroupOrder, height, s
|
|
|
2095
2118
|
}
|
|
2096
2119
|
return undefined;
|
|
2097
2120
|
};
|
|
2098
|
-
var StandardTableHeadRow =
|
|
2121
|
+
var StandardTableHeadRow = React__namespace.memo(function StandardTableHeadRow(_a) {
|
|
2099
2122
|
var items = _a.items, _b = _a.height, height = _b === void 0 ? defaultTableRowHeight : _b;
|
|
2100
2123
|
var groupConfigsAndIds = useGroupConfigsAndIdsForRows();
|
|
2101
2124
|
var _c = useStandardTableConfig(), showHeaderCheckbox = _c.showHeaderCheckbox, showHeaderExpandCollapse = _c.showHeaderExpandCollapse, enableExpandCollapse = _c.enableExpandCollapse, rowIndent = _c.rowIndent, headerRowOffsetTop = _c.headerRowOffsetTop, zIndex = _c.zIndex, stickyHeader = _c.stickyHeader, stickyCheckboxColumn = _c.stickyCheckboxColumn;
|
|
@@ -2111,7 +2134,7 @@ var StandardTableHeadRow = React.memo(function StandardTableHeadRow(_a) {
|
|
|
2111
2134
|
: stickyHeader
|
|
2112
2135
|
? "var(--swui-sticky-header-z-index)"
|
|
2113
2136
|
: zIndex),
|
|
2114
|
-
top: getTopPosition
|
|
2137
|
+
top: getTopPosition(headerRowOffsetTop, columnGroupOrder, height, stickyHeader),
|
|
2115
2138
|
background: stickyHeader || stickyCheckboxColumn ? "white" : undefined,
|
|
2116
2139
|
position: stickyHeader || stickyCheckboxColumn ? "sticky" : undefined,
|
|
2117
2140
|
boxShadow: stickyHeader && stickyCheckboxColumn
|
|
@@ -2122,27 +2145,27 @@ var StandardTableHeadRow = React.memo(function StandardTableHeadRow(_a) {
|
|
|
2122
2145
|
? "var(--swui-sticky-header-shadow)"
|
|
2123
2146
|
: undefined,
|
|
2124
2147
|
};
|
|
2125
|
-
return (
|
|
2126
|
-
rowIndent && (
|
|
2127
|
-
|
|
2128
|
-
enableExpandCollapse && (
|
|
2129
|
-
|
|
2130
|
-
showHeaderCheckbox && (
|
|
2148
|
+
return (React__namespace.createElement(TrWithHoverBackground, { height: height, borderLeft: tableBorderLeft },
|
|
2149
|
+
rowIndent && (React__namespace.createElement("th", { style: stickyHeaderStyle },
|
|
2150
|
+
React__namespace.createElement(core.Row, { indent: rowIndent }))),
|
|
2151
|
+
enableExpandCollapse && (React__namespace.createElement("th", { style: __assign(__assign({}, stickyHeaderStyle), { left: "0px", textAlign: "left" }) },
|
|
2152
|
+
React__namespace.createElement(core.Row, { width: "var(--swui-expand-cell-width)", minWidth: "var(--swui-expand-cell-width)", alignItems: "center", justifyContent: "center" }, showHeaderExpandCollapse && (React__namespace.createElement(elements.FlatButton, { size: "small", leftIcon: allItemsAreExpanded ? faChevronDown.faChevronDown : faChevronRight.faChevronRight, onClick: toggleExpanded }))))),
|
|
2153
|
+
showHeaderCheckbox && (React__namespace.createElement("th", { style: __assign(__assign({}, stickyHeaderStyle), { overflow: "hidden", left: stickyCheckboxColumn && enableExpandCollapse
|
|
2131
2154
|
? "var(--swui-expand-cell-width)"
|
|
2132
2155
|
: stickyCheckboxColumn
|
|
2133
2156
|
? "0px"
|
|
2134
2157
|
: undefined }) },
|
|
2135
|
-
|
|
2136
|
-
|
|
2158
|
+
React__namespace.createElement(core.Row, { width: "var(--swui-checkbox-cell-width)", minWidth: "var(--swui-checkbox-cell-width)", alignItems: "center", justifyContent: "center" },
|
|
2159
|
+
React__namespace.createElement(forms.Checkbox, { size: "small", disabled: checkboxDisabled, value: allItemsAreSelected, indeterminate: !selectionIsEmpty && !allItemsAreSelected, onValueChange: onClickCheckbox })))),
|
|
2137
2160
|
groupConfigsAndIds.map(function (_a, groupIndex) {
|
|
2138
2161
|
var groupConfig = _a.groupConfig, groupId = _a.groupId;
|
|
2139
|
-
return (
|
|
2140
|
-
return (
|
|
2162
|
+
return (React__namespace.createElement(React__namespace.Fragment, { key: groupId }, groupConfig.columnOrder.map(function (columnId, index) {
|
|
2163
|
+
return (React__namespace.createElement(StandardTableHeadItem, { columnId: columnId, key: columnId, borderFromGroup: getCellBorderFromGroup(groupIndex, index, groupConfig.borderLeft), disableBorderLeft: groupIndex === 0 && index === 0, stickyHeader: stickyHeader, top: stickyHeaderStyle.top }));
|
|
2141
2164
|
})));
|
|
2142
2165
|
}),
|
|
2143
|
-
rowIndent && (
|
|
2144
|
-
|
|
2145
|
-
|
|
2166
|
+
rowIndent && (React__namespace.createElement("th", { style: stickyHeaderStyle },
|
|
2167
|
+
React__namespace.createElement(core.Row, { indent: rowIndent }))),
|
|
2168
|
+
React__namespace.createElement("th", { style: stickyHeaderStyle })));
|
|
2146
2169
|
});
|
|
2147
2170
|
|
|
2148
2171
|
var ColGroups = function () {
|
|
@@ -2150,25 +2173,25 @@ var ColGroups = function () {
|
|
|
2150
2173
|
var groupConfigsAndIds = useGroupConfigsAndIdsForRows();
|
|
2151
2174
|
var hasExtraColGroup = config.enableExpandCollapse || config.showRowCheckbox;
|
|
2152
2175
|
var rowIndent = core.booleanOrNumberToNumber(config.rowIndent);
|
|
2153
|
-
return (
|
|
2154
|
-
rowIndent ? (
|
|
2155
|
-
|
|
2156
|
-
hasExtraColGroup && (
|
|
2157
|
-
config.enableExpandCollapse && (
|
|
2158
|
-
config.showRowCheckbox && (
|
|
2176
|
+
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
2177
|
+
rowIndent ? (React__namespace.createElement("colgroup", null,
|
|
2178
|
+
React__namespace.createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * " + rowIndent + ")" } }))) : null,
|
|
2179
|
+
hasExtraColGroup && (React__namespace.createElement("colgroup", null,
|
|
2180
|
+
config.enableExpandCollapse && (React__namespace.createElement("col", { style: { width: "var(--swui-expand-cell-width)" } })),
|
|
2181
|
+
config.showRowCheckbox && (React__namespace.createElement("col", { style: { width: "var(--swui-checkbox-cell-width)" } })))),
|
|
2159
2182
|
groupConfigsAndIds.map(function (_a) {
|
|
2160
2183
|
var groupConfig = _a.groupConfig, groupId = _a.groupId;
|
|
2161
|
-
return (
|
|
2184
|
+
return (React__namespace.createElement("colgroup", { key: groupId }, groupConfig.columnOrder.map(function (columnId) { return (React__namespace.createElement("col", { key: columnId, style: {
|
|
2162
2185
|
width: config.columns[columnId].width,
|
|
2163
2186
|
minWidth: config.columns[columnId].minWidth,
|
|
2164
2187
|
} })); })));
|
|
2165
2188
|
}),
|
|
2166
|
-
rowIndent ? (
|
|
2167
|
-
|
|
2189
|
+
rowIndent ? (React__namespace.createElement("colgroup", null,
|
|
2190
|
+
React__namespace.createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * " + rowIndent + ")" } }))) : null));
|
|
2168
2191
|
};
|
|
2169
2192
|
|
|
2170
2193
|
var StandardTable = function StandardTable(_a) {
|
|
2171
|
-
var tableContext = _a.tableContext, config = _a.config
|
|
2194
|
+
var tableContext = _a.tableContext, config = _a.config; _a.columnOrder; var columnGroupOrder = _a.columnGroupOrder, tableId = _a.tableId, _b = _a.variant, variant = _b === void 0 ? "standard" : _b, onKeyDown = _a.onKeyDown, props = __rest(_a, ["tableContext", "config", "columnOrder", "columnGroupOrder", "tableId", "variant", "onKeyDown"]);
|
|
2172
2195
|
var generatedTableId = core.useDomId();
|
|
2173
2196
|
var initialSortOrderDesc = config.initialSortOrderDesc, initialSortOrder = config.initialSortOrder, enableExpandCollapse = config.enableExpandCollapse, stickyCheckboxColumn = config.stickyCheckboxColumn;
|
|
2174
2197
|
var localTableContext = useLocalStateTableContext(tableId !== null && tableId !== void 0 ? tableId : generatedTableId, createStandardTableInitialState(initialSortOrder, initialSortOrderDesc)).tableContext;
|
|
@@ -2201,9 +2224,9 @@ var StandardTable = function StandardTable(_a) {
|
|
|
2201
2224
|
}
|
|
2202
2225
|
}, [config]);
|
|
2203
2226
|
if (validationError) {
|
|
2204
|
-
return
|
|
2227
|
+
return React__namespace.createElement(panels.ErrorScreen, { text: validationError.message });
|
|
2205
2228
|
}
|
|
2206
|
-
return (
|
|
2229
|
+
return (React__namespace.createElement("table", { className: cx__default["default"](styles$3.standardTable, styles$3[variant]), style: {
|
|
2207
2230
|
width: "100%",
|
|
2208
2231
|
isolation: "isolate",
|
|
2209
2232
|
"--current-left-offset": enableExpandCollapse && stickyCheckboxColumn
|
|
@@ -2214,25 +2237,26 @@ var StandardTable = function StandardTable(_a) {
|
|
|
2214
2237
|
? "var(--swui-expand-cell-width)"
|
|
2215
2238
|
: "0px",
|
|
2216
2239
|
} },
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
? columnGroupOrder !== null && columnGroupOrder !== void 0 ? columnGroupOrder : config.columnGroupOrder
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2240
|
+
React__namespace.createElement(StickyPropsPerColumnContext.Provider, { value: stickyPropsPerColumnContext },
|
|
2241
|
+
React__namespace.createElement(TotalNumColumnsContext.Provider, { value: totalNumColumns },
|
|
2242
|
+
React__namespace.createElement(StandardTableVariantContext.Provider, { value: variant },
|
|
2243
|
+
React__namespace.createElement(StandardTableTableIdContext.Provider, { value: tableId !== null && tableId !== void 0 ? tableId : generatedTableId },
|
|
2244
|
+
React__namespace.createElement(StandardTableStateContext.Provider, { value: state },
|
|
2245
|
+
React__namespace.createElement(StandardTableActionsContext.Provider, { value: actionsContext },
|
|
2246
|
+
React__namespace.createElement(StandardTableConfigContext.Provider, { value: config },
|
|
2247
|
+
React__namespace.createElement(GroupConfigsAndIdsForRowsContext.Provider, { value: groupConfigsForRows },
|
|
2248
|
+
React__namespace.createElement(ColumnIndexPerColumnIdContext.Provider, { value: columnIndexPerColumnId },
|
|
2249
|
+
React__namespace.createElement(StandardTableUsingColumnGroupsContext.Provider, { value: usingColumnGroups },
|
|
2250
|
+
React__namespace.createElement(StandardTableColumnGroupOrderContext.Provider, { value: "columnGroupOrder" in config
|
|
2251
|
+
? columnGroupOrder !== null && columnGroupOrder !== void 0 ? columnGroupOrder : config.columnGroupOrder
|
|
2252
|
+
: columnGroupOrder },
|
|
2253
|
+
React__namespace.createElement(ColGroups, null),
|
|
2254
|
+
React__namespace.createElement(OnKeyDownContext.Provider, { value: onKeyDown },
|
|
2255
|
+
React__namespace.createElement("thead", null,
|
|
2232
2256
|
(columnGroupOrder ||
|
|
2233
|
-
"columnGroupOrder" in config) && (
|
|
2234
|
-
|
|
2235
|
-
|
|
2257
|
+
"columnGroupOrder" in config) && (React__namespace.createElement(ColumnGroupRow, { height: "var(--current-row-height)" })),
|
|
2258
|
+
React__namespace.createElement(StandardTableHeadRow, { items: props.items, height: "var(--current-row-height)" })),
|
|
2259
|
+
React__namespace.createElement(StandardTableContent, __assign({ variant: variant }, props))))))))))))))));
|
|
2236
2260
|
};
|
|
2237
2261
|
|
|
2238
2262
|
var createColumnConfig = function (itemValueResolver, options) {
|
|
@@ -2241,8 +2265,8 @@ var createColumnConfig = function (itemValueResolver, options) {
|
|
|
2241
2265
|
|
|
2242
2266
|
var createStandardEditableTextCell = function () { return function (_a) {
|
|
2243
2267
|
var label = _a.label, _b = _a.gridCell, editorValue = _b.editorValue, isEditing = _b.isEditing, setEditorValue = _b.setEditorValue, stopEditingAndRevert = _b.stopEditingAndRevert, lastKeyEvent = _b.lastKeyEvent, stopEditing = _b.stopEditing, stopEditingAndMove = _b.stopEditingAndMove;
|
|
2244
|
-
return isEditing ? (
|
|
2245
|
-
|
|
2268
|
+
return isEditing ? (React__namespace.createElement(forms.TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (React__namespace.createElement(core.Indent, null,
|
|
2269
|
+
React__namespace.createElement(core.Text, { color: "var(--swui-primary-action-color)" }, label)));
|
|
2246
2270
|
}; };
|
|
2247
2271
|
|
|
2248
2272
|
var createEditableTextCellWithStatus = function (warningOnEmpty, crudStatusProvider, modifiedFieldProvider) { return function (_a) {
|
|
@@ -2254,8 +2278,8 @@ var createEditableTextCellWithStatus = function (warningOnEmpty, crudStatusProvi
|
|
|
2254
2278
|
var modifiedField = modifiedFieldProvider
|
|
2255
2279
|
? modifiedFieldProvider(item)
|
|
2256
2280
|
: undefined;
|
|
2257
|
-
return isEditable && isEditing ? (
|
|
2258
|
-
|
|
2281
|
+
return isEditable && isEditing ? (React__namespace.createElement(forms.TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (React__namespace.createElement(core.Indent, { row: true, alignItems: "center" },
|
|
2282
|
+
React__namespace.createElement(ModifiedField, { value: label, modifiedField: modifiedField, crudStatus: crudStatus, isEditable: isEditable, warningOnEmpty: warnOnEmpty })));
|
|
2259
2283
|
}; };
|
|
2260
2284
|
|
|
2261
2285
|
exports.CrudStatusIndicator = CrudStatusIndicator;
|