@rhc-shared-components/packages-table 1.0.3 → 2.0.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/components/ExcludedPackagesTable.d.ts +6 -6
- package/dist/components/FilterInput.d.ts +6 -6
- package/dist/components/FilterableTable.d.ts +19 -19
- package/dist/components/Select.d.ts +9 -9
- package/dist/components/ToggleGroup.d.ts +10 -10
- package/dist/components/VulnerabilitiesTable.d.ts +7 -7
- package/dist/index.d.ts +14 -14
- package/dist/index.js +816 -971
- package/dist/index.modern.js +602 -709
- package/dist/index.test.d.ts +1 -1
- package/package.json +9 -11
- package/CHANGELOG.md +0 -79
package/dist/index.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
1
2
|
var React = require('react');
|
|
2
3
|
var reactCore = require('@patternfly/react-core');
|
|
3
4
|
var lodash = require('lodash');
|
|
5
|
+
var KeyboardHandler = require('@patternfly/react-core/dist/esm/helpers/KeyboardHandler');
|
|
6
|
+
var ouia = require('@patternfly/react-core/dist/esm/helpers/OUIA/ouia');
|
|
4
7
|
var helpers = require('@patternfly/react-core/dist/esm/helpers');
|
|
5
8
|
var mergeWith = require('lodash/mergeWith');
|
|
6
9
|
var Tooltip = require('@patternfly/react-core/dist/esm/components/Tooltip');
|
|
@@ -35,10 +38,27 @@ function _interopNamespace(e) {
|
|
|
35
38
|
}
|
|
36
39
|
|
|
37
40
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
38
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
39
41
|
var mergeWith__default = /*#__PURE__*/_interopDefaultLegacy(mergeWith);
|
|
40
42
|
|
|
41
|
-
var css_248z = ".vulnerabilities-table .impact-icon {\n font-size: 1.5rem;\n padding-right: 0.5rem;\n}\n.vulnerabilities-table .impact-icon.color-critical {\n color: #a30000;\n}\n.vulnerabilities-table .impact-icon.color-important {\n color: #ec7a08;\n}\n.vulnerabilities-table .impact-icon.color-moderate {\n color: #f5c12e;\n}\n.vulnerabilities-table .impact-icon.color-low {\n color: #777;\n}\n.vulnerabilities-table__affected-packages-cell {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.vulnerabilities-table__impact-cell {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n}\n\n.filterable-table {\n padding-bottom: var(--pf-v5-global--spacer--lg);\n}\n.filterable-table__bottom-pagination[class] {\n margin-top: 1rem;\n}\n.filterable-table .pf-v5-c-
|
|
43
|
+
var css_248z = ".vulnerabilities-table .impact-icon {\n font-size: 1.5rem;\n padding-right: 0.5rem;\n}\n.vulnerabilities-table .impact-icon.color-critical {\n color: #a30000;\n}\n.vulnerabilities-table .impact-icon.color-important {\n color: #ec7a08;\n}\n.vulnerabilities-table .impact-icon.color-moderate {\n color: #f5c12e;\n}\n.vulnerabilities-table .impact-icon.color-low {\n color: #777;\n}\n.vulnerabilities-table__affected-packages-cell {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.vulnerabilities-table__impact-cell {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n}\n\n.filterable-table {\n padding-bottom: var(--pf-v5-global--spacer--lg);\n}\n.filterable-table__bottom-pagination[class] {\n margin-top: 1rem;\n}\n.filterable-table .pf-v5-c-toolbar__content {\n --pf-v5-c-toolbar__content--PaddingRight: 0;\n --pf-v5-c-toolbar__content--PaddingLeft: 0;\n}\n.filterable-table .pf-v5-c-input-group__text {\n --pf-v5-c-input-group__text--PaddingRight: 0;\n}\n.filterable-table .pf-v5-c-pagination.pf-m-bottom {\n --pf-v5-c-pagination--m-bottom--md--PaddingRight: 0;\n}\n\n.packages-table .pf-v5-c-tabs__item > button {\n padding: 1rem 1.5rem;\n}\n.packages-table__excluded-packages-disclaimer {\n margin: 1rem 0 0 0.5rem;\n}\n\n.filter-input {\n width: 18rem;\n}";
|
|
44
|
+
|
|
45
|
+
function _extends() {
|
|
46
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
47
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
48
|
+
var t = arguments[e];
|
|
49
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
50
|
+
}
|
|
51
|
+
return n;
|
|
52
|
+
}, _extends.apply(null, arguments);
|
|
53
|
+
}
|
|
54
|
+
function _inheritsLoose(t, o) {
|
|
55
|
+
t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
|
|
56
|
+
}
|
|
57
|
+
function _setPrototypeOf(t, e) {
|
|
58
|
+
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
|
|
59
|
+
return t.__proto__ = e, t;
|
|
60
|
+
}, _setPrototypeOf(t, e);
|
|
61
|
+
}
|
|
42
62
|
|
|
43
63
|
/******************************************************************************
|
|
44
64
|
Copyright (c) Microsoft Corporation.
|
|
@@ -54,103 +74,47 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
|
54
74
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
55
75
|
PERFORMANCE OF THIS SOFTWARE.
|
|
56
76
|
***************************************************************************** */
|
|
57
|
-
function __rest
|
|
77
|
+
function __rest(s, e) {
|
|
58
78
|
var t = {};
|
|
59
|
-
|
|
60
|
-
for (var p in s) {
|
|
61
|
-
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
62
|
-
}
|
|
63
|
-
|
|
79
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
64
80
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
65
81
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
66
82
|
}
|
|
67
83
|
return t;
|
|
68
84
|
}
|
|
69
|
-
|
|
70
85
|
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
71
86
|
var e = new Error(message);
|
|
72
87
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
73
88
|
};
|
|
74
89
|
|
|
75
|
-
function _inheritsLoose(subClass, superClass) {
|
|
76
|
-
subClass.prototype = Object.create(superClass.prototype);
|
|
77
|
-
subClass.prototype.constructor = subClass;
|
|
78
|
-
|
|
79
|
-
_setPrototypeOf(subClass, superClass);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
function _setPrototypeOf(o, p) {
|
|
83
|
-
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
|
84
|
-
o.__proto__ = p;
|
|
85
|
-
return o;
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
return _setPrototypeOf(o, p);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
/*! *****************************************************************************
|
|
92
|
-
Copyright (c) Microsoft Corporation.
|
|
93
|
-
|
|
94
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
95
|
-
purpose with or without fee is hereby granted.
|
|
96
|
-
|
|
97
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
98
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
99
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
100
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
101
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
102
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
103
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
104
|
-
***************************************************************************** */
|
|
105
|
-
function __rest(s, e) {
|
|
106
|
-
var t = {};
|
|
107
|
-
|
|
108
|
-
for (var p in s) {
|
|
109
|
-
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
113
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
114
|
-
}
|
|
115
|
-
return t;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
90
|
var currentId = 0;
|
|
119
91
|
/**
|
|
120
92
|
* Factory to create Icon class components for consumers
|
|
121
93
|
*/
|
|
122
|
-
|
|
123
94
|
function createIcon(_ref) {
|
|
124
95
|
var name = _ref.name,
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
96
|
+
_ref$xOffset = _ref.xOffset,
|
|
97
|
+
xOffset = _ref$xOffset === void 0 ? 0 : _ref$xOffset,
|
|
98
|
+
_ref$yOffset = _ref.yOffset,
|
|
99
|
+
yOffset = _ref$yOffset === void 0 ? 0 : _ref$yOffset,
|
|
100
|
+
width = _ref.width,
|
|
101
|
+
height = _ref.height,
|
|
102
|
+
svgPath = _ref.svgPath;
|
|
133
103
|
var _a;
|
|
134
|
-
|
|
135
104
|
return _a = /*#__PURE__*/function (_React$Component) {
|
|
136
|
-
_inheritsLoose(SVGIcon, _React$Component);
|
|
137
|
-
|
|
138
105
|
function SVGIcon() {
|
|
139
106
|
var _this;
|
|
140
|
-
|
|
141
107
|
_this = _React$Component.apply(this, arguments) || this;
|
|
142
108
|
_this.id = "icon-title-" + currentId++;
|
|
143
109
|
return _this;
|
|
144
110
|
}
|
|
145
|
-
|
|
111
|
+
_inheritsLoose(SVGIcon, _React$Component);
|
|
146
112
|
var _proto = SVGIcon.prototype;
|
|
147
|
-
|
|
148
113
|
_proto.render = function render() {
|
|
149
|
-
var
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
114
|
+
var _b = this.props,
|
|
115
|
+
title = _b.title,
|
|
116
|
+
className = _b.className,
|
|
117
|
+
props = __rest(_b, ["title", "className"]);
|
|
154
118
|
var classes = className ? "pf-v5-svg " + className : 'pf-v5-svg';
|
|
155
119
|
var hasTitle = Boolean(title);
|
|
156
120
|
var viewBox = [xOffset, yOffset, width, height].join(' ');
|
|
@@ -169,7 +133,6 @@ function createIcon(_ref) {
|
|
|
169
133
|
d: svgPath
|
|
170
134
|
}));
|
|
171
135
|
};
|
|
172
|
-
|
|
173
136
|
return SVGIcon;
|
|
174
137
|
}(React__namespace.Component), _a.displayName = name, _a;
|
|
175
138
|
}
|
|
@@ -187,47 +150,43 @@ var EllipsisVIcon$1 = EllipsisVIcon;
|
|
|
187
150
|
|
|
188
151
|
var ActionsColumnBase = function ActionsColumnBase(_a) {
|
|
189
152
|
var items = _a.items,
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
153
|
+
isDisabled = _a.isDisabled,
|
|
154
|
+
rowData = _a.rowData,
|
|
155
|
+
extraData = _a.extraData,
|
|
156
|
+
actionsToggle = _a.actionsToggle,
|
|
157
|
+
_a$popperProps = _a.popperProps,
|
|
158
|
+
popperProps = _a$popperProps === void 0 ? {
|
|
159
|
+
position: 'end',
|
|
160
|
+
direction: 'down'
|
|
161
|
+
} : _a$popperProps,
|
|
162
|
+
innerRef = _a.innerRef,
|
|
163
|
+
firstActionItemRef = _a.firstActionItemRef,
|
|
164
|
+
_a$isOnOpenChangeDisa = _a.isOnOpenChangeDisabled,
|
|
165
|
+
isOnOpenChangeDisabled = _a$isOnOpenChangeDisa === void 0 ? false : _a$isOnOpenChangeDisa,
|
|
166
|
+
props = __rest(_a, ["items", "isDisabled", "rowData", "extraData", "actionsToggle", "popperProps", "innerRef", "firstActionItemRef", "isOnOpenChangeDisabled"]);
|
|
205
167
|
var _React$useState = React__namespace.useState(false),
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
168
|
+
isOpen = _React$useState[0],
|
|
169
|
+
setIsOpen = _React$useState[1];
|
|
209
170
|
var onToggle = function onToggle() {
|
|
210
171
|
setIsOpen(!isOpen);
|
|
211
172
|
};
|
|
212
|
-
|
|
213
173
|
var onActionClick = function onActionClick(event, onClick) {
|
|
214
174
|
// Only prevent default if onClick is provided. This allows href support.
|
|
215
175
|
if (onClick) {
|
|
216
|
-
event.preventDefault();
|
|
217
|
-
|
|
176
|
+
event.preventDefault();
|
|
177
|
+
// tslint:disable-next-line:no-unused-expression
|
|
218
178
|
onClick(event, extraData && extraData.rowIndex, rowData, extraData);
|
|
219
179
|
}
|
|
220
180
|
};
|
|
221
|
-
|
|
222
181
|
return React__namespace.createElement(React__namespace.Fragment, null, items.filter(function (item) {
|
|
223
182
|
return item.isOutsideDropdown;
|
|
224
|
-
})
|
|
183
|
+
})
|
|
184
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
225
185
|
.map(function (_a, key) {
|
|
226
186
|
var title = _a.title,
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
187
|
+
itemKey = _a.itemKey,
|
|
188
|
+
_onClick = _a.onClick,
|
|
189
|
+
props = __rest(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
|
|
231
190
|
return typeof title === 'string' ? React__namespace.createElement(Button.Button, Object.assign({
|
|
232
191
|
onClick: function onClick(event) {
|
|
233
192
|
return onActionClick(event, _onClick);
|
|
@@ -268,21 +227,19 @@ var ActionsColumnBase = function ActionsColumnBase(_a) {
|
|
|
268
227
|
return !item.isOutsideDropdown;
|
|
269
228
|
}).map(function (_a, index) {
|
|
270
229
|
var title = _a.title,
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
230
|
+
itemKey = _a.itemKey,
|
|
231
|
+
_onClick2 = _a.onClick,
|
|
232
|
+
tooltipProps = _a.tooltipProps,
|
|
233
|
+
isSeparator = _a.isSeparator,
|
|
234
|
+
_a$shouldCloseOnClick = _a.shouldCloseOnClick,
|
|
235
|
+
shouldCloseOnClick = _a$shouldCloseOnClick === void 0 ? true : _a$shouldCloseOnClick,
|
|
236
|
+
props = __rest(_a, ["title", "itemKey", "onClick", "tooltipProps", "isSeparator", "shouldCloseOnClick"]);
|
|
279
237
|
if (isSeparator) {
|
|
280
238
|
return React__namespace.createElement(Divider.Divider, {
|
|
281
239
|
key: itemKey || index,
|
|
282
240
|
"data-key": itemKey || index
|
|
283
241
|
});
|
|
284
242
|
}
|
|
285
|
-
|
|
286
243
|
var item = React__namespace.createElement(Dropdown.DropdownItem, Object.assign({
|
|
287
244
|
onClick: function onClick(event) {
|
|
288
245
|
onActionClick(event, _onClick2);
|
|
@@ -293,7 +250,6 @@ var ActionsColumnBase = function ActionsColumnBase(_a) {
|
|
|
293
250
|
"data-key": itemKey || index,
|
|
294
251
|
ref: index === 0 ? firstActionItemRef : undefined
|
|
295
252
|
}), title);
|
|
296
|
-
|
|
297
253
|
if (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) {
|
|
298
254
|
return React__namespace.createElement(Tooltip.Tooltip, Object.assign({
|
|
299
255
|
key: itemKey || index
|
|
@@ -303,7 +259,6 @@ var ActionsColumnBase = function ActionsColumnBase(_a) {
|
|
|
303
259
|
}
|
|
304
260
|
}))));
|
|
305
261
|
};
|
|
306
|
-
|
|
307
262
|
var ActionsColumn = React__namespace.forwardRef(function (props, ref) {
|
|
308
263
|
return React__namespace.createElement(ActionsColumnBase, Object.assign({}, props, {
|
|
309
264
|
innerRef: ref
|
|
@@ -332,12 +287,10 @@ function css() {
|
|
|
332
287
|
var hasOwn = {}.hasOwnProperty;
|
|
333
288
|
[].slice.call(arguments).filter(Boolean).forEach(function (arg) {
|
|
334
289
|
var argType = typeof arg;
|
|
335
|
-
|
|
336
290
|
if (argType === 'string' || argType === 'number') {
|
|
337
291
|
classes.push(arg);
|
|
338
292
|
} else if (Array.isArray(arg) && arg.length) {
|
|
339
293
|
var inner = css.apply(void 0, arg);
|
|
340
|
-
|
|
341
294
|
if (inner) {
|
|
342
295
|
classes.push(inner);
|
|
343
296
|
}
|
|
@@ -445,13 +398,12 @@ var styles$1 = {
|
|
|
445
398
|
|
|
446
399
|
var CollapseColumn = function CollapseColumn(_a) {
|
|
447
400
|
var _a$className = _a.className,
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
401
|
+
className = _a$className === void 0 ? '' : _a$className,
|
|
402
|
+
_a$children = _a.children,
|
|
403
|
+
children = _a$children === void 0 ? null : _a$children,
|
|
404
|
+
isOpen = _a.isOpen,
|
|
405
|
+
onToggle = _a.onToggle,
|
|
406
|
+
props = __rest(_a, ["className", "children", "isOpen", "onToggle"]);
|
|
455
407
|
return React__namespace.createElement(React__namespace.Fragment, null, isOpen !== undefined && React__namespace.createElement(Button.Button, Object.assign({
|
|
456
408
|
className: css(className, isOpen && styles$1.modifiers.expanded)
|
|
457
409
|
}, props, {
|
|
@@ -478,11 +430,10 @@ var GripVerticalIcon$1 = GripVerticalIcon;
|
|
|
478
430
|
|
|
479
431
|
var DraggableCell = function DraggableCell(_a) {
|
|
480
432
|
var className = _a.className,
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
433
|
+
onClick = _a.onClick,
|
|
434
|
+
ariaLabel = _a['aria-label'],
|
|
435
|
+
id = _a.id,
|
|
436
|
+
props = __rest(_a, ["className", "onClick", 'aria-label', "id"]);
|
|
486
437
|
return React__namespace.createElement(Button.Button, Object.assign({
|
|
487
438
|
id: id,
|
|
488
439
|
variant: "plain",
|
|
@@ -531,14 +482,11 @@ var HelpIcon = createIcon(HelpIconConfig);
|
|
|
531
482
|
var HelpIcon$1 = HelpIcon;
|
|
532
483
|
|
|
533
484
|
var TableTextVariant;
|
|
534
|
-
|
|
535
485
|
(function (TableTextVariant) {
|
|
536
486
|
TableTextVariant["div"] = "div";
|
|
537
487
|
TableTextVariant["nav"] = "nav";
|
|
538
488
|
})(TableTextVariant || (TableTextVariant = {}));
|
|
539
|
-
|
|
540
489
|
var WrapModifier;
|
|
541
|
-
|
|
542
490
|
(function (WrapModifier) {
|
|
543
491
|
WrapModifier["wrap"] = "wrap";
|
|
544
492
|
WrapModifier["nowrap"] = "nowrap";
|
|
@@ -546,45 +494,39 @@ var WrapModifier;
|
|
|
546
494
|
WrapModifier["breakWord"] = "breakWord";
|
|
547
495
|
WrapModifier["fitContent"] = "fitContent";
|
|
548
496
|
})(WrapModifier || (WrapModifier = {}));
|
|
549
|
-
|
|
550
497
|
var TableText = function TableText(_a) {
|
|
551
498
|
var _a$children = _a.children,
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
499
|
+
children = _a$children === void 0 ? null : _a$children,
|
|
500
|
+
_a$className = _a.className,
|
|
501
|
+
className = _a$className === void 0 ? '' : _a$className,
|
|
502
|
+
_a$variant = _a.variant,
|
|
503
|
+
variant = _a$variant === void 0 ? 'span' : _a$variant,
|
|
504
|
+
_a$wrapModifier = _a.wrapModifier,
|
|
505
|
+
wrapModifier = _a$wrapModifier === void 0 ? null : _a$wrapModifier,
|
|
506
|
+
_a$tooltip = _a.tooltip,
|
|
507
|
+
tooltipProp = _a$tooltip === void 0 ? '' : _a$tooltip,
|
|
508
|
+
_a$tooltipProps = _a.tooltipProps,
|
|
509
|
+
tooltipProps = _a$tooltipProps === void 0 ? {} : _a$tooltipProps,
|
|
510
|
+
_a$onMouseEnter = _a.onMouseEnter,
|
|
511
|
+
onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
|
|
512
|
+
_a$focused = _a.focused,
|
|
513
|
+
focused = _a$focused === void 0 ? false : _a$focused,
|
|
514
|
+
_a$tooltipHasDefaultB = _a.tooltipHasDefaultBehavior,
|
|
515
|
+
tooltipHasDefaultBehavior = _a$tooltipHasDefaultB === void 0 ? false : _a$tooltipHasDefaultB,
|
|
516
|
+
props = __rest(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter", "focused", "tooltipHasDefaultBehavior"]);
|
|
571
517
|
var Component = variant;
|
|
572
518
|
var textRef = React__namespace.createRef();
|
|
573
|
-
|
|
574
519
|
var _React$useState = React__namespace.useState(tooltipProp),
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
520
|
+
tooltip = _React$useState[0],
|
|
521
|
+
setTooltip = _React$useState[1];
|
|
578
522
|
var onMouseEnter = function onMouseEnter(event) {
|
|
579
523
|
if (event.target.offsetWidth < event.target.scrollWidth) {
|
|
580
524
|
setTooltip(tooltipProp || event.target.innerText);
|
|
581
525
|
} else {
|
|
582
526
|
setTooltip('');
|
|
583
527
|
}
|
|
584
|
-
|
|
585
528
|
onMouseEnterProp(event);
|
|
586
529
|
};
|
|
587
|
-
|
|
588
530
|
var onFocus = function onFocus(element) {
|
|
589
531
|
if (element.offsetWidth < element.scrollWidth) {
|
|
590
532
|
setTooltip(tooltipProp || element.innerText);
|
|
@@ -592,7 +534,6 @@ var TableText = function TableText(_a) {
|
|
|
592
534
|
setTooltip('');
|
|
593
535
|
}
|
|
594
536
|
};
|
|
595
|
-
|
|
596
537
|
var text = React__namespace.createElement(Component, Object.assign({
|
|
597
538
|
ref: textRef,
|
|
598
539
|
onMouseEnter: !tooltipHasDefaultBehavior ? onMouseEnter : undefined,
|
|
@@ -618,13 +559,13 @@ TableText.displayName = 'TableText';
|
|
|
618
559
|
|
|
619
560
|
var HeaderCellInfoWrapper = function HeaderCellInfoWrapper(_ref) {
|
|
620
561
|
var children = _ref.children,
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
562
|
+
info = _ref.info,
|
|
563
|
+
className = _ref.className,
|
|
564
|
+
_ref$variant = _ref.variant,
|
|
565
|
+
variant = _ref$variant === void 0 ? 'tooltip' : _ref$variant,
|
|
566
|
+
popoverProps = _ref.popoverProps,
|
|
567
|
+
tooltipProps = _ref.tooltipProps,
|
|
568
|
+
ariaLabel = _ref.ariaLabel;
|
|
628
569
|
return React__namespace.createElement("div", {
|
|
629
570
|
className: css(styles$1.tableColumnHelp, className)
|
|
630
571
|
}, typeof children === 'string' ? React__namespace.createElement(TableText, null, children) : children, React__namespace.createElement("span", {
|
|
@@ -712,22 +653,19 @@ var treeViewStyles = {
|
|
|
712
653
|
};
|
|
713
654
|
|
|
714
655
|
var RowSelectVariant;
|
|
715
|
-
|
|
716
656
|
(function (RowSelectVariant) {
|
|
717
657
|
RowSelectVariant["radio"] = "radio";
|
|
718
658
|
RowSelectVariant["checkbox"] = "checkbox";
|
|
719
659
|
})(RowSelectVariant || (RowSelectVariant = {}));
|
|
720
|
-
|
|
721
660
|
var SelectColumn = function SelectColumn(_a) {
|
|
722
661
|
var _a$children = _a.children,
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
662
|
+
children = _a$children === void 0 ? null : _a$children,
|
|
663
|
+
_a$onSelect = _a.onSelect,
|
|
664
|
+
onSelect = _a$onSelect === void 0 ? null : _a$onSelect,
|
|
665
|
+
selectVariant = _a.selectVariant,
|
|
666
|
+
tooltip = _a.tooltip,
|
|
667
|
+
tooltipProps = _a.tooltipProps,
|
|
668
|
+
props = __rest(_a, ["children", "className", "onSelect", "selectVariant", "tooltip", "tooltipProps"]);
|
|
731
669
|
var inputRef = React__namespace.createRef();
|
|
732
670
|
var content = React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("label", null, React__namespace.createElement("input", Object.assign({}, props, {
|
|
733
671
|
ref: inputRef,
|
|
@@ -756,41 +694,37 @@ var checkStyles = {
|
|
|
756
694
|
|
|
757
695
|
var selectable = function selectable(label, _ref) {
|
|
758
696
|
var rowIndex = _ref.rowIndex,
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
697
|
+
columnIndex = _ref.columnIndex,
|
|
698
|
+
rowData = _ref.rowData,
|
|
699
|
+
column = _ref.column,
|
|
700
|
+
property = _ref.property,
|
|
701
|
+
tooltip = _ref.tooltip;
|
|
764
702
|
var _column$extraParams = column.extraParams,
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
703
|
+
onSelect = _column$extraParams.onSelect,
|
|
704
|
+
selectVariant = _column$extraParams.selectVariant,
|
|
705
|
+
allRowsSelected = _column$extraParams.allRowsSelected,
|
|
706
|
+
isHeaderSelectDisabled = _column$extraParams.isHeaderSelectDisabled;
|
|
769
707
|
var extraData = {
|
|
770
708
|
rowIndex: rowIndex,
|
|
771
709
|
columnIndex: columnIndex,
|
|
772
710
|
column: column,
|
|
773
711
|
property: property
|
|
774
712
|
};
|
|
775
|
-
|
|
776
713
|
if (rowData && rowData.hasOwnProperty('parent') && !rowData.showSelect && !rowData.fullWidth) {
|
|
777
714
|
return {
|
|
778
715
|
component: 'td',
|
|
779
716
|
isVisible: true
|
|
780
717
|
};
|
|
781
718
|
}
|
|
782
|
-
|
|
783
719
|
var rowId = rowIndex !== undefined ? rowIndex : -1;
|
|
784
720
|
/**
|
|
785
721
|
* @param {React.FormEvent} event - React form event
|
|
786
722
|
*/
|
|
787
|
-
|
|
788
723
|
function selectClick(event) {
|
|
789
|
-
var selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected;
|
|
790
|
-
|
|
724
|
+
var selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected;
|
|
725
|
+
// tslint:disable-next-line:no-unused-expression
|
|
791
726
|
onSelect && onSelect(event, selected, rowId, rowData, extraData);
|
|
792
727
|
}
|
|
793
|
-
|
|
794
728
|
var customProps = Object.assign(Object.assign(Object.assign({}, rowId !== -1 ? {
|
|
795
729
|
checked: rowData && !!rowData.selected,
|
|
796
730
|
'aria-label': "Select row " + rowIndex
|
|
@@ -804,13 +738,11 @@ var selectable = function selectable(label, _ref) {
|
|
|
804
738
|
disabled: true
|
|
805
739
|
});
|
|
806
740
|
var selectName = 'check-all';
|
|
807
|
-
|
|
808
741
|
if (rowId !== -1 && selectVariant === RowSelectVariant.checkbox) {
|
|
809
742
|
selectName = "checkrow" + rowIndex;
|
|
810
743
|
} else if (rowId !== -1) {
|
|
811
744
|
selectName = 'radioGroup';
|
|
812
745
|
}
|
|
813
|
-
|
|
814
746
|
return {
|
|
815
747
|
className: css(styles$1.tableCheck),
|
|
816
748
|
component: rowId !== -1 ? 'td' : 'th',
|
|
@@ -858,42 +790,36 @@ var ArrowsAltVIcon = createIcon(ArrowsAltVIconConfig);
|
|
|
858
790
|
var ArrowsAltVIcon$1 = ArrowsAltVIcon;
|
|
859
791
|
|
|
860
792
|
var SortByDirection;
|
|
861
|
-
|
|
862
793
|
(function (SortByDirection) {
|
|
863
794
|
SortByDirection["asc"] = "asc";
|
|
864
795
|
SortByDirection["desc"] = "desc";
|
|
865
796
|
})(SortByDirection || (SortByDirection = {}));
|
|
866
|
-
|
|
867
797
|
var SortColumn = function SortColumn(_a) {
|
|
868
798
|
var _a$children = _a.children,
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
799
|
+
children = _a$children === void 0 ? null : _a$children,
|
|
800
|
+
_a$className = _a.className,
|
|
801
|
+
className = _a$className === void 0 ? '' : _a$className,
|
|
802
|
+
_a$isSortedBy = _a.isSortedBy,
|
|
803
|
+
isSortedBy = _a$isSortedBy === void 0 ? false : _a$isSortedBy,
|
|
804
|
+
_a$onSort = _a.onSort,
|
|
805
|
+
onSort = _a$onSort === void 0 ? null : _a$onSort,
|
|
806
|
+
_a$sortDirection = _a.sortDirection,
|
|
807
|
+
sortDirection = _a$sortDirection === void 0 ? '' : _a$sortDirection,
|
|
808
|
+
_a$type = _a.type,
|
|
809
|
+
type = _a$type === void 0 ? 'button' : _a$type,
|
|
810
|
+
tooltip = _a.tooltip,
|
|
811
|
+
tooltipProps = _a.tooltipProps,
|
|
812
|
+
tooltipHasDefaultBehavior = _a.tooltipHasDefaultBehavior,
|
|
813
|
+
props = __rest(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type", "tooltip", "tooltipProps", "tooltipHasDefaultBehavior"]);
|
|
885
814
|
var SortedByIcon;
|
|
886
|
-
|
|
887
815
|
var _React$useState = React__namespace.useState(false),
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
816
|
+
focused = _React$useState[0],
|
|
817
|
+
setFocused = _React$useState[1];
|
|
891
818
|
if (isSortedBy) {
|
|
892
819
|
SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon$1 : LongArrowAltDownIcon$1;
|
|
893
820
|
} else {
|
|
894
821
|
SortedByIcon = ArrowsAltVIcon$1;
|
|
895
822
|
}
|
|
896
|
-
|
|
897
823
|
return React__namespace.createElement("button", Object.assign({}, props, {
|
|
898
824
|
type: type,
|
|
899
825
|
className: css(className, styles$1.tableButton),
|
|
@@ -952,16 +878,16 @@ var sortableFavorites = function sortableFavorites(sort) {
|
|
|
952
878
|
};
|
|
953
879
|
var sortable = function sortable(label, _ref) {
|
|
954
880
|
var columnIndex = _ref.columnIndex,
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
881
|
+
column = _ref.column,
|
|
882
|
+
property = _ref.property,
|
|
883
|
+
className = _ref.className,
|
|
884
|
+
ariaLabel = _ref.ariaLabel,
|
|
885
|
+
tooltip = _ref.tooltip,
|
|
886
|
+
tooltipProps = _ref.tooltipProps,
|
|
887
|
+
tooltipHasDefaultBehavior = _ref.tooltipHasDefaultBehavior;
|
|
962
888
|
var _column$extraParams = column.extraParams,
|
|
963
|
-
|
|
964
|
-
|
|
889
|
+
sortBy = _column$extraParams.sortBy,
|
|
890
|
+
onSort = _column$extraParams.onSort;
|
|
965
891
|
var extraData = {
|
|
966
892
|
columnIndex: columnIndex,
|
|
967
893
|
column: column,
|
|
@@ -971,23 +897,21 @@ var sortable = function sortable(label, _ref) {
|
|
|
971
897
|
/**
|
|
972
898
|
* @param {React.MouseEvent} event - React mouse event
|
|
973
899
|
*/
|
|
974
|
-
|
|
975
900
|
function sortClicked(event) {
|
|
976
901
|
var reversedDirection;
|
|
977
|
-
|
|
978
902
|
if (!isSortedBy) {
|
|
979
903
|
reversedDirection = sortBy.defaultDirection ? sortBy.defaultDirection : SortByDirection.asc;
|
|
980
904
|
} else {
|
|
981
905
|
reversedDirection = sortBy.direction === SortByDirection.asc ? SortByDirection.desc : SortByDirection.asc;
|
|
982
|
-
}
|
|
983
|
-
|
|
984
|
-
|
|
906
|
+
}
|
|
907
|
+
// tslint:disable-next-line:no-unused-expression
|
|
985
908
|
onSort && onSort(event, columnIndex, reversedDirection, extraData);
|
|
986
909
|
}
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
'aria-sort':
|
|
910
|
+
return Object.assign(Object.assign({
|
|
911
|
+
className: css(styles$1.tableSort, isSortedBy && styles$1.modifiers.selected, className)
|
|
912
|
+
}, isSortedBy && {
|
|
913
|
+
'aria-sort': sortBy.direction + "ending"
|
|
914
|
+
}), {
|
|
991
915
|
children: React__namespace.createElement(SortColumn, {
|
|
992
916
|
isSortedBy: isSortedBy,
|
|
993
917
|
sortDirection: isSortedBy ? sortBy.direction : '',
|
|
@@ -997,23 +921,22 @@ var sortable = function sortable(label, _ref) {
|
|
|
997
921
|
tooltipProps: tooltipProps,
|
|
998
922
|
tooltipHasDefaultBehavior: tooltipHasDefaultBehavior
|
|
999
923
|
}, label)
|
|
1000
|
-
};
|
|
924
|
+
});
|
|
1001
925
|
};
|
|
1002
926
|
|
|
1003
927
|
var resolveOrDefault = function resolveOrDefault(resolver, defaultValue, rowData, extraData) {
|
|
1004
928
|
return typeof resolver === 'function' ? resolver(rowData, extraData) : defaultValue;
|
|
1005
929
|
};
|
|
1006
|
-
|
|
1007
930
|
var cellActions = function cellActions(actions, actionResolver, areActionsDisabled) {
|
|
1008
931
|
return function (label, _ref) {
|
|
1009
932
|
var rowData = _ref.rowData,
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
933
|
+
column = _ref.column,
|
|
934
|
+
rowIndex = _ref.rowIndex,
|
|
935
|
+
columnIndex = _ref.columnIndex,
|
|
936
|
+
_ref$column$extraPara = _ref.column.extraParams,
|
|
937
|
+
actionsToggle = _ref$column$extraPara.actionsToggle,
|
|
938
|
+
actionsPopperProps = _ref$column$extraPara.actionsPopperProps,
|
|
939
|
+
property = _ref.property;
|
|
1017
940
|
var extraData = {
|
|
1018
941
|
rowIndex: rowIndex,
|
|
1019
942
|
columnIndex: columnIndex,
|
|
@@ -1045,14 +968,12 @@ var cellActions = function cellActions(actions, actionResolver, areActionsDisabl
|
|
|
1045
968
|
var camelize = function camelize(s) {
|
|
1046
969
|
return s.toUpperCase().replace('-', '').replace('_', '');
|
|
1047
970
|
};
|
|
1048
|
-
|
|
1049
971
|
var toCamel = function toCamel(s) {
|
|
1050
972
|
return s.replace(/([-_][a-z])/gi, camelize);
|
|
1051
973
|
};
|
|
1052
974
|
/**
|
|
1053
975
|
* @param {string} input - String to capitalize
|
|
1054
976
|
*/
|
|
1055
|
-
|
|
1056
977
|
function capitalize(input) {
|
|
1057
978
|
return input[0].toUpperCase() + input.substring(1);
|
|
1058
979
|
}
|
|
@@ -1067,18 +988,18 @@ var cellWidth = function cellWidth(width) {
|
|
|
1067
988
|
|
|
1068
989
|
var collapsible = function collapsible(value, _ref) {
|
|
1069
990
|
var rowIndex = _ref.rowIndex,
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
991
|
+
columnIndex = _ref.columnIndex,
|
|
992
|
+
rowData = _ref.rowData,
|
|
993
|
+
column = _ref.column,
|
|
994
|
+
property = _ref.property;
|
|
1074
995
|
var _column$extraParams = column.extraParams,
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
996
|
+
onCollapse = _column$extraParams.onCollapse,
|
|
997
|
+
_column$extraParams$r = _column$extraParams.rowLabeledBy,
|
|
998
|
+
rowLabeledBy = _column$extraParams$r === void 0 ? 'simple-node' : _column$extraParams$r,
|
|
999
|
+
_column$extraParams$e = _column$extraParams.expandId,
|
|
1000
|
+
expandId = _column$extraParams$e === void 0 ? 'expand-toggle' : _column$extraParams$e,
|
|
1001
|
+
allRowsExpanded = _column$extraParams.allRowsExpanded,
|
|
1002
|
+
collapseAllAriaLabel = _column$extraParams.collapseAllAriaLabel;
|
|
1082
1003
|
var extraData = {
|
|
1083
1004
|
rowIndex: rowIndex,
|
|
1084
1005
|
columnIndex: columnIndex,
|
|
@@ -1096,13 +1017,11 @@ var collapsible = function collapsible(value, _ref) {
|
|
|
1096
1017
|
/**
|
|
1097
1018
|
* @param {React.MouseEvent} event - Mouse event
|
|
1098
1019
|
*/
|
|
1099
|
-
|
|
1100
1020
|
function onToggle(event) {
|
|
1101
|
-
var open = rowData ? !rowData.isOpen : !allRowsExpanded;
|
|
1102
|
-
|
|
1021
|
+
var open = rowData ? !rowData.isOpen : !allRowsExpanded;
|
|
1022
|
+
// tslint:disable-next-line:no-unused-expression
|
|
1103
1023
|
onCollapse && onCollapse(event, rowIndex, open, rowData, extraData);
|
|
1104
1024
|
}
|
|
1105
|
-
|
|
1106
1025
|
return {
|
|
1107
1026
|
className: ((rowData === null || rowData === void 0 ? void 0 : rowData.isOpen) !== undefined || rowId === -1) && css(styles$1.tableToggle),
|
|
1108
1027
|
isVisible: !(rowData === null || rowData === void 0 ? void 0 : rowData.fullWidth),
|
|
@@ -1116,21 +1035,19 @@ var collapsible = function collapsible(value, _ref) {
|
|
|
1116
1035
|
|
|
1117
1036
|
var compoundExpand = function compoundExpand(value, _ref) {
|
|
1118
1037
|
var rowIndex = _ref.rowIndex,
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1038
|
+
columnIndex = _ref.columnIndex,
|
|
1039
|
+
rowData = _ref.rowData,
|
|
1040
|
+
column = _ref.column,
|
|
1041
|
+
property = _ref.property;
|
|
1124
1042
|
if (!value) {
|
|
1125
1043
|
return null;
|
|
1126
1044
|
}
|
|
1127
|
-
|
|
1128
1045
|
var title = value.title,
|
|
1129
|
-
|
|
1046
|
+
props = value.props;
|
|
1130
1047
|
var _column$extraParams = column.extraParams,
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1048
|
+
onExpand = _column$extraParams.onExpand,
|
|
1049
|
+
_column$extraParams$e = _column$extraParams.expandId,
|
|
1050
|
+
expandId = _column$extraParams$e === void 0 ? 'expand-toggle' : _column$extraParams$e;
|
|
1134
1051
|
var extraData = {
|
|
1135
1052
|
rowIndex: rowIndex,
|
|
1136
1053
|
columnIndex: columnIndex,
|
|
@@ -1140,12 +1057,10 @@ var compoundExpand = function compoundExpand(value, _ref) {
|
|
|
1140
1057
|
/**
|
|
1141
1058
|
* @param {React.MouseEvent} event - Mouse event
|
|
1142
1059
|
*/
|
|
1143
|
-
|
|
1144
1060
|
function onToggle(event) {
|
|
1145
1061
|
// tslint:disable-next-line:no-unused-expression
|
|
1146
1062
|
onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
|
|
1147
1063
|
}
|
|
1148
|
-
|
|
1149
1064
|
return {
|
|
1150
1065
|
className: css(styles$1.tableCompoundExpansionToggle, props.isOpen && styles$1.modifiers.expanded),
|
|
1151
1066
|
children: props.isOpen !== undefined && React__namespace.createElement("button", {
|
|
@@ -1178,12 +1093,11 @@ var classNames = function classNames() {
|
|
|
1178
1093
|
|
|
1179
1094
|
var info = function info(_ref) {
|
|
1180
1095
|
var tooltip = _ref.tooltip,
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1096
|
+
tooltipProps = _ref.tooltipProps,
|
|
1097
|
+
popover = _ref.popover,
|
|
1098
|
+
popoverProps = _ref.popoverProps,
|
|
1099
|
+
className = _ref.className,
|
|
1100
|
+
ariaLabel = _ref.ariaLabel;
|
|
1187
1101
|
var infoObj = function infoObj(value) {
|
|
1188
1102
|
return {
|
|
1189
1103
|
className: styles$1.modifiers.help,
|
|
@@ -1202,18 +1116,16 @@ var info = function info(_ref) {
|
|
|
1202
1116
|
}, value)
|
|
1203
1117
|
};
|
|
1204
1118
|
};
|
|
1205
|
-
|
|
1206
1119
|
return infoObj;
|
|
1207
1120
|
};
|
|
1208
1121
|
|
|
1209
1122
|
var FavoritesCell = function FavoritesCell(_a) {
|
|
1210
1123
|
var _a$className = _a.className,
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1124
|
+
className = _a$className === void 0 ? '' : _a$className,
|
|
1125
|
+
onFavorite = _a.onFavorite,
|
|
1126
|
+
isFavorited = _a.isFavorited,
|
|
1127
|
+
rowIndex = _a.rowIndex,
|
|
1128
|
+
props = __rest(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
|
|
1217
1129
|
var ariaProps = rowIndex === undefined ? {} : {
|
|
1218
1130
|
id: "favorites-button-" + rowIndex,
|
|
1219
1131
|
'aria-labelledby': "favorites-button-" + rowIndex
|
|
@@ -1232,18 +1144,18 @@ FavoritesCell.displayName = 'FavoritesCell';
|
|
|
1232
1144
|
|
|
1233
1145
|
var favoritable = function favoritable(value, _ref) {
|
|
1234
1146
|
var rowIndex = _ref.rowIndex,
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1147
|
+
columnIndex = _ref.columnIndex,
|
|
1148
|
+
rowData = _ref.rowData,
|
|
1149
|
+
column = _ref.column,
|
|
1150
|
+
property = _ref.property;
|
|
1239
1151
|
var onFavorite = column.extraParams.onFavorite;
|
|
1240
1152
|
var extraData = {
|
|
1241
1153
|
rowIndex: rowIndex,
|
|
1242
1154
|
columnIndex: columnIndex,
|
|
1243
1155
|
column: column,
|
|
1244
1156
|
property: property
|
|
1245
|
-
};
|
|
1246
|
-
|
|
1157
|
+
};
|
|
1158
|
+
// this is a child row which should not display the favorites icon
|
|
1247
1159
|
if (rowData && rowData.hasOwnProperty('parent') && !rowData.fullWidth) {
|
|
1248
1160
|
return {
|
|
1249
1161
|
component: 'td',
|
|
@@ -1253,13 +1165,10 @@ var favoritable = function favoritable(value, _ref) {
|
|
|
1253
1165
|
/**
|
|
1254
1166
|
* @param {React.MouseEvent} event - Mouse event
|
|
1255
1167
|
*/
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
1168
|
function favoritesClick(event) {
|
|
1259
1169
|
// tslint:disable-next-line:no-unused-expression
|
|
1260
1170
|
onFavorite && onFavorite(event, rowData && !rowData.favorited, rowIndex, rowData, extraData);
|
|
1261
1171
|
}
|
|
1262
|
-
|
|
1263
1172
|
var additionalProps = rowData.favoritesProps || {};
|
|
1264
1173
|
return {
|
|
1265
1174
|
className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
|
|
@@ -1286,18 +1195,18 @@ var EllipsisHIcon$1 = EllipsisHIcon;
|
|
|
1286
1195
|
var treeRow = function treeRow(onCollapse, onCheckChange, onToggleRowDetails) {
|
|
1287
1196
|
return function (value, _ref) {
|
|
1288
1197
|
var rowIndex = _ref.rowIndex,
|
|
1289
|
-
|
|
1198
|
+
rowData = _ref.rowData;
|
|
1290
1199
|
var _rowData$props = rowData.props,
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1200
|
+
isExpanded = _rowData$props.isExpanded,
|
|
1201
|
+
isDetailsExpanded = _rowData$props.isDetailsExpanded,
|
|
1202
|
+
level = _rowData$props['aria-level'],
|
|
1203
|
+
setsize = _rowData$props['aria-setsize'],
|
|
1204
|
+
toggleAriaLabel = _rowData$props.toggleAriaLabel,
|
|
1205
|
+
checkAriaLabel = _rowData$props.checkAriaLabel,
|
|
1206
|
+
showDetailsAriaLabel = _rowData$props.showDetailsAriaLabel,
|
|
1207
|
+
isChecked = _rowData$props.isChecked,
|
|
1208
|
+
checkboxId = _rowData$props.checkboxId,
|
|
1209
|
+
icon = _rowData$props.icon;
|
|
1301
1210
|
var content = value.title || value;
|
|
1302
1211
|
var text = React__namespace.createElement("div", {
|
|
1303
1212
|
className: css(treeViewStyles.tableTreeViewText),
|
|
@@ -1309,11 +1218,9 @@ var treeRow = function treeRow(onCollapse, onCheckChange, onToggleRowDetails) {
|
|
|
1309
1218
|
className: styles$1.tableText,
|
|
1310
1219
|
key: "table-text"
|
|
1311
1220
|
}, content));
|
|
1312
|
-
|
|
1313
1221
|
var _onChange = function onChange(isChecked, event) {
|
|
1314
1222
|
onCheckChange(event, isChecked, rowIndex, content, rowData);
|
|
1315
1223
|
};
|
|
1316
|
-
|
|
1317
1224
|
return {
|
|
1318
1225
|
component: 'th',
|
|
1319
1226
|
className: treeViewStyles.tableTreeViewTitleCell,
|
|
@@ -1366,7 +1273,6 @@ var treeRow = function treeRow(onCollapse, onCheckChange, onToggleRowDetails) {
|
|
|
1366
1273
|
};
|
|
1367
1274
|
|
|
1368
1275
|
var TableGridBreakpoint;
|
|
1369
|
-
|
|
1370
1276
|
(function (TableGridBreakpoint) {
|
|
1371
1277
|
TableGridBreakpoint["none"] = "";
|
|
1372
1278
|
TableGridBreakpoint["grid"] = "grid";
|
|
@@ -1375,9 +1281,7 @@ var TableGridBreakpoint;
|
|
|
1375
1281
|
TableGridBreakpoint["gridXl"] = "grid-xl";
|
|
1376
1282
|
TableGridBreakpoint["grid2xl"] = "grid-2xl";
|
|
1377
1283
|
})(TableGridBreakpoint || (TableGridBreakpoint = {}));
|
|
1378
|
-
|
|
1379
1284
|
var TableVariant;
|
|
1380
|
-
|
|
1381
1285
|
(function (TableVariant) {
|
|
1382
1286
|
TableVariant["compact"] = "compact";
|
|
1383
1287
|
})(TableVariant || (TableVariant = {}));
|
|
@@ -1385,58 +1289,51 @@ var TableVariant;
|
|
|
1385
1289
|
var TableContext = React__namespace.createContext({
|
|
1386
1290
|
registerSelectableRow: function registerSelectableRow() {}
|
|
1387
1291
|
});
|
|
1388
|
-
|
|
1389
1292
|
var TableBase = function TableBase(_a) {
|
|
1390
1293
|
var _b, _c;
|
|
1391
|
-
|
|
1392
1294
|
var children = _a.children,
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1295
|
+
className = _a.className,
|
|
1296
|
+
variant = _a.variant,
|
|
1297
|
+
_a$borders = _a.borders,
|
|
1298
|
+
borders = _a$borders === void 0 ? true : _a$borders,
|
|
1299
|
+
_a$isStickyHeader = _a.isStickyHeader,
|
|
1300
|
+
isStickyHeader = _a$isStickyHeader === void 0 ? false : _a$isStickyHeader,
|
|
1301
|
+
_a$gridBreakPoint = _a.gridBreakPoint,
|
|
1302
|
+
gridBreakPoint = _a$gridBreakPoint === void 0 ? TableGridBreakpoint.gridMd : _a$gridBreakPoint,
|
|
1303
|
+
ariaLabel = _a['aria-label'],
|
|
1304
|
+
_a$role = _a.role,
|
|
1305
|
+
role = _a$role === void 0 ? 'grid' : _a$role,
|
|
1306
|
+
innerRef = _a.innerRef,
|
|
1307
|
+
ouiaId = _a.ouiaId,
|
|
1308
|
+
_a$ouiaSafe = _a.ouiaSafe,
|
|
1309
|
+
ouiaSafe = _a$ouiaSafe === void 0 ? true : _a$ouiaSafe,
|
|
1310
|
+
_a$isTreeTable = _a.isTreeTable,
|
|
1311
|
+
isTreeTable = _a$isTreeTable === void 0 ? false : _a$isTreeTable,
|
|
1312
|
+
_a$isNested = _a.isNested,
|
|
1313
|
+
isNested = _a$isNested === void 0 ? false : _a$isNested,
|
|
1314
|
+
_a$isStriped = _a.isStriped,
|
|
1315
|
+
isStriped = _a$isStriped === void 0 ? false : _a$isStriped,
|
|
1316
|
+
_a$isExpandable = _a.isExpandable,
|
|
1317
|
+
isExpandable = _a$isExpandable === void 0 ? false : _a$isExpandable,
|
|
1318
|
+
_a$hasNoInset = _a.hasNoInset,
|
|
1319
|
+
hasNoInset = _a$hasNoInset === void 0 ? false : _a$hasNoInset,
|
|
1320
|
+
selectableRowCaptionText = _a.selectableRowCaptionText,
|
|
1321
|
+
props = __rest(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "hasNoInset", "nestedHeaderColumnSpans", "selectableRowCaptionText"]);
|
|
1421
1322
|
var ref = React__namespace.useRef(null);
|
|
1422
1323
|
var tableRef = innerRef || ref;
|
|
1423
|
-
|
|
1424
1324
|
var _React$useState = React__namespace.useState(false),
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1325
|
+
hasSelectableRows = _React$useState[0],
|
|
1326
|
+
setHasSelectableRows = _React$useState[1];
|
|
1428
1327
|
var _React$useState2 = React__namespace.useState(),
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1328
|
+
tableCaption = _React$useState2[0],
|
|
1329
|
+
setTableCaption = _React$useState2[1];
|
|
1432
1330
|
React__namespace.useEffect(function () {
|
|
1433
|
-
document.addEventListener('keydown', handleKeys);
|
|
1434
|
-
|
|
1331
|
+
document.addEventListener('keydown', handleKeys);
|
|
1332
|
+
// sets up roving tab-index to tree tables only
|
|
1435
1333
|
if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
|
|
1436
1334
|
var tbody = tableRef.current.querySelector('tbody');
|
|
1437
|
-
tbody &&
|
|
1335
|
+
tbody && KeyboardHandler.setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
|
|
1438
1336
|
}
|
|
1439
|
-
|
|
1440
1337
|
return function cleanup() {
|
|
1441
1338
|
document.removeEventListener('keydown', handleKeys);
|
|
1442
1339
|
};
|
|
@@ -1452,41 +1349,35 @@ var TableBase = function TableBase(_a) {
|
|
|
1452
1349
|
}, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter."));
|
|
1453
1350
|
}
|
|
1454
1351
|
}, [selectableRowCaptionText]);
|
|
1455
|
-
var ouiaProps =
|
|
1352
|
+
var ouiaProps = ouia.useOUIAProps('Table', ouiaId, ouiaSafe);
|
|
1456
1353
|
var grid = (_b = stylesGrid.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
|
|
1457
1354
|
var breakPointPrefix = "treeView" + (gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1));
|
|
1458
1355
|
var treeGrid = (_c = treeViewStyles.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
|
|
1459
|
-
|
|
1460
1356
|
var handleKeys = function handleKeys(event) {
|
|
1461
|
-
if (isNested || !(tableRef && tableRef.current && tableRef.current.classList.contains(treeViewStyles.modifiers.treeView)) ||
|
|
1357
|
+
if (isNested || !(tableRef && tableRef.current && tableRef.current.classList.contains(treeViewStyles.modifiers.treeView)) ||
|
|
1358
|
+
// implements roving tab-index to tree tables only
|
|
1462
1359
|
tableRef && tableRef.current !== event.target.closest("." + styles$1.table + ":not(.pf-m-nested)")) {
|
|
1463
1360
|
return;
|
|
1464
1361
|
}
|
|
1465
|
-
|
|
1466
1362
|
var activeElement = document.activeElement;
|
|
1467
1363
|
var key = event.key;
|
|
1468
1364
|
var rows = Array.from(tableRef.current.querySelectorAll('tbody tr')).filter(function (el) {
|
|
1469
1365
|
return !el.classList.contains('pf-m-disabled') && !el.hidden;
|
|
1470
1366
|
});
|
|
1471
|
-
|
|
1472
1367
|
if (key === 'Space' || key === 'Enter') {
|
|
1473
1368
|
activeElement.click();
|
|
1474
1369
|
event.preventDefault();
|
|
1475
1370
|
}
|
|
1476
|
-
|
|
1477
1371
|
var getFocusableElement = function getFocusableElement(element) {
|
|
1478
1372
|
return element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
|
|
1479
1373
|
};
|
|
1480
|
-
|
|
1481
|
-
reactCore.handleArrows(event, rows, function (element) {
|
|
1374
|
+
KeyboardHandler.handleArrows(event, rows, function (element) {
|
|
1482
1375
|
return element === activeElement.closest('tr');
|
|
1483
1376
|
}, getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
|
|
1484
1377
|
};
|
|
1485
|
-
|
|
1486
1378
|
var registerSelectableRow = function registerSelectableRow() {
|
|
1487
1379
|
!hasSelectableRows && setHasSelectableRows(true);
|
|
1488
1380
|
};
|
|
1489
|
-
|
|
1490
1381
|
return React__namespace.createElement(TableContext.Provider, {
|
|
1491
1382
|
value: {
|
|
1492
1383
|
registerSelectableRow: registerSelectableRow
|
|
@@ -1500,7 +1391,6 @@ var TableBase = function TableBase(_a) {
|
|
|
1500
1391
|
role: 'treegrid'
|
|
1501
1392
|
}, ouiaProps, props), hasSelectableRows && tableCaption, children));
|
|
1502
1393
|
};
|
|
1503
|
-
|
|
1504
1394
|
var Table = React__namespace.forwardRef(function (props, ref) {
|
|
1505
1395
|
return React__namespace.createElement(TableBase, Object.assign({}, props, {
|
|
1506
1396
|
innerRef: ref
|
|
@@ -1510,38 +1400,36 @@ Table.displayName = 'Table';
|
|
|
1510
1400
|
|
|
1511
1401
|
var TrBase = function TrBase(_a) {
|
|
1512
1402
|
var children = _a.children,
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1403
|
+
className = _a.className,
|
|
1404
|
+
isExpanded = _a.isExpanded,
|
|
1405
|
+
isEditable = _a.isEditable,
|
|
1406
|
+
_a$isHidden = _a.isHidden,
|
|
1407
|
+
isHidden = _a$isHidden === void 0 ? false : _a$isHidden,
|
|
1408
|
+
_a$isClickable = _a.isClickable,
|
|
1409
|
+
isClickable = _a$isClickable === void 0 ? false : _a$isClickable,
|
|
1410
|
+
_a$isRowSelected = _a.isRowSelected,
|
|
1411
|
+
isRowSelected = _a$isRowSelected === void 0 ? false : _a$isRowSelected,
|
|
1412
|
+
_a$isStriped = _a.isStriped,
|
|
1413
|
+
isStriped = _a$isStriped === void 0 ? false : _a$isStriped,
|
|
1414
|
+
_a$isBorderRow = _a.isBorderRow,
|
|
1415
|
+
isBorderRow = _a$isBorderRow === void 0 ? false : _a$isBorderRow,
|
|
1416
|
+
_a$isControlRow = _a.isControlRow,
|
|
1417
|
+
isControlRow = _a$isControlRow === void 0 ? false : _a$isControlRow,
|
|
1418
|
+
innerRef = _a.innerRef,
|
|
1419
|
+
ouiaId = _a.ouiaId,
|
|
1420
|
+
_a$ouiaSafe = _a.ouiaSafe,
|
|
1421
|
+
ouiaSafe = _a$ouiaSafe === void 0 ? true : _a$ouiaSafe,
|
|
1422
|
+
_a$resetOffset = _a.resetOffset,
|
|
1423
|
+
resetOffset = _a$resetOffset === void 0 ? false : _a$resetOffset,
|
|
1424
|
+
onRowClick = _a.onRowClick,
|
|
1425
|
+
isSelectable = _a.isSelectable,
|
|
1426
|
+
passedAriaLabel = _a['aria-label'],
|
|
1427
|
+
props = __rest(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isClickable", "isRowSelected", "isStriped", "isBorderRow", "isControlRow", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
|
|
1537
1428
|
var ouiaProps = helpers.useOUIAProps('TableRow', ouiaId, ouiaSafe);
|
|
1538
|
-
|
|
1539
1429
|
var _React$useState = React__namespace.useState(''),
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1430
|
+
computedAriaLabel = _React$useState[0],
|
|
1431
|
+
setComputedAriaLabel = _React$useState[1];
|
|
1543
1432
|
var onKeyDown = null;
|
|
1544
|
-
|
|
1545
1433
|
if (onRowClick) {
|
|
1546
1434
|
onKeyDown = function onKeyDown(e) {
|
|
1547
1435
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -1550,12 +1438,9 @@ var TrBase = function TrBase(_a) {
|
|
|
1550
1438
|
}
|
|
1551
1439
|
};
|
|
1552
1440
|
}
|
|
1553
|
-
|
|
1554
1441
|
var rowIsHidden = isHidden || isExpanded !== undefined && !isExpanded;
|
|
1555
|
-
|
|
1556
1442
|
var _React$useContext = React__namespace.useContext(TableContext),
|
|
1557
|
-
|
|
1558
|
-
|
|
1443
|
+
registerSelectableRow = _React$useContext.registerSelectableRow;
|
|
1559
1444
|
React__namespace.useEffect(function () {
|
|
1560
1445
|
if (isSelectable && !rowIsHidden) {
|
|
1561
1446
|
setComputedAriaLabel("" + (isRowSelected ? 'Row selected' : ''));
|
|
@@ -1566,7 +1451,7 @@ var TrBase = function TrBase(_a) {
|
|
|
1566
1451
|
}, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
|
|
1567
1452
|
var ariaLabel = passedAriaLabel || computedAriaLabel;
|
|
1568
1453
|
return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("tr", Object.assign({
|
|
1569
|
-
className: css(styles$1.tableTr, className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isClickable && styles$1.modifiers.clickable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, isBorderRow && styles$1.modifiers.borderRow, resetOffset && styles$1.modifiers.firstCellOffsetReset),
|
|
1454
|
+
className: css(styles$1.tableTr, className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isClickable && styles$1.modifiers.clickable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, isBorderRow && styles$1.modifiers.borderRow, isControlRow && styles$1.tableControlRow, resetOffset && styles$1.modifiers.firstCellOffsetReset),
|
|
1570
1455
|
hidden: rowIsHidden
|
|
1571
1456
|
}, isClickable && {
|
|
1572
1457
|
tabIndex: 0
|
|
@@ -1578,7 +1463,6 @@ var TrBase = function TrBase(_a) {
|
|
|
1578
1463
|
onKeyDown: onKeyDown
|
|
1579
1464
|
}, ouiaProps, props), children));
|
|
1580
1465
|
};
|
|
1581
|
-
|
|
1582
1466
|
var Tr = React__namespace.forwardRef(function (props, ref) {
|
|
1583
1467
|
return React__namespace.createElement(TrBase, Object.assign({}, props, {
|
|
1584
1468
|
innerRef: ref
|
|
@@ -1588,19 +1472,17 @@ Tr.displayName = 'Tr';
|
|
|
1588
1472
|
|
|
1589
1473
|
var TheadBase = function TheadBase(_a) {
|
|
1590
1474
|
var children = _a.children,
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1475
|
+
className = _a.className,
|
|
1476
|
+
_a$noWrap = _a.noWrap,
|
|
1477
|
+
noWrap = _a$noWrap === void 0 ? false : _a$noWrap,
|
|
1478
|
+
innerRef = _a.innerRef,
|
|
1479
|
+
hasNestedHeader = _a.hasNestedHeader,
|
|
1480
|
+
props = __rest(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
|
|
1598
1481
|
return React__namespace.createElement("thead", Object.assign({
|
|
1599
1482
|
className: css(styles$1.tableThead, className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader),
|
|
1600
1483
|
ref: innerRef
|
|
1601
1484
|
}, props), children);
|
|
1602
1485
|
};
|
|
1603
|
-
|
|
1604
1486
|
var Thead = React__namespace.forwardRef(function (props, ref) {
|
|
1605
1487
|
return React__namespace.createElement(TheadBase, Object.assign({}, props, {
|
|
1606
1488
|
innerRef: ref
|
|
@@ -1610,22 +1492,20 @@ Thead.displayName = 'Thead';
|
|
|
1610
1492
|
|
|
1611
1493
|
var TbodyBase = function TbodyBase(_a) {
|
|
1612
1494
|
var children = _a.children,
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1495
|
+
className = _a.className,
|
|
1496
|
+
isExpanded = _a.isExpanded,
|
|
1497
|
+
innerRef = _a.innerRef,
|
|
1498
|
+
_a$isEvenStriped = _a.isEvenStriped,
|
|
1499
|
+
isEvenStriped = _a$isEvenStriped === void 0 ? false : _a$isEvenStriped,
|
|
1500
|
+
_a$isOddStriped = _a.isOddStriped,
|
|
1501
|
+
isOddStriped = _a$isOddStriped === void 0 ? false : _a$isOddStriped,
|
|
1502
|
+
props = __rest(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
|
|
1622
1503
|
return React__namespace.createElement("tbody", Object.assign({
|
|
1623
1504
|
role: "rowgroup",
|
|
1624
1505
|
className: css(styles$1.tableTbody, className, isExpanded && styles$1.modifiers.expanded, isOddStriped && styles$1.modifiers.striped, isEvenStriped && styles$1.modifiers.stripedEven),
|
|
1625
1506
|
ref: innerRef
|
|
1626
1507
|
}, props), children);
|
|
1627
1508
|
};
|
|
1628
|
-
|
|
1629
1509
|
var Tbody = React__namespace.forwardRef(function (props, ref) {
|
|
1630
1510
|
return React__namespace.createElement(TbodyBase, Object.assign({}, props, {
|
|
1631
1511
|
innerRef: ref
|
|
@@ -1657,17 +1537,14 @@ var styles = {
|
|
|
1657
1537
|
/**
|
|
1658
1538
|
* @param {any} props - Props
|
|
1659
1539
|
*/
|
|
1660
|
-
|
|
1661
1540
|
function mergeProps() {
|
|
1662
1541
|
var props = [].slice.call(arguments);
|
|
1663
1542
|
var firstProps = props[0];
|
|
1664
1543
|
var restProps = props.slice(1);
|
|
1665
|
-
|
|
1666
1544
|
if (!restProps.length) {
|
|
1667
1545
|
return mergeWith__default["default"]({}, firstProps);
|
|
1668
|
-
}
|
|
1669
|
-
|
|
1670
|
-
|
|
1546
|
+
}
|
|
1547
|
+
// Avoid mutating the first prop collection
|
|
1671
1548
|
return mergeWith__default["default"].apply(void 0, [mergeWith__default["default"]({}, firstProps)].concat(restProps, [function (a, b, key) {
|
|
1672
1549
|
if (key === 'children') {
|
|
1673
1550
|
if (a && b) {
|
|
@@ -1675,19 +1552,16 @@ function mergeProps() {
|
|
|
1675
1552
|
return React__namespace.cloneElement(a, {
|
|
1676
1553
|
children: b
|
|
1677
1554
|
});
|
|
1678
|
-
}
|
|
1555
|
+
}
|
|
1556
|
+
// Children have to be merged in reverse order for Reactabular
|
|
1679
1557
|
// logic to work.
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
1558
|
return Object.assign(Object.assign({}, b), a);
|
|
1683
1559
|
}
|
|
1684
|
-
|
|
1685
1560
|
if (key === 'className') {
|
|
1686
1561
|
// Process class names through classNames to merge properly
|
|
1687
1562
|
// as a string.
|
|
1688
1563
|
return css(a, b);
|
|
1689
1564
|
}
|
|
1690
|
-
|
|
1691
1565
|
return undefined;
|
|
1692
1566
|
}]));
|
|
1693
1567
|
}
|
|
@@ -1715,75 +1589,66 @@ var cssStickyCellRight = c_table__sticky_cell_Right;
|
|
|
1715
1589
|
|
|
1716
1590
|
var ThBase = function ThBase(_a) {
|
|
1717
1591
|
var _Object$assign;
|
|
1718
|
-
|
|
1719
1592
|
var children = _a.children,
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1593
|
+
className = _a.className,
|
|
1594
|
+
_a$component = _a.component,
|
|
1595
|
+
component = _a$component === void 0 ? 'th' : _a$component,
|
|
1596
|
+
dataLabel = _a.dataLabel,
|
|
1597
|
+
_a$scope = _a.scope,
|
|
1598
|
+
scope = _a$scope === void 0 ? 'col' : _a$scope,
|
|
1599
|
+
_a$textCenter = _a.textCenter,
|
|
1600
|
+
textCenter = _a$textCenter === void 0 ? false : _a$textCenter,
|
|
1601
|
+
_a$sort = _a.sort,
|
|
1602
|
+
sort = _a$sort === void 0 ? null : _a$sort,
|
|
1603
|
+
modifier = _a.modifier,
|
|
1604
|
+
_a$select = _a.select,
|
|
1605
|
+
select = _a$select === void 0 ? null : _a$select,
|
|
1606
|
+
_a$expand = _a.expand,
|
|
1607
|
+
collapse = _a$expand === void 0 ? null : _a$expand,
|
|
1608
|
+
_a$tooltip = _a.tooltip,
|
|
1609
|
+
tooltip = _a$tooltip === void 0 ? '' : _a$tooltip,
|
|
1610
|
+
tooltipProps = _a.tooltipProps,
|
|
1611
|
+
_a$onMouseEnter = _a.onMouseEnter,
|
|
1612
|
+
onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
|
|
1613
|
+
width = _a.width,
|
|
1614
|
+
visibility = _a.visibility,
|
|
1615
|
+
innerRef = _a.innerRef,
|
|
1616
|
+
infoProps = _a.info,
|
|
1617
|
+
_a$isStickyColumn = _a.isStickyColumn,
|
|
1618
|
+
isStickyColumn = _a$isStickyColumn === void 0 ? false : _a$isStickyColumn,
|
|
1619
|
+
_a$hasRightBorder = _a.hasRightBorder,
|
|
1620
|
+
hasRightBorder = _a$hasRightBorder === void 0 ? false : _a$hasRightBorder,
|
|
1621
|
+
_a$hasLeftBorder = _a.hasLeftBorder,
|
|
1622
|
+
hasLeftBorder = _a$hasLeftBorder === void 0 ? false : _a$hasLeftBorder,
|
|
1623
|
+
_a$stickyMinWidth = _a.stickyMinWidth,
|
|
1624
|
+
stickyMinWidth = _a$stickyMinWidth === void 0 ? '120px' : _a$stickyMinWidth,
|
|
1625
|
+
stickyLeftOffset = _a.stickyLeftOffset,
|
|
1626
|
+
stickyRightOffset = _a.stickyRightOffset,
|
|
1627
|
+
_a$isSubheader = _a.isSubheader,
|
|
1628
|
+
isSubheader = _a$isSubheader === void 0 ? false : _a$isSubheader,
|
|
1629
|
+
screenReaderText = _a.screenReaderText,
|
|
1630
|
+
ariaLabel = _a['aria-label'],
|
|
1631
|
+
props = __rest(_a, ["children", "className", "component", "dataLabel", "scope", "textCenter", "sort", "modifier", "select", "expand", "tooltip", "tooltipProps", "onMouseEnter", "width", "visibility", "innerRef", "info", "isStickyColumn", "hasRightBorder", "hasLeftBorder", "stickyMinWidth", "stickyLeftOffset", "stickyRightOffset", "isSubheader", "screenReaderText", 'aria-label']);
|
|
1760
1632
|
if (!children && !screenReaderText && !ariaLabel) {
|
|
1761
1633
|
// eslint-disable-next-line no-console
|
|
1762
1634
|
console.warn('Th: Table headers must have an accessible name. If the Th is intended to be visually empty, pass in screenReaderText. If the Th contains only non-text, interactive content such as a checkbox or expand toggle, pass in an aria-label.');
|
|
1763
1635
|
}
|
|
1764
|
-
|
|
1765
1636
|
var _React$useState = React__namespace.useState(false),
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1637
|
+
showTooltip = _React$useState[0],
|
|
1638
|
+
setShowTooltip = _React$useState[1];
|
|
1769
1639
|
var _React$useState2 = React__namespace.useState(false),
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1640
|
+
truncated = _React$useState2[0],
|
|
1641
|
+
setTruncated = _React$useState2[1];
|
|
1773
1642
|
var cellRef = innerRef ? innerRef : React__namespace.createRef();
|
|
1774
|
-
|
|
1775
1643
|
var onMouseEnter = function onMouseEnter(event) {
|
|
1776
1644
|
if (event.target.offsetWidth < event.target.scrollWidth) {
|
|
1777
1645
|
!showTooltip && setShowTooltip(true);
|
|
1778
1646
|
} else {
|
|
1779
1647
|
showTooltip && setShowTooltip(false);
|
|
1780
1648
|
}
|
|
1781
|
-
|
|
1782
1649
|
onMouseEnterProp(event);
|
|
1783
1650
|
};
|
|
1784
|
-
|
|
1785
1651
|
var sortParams = null;
|
|
1786
|
-
|
|
1787
1652
|
if (sort) {
|
|
1788
1653
|
if (sort.isFavorites) {
|
|
1789
1654
|
sortParams = sortableFavorites({
|
|
@@ -1807,7 +1672,6 @@ var ThBase = function ThBase(_a) {
|
|
|
1807
1672
|
});
|
|
1808
1673
|
}
|
|
1809
1674
|
}
|
|
1810
|
-
|
|
1811
1675
|
var selectParams = select ? selectable(children, {
|
|
1812
1676
|
rowData: {
|
|
1813
1677
|
selected: select.isSelected,
|
|
@@ -1838,23 +1702,19 @@ var ThBase = function ThBase(_a) {
|
|
|
1838
1702
|
var visibilityParams = visibility ? classNames.apply(void 0, visibility.map(function (vis) {
|
|
1839
1703
|
return Visibility[vis];
|
|
1840
1704
|
}))() : null;
|
|
1841
|
-
var transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children;
|
|
1842
|
-
|
|
1705
|
+
var transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children;
|
|
1706
|
+
// info can wrap other transformedChildren
|
|
1843
1707
|
var infoParams = null;
|
|
1844
|
-
|
|
1845
1708
|
if (infoProps) {
|
|
1846
1709
|
infoParams = info(infoProps)(transformedChildren);
|
|
1847
1710
|
transformedChildren = infoParams.children;
|
|
1848
1711
|
}
|
|
1849
|
-
|
|
1850
1712
|
var merged = mergeProps(sortParams, selectParams, collapseParams, widthParams, visibilityParams, infoParams);
|
|
1851
|
-
|
|
1852
1713
|
var _merged$className = merged.className,
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1714
|
+
mergedClassName = _merged$className === void 0 ? '' : _merged$className,
|
|
1715
|
+
_merged$component = merged.component,
|
|
1716
|
+
MergedComponent = _merged$component === void 0 ? component : _merged$component,
|
|
1717
|
+
mergedProps = __rest(merged, ["children", "isVisible", "className", "component"]);
|
|
1858
1718
|
React__namespace.useEffect(function () {
|
|
1859
1719
|
setTruncated(cellRef.current.offsetWidth < cellRef.current.scrollWidth);
|
|
1860
1720
|
}, [cellRef]);
|
|
@@ -1883,7 +1743,6 @@ var ThBase = function ThBase(_a) {
|
|
|
1883
1743
|
isVisible: true
|
|
1884
1744
|
}, tooltipProps))) : cell;
|
|
1885
1745
|
};
|
|
1886
|
-
|
|
1887
1746
|
var Th = React__namespace.forwardRef(function (props, ref) {
|
|
1888
1747
|
return React__namespace.createElement(ThBase, Object.assign({}, props, {
|
|
1889
1748
|
innerRef: ref
|
|
@@ -1904,71 +1763,64 @@ var draggable = function draggable(value, _ref) {
|
|
|
1904
1763
|
|
|
1905
1764
|
var TdBase = function TdBase(_a) {
|
|
1906
1765
|
var _Object$assign;
|
|
1907
|
-
|
|
1908
1766
|
var children = _a.children,
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1767
|
+
className = _a.className,
|
|
1768
|
+
_a$isActionCell = _a.isActionCell,
|
|
1769
|
+
isActionCell = _a$isActionCell === void 0 ? false : _a$isActionCell,
|
|
1770
|
+
_a$component = _a.component,
|
|
1771
|
+
component = _a$component === void 0 ? 'td' : _a$component,
|
|
1772
|
+
dataLabel = _a.dataLabel,
|
|
1773
|
+
_a$textCenter = _a.textCenter,
|
|
1774
|
+
textCenter = _a$textCenter === void 0 ? false : _a$textCenter,
|
|
1775
|
+
modifier = _a.modifier,
|
|
1776
|
+
_a$select = _a.select,
|
|
1777
|
+
select = _a$select === void 0 ? null : _a$select,
|
|
1778
|
+
_a$actions = _a.actions,
|
|
1779
|
+
actions = _a$actions === void 0 ? null : _a$actions,
|
|
1780
|
+
_a$expand = _a.expand,
|
|
1781
|
+
expand = _a$expand === void 0 ? null : _a$expand,
|
|
1782
|
+
_a$treeRow = _a.treeRow,
|
|
1783
|
+
treeRowProp = _a$treeRow === void 0 ? null : _a$treeRow,
|
|
1784
|
+
_a$compoundExpand = _a.compoundExpand,
|
|
1785
|
+
compoundExpandProp = _a$compoundExpand === void 0 ? null : _a$compoundExpand,
|
|
1786
|
+
noPadding = _a.noPadding,
|
|
1787
|
+
width = _a.width,
|
|
1788
|
+
visibility = _a.visibility,
|
|
1789
|
+
innerRef = _a.innerRef,
|
|
1790
|
+
_a$favorites = _a.favorites,
|
|
1791
|
+
favorites = _a$favorites === void 0 ? null : _a$favorites,
|
|
1792
|
+
_a$draggableRow = _a.draggableRow,
|
|
1793
|
+
draggableRowProp = _a$draggableRow === void 0 ? null : _a$draggableRow,
|
|
1794
|
+
_a$tooltip = _a.tooltip,
|
|
1795
|
+
tooltip = _a$tooltip === void 0 ? '' : _a$tooltip,
|
|
1796
|
+
_a$onMouseEnter = _a.onMouseEnter,
|
|
1797
|
+
onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
|
|
1798
|
+
_a$isStickyColumn = _a.isStickyColumn,
|
|
1799
|
+
isStickyColumn = _a$isStickyColumn === void 0 ? false : _a$isStickyColumn,
|
|
1800
|
+
_a$hasRightBorder = _a.hasRightBorder,
|
|
1801
|
+
hasRightBorder = _a$hasRightBorder === void 0 ? false : _a$hasRightBorder,
|
|
1802
|
+
_a$hasLeftBorder = _a.hasLeftBorder,
|
|
1803
|
+
hasLeftBorder = _a$hasLeftBorder === void 0 ? false : _a$hasLeftBorder,
|
|
1804
|
+
_a$stickyMinWidth = _a.stickyMinWidth,
|
|
1805
|
+
stickyMinWidth = _a$stickyMinWidth === void 0 ? '120px' : _a$stickyMinWidth,
|
|
1806
|
+
stickyLeftOffset = _a.stickyLeftOffset,
|
|
1807
|
+
stickyRightOffset = _a.stickyRightOffset,
|
|
1808
|
+
props = __rest(_a, ["children", "className", "isActionCell", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow", "tooltip", "onMouseEnter", "isStickyColumn", "hasRightBorder", "hasLeftBorder", "stickyMinWidth", "stickyLeftOffset", "stickyRightOffset"]);
|
|
1952
1809
|
var _React$useState = React__namespace.useState(false),
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1810
|
+
showTooltip = _React$useState[0],
|
|
1811
|
+
setShowTooltip = _React$useState[1];
|
|
1956
1812
|
var _React$useState2 = React__namespace.useState(false),
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1813
|
+
truncated = _React$useState2[0],
|
|
1814
|
+
setTruncated = _React$useState2[1];
|
|
1960
1815
|
var cellRef = innerRef ? innerRef : React__namespace.createRef();
|
|
1961
|
-
|
|
1962
1816
|
var onMouseEnter = function onMouseEnter(event) {
|
|
1963
1817
|
if (event.target.offsetWidth < event.target.scrollWidth) {
|
|
1964
1818
|
!showTooltip && setShowTooltip(true);
|
|
1965
1819
|
} else {
|
|
1966
1820
|
showTooltip && setShowTooltip(false);
|
|
1967
1821
|
}
|
|
1968
|
-
|
|
1969
1822
|
onMouseEnterProp(event);
|
|
1970
1823
|
};
|
|
1971
|
-
|
|
1972
1824
|
var selectParams = select ? selectable(children, {
|
|
1973
1825
|
rowIndex: select.rowIndex,
|
|
1974
1826
|
rowData: {
|
|
@@ -2056,15 +1908,13 @@ var TdBase = function TdBase(_a) {
|
|
|
2056
1908
|
}
|
|
2057
1909
|
}) : null;
|
|
2058
1910
|
var merged = mergeProps(selectParams, actionParams, expandableParams, compoundParams, widthParams, visibilityParams, favoriteParams, treeRowParams, draggableParams);
|
|
2059
|
-
|
|
2060
1911
|
var _merged$children = merged.children,
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
1912
|
+
mergedChildren = _merged$children === void 0 ? null : _merged$children,
|
|
1913
|
+
_merged$className = merged.className,
|
|
1914
|
+
mergedClassName = _merged$className === void 0 ? '' : _merged$className,
|
|
1915
|
+
_merged$component = merged.component,
|
|
1916
|
+
MergedComponent = _merged$component === void 0 ? component : _merged$component,
|
|
1917
|
+
mergedProps = __rest(merged, ["isVisible", "children", "className", "component"]);
|
|
2068
1918
|
var treeTableTitleCell = className && className.includes(treeViewStyles.tableTreeViewTitleCell) || mergedClassName && mergedClassName.includes(treeViewStyles.tableTreeViewTitleCell);
|
|
2069
1919
|
React__namespace.useEffect(function () {
|
|
2070
1920
|
setTruncated(cellRef.current.offsetWidth < cellRef.current.scrollWidth);
|
|
@@ -2091,7 +1941,6 @@ var TdBase = function TdBase(_a) {
|
|
|
2091
1941
|
isVisible: true
|
|
2092
1942
|
})) : cell;
|
|
2093
1943
|
};
|
|
2094
|
-
|
|
2095
1944
|
var Td = React__namespace.forwardRef(function (props, ref) {
|
|
2096
1945
|
return React__namespace.createElement(TdBase, Object.assign({}, props, {
|
|
2097
1946
|
innerRef: ref
|
|
@@ -2122,51 +1971,41 @@ var SecurityIcon = createIcon(SecurityIconConfig);
|
|
|
2122
1971
|
var DEFAULT_PAGE = 1;
|
|
2123
1972
|
var DEFAULT_PERPAGE = 10;
|
|
2124
1973
|
function FilterableTable(_ref) {
|
|
2125
|
-
|
|
2126
1974
|
var columns = _ref.columns,
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
1975
|
+
items = _ref.items,
|
|
1976
|
+
isLoading = _ref.isLoading,
|
|
1977
|
+
renderRow = _ref.renderRow,
|
|
1978
|
+
filters = _ref.filters,
|
|
1979
|
+
actions = _ref.actions,
|
|
1980
|
+
perPageOptions = _ref.perPageOptions;
|
|
2134
1981
|
var _useState = React.useState(DEFAULT_PAGE),
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
1982
|
+
page = _useState[0],
|
|
1983
|
+
setPage = _useState[1];
|
|
2138
1984
|
var _useState2 = React.useState(DEFAULT_PERPAGE ),
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
1985
|
+
perPage = _useState2[0],
|
|
1986
|
+
setPerPage = _useState2[1];
|
|
2142
1987
|
var _useState3 = React.useState({}),
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
1988
|
+
sortTableBy = _useState3[0],
|
|
1989
|
+
setSortTableBy = _useState3[1];
|
|
2146
1990
|
var _useState4 = React.useState([]),
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
1991
|
+
rows = _useState4[0],
|
|
1992
|
+
setRows = _useState4[1];
|
|
2150
1993
|
var _useState5 = React.useState(items),
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
1994
|
+
filteredItems = _useState5[0],
|
|
1995
|
+
setFilteredItems = _useState5[1];
|
|
2154
1996
|
var _useState6 = React.useState([]),
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
/**
|
|
2158
|
-
* Sorts table by the selected column in ascending or decending order
|
|
2159
|
-
* @param _event click
|
|
2160
|
-
* @param index column index
|
|
2161
|
-
* @param direction asc || desc
|
|
1997
|
+
tableFilters = _useState6[0],
|
|
1998
|
+
setTableFilters = _useState6[1];
|
|
1999
|
+
/**
|
|
2000
|
+
* Sorts table by the selected column in ascending or decending order
|
|
2001
|
+
* @param _event click
|
|
2002
|
+
* @param index column index
|
|
2003
|
+
* @param direction asc || desc
|
|
2162
2004
|
*/
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
2005
|
var onSort = function onSort(_event, index, direction) {
|
|
2166
2006
|
var _columns$index, _columns$index2;
|
|
2167
|
-
|
|
2168
|
-
var
|
|
2169
|
-
var sortFn = columns == null ? void 0 : (_columns$index2 = columns[index]) == null ? void 0 : _columns$index2.sortFn;
|
|
2007
|
+
var sortField = columns == null || (_columns$index = columns[index]) == null ? void 0 : _columns$index.sortField;
|
|
2008
|
+
var sortFn = columns == null || (_columns$index2 = columns[index]) == null ? void 0 : _columns$index2.sortFn;
|
|
2170
2009
|
var sortedRows = sortFn ? lodash.sortBy(filteredItems, sortFn) : sortField ? lodash.sortBy(filteredItems, function (item) {
|
|
2171
2010
|
return item[sortField];
|
|
2172
2011
|
}) : filteredItems;
|
|
@@ -2176,50 +2015,43 @@ function FilterableTable(_ref) {
|
|
|
2176
2015
|
});
|
|
2177
2016
|
setFilteredItems(direction === SortByDirection.asc ? [].concat(sortedRows) : [].concat(sortedRows == null ? void 0 : sortedRows.reverse()));
|
|
2178
2017
|
};
|
|
2179
|
-
/**
|
|
2180
|
-
* Set table rows to display based on current list of filtered items, page, and perPage settings
|
|
2018
|
+
/**
|
|
2019
|
+
* Set table rows to display based on current list of filtered items, page, and perPage settings
|
|
2181
2020
|
*/
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
2021
|
React.useEffect(function () {
|
|
2185
2022
|
var startIndex = (page - 1) * perPage;
|
|
2186
2023
|
var endIndex = startIndex + perPage;
|
|
2187
2024
|
var itemsInPage = filteredItems.slice(startIndex, endIndex);
|
|
2188
2025
|
setRows(itemsInPage);
|
|
2189
2026
|
}, [filteredItems, page, perPage]);
|
|
2190
|
-
/**
|
|
2191
|
-
* If the list of items change, reset to the first page
|
|
2027
|
+
/**
|
|
2028
|
+
* If the list of items change, reset to the first page
|
|
2192
2029
|
*/
|
|
2193
|
-
|
|
2194
2030
|
function handleItemsPropChange() {
|
|
2195
2031
|
setPage(1);
|
|
2196
2032
|
}
|
|
2197
|
-
|
|
2198
2033
|
var handleItemsPropChangeCallback = React.useCallback(handleItemsPropChange, [setPage, items]);
|
|
2199
2034
|
React.useEffect(handleItemsPropChangeCallback, [handleItemsPropChangeCallback]);
|
|
2200
|
-
/**
|
|
2201
|
-
* Whenever a filter is selected or a user enter a search string, run each item through each filter condition
|
|
2202
|
-
* and check it includes the search string. Only inlcude the item in the table if it passes all filter/search string
|
|
2203
|
-
* conditions.
|
|
2035
|
+
/**
|
|
2036
|
+
* Whenever a filter is selected or a user enter a search string, run each item through each filter condition
|
|
2037
|
+
* and check it includes the search string. Only inlcude the item in the table if it passes all filter/search string
|
|
2038
|
+
* conditions.
|
|
2204
2039
|
*/
|
|
2205
|
-
|
|
2206
2040
|
React.useEffect(function () {
|
|
2207
2041
|
return setFilteredItems(items.filter(function (item) {
|
|
2208
2042
|
return tableFilters.map(function (f, i) {
|
|
2209
|
-
var _filters$i, _filters$i
|
|
2210
|
-
|
|
2211
|
-
return !f ? true : filters == null ? void 0 : (_filters$i = filters[i]) == null ? void 0 : (_filters$i$props = _filters$i.props) == null ? void 0 : _filters$i$props.onChange(f, item);
|
|
2043
|
+
var _filters$i$props$onCh, _filters$i;
|
|
2044
|
+
return !f ? true : (_filters$i$props$onCh = filters == null || (_filters$i = filters[i]) == null || (_filters$i = _filters$i.props) == null || _filters$i.onChange == null ? void 0 : _filters$i.onChange(f, item)) != null ? _filters$i$props$onCh : true;
|
|
2212
2045
|
}).reduce(function (r, v) {
|
|
2213
2046
|
return r && v;
|
|
2214
2047
|
}, true);
|
|
2215
2048
|
}));
|
|
2216
2049
|
}, [filters, items, tableFilters]);
|
|
2217
|
-
/**
|
|
2218
|
-
* Whenever a new filter is selected by the user, update the state of selectedFilters
|
|
2219
|
-
* @param selected filter selections
|
|
2220
|
-
* @param index filter to update with new selections
|
|
2050
|
+
/**
|
|
2051
|
+
* Whenever a new filter is selected by the user, update the state of selectedFilters
|
|
2052
|
+
* @param selected filter selections
|
|
2053
|
+
* @param index filter to update with new selections
|
|
2221
2054
|
*/
|
|
2222
|
-
|
|
2223
2055
|
var onFilterChange = function onFilterChange(selected, index) {
|
|
2224
2056
|
handleItemsPropChangeCallback();
|
|
2225
2057
|
setTableFilters(function (prevState) {
|
|
@@ -2227,15 +2059,13 @@ function FilterableTable(_ref) {
|
|
|
2227
2059
|
return [].concat(prevState);
|
|
2228
2060
|
});
|
|
2229
2061
|
};
|
|
2230
|
-
/**
|
|
2231
|
-
* Pagination component
|
|
2232
|
-
* @param variant top or bottom
|
|
2233
|
-
* @returns Pagination component based on variant
|
|
2062
|
+
/**
|
|
2063
|
+
* Pagination component
|
|
2064
|
+
* @param variant top or bottom
|
|
2065
|
+
* @returns Pagination component based on variant
|
|
2234
2066
|
*/
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
2067
|
var renderPagination = function renderPagination(variant) {
|
|
2238
|
-
return (filteredItems == null ? void 0 : filteredItems.length) > 0 &&
|
|
2068
|
+
return (filteredItems == null ? void 0 : filteredItems.length) > 0 && jsxRuntime.jsx(reactCore.Pagination, {
|
|
2239
2069
|
itemCount: (filteredItems == null ? void 0 : filteredItems.length) || 0,
|
|
2240
2070
|
page: page,
|
|
2241
2071
|
perPage: perPage,
|
|
@@ -2254,80 +2084,99 @@ function FilterableTable(_ref) {
|
|
|
2254
2084
|
}
|
|
2255
2085
|
});
|
|
2256
2086
|
};
|
|
2257
|
-
/**
|
|
2258
|
-
* Toolbar populated with provided filters
|
|
2087
|
+
/**
|
|
2088
|
+
* Toolbar populated with provided filters
|
|
2259
2089
|
*/
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
}
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2090
|
+
var header = jsxRuntime.jsx(reactCore.Toolbar, {
|
|
2091
|
+
children: jsxRuntime.jsxs(reactCore.ToolbarContent, {
|
|
2092
|
+
children: [filters == null ? void 0 : filters.map(function (el, i) {
|
|
2093
|
+
return jsxRuntime.jsx(reactCore.ToolbarItem, {
|
|
2094
|
+
className: 'filterable-table__toolbar__item--filter',
|
|
2095
|
+
children: React.cloneElement(el, {
|
|
2096
|
+
onChange: function onChange(selectedFilters) {
|
|
2097
|
+
return onFilterChange(selectedFilters, i);
|
|
2098
|
+
}
|
|
2099
|
+
})
|
|
2100
|
+
}, i);
|
|
2101
|
+
}), actions == null ? void 0 : actions.map(function (el, i) {
|
|
2102
|
+
return jsxRuntime.jsx(reactCore.ToolbarItem, {
|
|
2103
|
+
className: 'filterable-table__toolbar__item--action',
|
|
2104
|
+
children: el
|
|
2105
|
+
}, i);
|
|
2106
|
+
}), jsxRuntime.jsx(reactCore.ToolbarItem, {
|
|
2107
|
+
variant: 'pagination',
|
|
2108
|
+
children: renderPagination('top')
|
|
2109
|
+
})]
|
|
2110
|
+
})
|
|
2111
|
+
});
|
|
2112
|
+
return jsxRuntime.jsxs("div", {
|
|
2113
|
+
className: 'filterable-table',
|
|
2114
|
+
children: [isLoading ? jsxRuntime.jsx(reactCore.Bullseye, {
|
|
2115
|
+
style: {
|
|
2116
|
+
minHeight: '15rem'
|
|
2117
|
+
},
|
|
2118
|
+
children: jsxRuntime.jsx("div", {
|
|
2119
|
+
children: jsxRuntime.jsx(reactCore.Title, {
|
|
2120
|
+
headingLevel: 'h3',
|
|
2121
|
+
children: jsxRuntime.jsx(reactCore.Spinner, {
|
|
2122
|
+
size: 'lg'
|
|
2123
|
+
})
|
|
2124
|
+
})
|
|
2125
|
+
})
|
|
2126
|
+
}) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
2127
|
+
children: [header, jsxRuntime.jsxs(Table, {
|
|
2128
|
+
"aria-label": 'Packages Table',
|
|
2129
|
+
gridBreakPoint: 'grid-xl',
|
|
2130
|
+
children: [jsxRuntime.jsx(Thead, {
|
|
2131
|
+
children: jsxRuntime.jsx(Tr, {
|
|
2132
|
+
children: columns.map(function (col, colIdx) {
|
|
2133
|
+
return jsxRuntime.jsx(Th, _extends({}, col.sortField ? {
|
|
2134
|
+
sort: {
|
|
2135
|
+
onSort: onSort,
|
|
2136
|
+
sortBy: sortTableBy,
|
|
2137
|
+
columnIndex: colIdx
|
|
2138
|
+
}
|
|
2139
|
+
} : {}, {
|
|
2140
|
+
children: col.title
|
|
2141
|
+
}), "pkg-table-head-" + colIdx);
|
|
2142
|
+
})
|
|
2143
|
+
})
|
|
2144
|
+
}), jsxRuntime.jsx(Tbody, {
|
|
2145
|
+
children: rows.length > 0 ? rows.map(function (row, rowIdx) {
|
|
2146
|
+
return jsxRuntime.jsx(Tr, {
|
|
2147
|
+
children: columns.map(function (_col, colIdx) {
|
|
2148
|
+
var _renderRow;
|
|
2149
|
+
return jsxRuntime.jsx(Td, {
|
|
2150
|
+
children: (_renderRow = renderRow(row)) == null ? void 0 : _renderRow[colIdx]
|
|
2151
|
+
}, "pkg-table-row-" + rowIdx + "-col-" + colIdx);
|
|
2152
|
+
})
|
|
2153
|
+
}, "pkg-table-row-" + rowIdx);
|
|
2154
|
+
}) : jsxRuntime.jsx(Tr, {
|
|
2155
|
+
children: jsxRuntime.jsx(Td, {
|
|
2156
|
+
colSpan: columns.length,
|
|
2157
|
+
children: jsxRuntime.jsx(reactCore.EmptyState, {
|
|
2158
|
+
children: jsxRuntime.jsx(reactCore.EmptyStateHeader, {
|
|
2159
|
+
titleText: 'No results found',
|
|
2160
|
+
icon: jsxRuntime.jsx(reactCore.EmptyStateIcon, {
|
|
2161
|
+
icon: SearchIcon
|
|
2162
|
+
}),
|
|
2163
|
+
headingLevel: 'h5'
|
|
2164
|
+
})
|
|
2165
|
+
})
|
|
2166
|
+
})
|
|
2167
|
+
})
|
|
2168
|
+
})]
|
|
2169
|
+
})]
|
|
2170
|
+
}), renderPagination('bottom')]
|
|
2171
|
+
});
|
|
2321
2172
|
}
|
|
2322
2173
|
|
|
2323
2174
|
var FilterInput = function FilterInput(_ref) {
|
|
2324
2175
|
var onChangeHandler = _ref.onChange,
|
|
2325
|
-
|
|
2326
|
-
|
|
2176
|
+
placeholder = _ref.placeholder;
|
|
2327
2177
|
var _useState = React.useState(''),
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2178
|
+
searchStr = _useState[0],
|
|
2179
|
+
setSearchStr = _useState[1];
|
|
2331
2180
|
var onChange = function onChange(event, text) {
|
|
2332
2181
|
event.stopPropagation();
|
|
2333
2182
|
event.preventDefault();
|
|
@@ -2336,102 +2185,98 @@ var FilterInput = function FilterInput(_ref) {
|
|
|
2336
2185
|
return text;
|
|
2337
2186
|
});
|
|
2338
2187
|
};
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
|
|
2343
|
-
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
|
|
2348
|
-
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
}
|
|
2358
|
-
})
|
|
2188
|
+
return jsxRuntime.jsx("div", {
|
|
2189
|
+
className: 'filter-input',
|
|
2190
|
+
children: jsxRuntime.jsx(reactCore.SearchInput, {
|
|
2191
|
+
value: searchStr,
|
|
2192
|
+
placeholder: placeholder,
|
|
2193
|
+
onChange: onChange,
|
|
2194
|
+
"aria-label": 'Text input filter',
|
|
2195
|
+
onFocus: function onFocus(event) {
|
|
2196
|
+
event.stopPropagation();
|
|
2197
|
+
event.preventDefault();
|
|
2198
|
+
},
|
|
2199
|
+
onClick: function onClick(event) {
|
|
2200
|
+
event.stopPropagation();
|
|
2201
|
+
event.preventDefault();
|
|
2202
|
+
},
|
|
2203
|
+
onClear: function onClear(event) {
|
|
2204
|
+
return onChange(event, '');
|
|
2205
|
+
}
|
|
2206
|
+
})
|
|
2207
|
+
});
|
|
2359
2208
|
};
|
|
2360
2209
|
|
|
2361
2210
|
var ExcludedPackagesTable = function ExcludedPackagesTable(_ref) {
|
|
2362
2211
|
var excludedPackages = _ref.excludedPackages,
|
|
2363
|
-
|
|
2364
|
-
|
|
2212
|
+
isLoading = _ref.isLoading;
|
|
2365
2213
|
var renderPackagesRow = function renderPackagesRow(_ref2) {
|
|
2366
2214
|
var gpg = _ref2.gpg,
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
return [gpg ?
|
|
2215
|
+
name = _ref2.name,
|
|
2216
|
+
version = _ref2.version,
|
|
2217
|
+
release = _ref2.release,
|
|
2218
|
+
architecture = _ref2.architecture,
|
|
2219
|
+
nvra = _ref2.nvra,
|
|
2220
|
+
summary = _ref2.summary;
|
|
2221
|
+
return [gpg ? jsxRuntime.jsx("a", {
|
|
2374
2222
|
href: "https://access.redhat.com/downloads/content/" + name + "/" + version + "}-" + release + "/" + architecture + "/" + (gpg == null ? void 0 : gpg.slice(-8)) + "/package",
|
|
2375
2223
|
target: '_blank',
|
|
2376
|
-
rel: 'noopener noreferrer'
|
|
2377
|
-
|
|
2224
|
+
rel: 'noopener noreferrer',
|
|
2225
|
+
children: nvra
|
|
2226
|
+
}) : jsxRuntime.jsx("span", {
|
|
2227
|
+
children: nvra
|
|
2228
|
+
}), summary];
|
|
2378
2229
|
};
|
|
2379
|
-
|
|
2380
2230
|
var onTextInputFilterChange = function onTextInputFilterChange(text, _ref3) {
|
|
2381
2231
|
var nvra = _ref3.nvra,
|
|
2382
|
-
|
|
2232
|
+
summary = _ref3.summary;
|
|
2383
2233
|
return ("" + (nvra + summary)).toLowerCase().includes(text.toLowerCase());
|
|
2384
2234
|
};
|
|
2385
|
-
|
|
2386
|
-
|
|
2387
|
-
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
|
|
2394
|
-
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
}));
|
|
2235
|
+
return jsxRuntime.jsx("div", {
|
|
2236
|
+
className: 'excluded-packages-table',
|
|
2237
|
+
children: jsxRuntime.jsx(FilterableTable, {
|
|
2238
|
+
isLoading: isLoading,
|
|
2239
|
+
tableName: 'Excluded packages table',
|
|
2240
|
+
columns: [{
|
|
2241
|
+
title: 'Excluded Package'
|
|
2242
|
+
}, {
|
|
2243
|
+
title: 'Summary'
|
|
2244
|
+
}],
|
|
2245
|
+
items: excludedPackages,
|
|
2246
|
+
renderRow: renderPackagesRow,
|
|
2247
|
+
perPageOptions: [{
|
|
2248
|
+
title: '5',
|
|
2249
|
+
value: 5
|
|
2250
|
+
}, {
|
|
2251
|
+
title: '10',
|
|
2252
|
+
value: 10
|
|
2253
|
+
}, {
|
|
2254
|
+
title: '20',
|
|
2255
|
+
value: 20
|
|
2256
|
+
}],
|
|
2257
|
+
filters: [jsxRuntime.jsx(FilterInput, {
|
|
2258
|
+
onChange: onTextInputFilterChange,
|
|
2259
|
+
placeholder: 'Filter excluded packages'
|
|
2260
|
+
}, 'excluded-packages-table__filter-input')]
|
|
2261
|
+
})
|
|
2262
|
+
});
|
|
2414
2263
|
};
|
|
2415
2264
|
|
|
2416
2265
|
function EcoSelect(_ref) {
|
|
2417
2266
|
var variant = _ref.variant,
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2267
|
+
placeholderText = _ref.placeholderText,
|
|
2268
|
+
options = _ref.options,
|
|
2269
|
+
onChange = _ref.onChange,
|
|
2270
|
+
ariaLabel = _ref['aria-label'];
|
|
2423
2271
|
var _useState = React.useState(false),
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2272
|
+
isOpen = _useState[0],
|
|
2273
|
+
setIsOpen = _useState[1];
|
|
2427
2274
|
var _useState2 = React.useState([]),
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2275
|
+
selected = _useState2[0],
|
|
2276
|
+
setSelected = _useState2[1];
|
|
2431
2277
|
var _onToggle = function onToggle(isOpen) {
|
|
2432
2278
|
return setIsOpen(isOpen);
|
|
2433
2279
|
};
|
|
2434
|
-
|
|
2435
2280
|
var onSelect = function onSelect(event, selection) {
|
|
2436
2281
|
var result = selected.includes(selection) ? selected.filter(function (item) {
|
|
2437
2282
|
return item !== selection;
|
|
@@ -2439,35 +2284,34 @@ function EcoSelect(_ref) {
|
|
|
2439
2284
|
setSelected(result);
|
|
2440
2285
|
onChange && onChange(result, event);
|
|
2441
2286
|
};
|
|
2442
|
-
|
|
2443
2287
|
var id = lodash.uniqueId('select-');
|
|
2444
|
-
return
|
|
2445
|
-
className: 'select'
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2288
|
+
return jsxRuntime.jsx("div", {
|
|
2289
|
+
className: 'select',
|
|
2290
|
+
children: jsxRuntime.jsx(deprecated.Select, {
|
|
2291
|
+
id: id,
|
|
2292
|
+
variant: variant,
|
|
2293
|
+
"aria-label": ariaLabel,
|
|
2294
|
+
onToggle: function onToggle(_event, isOpen) {
|
|
2295
|
+
return _onToggle(isOpen);
|
|
2296
|
+
},
|
|
2297
|
+
onSelect: onSelect,
|
|
2298
|
+
selections: selected,
|
|
2299
|
+
isOpen: isOpen,
|
|
2300
|
+
placeholderText: placeholderText,
|
|
2301
|
+
className: 'pf-select-wrapper',
|
|
2302
|
+
children: options.map(function (option) {
|
|
2303
|
+
return jsxRuntime.jsx(deprecated.SelectOption, {
|
|
2304
|
+
value: option
|
|
2305
|
+
}, option);
|
|
2306
|
+
})
|
|
2307
|
+
})
|
|
2308
|
+
});
|
|
2464
2309
|
}
|
|
2465
2310
|
|
|
2466
2311
|
var ToggleGroup = function ToggleGroup(props) {
|
|
2467
2312
|
var _useState = React.useState(''),
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2313
|
+
selected = _useState[0],
|
|
2314
|
+
setSelected = _useState[1];
|
|
2471
2315
|
var onClick = function onClick(_, event) {
|
|
2472
2316
|
var id = event.currentTarget.id;
|
|
2473
2317
|
setSelected(function () {
|
|
@@ -2475,188 +2319,191 @@ var ToggleGroup = function ToggleGroup(props) {
|
|
|
2475
2319
|
return id;
|
|
2476
2320
|
});
|
|
2477
2321
|
};
|
|
2478
|
-
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
}));
|
|
2322
|
+
return jsxRuntime.jsx(reactCore.ToggleGroup, {
|
|
2323
|
+
"aria-label": props['aria-label'],
|
|
2324
|
+
children: props.options.map(function (option, index) {
|
|
2325
|
+
return jsxRuntime.jsx(reactCore.ToggleGroupItem, {
|
|
2326
|
+
text: option.text,
|
|
2327
|
+
buttonId: option.id,
|
|
2328
|
+
isSelected: selected === option.id,
|
|
2329
|
+
onChange: function onChange(event, _) {
|
|
2330
|
+
return onClick(_, event);
|
|
2331
|
+
}
|
|
2332
|
+
}, index);
|
|
2333
|
+
})
|
|
2334
|
+
});
|
|
2492
2335
|
};
|
|
2493
2336
|
|
|
2494
|
-
/* eslint-disable camelcase */
|
|
2495
2337
|
var VulnerabilitiesTable = function VulnerabilitiesTable(_ref) {
|
|
2496
2338
|
var vulnerabilities = _ref.vulnerabilities,
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2339
|
+
isLoading = _ref.isLoading,
|
|
2340
|
+
hideToggler = _ref.hideToggler;
|
|
2500
2341
|
var getImpact = function getImpact(_ref2) {
|
|
2501
2342
|
var severity = _ref2.severity;
|
|
2502
|
-
return
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2343
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
2344
|
+
children: jsxRuntime.jsxs("div", {
|
|
2345
|
+
className: 'vulnerabilities-table__impact-cell',
|
|
2346
|
+
children: [jsxRuntime.jsx(SecurityIcon, {
|
|
2347
|
+
className: "impact-icon color-" + severity.toLowerCase()
|
|
2348
|
+
}), jsxRuntime.jsx("span", {
|
|
2349
|
+
children: severity
|
|
2350
|
+
})]
|
|
2351
|
+
})
|
|
2352
|
+
});
|
|
2507
2353
|
};
|
|
2508
|
-
|
|
2509
2354
|
var getCVE = function getCVE(_ref3) {
|
|
2510
2355
|
var cve_id = _ref3.cve_id;
|
|
2511
|
-
return
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2356
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
2357
|
+
children: jsxRuntime.jsx("div", {
|
|
2358
|
+
className: 'vulnerabilities-table__cve-cell',
|
|
2359
|
+
children: jsxRuntime.jsx("a", {
|
|
2360
|
+
href: "https://access.redhat.com/security/cve/" + cve_id,
|
|
2361
|
+
target: '_blank',
|
|
2362
|
+
rel: 'noopener noreferrer',
|
|
2363
|
+
children: cve_id
|
|
2364
|
+
})
|
|
2365
|
+
})
|
|
2366
|
+
});
|
|
2518
2367
|
};
|
|
2519
|
-
|
|
2520
2368
|
var getAffectedPackages = function getAffectedPackages(rpms) {
|
|
2521
|
-
return
|
|
2522
|
-
|
|
2369
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
2370
|
+
children: rpms == null ? void 0 : rpms.map(function (_temp, index) {
|
|
2371
|
+
var _ref4 = _temp === void 0 ? {} : _temp,
|
|
2523
2372
|
gpg = _ref4.gpg,
|
|
2524
2373
|
name = _ref4.name,
|
|
2525
2374
|
version = _ref4.version,
|
|
2526
2375
|
release = _ref4.release,
|
|
2527
2376
|
architecture = _ref4.architecture,
|
|
2528
2377
|
nvra = _ref4.nvra;
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
|
|
2539
|
-
|
|
2540
|
-
|
|
2541
|
-
|
|
2378
|
+
return gpg ? jsxRuntime.jsx("div", {
|
|
2379
|
+
className: 'vulnerabilities-table__affected-packages-cell',
|
|
2380
|
+
children: jsxRuntime.jsx("a", {
|
|
2381
|
+
href: "https://access.redhat.com/downloads/content/" + name + "/" + version + "-" + release + "/" + architecture + "/" + (gpg == null ? void 0 : gpg.slice(-8)) + "/package",
|
|
2382
|
+
target: '_blank',
|
|
2383
|
+
rel: 'noopener noreferrer',
|
|
2384
|
+
children: nvra
|
|
2385
|
+
})
|
|
2386
|
+
}, "affected-package-" + index) : jsxRuntime.jsx("div", {
|
|
2387
|
+
className: 'vulnerabilities-table__affected-packages-cell',
|
|
2388
|
+
children: jsxRuntime.jsx("span", {
|
|
2389
|
+
children: nvra
|
|
2390
|
+
})
|
|
2391
|
+
}, "affected-package-" + index);
|
|
2392
|
+
})
|
|
2393
|
+
});
|
|
2542
2394
|
};
|
|
2543
|
-
|
|
2544
2395
|
var getRPMAdvisory = function getRPMAdvisory(_ref5) {
|
|
2545
2396
|
var advisory_type = _ref5.advisory_type,
|
|
2546
|
-
|
|
2547
|
-
return
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
|
|
2553
|
-
|
|
2397
|
+
advisory_id = _ref5.advisory_id;
|
|
2398
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
2399
|
+
children: jsxRuntime.jsx("div", {
|
|
2400
|
+
className: 'vulnerabilities-table__rpm-advisory-cell',
|
|
2401
|
+
children: advisory_type && advisory_id ? jsxRuntime.jsxs("a", {
|
|
2402
|
+
href: "https://access.redhat.com/errata/" + advisory_type + "-" + advisory_id,
|
|
2403
|
+
target: '_blank',
|
|
2404
|
+
rel: 'noopener noreferrer',
|
|
2405
|
+
children: [advisory_type, "-", advisory_id]
|
|
2406
|
+
}) : jsxRuntime.jsx("span", {
|
|
2407
|
+
children: "-"
|
|
2408
|
+
})
|
|
2409
|
+
})
|
|
2410
|
+
});
|
|
2554
2411
|
};
|
|
2555
|
-
|
|
2556
2412
|
var renderVulnerabilitiesRow = function renderVulnerabilitiesRow(vulnerability) {
|
|
2557
2413
|
return [getImpact(vulnerability), getCVE(vulnerability), getAffectedPackages(vulnerability.rpm_nvra_with_link_data), getRPMAdvisory(vulnerability), vulnerability != null && vulnerability.creation_date ? dateFns.format(new Date(vulnerability == null ? void 0 : vulnerability.creation_date), 'MMM dd, yyyy hh:mm a') : ''];
|
|
2558
2414
|
};
|
|
2559
|
-
|
|
2560
2415
|
var onTextInputFilterChange = function onTextInputFilterChange(text, _ref6) {
|
|
2561
2416
|
var rpm_nvra_with_link_data = _ref6.rpm_nvra_with_link_data,
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2417
|
+
severity = _ref6.severity,
|
|
2418
|
+
cve_id = _ref6.cve_id,
|
|
2419
|
+
advisory_id = _ref6.advisory_id;
|
|
2565
2420
|
var nvraList = rpm_nvra_with_link_data.reduce(function (result, _ref7) {
|
|
2566
2421
|
var nvra = _ref7.nvra;
|
|
2567
2422
|
return result += nvra;
|
|
2568
2423
|
}, '');
|
|
2569
2424
|
return ("" + (severity + cve_id + advisory_id + nvraList)).toLowerCase().includes(text.toLowerCase());
|
|
2570
2425
|
};
|
|
2571
|
-
|
|
2572
2426
|
var onStatusFilterChange = function onStatusFilterChange(selected, vulnerability) {
|
|
2573
2427
|
return selected === 'fixed' ? !!(vulnerability != null && vulnerability.advisory_id) : selected === 'unfixed' ? !(vulnerability != null && vulnerability.advisory_id) : true;
|
|
2574
2428
|
};
|
|
2575
|
-
|
|
2576
2429
|
var onImpactFilterChange = function onImpactFilterChange(selected, vulnerability) {
|
|
2577
2430
|
return selected.length > 0 ? selected.includes(vulnerability.severity) : true;
|
|
2578
2431
|
};
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
}
|
|
2590
|
-
}, {
|
|
2591
|
-
title: 'CVE',
|
|
2592
|
-
sortField: 'cve_id'
|
|
2593
|
-
}, {
|
|
2594
|
-
title: 'Affected Package(s)'
|
|
2595
|
-
}, {
|
|
2596
|
-
title: 'RPM Advisory',
|
|
2597
|
-
sortField: 'advisory_id'
|
|
2598
|
-
}, {
|
|
2599
|
-
title: 'Created',
|
|
2600
|
-
sortField: 'creation_date',
|
|
2601
|
-
sortFn: function sortFn(vulnerability) {
|
|
2602
|
-
return new Date(vulnerability == null ? void 0 : vulnerability.creation_date).getTime();
|
|
2603
|
-
}
|
|
2604
|
-
}],
|
|
2605
|
-
items: vulnerabilities,
|
|
2606
|
-
renderRow: renderVulnerabilitiesRow,
|
|
2607
|
-
isLoading: isLoading,
|
|
2608
|
-
perPageOptions: [{
|
|
2609
|
-
title: '5',
|
|
2610
|
-
value: 5
|
|
2611
|
-
}, {
|
|
2612
|
-
title: '10',
|
|
2613
|
-
value: 10
|
|
2614
|
-
}, {
|
|
2615
|
-
title: '20',
|
|
2616
|
-
value: 20
|
|
2617
|
-
}],
|
|
2618
|
-
filters: [React__default["default"].createElement(FilterInput, {
|
|
2619
|
-
key: 'vulnerabilities-table__filter-input',
|
|
2620
|
-
onChange: onTextInputFilterChange,
|
|
2621
|
-
placeholder: 'Filter vulnerabilities'
|
|
2622
|
-
}), !hideToggler ? React__default["default"].createElement(ToggleGroup, {
|
|
2623
|
-
key: 'vulnerabilities-table__toggle-group',
|
|
2624
|
-
onChange: onStatusFilterChange,
|
|
2625
|
-
"aria-label": 'Vulnerability status filter',
|
|
2626
|
-
options: [{
|
|
2627
|
-
id: 'all',
|
|
2628
|
-
text: 'All'
|
|
2432
|
+
return jsxRuntime.jsx("div", {
|
|
2433
|
+
className: 'vulnerabilities-table',
|
|
2434
|
+
children: jsxRuntime.jsx(FilterableTable, {
|
|
2435
|
+
tableName: 'Vulnerabilities impact table',
|
|
2436
|
+
columns: [{
|
|
2437
|
+
title: 'Impact',
|
|
2438
|
+
sortField: 'severity',
|
|
2439
|
+
sortFn: function sortFn(vulnerability) {
|
|
2440
|
+
return severitySortOrder[vulnerability.severity];
|
|
2441
|
+
}
|
|
2629
2442
|
}, {
|
|
2630
|
-
|
|
2631
|
-
|
|
2443
|
+
title: 'CVE',
|
|
2444
|
+
sortField: 'cve_id'
|
|
2632
2445
|
}, {
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2446
|
+
title: 'Affected Package(s)'
|
|
2447
|
+
}, {
|
|
2448
|
+
title: 'RPM Advisory',
|
|
2449
|
+
sortField: 'advisory_id'
|
|
2450
|
+
}, {
|
|
2451
|
+
title: 'Created',
|
|
2452
|
+
sortField: 'creation_date',
|
|
2453
|
+
sortFn: function sortFn(vulnerability) {
|
|
2454
|
+
return new Date(vulnerability == null ? void 0 : vulnerability.creation_date).getTime();
|
|
2455
|
+
}
|
|
2456
|
+
}],
|
|
2457
|
+
items: vulnerabilities,
|
|
2458
|
+
renderRow: renderVulnerabilitiesRow,
|
|
2459
|
+
isLoading: isLoading,
|
|
2460
|
+
perPageOptions: [{
|
|
2461
|
+
title: '5',
|
|
2462
|
+
value: 5
|
|
2463
|
+
}, {
|
|
2464
|
+
title: '10',
|
|
2465
|
+
value: 10
|
|
2466
|
+
}, {
|
|
2467
|
+
title: '20',
|
|
2468
|
+
value: 20
|
|
2469
|
+
}],
|
|
2470
|
+
filters: [jsxRuntime.jsx(FilterInput, {
|
|
2471
|
+
onChange: onTextInputFilterChange,
|
|
2472
|
+
placeholder: 'Filter vulnerabilities'
|
|
2473
|
+
}, 'vulnerabilities-table__filter-input'), !hideToggler ? jsxRuntime.jsx(ToggleGroup, {
|
|
2474
|
+
onChange: onStatusFilterChange,
|
|
2475
|
+
"aria-label": 'Vulnerability status filter',
|
|
2476
|
+
options: [{
|
|
2477
|
+
id: 'all',
|
|
2478
|
+
text: 'All'
|
|
2479
|
+
}, {
|
|
2480
|
+
id: 'fixed',
|
|
2481
|
+
text: 'Fixed'
|
|
2482
|
+
}, {
|
|
2483
|
+
id: 'unfixed',
|
|
2484
|
+
text: 'Unfixed'
|
|
2485
|
+
}]
|
|
2486
|
+
}, 'vulnerabilities-table__toggle-group') : jsxRuntime.jsx(jsxRuntime.Fragment, {}), jsxRuntime.jsx(EcoSelect, {
|
|
2487
|
+
onChange: onImpactFilterChange,
|
|
2488
|
+
"aria-label": 'Impact filter',
|
|
2489
|
+
placeholderText: 'Impact',
|
|
2490
|
+
variant: 'checkbox',
|
|
2491
|
+
options: Array.from(new Set(vulnerabilities.map(function (vulnerability) {
|
|
2492
|
+
return vulnerability.severity;
|
|
2493
|
+
})))
|
|
2494
|
+
}, 'vulnerabilities-table__select')]
|
|
2495
|
+
})
|
|
2496
|
+
});
|
|
2647
2497
|
};
|
|
2648
2498
|
|
|
2649
|
-
/* eslint-disable camelcase */
|
|
2650
2499
|
var severitySortOrder = {
|
|
2651
2500
|
Critical: 1,
|
|
2652
2501
|
Important: 2,
|
|
2653
2502
|
Moderate: 3,
|
|
2654
2503
|
Low: 4
|
|
2655
2504
|
};
|
|
2656
|
-
|
|
2657
2505
|
var InsertCss = function InsertCss() {
|
|
2658
2506
|
var styleId = 'example-component-styles';
|
|
2659
|
-
|
|
2660
2507
|
if (!document.getElementById(styleId)) {
|
|
2661
2508
|
var styleTag = document.createElement('style');
|
|
2662
2509
|
styleTag.id = styleId;
|
|
@@ -2664,46 +2511,40 @@ var InsertCss = function InsertCss() {
|
|
|
2664
2511
|
document.body.appendChild(styleTag);
|
|
2665
2512
|
}
|
|
2666
2513
|
};
|
|
2667
|
-
|
|
2668
2514
|
var PackagesTable = function PackagesTable(_ref) {
|
|
2669
2515
|
var _ref$vulnerabilities = _ref.vulnerabilities,
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
activeKey = _React$useState3[0],
|
|
2687
|
-
setActiveKey = _React$useState3[1];
|
|
2688
|
-
|
|
2689
|
-
React__namespace.useEffect(function () {
|
|
2516
|
+
vulnerabilities = _ref$vulnerabilities === void 0 ? [] : _ref$vulnerabilities,
|
|
2517
|
+
_ref$rpms = _ref.rpms,
|
|
2518
|
+
rpms = _ref$rpms === void 0 ? [] : _ref$rpms,
|
|
2519
|
+
hideToggler = _ref.hideToggler,
|
|
2520
|
+
_ref$isLoading = _ref.isLoading,
|
|
2521
|
+
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
|
|
2522
|
+
var _useState = React.useState([]),
|
|
2523
|
+
excludedPackages = _useState[0],
|
|
2524
|
+
setExcludedPackages = _useState[1];
|
|
2525
|
+
var _useState2 = React.useState([]),
|
|
2526
|
+
uniqueVulnerabilities = _useState2[0],
|
|
2527
|
+
setUniqueVulnerabilities = _useState2[1];
|
|
2528
|
+
var _useState3 = React.useState(0),
|
|
2529
|
+
activeKey = _useState3[0],
|
|
2530
|
+
setActiveKey = _useState3[1];
|
|
2531
|
+
React.useEffect(function () {
|
|
2690
2532
|
var VALID_REDHAT_GPG_KEYS = ['199e2f91fd431d51', '5326810137017186', '45689c882fa658e0', '219180cddb42a60e', '7514f77d8366b0d9', 'fd372689897da07a', '938a80caf21541eb', '08b871e6a5787476'];
|
|
2691
2533
|
var packages = rpms.filter(function (_ref2) {
|
|
2692
2534
|
var gpg = _ref2.gpg;
|
|
2693
2535
|
return !VALID_REDHAT_GPG_KEYS.includes(gpg);
|
|
2694
2536
|
});
|
|
2695
2537
|
setExcludedPackages(packages);
|
|
2696
|
-
var uniqueVulnerabilities = [].concat(vulnerabilities);
|
|
2697
|
-
|
|
2538
|
+
var uniqueVulnerabilities = [].concat(vulnerabilities);
|
|
2539
|
+
// augment vulnerabilities with link data
|
|
2698
2540
|
uniqueVulnerabilities.forEach(function (vulnerability) {
|
|
2699
|
-
vulnerability.rpm_nvra_with_link_data = [];
|
|
2700
|
-
|
|
2541
|
+
vulnerability.rpm_nvra_with_link_data = [];
|
|
2542
|
+
// // CONNCERT-2121
|
|
2701
2543
|
if (vulnerability != null && vulnerability.affected_packages) {
|
|
2702
2544
|
var _vulnerability$affect;
|
|
2703
|
-
|
|
2704
|
-
vulnerability == null ? void 0 : (_vulnerability$affect = vulnerability.affected_packages) == null ? void 0 : _vulnerability$affect.forEach(function (_ref3) {
|
|
2545
|
+
vulnerability == null || (_vulnerability$affect = vulnerability.affected_packages) == null || _vulnerability$affect.forEach(function (_ref3) {
|
|
2705
2546
|
var name = _ref3.name,
|
|
2706
|
-
|
|
2547
|
+
arch = _ref3.arch;
|
|
2707
2548
|
var link_data = rpms == null ? void 0 : rpms.filter(function (rpm) {
|
|
2708
2549
|
return rpm.name === name && rpm.architecture === arch;
|
|
2709
2550
|
});
|
|
@@ -2711,11 +2552,9 @@ var PackagesTable = function PackagesTable(_ref) {
|
|
|
2711
2552
|
});
|
|
2712
2553
|
} else {
|
|
2713
2554
|
var _vulnerability$packag;
|
|
2714
|
-
|
|
2715
|
-
vulnerability == null ? void 0 : (_vulnerability$packag = vulnerability.packages) == null ? void 0 : _vulnerability$packag.forEach(function (p) {
|
|
2555
|
+
vulnerability == null || (_vulnerability$packag = vulnerability.packages) == null || _vulnerability$packag.forEach(function (p) {
|
|
2716
2556
|
var _p$rpm_nvra;
|
|
2717
|
-
|
|
2718
|
-
return p == null ? void 0 : (_p$rpm_nvra = p.rpm_nvra) == null ? void 0 : _p$rpm_nvra.forEach(function (rpm_nvra) {
|
|
2557
|
+
return p == null || (_p$rpm_nvra = p.rpm_nvra) == null ? void 0 : _p$rpm_nvra.forEach(function (rpm_nvra) {
|
|
2719
2558
|
var link_data = rpms == null ? void 0 : rpms.filter(function (pk) {
|
|
2720
2559
|
return pk.nvra === rpm_nvra;
|
|
2721
2560
|
});
|
|
@@ -2723,14 +2562,13 @@ var PackagesTable = function PackagesTable(_ref) {
|
|
|
2723
2562
|
});
|
|
2724
2563
|
});
|
|
2725
2564
|
}
|
|
2726
|
-
|
|
2727
2565
|
return vulnerability;
|
|
2728
|
-
});
|
|
2729
|
-
|
|
2566
|
+
});
|
|
2567
|
+
// sort vulnerabilities by severity
|
|
2730
2568
|
uniqueVulnerabilities.sort(function (vulnerability) {
|
|
2731
2569
|
return severitySortOrder[vulnerability.severity];
|
|
2732
|
-
});
|
|
2733
|
-
|
|
2570
|
+
});
|
|
2571
|
+
// filter out vulnerabilities with duplicate CVE IDs
|
|
2734
2572
|
uniqueVulnerabilities.filter(function (value, index, self) {
|
|
2735
2573
|
return self.findIndex(function (vulnerability) {
|
|
2736
2574
|
return vulnerability.cve_id === value.cve_id;
|
|
@@ -2739,32 +2577,39 @@ var PackagesTable = function PackagesTable(_ref) {
|
|
|
2739
2577
|
setUniqueVulnerabilities(uniqueVulnerabilities);
|
|
2740
2578
|
}, [rpms, vulnerabilities]);
|
|
2741
2579
|
InsertCss();
|
|
2742
|
-
return
|
|
2743
|
-
|
|
2744
|
-
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
|
|
2753
|
-
|
|
2754
|
-
|
|
2755
|
-
|
|
2756
|
-
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
|
|
2764
|
-
|
|
2765
|
-
|
|
2766
|
-
|
|
2767
|
-
|
|
2580
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
2581
|
+
children: (uniqueVulnerabilities.length > 0 || excludedPackages.length > 0) && jsxRuntime.jsx("div", {
|
|
2582
|
+
className: 'packages-table',
|
|
2583
|
+
children: jsxRuntime.jsxs(reactCore.Tabs, {
|
|
2584
|
+
activeKey: activeKey,
|
|
2585
|
+
onSelect: function onSelect(_evt, tabKey) {
|
|
2586
|
+
return setActiveKey(tabKey);
|
|
2587
|
+
},
|
|
2588
|
+
variant: 'default',
|
|
2589
|
+
isBox: true,
|
|
2590
|
+
"aria-label": 'vulnerability tab',
|
|
2591
|
+
children: [uniqueVulnerabilities.length > 0 && jsxRuntime.jsx(reactCore.Tab, {
|
|
2592
|
+
eventKey: 0,
|
|
2593
|
+
title: "Vulnerabilities (" + uniqueVulnerabilities.length + ")",
|
|
2594
|
+
children: jsxRuntime.jsx(VulnerabilitiesTable, {
|
|
2595
|
+
vulnerabilities: uniqueVulnerabilities,
|
|
2596
|
+
isLoading: isLoading,
|
|
2597
|
+
hideToggler: hideToggler
|
|
2598
|
+
})
|
|
2599
|
+
}), excludedPackages.length > 0 && jsxRuntime.jsxs(reactCore.Tab, {
|
|
2600
|
+
eventKey: 1,
|
|
2601
|
+
title: "Excluded Packages (" + excludedPackages.length + ")",
|
|
2602
|
+
children: [jsxRuntime.jsx("p", {
|
|
2603
|
+
className: 'packages-table__excluded-packages-disclaimer',
|
|
2604
|
+
children: "The following packages were found in this image and cannot be scanned or compared to public vulnerability information. This image may include additional packages or content not found or listed below."
|
|
2605
|
+
}), jsxRuntime.jsx(ExcludedPackagesTable, {
|
|
2606
|
+
excludedPackages: excludedPackages,
|
|
2607
|
+
isLoading: isLoading
|
|
2608
|
+
})]
|
|
2609
|
+
})]
|
|
2610
|
+
})
|
|
2611
|
+
})
|
|
2612
|
+
});
|
|
2768
2613
|
};
|
|
2769
2614
|
|
|
2770
2615
|
exports.PackagesTable = PackagesTable;
|