@ansible/ansible-ui-framework 0.0.614 → 0.0.615
Sign up to get free protection for your applications and to get access to all the features.
- package/framework/BulkActionDialog.d.ts +14 -0
- package/framework/BulkConfirmationDialog.d.ts +20 -0
- package/{cjs → framework}/PageActions/PageActions.d.ts +0 -13
- package/{cjs → framework}/PageActions/PageButtonAction.d.ts +0 -1
- package/{cjs → framework}/PageActions/PagePinnedActions.d.ts +0 -4
- package/{cjs → framework}/PageForm/Inputs/FormGroupSelect.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/FormGroupSelectOption.d.ts +0 -5
- package/{cjs → framework}/PageForm/Inputs/FormGroupTextArea.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/FormGroupTextInput.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/FormGroupTypeAheadMultiSelect.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormCheckbox.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormCreatableSelect.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormFileUpload.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormGroup.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormSelect.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormSelectOption.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormTextArea.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormTextInput.d.ts +0 -1
- package/{cjs → framework}/PageForm/PageFormSchema.d.ts +0 -2
- package/framework/PageFramework.d.ts +6 -0
- package/framework/PageHeader.d.ts +22 -0
- package/framework/PageLayout.d.ts +4 -0
- package/{cjs → framework}/PageTable/PageTable.d.ts +0 -15
- package/{cjs → framework}/components/useBreakPoint.d.ts +0 -1
- package/{cjs → framework}/index.d.ts +1 -0
- package/{cjs → framework}/utils/compare.d.ts +3 -3
- package/index.js +16475 -0
- package/index.umd.cjs +165 -0
- package/package.json +16 -15
- package/style.css +1 -0
- package/cjs/BulkActionDialog.d.ts +0 -34
- package/cjs/BulkActionDialog.js +0 -300
- package/cjs/BulkConfirmationDialog.d.ts +0 -36
- package/cjs/BulkConfirmationDialog.js +0 -135
- package/cjs/PageActions/PageAction.js +0 -2
- package/cjs/PageActions/PageActionType.js +0 -12
- package/cjs/PageActions/PageActions.js +0 -69
- package/cjs/PageActions/PageBulkAction.js +0 -35
- package/cjs/PageActions/PageButtonAction.js +0 -41
- package/cjs/PageActions/PageDropdownAction.js +0 -132
- package/cjs/PageActions/PagePinnedActions.js +0 -55
- package/cjs/PageActions/PageSingleAction.js +0 -38
- package/cjs/PageAlertToaster.js +0 -102
- package/cjs/PageAlerts.js +0 -98
- package/cjs/PageBody.js +0 -52
- package/cjs/PageCells/BytesCell.js +0 -16
- package/cjs/PageCells/CapacityCell.js +0 -67
- package/cjs/PageCells/CopyCell.js +0 -25
- package/cjs/PageCells/DateTimeCell.js +0 -66
- package/cjs/PageCells/ElapsedTimeCell.js +0 -48
- package/cjs/PageCells/LabelsCell.js +0 -20
- package/cjs/PageCells/TextCell.js +0 -39
- package/cjs/PageColumnModal.js +0 -131
- package/cjs/PageDashboard/PageChartContainer.js +0 -69
- package/cjs/PageDashboard/PageDashboardCard.js +0 -22
- package/cjs/PageDashboard/PageDashboardChart.js +0 -54
- package/cjs/PageDashboard/PageDonutChart.js +0 -53
- package/cjs/PageDashboard/PageScatterChart.js +0 -5564
- package/cjs/PageDetails/PageDetail.js +0 -28
- package/cjs/PageDetails/PageDetails.js +0 -41
- package/cjs/PageDetails/PageDetailsFromColumns.js +0 -27
- package/cjs/PageDialog.js +0 -28
- package/cjs/PageForm/Inputs/FormGroupSelect.js +0 -60
- package/cjs/PageForm/Inputs/FormGroupSelectOption.js +0 -61
- package/cjs/PageForm/Inputs/FormGroupTextArea.js +0 -53
- package/cjs/PageForm/Inputs/FormGroupTextInput.js +0 -58
- package/cjs/PageForm/Inputs/FormGroupTypeAheadMultiSelect.js +0 -67
- package/cjs/PageForm/Inputs/PageFormCheckbox.js +0 -39
- package/cjs/PageForm/Inputs/PageFormCodeEditor.js +0 -154
- package/cjs/PageForm/Inputs/PageFormCreatableSelect.js +0 -82
- package/cjs/PageForm/Inputs/PageFormFileUpload.js +0 -72
- package/cjs/PageForm/Inputs/PageFormGroup.js +0 -24
- package/cjs/PageForm/Inputs/PageFormMultiInput.js +0 -102
- package/cjs/PageForm/Inputs/PageFormSelect.js +0 -26
- package/cjs/PageForm/Inputs/PageFormSelectOption.js +0 -42
- package/cjs/PageForm/Inputs/PageFormSlider.js +0 -36
- package/cjs/PageForm/Inputs/PageFormSwitch.js +0 -38
- package/cjs/PageForm/Inputs/PageFormTextArea.js +0 -50
- package/cjs/PageForm/Inputs/PageFormTextInput.js +0 -72
- package/cjs/PageForm/Inputs/PageFormTextSelect.js +0 -40
- package/cjs/PageForm/PageForm.js +0 -146
- package/cjs/PageForm/PageFormAlerts.js +0 -32
- package/cjs/PageForm/PageFormButtons.js +0 -28
- package/cjs/PageForm/PageFormInputPopover.js +0 -2
- package/cjs/PageForm/PageFormSchema.js +0 -138
- package/cjs/PageForm/Utils/PageFormHidden.js +0 -13
- package/cjs/PageForm/Utils/PageFormSection.js +0 -20
- package/cjs/PageForm/Utils/PageFormWatch.js +0 -10
- package/cjs/PageFramework.css +0 -27
- package/cjs/PageFramework.d.ts +0 -12
- package/cjs/PageFramework.js +0 -31
- package/cjs/PageHeader.d.ts +0 -45
- package/cjs/PageHeader.js +0 -111
- package/cjs/PageLayout.d.ts +0 -17
- package/cjs/PageLayout.js +0 -60
- package/cjs/PageTable/PagePagination.js +0 -28
- package/cjs/PageTable/PageTable.js +0 -266
- package/cjs/PageTable/PageTableCard.js +0 -161
- package/cjs/PageTable/PageTableCards.js +0 -38
- package/cjs/PageTable/PageTableList.js +0 -153
- package/cjs/PageTable/PageTableViewType.js +0 -9
- package/cjs/PageTable/PageToolbar.css +0 -7
- package/cjs/PageTable/PageToolbar.js +0 -228
- package/cjs/PageTable/useTableItems.js +0 -507
- package/cjs/PageTabs.js +0 -86
- package/cjs/Settings.js +0 -125
- package/cjs/components/BulkSelector.js +0 -91
- package/cjs/components/Collapse.css +0 -12
- package/cjs/components/Collapse.js +0 -23
- package/cjs/components/DetailInfo.js +0 -21
- package/cjs/components/Dotted.js +0 -19
- package/cjs/components/DropdownControlled.js +0 -28
- package/cjs/components/EmptyStateCustom.js +0 -21
- package/cjs/components/EmptyStateFilter.js +0 -26
- package/cjs/components/EmptyStateNoData.js +0 -11
- package/cjs/components/EmptyStateUnauthorized.js +0 -13
- package/cjs/components/ErrorBoundary.js +0 -45
- package/cjs/components/Help.js +0 -24
- package/cjs/components/IconWrapper.js +0 -53
- package/cjs/components/LoadingPage.js +0 -25
- package/cjs/components/LoadingState.js +0 -20
- package/cjs/components/Masonry.js +0 -113
- package/cjs/components/PageGrid.js +0 -61
- package/cjs/components/Scrollable.js +0 -87
- package/cjs/components/StandardPopover.js +0 -64
- package/cjs/components/icons/RunningIcon.js +0 -36
- package/cjs/components/pfcolors.js +0 -54
- package/cjs/components/useBreakPoint.js +0 -145
- package/cjs/components/useIsMounted.js +0 -28
- package/cjs/components/useOpen.js +0 -36
- package/cjs/components/usePageNavigate.js +0 -37
- package/cjs/components/useSearchParams.js +0 -20
- package/cjs/components/useWindowLocation.js +0 -49
- package/cjs/index.js +0 -67
- package/cjs/useFrameworkTranslations.js +0 -52
- package/cjs/useInMemoryView.js +0 -102
- package/cjs/useSelectDialog.js +0 -96
- package/cjs/useSelectMultipleDialog.js +0 -62
- package/cjs/useView.js +0 -155
- package/cjs/utils/capitalize.js +0 -7
- package/cjs/utils/compare.js +0 -59
- package/cjs/utils/download-file.js +0 -23
- package/cjs/utils/formatDateString.js +0 -11
- package/cjs/utils/random-string.js +0 -17
- /package/{cjs → framework}/PageActions/PageAction.d.ts +0 -0
- /package/{cjs → framework}/PageActions/PageActionType.d.ts +0 -0
- /package/{cjs → framework}/PageActions/PageBulkAction.d.ts +0 -0
- /package/{cjs → framework}/PageActions/PageDropdownAction.d.ts +0 -0
- /package/{cjs → framework}/PageActions/PageSingleAction.d.ts +0 -0
- /package/{cjs → framework}/PageAlertToaster.d.ts +0 -0
- /package/{cjs → framework}/PageAlerts.d.ts +0 -0
- /package/{cjs → framework}/PageBody.d.ts +0 -0
- /package/{cjs → framework}/PageCells/BytesCell.d.ts +0 -0
- /package/{cjs → framework}/PageCells/CapacityCell.d.ts +0 -0
- /package/{cjs → framework}/PageCells/CopyCell.d.ts +0 -0
- /package/{cjs → framework}/PageCells/DateTimeCell.d.ts +0 -0
- /package/{cjs → framework}/PageCells/ElapsedTimeCell.d.ts +0 -0
- /package/{cjs → framework}/PageCells/LabelsCell.d.ts +0 -0
- /package/{cjs → framework}/PageCells/TextCell.d.ts +0 -0
- /package/{cjs → framework}/PageColumnModal.d.ts +0 -0
- /package/{cjs → framework}/PageDashboard/PageChartContainer.d.ts +0 -0
- /package/{cjs → framework}/PageDashboard/PageDashboardCard.d.ts +0 -0
- /package/{cjs → framework}/PageDashboard/PageDashboardChart.d.ts +0 -0
- /package/{cjs → framework}/PageDashboard/PageDonutChart.d.ts +0 -0
- /package/{cjs → framework}/PageDashboard/PageScatterChart.d.ts +0 -0
- /package/{cjs → framework}/PageDetails/PageDetail.d.ts +0 -0
- /package/{cjs → framework}/PageDetails/PageDetails.d.ts +0 -0
- /package/{cjs → framework}/PageDetails/PageDetailsFromColumns.d.ts +0 -0
- /package/{cjs → framework}/PageDialog.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Inputs/PageFormCodeEditor.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Inputs/PageFormMultiInput.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Inputs/PageFormSlider.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Inputs/PageFormSwitch.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Inputs/PageFormTextSelect.d.ts +0 -0
- /package/{cjs → framework}/PageForm/PageForm.d.ts +0 -0
- /package/{cjs → framework}/PageForm/PageFormAlerts.d.ts +0 -0
- /package/{cjs → framework}/PageForm/PageFormButtons.d.ts +0 -0
- /package/{cjs → framework}/PageForm/PageFormInputPopover.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Utils/PageFormHidden.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Utils/PageFormSection.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Utils/PageFormWatch.d.ts +0 -0
- /package/{cjs → framework}/PageTable/PagePagination.d.ts +0 -0
- /package/{cjs → framework}/PageTable/PageTableCard.d.ts +0 -0
- /package/{cjs → framework}/PageTable/PageTableCards.d.ts +0 -0
- /package/{cjs → framework}/PageTable/PageTableList.d.ts +0 -0
- /package/{cjs → framework}/PageTable/PageTableViewType.d.ts +0 -0
- /package/{cjs → framework}/PageTable/PageToolbar.d.ts +0 -0
- /package/{cjs → framework}/PageTable/useTableItems.d.ts +0 -0
- /package/{cjs → framework}/PageTabs.d.ts +0 -0
- /package/{cjs → framework}/Settings.d.ts +0 -0
- /package/{cjs → framework}/components/BulkSelector.d.ts +0 -0
- /package/{cjs → framework}/components/Collapse.d.ts +0 -0
- /package/{cjs → framework}/components/DetailInfo.d.ts +0 -0
- /package/{cjs → framework}/components/Dotted.d.ts +0 -0
- /package/{cjs → framework}/components/DropdownControlled.d.ts +0 -0
- /package/{cjs → framework}/components/EmptyStateCustom.d.ts +0 -0
- /package/{cjs → framework}/components/EmptyStateFilter.d.ts +0 -0
- /package/{cjs → framework}/components/EmptyStateNoData.d.ts +0 -0
- /package/{cjs → framework}/components/EmptyStateUnauthorized.d.ts +0 -0
- /package/{cjs → framework}/components/ErrorBoundary.d.ts +0 -0
- /package/{cjs → framework}/components/Help.d.ts +0 -0
- /package/{cjs → framework}/components/IconWrapper.d.ts +0 -0
- /package/{cjs → framework}/components/LoadingPage.d.ts +0 -0
- /package/{cjs → framework}/components/LoadingState.d.ts +0 -0
- /package/{cjs → framework}/components/Masonry.d.ts +0 -0
- /package/{cjs → framework}/components/PageGrid.d.ts +0 -0
- /package/{cjs → framework}/components/Scrollable.d.ts +0 -0
- /package/{cjs → framework}/components/StandardPopover.d.ts +0 -0
- /package/{cjs → framework}/components/icons/RunningIcon.d.ts +0 -0
- /package/{cjs → framework}/components/pfcolors.d.ts +0 -0
- /package/{cjs → framework}/components/useIsMounted.d.ts +0 -0
- /package/{cjs → framework}/components/useOpen.d.ts +0 -0
- /package/{cjs → framework}/components/usePageNavigate.d.ts +0 -0
- /package/{cjs → framework}/components/useSearchParams.d.ts +0 -0
- /package/{cjs → framework}/components/useWindowLocation.d.ts +0 -0
- /package/{cjs → framework}/useFrameworkTranslations.d.ts +0 -0
- /package/{cjs → framework}/useInMemoryView.d.ts +0 -0
- /package/{cjs → framework}/useSelectDialog.d.ts +0 -0
- /package/{cjs → framework}/useSelectMultipleDialog.d.ts +0 -0
- /package/{cjs → framework}/useView.d.ts +0 -0
- /package/{cjs → framework}/utils/capitalize.d.ts +0 -0
- /package/{cjs → framework}/utils/download-file.d.ts +0 -0
- /package/{cjs → framework}/utils/formatDateString.d.ts +0 -0
- /package/{cjs → framework}/utils/random-string.d.ts +0 -0
@@ -1,153 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
3
|
-
__assign = Object.assign || function(t) {
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
-
s = arguments[i];
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
-
t[p] = s[p];
|
8
|
-
}
|
9
|
-
return t;
|
10
|
-
};
|
11
|
-
return __assign.apply(this, arguments);
|
12
|
-
};
|
13
|
-
var __values = (this && this.__values) || function(o) {
|
14
|
-
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
15
|
-
if (m) return m.call(o);
|
16
|
-
if (o && typeof o.length === "number") return {
|
17
|
-
next: function () {
|
18
|
-
if (o && i >= o.length) o = void 0;
|
19
|
-
return { value: o && o[i++], done: !o };
|
20
|
-
}
|
21
|
-
};
|
22
|
-
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
23
|
-
};
|
24
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
25
|
-
exports.useColumnsToDataList = exports.PageTableList = void 0;
|
26
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
27
|
-
var react_core_1 = require("@patternfly/react-core");
|
28
|
-
var react_1 = require("react");
|
29
|
-
var IconWrapper_1 = require("../components/IconWrapper");
|
30
|
-
var PageActions_1 = require("../PageActions/PageActions");
|
31
|
-
var PageTable_1 = require("./PageTable");
|
32
|
-
function PageTableList(props) {
|
33
|
-
var keyFn = props.keyFn, pageItems = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, defaultCardSubtitle = props.defaultSubtitle, showSelect = props.showSelect;
|
34
|
-
var columnsToDataList = useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect);
|
35
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.DataList, __assign({ "aria-label": "TODO", style: { marginTop: -1, maxWidth: '100%', overflow: 'hidden' } }, { children: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(columnsToDataList) })));
|
36
|
-
}
|
37
|
-
exports.PageTableList = PageTableList;
|
38
|
-
function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect) {
|
39
|
-
var data = (0, react_1.useMemo)(function () {
|
40
|
-
var e_1, _a;
|
41
|
-
var nameColumn;
|
42
|
-
var subtitleColumn;
|
43
|
-
var descriptionColumn;
|
44
|
-
var countColumns = [];
|
45
|
-
var labelColumn;
|
46
|
-
var primaryColumns = [];
|
47
|
-
var secondaryColumns = [];
|
48
|
-
try {
|
49
|
-
for (var tableColumns_1 = __values(tableColumns), tableColumns_1_1 = tableColumns_1.next(); !tableColumns_1_1.done; tableColumns_1_1 = tableColumns_1.next()) {
|
50
|
-
var column = tableColumns_1_1.value;
|
51
|
-
switch (column.type) {
|
52
|
-
case 'description':
|
53
|
-
if (!descriptionColumn)
|
54
|
-
descriptionColumn = column;
|
55
|
-
break;
|
56
|
-
case 'labels':
|
57
|
-
if (!labelColumn)
|
58
|
-
labelColumn = column;
|
59
|
-
break;
|
60
|
-
case 'count':
|
61
|
-
countColumns.push(column);
|
62
|
-
break;
|
63
|
-
default:
|
64
|
-
switch (column.list) {
|
65
|
-
case 'name':
|
66
|
-
nameColumn = column;
|
67
|
-
break;
|
68
|
-
case 'subtitle':
|
69
|
-
subtitleColumn = column;
|
70
|
-
break;
|
71
|
-
case 'description':
|
72
|
-
descriptionColumn = column;
|
73
|
-
break;
|
74
|
-
case 'hidden':
|
75
|
-
break;
|
76
|
-
case 'secondary':
|
77
|
-
secondaryColumns.push(column);
|
78
|
-
break;
|
79
|
-
default:
|
80
|
-
primaryColumns.push(column);
|
81
|
-
break;
|
82
|
-
}
|
83
|
-
break;
|
84
|
-
}
|
85
|
-
}
|
86
|
-
}
|
87
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
88
|
-
finally {
|
89
|
-
try {
|
90
|
-
if (tableColumns_1_1 && !tableColumns_1_1.done && (_a = tableColumns_1.return)) _a.call(tableColumns_1);
|
91
|
-
}
|
92
|
-
finally { if (e_1) throw e_1.error; }
|
93
|
-
}
|
94
|
-
return {
|
95
|
-
nameColumn: nameColumn,
|
96
|
-
subtitleColumn: subtitleColumn,
|
97
|
-
descriptionColumn: descriptionColumn,
|
98
|
-
countColumns: countColumns,
|
99
|
-
primaryColumns: primaryColumns,
|
100
|
-
secondaryColumns: secondaryColumns,
|
101
|
-
labelColumn: labelColumn,
|
102
|
-
};
|
103
|
-
}, [tableColumns]);
|
104
|
-
var onSelectClick = (0, react_1.useCallback)(function (item) {
|
105
|
-
if (isSelected === null || isSelected === void 0 ? void 0 : isSelected(item)) {
|
106
|
-
unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
|
107
|
-
}
|
108
|
-
else {
|
109
|
-
selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
|
110
|
-
}
|
111
|
-
}, [isSelected, selectItem, unselectItem]);
|
112
|
-
var nameColumn = data.nameColumn, subtitleColumn = data.subtitleColumn, descriptionColumn = data.descriptionColumn, countColumns = data.countColumns, primaryColumns = data.primaryColumns, secondaryColumns = data.secondaryColumns, labelColumn = data.labelColumn;
|
113
|
-
return (0, react_1.useCallback)(function (item) {
|
114
|
-
var key = keyFn(item);
|
115
|
-
var isItemSelected = isSelected === null || isSelected === void 0 ? void 0 : isSelected(item);
|
116
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.DataListItem, __assign({ "aria-labelledby": "data-list-".concat(key), isExpanded: isItemSelected }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DataListItemRow, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.DataListCheck, { "aria-labelledby": "data-list-check-".concat(key), name: "data-list-check-".concat(key), isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onClick: function () { return onSelectClick(item); } })), (0, jsx_runtime_1.jsx)(react_core_1.DataListItemCells, { dataListCells: [
|
117
|
-
(0, jsx_runtime_1.jsx)(react_core_1.DataListCell, __assign({ width: 5 }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ alignItems: { default: 'alignItemsCenter' } }, { children: [(nameColumn === null || nameColumn === void 0 ? void 0 : nameColumn.icon) && ((0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "xl" }, { children: nameColumn === null || nameColumn === void 0 ? void 0 : nameColumn.icon(item) }))), (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", style: { marginTop: -4, fontWeight: 'bold' } }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ id: "data-list-".concat(key) }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: nameColumn, item: item }) })) })), subtitleColumn ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: subtitleColumn, item: item }) }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] })] })), (descriptionColumn ||
|
118
|
-
primaryColumns.length > 0 ||
|
119
|
-
countColumns.length > 0 ||
|
120
|
-
labelColumn) && ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: [descriptionColumn &&
|
121
|
-
(!descriptionColumn.value || descriptionColumn.value(item)) && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: descriptionColumn, item: item }) }) }, descriptionColumn.header)), primaryColumns.map(function (column) {
|
122
|
-
if (column.value && !column.value(item))
|
123
|
-
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
124
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, __assign({ style: { whiteSpace: 'nowrap' } }, { children: column.header })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) })] }, column.header));
|
125
|
-
}), countColumns.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
126
|
-
display: 'flex',
|
127
|
-
gap: 16,
|
128
|
-
marginTop: 8,
|
129
|
-
flexWrap: 'wrap',
|
130
|
-
} }, { children: countColumns.map(function (column, i) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', gap: 6, alignItems: 'baseline' } }, { children: [(0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }), (0, jsx_runtime_1.jsx)("small", __assign({ style: { opacity: 0.7 } }, { children: column.header }))] }), i)); }) })) }) }, "counts")), labelColumn && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: labelColumn, item: item }) }) }, labelColumn.header))] })))] })) }) }), "primary"),
|
131
|
-
secondaryColumns.length > 0 ? ((0, jsx_runtime_1.jsx)(react_core_1.DataListCell, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: secondaryColumns.map(function (column) {
|
132
|
-
if (column.value && !column.value(item))
|
133
|
-
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
134
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, __assign({ style: { whiteSpace: 'nowrap' } }, { children: column.header })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) })] }, column.header));
|
135
|
-
}) })) }, "secondary")) : null,
|
136
|
-
] }), rowActions && ((0, jsx_runtime_1.jsx)(react_core_1.DataListAction, __assign({ "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' } }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: rowActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true }) })))] }) }), key));
|
137
|
-
}, [
|
138
|
-
keyFn,
|
139
|
-
isSelected,
|
140
|
-
showSelect,
|
141
|
-
nameColumn,
|
142
|
-
subtitleColumn,
|
143
|
-
defaultCardSubtitle,
|
144
|
-
primaryColumns,
|
145
|
-
descriptionColumn,
|
146
|
-
countColumns,
|
147
|
-
labelColumn,
|
148
|
-
secondaryColumns,
|
149
|
-
rowActions,
|
150
|
-
onSelectClick,
|
151
|
-
]);
|
152
|
-
}
|
153
|
-
exports.useColumnsToDataList = useColumnsToDataList;
|
@@ -1,9 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.PageTableViewTypeE = void 0;
|
4
|
-
var PageTableViewTypeE;
|
5
|
-
(function (PageTableViewTypeE) {
|
6
|
-
PageTableViewTypeE["Table"] = "table";
|
7
|
-
PageTableViewTypeE["List"] = "list";
|
8
|
-
PageTableViewTypeE["Cards"] = "cards";
|
9
|
-
})(PageTableViewTypeE = exports.PageTableViewTypeE || (exports.PageTableViewTypeE = {}));
|
@@ -1,228 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
4
|
-
return cooked;
|
5
|
-
};
|
6
|
-
var __assign = (this && this.__assign) || function () {
|
7
|
-
__assign = Object.assign || function(t) {
|
8
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
9
|
-
s = arguments[i];
|
10
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
11
|
-
t[p] = s[p];
|
12
|
-
}
|
13
|
-
return t;
|
14
|
-
};
|
15
|
-
return __assign.apply(this, arguments);
|
16
|
-
};
|
17
|
-
var __values = (this && this.__values) || function(o) {
|
18
|
-
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
19
|
-
if (m) return m.call(o);
|
20
|
-
if (o && typeof o.length === "number") return {
|
21
|
-
next: function () {
|
22
|
-
if (o && i >= o.length) o = void 0;
|
23
|
-
return { value: o && o[i++], done: !o };
|
24
|
-
}
|
25
|
-
};
|
26
|
-
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
27
|
-
};
|
28
|
-
var __read = (this && this.__read) || function (o, n) {
|
29
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
30
|
-
if (!m) return o;
|
31
|
-
var i = m.call(o), r, ar = [], e;
|
32
|
-
try {
|
33
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
34
|
-
}
|
35
|
-
catch (error) { e = { error: error }; }
|
36
|
-
finally {
|
37
|
-
try {
|
38
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
39
|
-
}
|
40
|
-
finally { if (e) throw e.error; }
|
41
|
-
}
|
42
|
-
return ar;
|
43
|
-
};
|
44
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
45
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
46
|
-
};
|
47
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
48
|
-
exports.PageTableToolbar = exports.toolbarActionsHaveBulkActions = void 0;
|
49
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
50
|
-
var react_core_1 = require("@patternfly/react-core");
|
51
|
-
var react_icons_1 = require("@patternfly/react-icons");
|
52
|
-
var react_1 = require("react");
|
53
|
-
var styled_components_1 = __importDefault(require("styled-components"));
|
54
|
-
var BulkSelector_1 = require("../components/BulkSelector");
|
55
|
-
var useBreakPoint_1 = require("../components/useBreakPoint");
|
56
|
-
var PageActions_1 = require("../PageActions/PageActions");
|
57
|
-
var PageActionType_1 = require("../PageActions/PageActionType");
|
58
|
-
var FormGroupSelect_1 = require("../PageForm/Inputs/FormGroupSelect");
|
59
|
-
var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
|
60
|
-
var PageTableViewType_1 = require("./PageTableViewType");
|
61
|
-
require("./PageToolbar.css");
|
62
|
-
var ToolbarGroupsDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
|
63
|
-
var SelectionSpan = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n opacity: 0.7;\n"], ["\n opacity: 0.7;\n"])));
|
64
|
-
function toolbarActionsHaveBulkActions(actions) {
|
65
|
-
var e_1, _a;
|
66
|
-
if (!actions)
|
67
|
-
return false;
|
68
|
-
try {
|
69
|
-
for (var actions_1 = __values(actions), actions_1_1 = actions_1.next(); !actions_1_1.done; actions_1_1 = actions_1.next()) {
|
70
|
-
var action = actions_1_1.value;
|
71
|
-
if (action.type === 'bulk')
|
72
|
-
return true;
|
73
|
-
}
|
74
|
-
}
|
75
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
76
|
-
finally {
|
77
|
-
try {
|
78
|
-
if (actions_1_1 && !actions_1_1.done && (_a = actions_1.return)) _a.call(actions_1);
|
79
|
-
}
|
80
|
-
finally { if (e_1) throw e_1.error; }
|
81
|
-
}
|
82
|
-
return false;
|
83
|
-
}
|
84
|
-
exports.toolbarActionsHaveBulkActions = toolbarActionsHaveBulkActions;
|
85
|
-
function PageTableToolbar(props) {
|
86
|
-
var _a;
|
87
|
-
var itemCount = props.itemCount, page = props.page, perPage = props.perPage, setPage = props.setPage, setPerPage = props.setPerPage, toolbarFilters = props.toolbarFilters, selectedItems = props.selectedItems, filters = props.filters, setFilters = props.setFilters, clearAllFilters = props.clearAllFilters, openColumnModal = props.openColumnModal, bottomBorder = props.bottomBorder;
|
88
|
-
var sm = (0, useBreakPoint_1.useBreakpoint)('md');
|
89
|
-
var viewType = props.viewType, setViewType = props.setViewType;
|
90
|
-
var toolbarActions = props.toolbarActions;
|
91
|
-
toolbarActions = toolbarActions !== null && toolbarActions !== void 0 ? toolbarActions : [];
|
92
|
-
var onSetPage = (0, react_1.useCallback)(function (_event, page) { return setPage(page); }, [setPage]);
|
93
|
-
var onPerPageSelect = (0, react_1.useCallback)(function (_event, perPage) { return setPerPage(perPage); }, [setPerPage]);
|
94
|
-
var showSearchAndFilters = toolbarFilters !== undefined;
|
95
|
-
var showToolbarActions = toolbarActions !== undefined && toolbarActions.length > 0;
|
96
|
-
var showSelect = props.showSelect === true ||
|
97
|
-
(selectedItems !== undefined &&
|
98
|
-
toolbarActions &&
|
99
|
-
toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; }));
|
100
|
-
var showToolbar = showSelect || showSearchAndFilters || showToolbarActions;
|
101
|
-
var _b = __read((0, react_1.useState)(function () {
|
102
|
-
return toolbarFilters ? ((toolbarFilters === null || toolbarFilters === void 0 ? void 0 : toolbarFilters.length) > 0 ? toolbarFilters[0].key : '') : '';
|
103
|
-
}), 2), selectedFilter = _b[0], setSeletedFilter = _b[1];
|
104
|
-
var viewTypeCount = 0;
|
105
|
-
if (!props.disableTableView)
|
106
|
-
viewTypeCount++;
|
107
|
-
if (!props.disableCardView)
|
108
|
-
viewTypeCount++;
|
109
|
-
if (!props.disableListView)
|
110
|
-
viewTypeCount++;
|
111
|
-
if (!showToolbar) {
|
112
|
-
return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
|
113
|
-
}
|
114
|
-
if (itemCount === undefined) {
|
115
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ className: "border-bottom dark-2", style: { paddingBottom: sm ? undefined : 8, paddingTop: sm ? undefined : 8 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarContent, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ style: { width: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "36px" }) })) }) })));
|
116
|
-
}
|
117
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ clearAllFilters: clearAllFilters, className: "dark-2", style: {
|
118
|
-
paddingBottom: sm ? undefined : 8,
|
119
|
-
paddingTop: sm ? undefined : 8,
|
120
|
-
borderBottom: bottomBorder ? 'thin solid var(--pf-global--BorderColor--100)' : undefined,
|
121
|
-
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter, placeholderText: "" }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { id: "filter-input", filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
|
122
|
-
var _a;
|
123
|
-
var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
|
124
|
-
if (!values)
|
125
|
-
values = [];
|
126
|
-
if (!values.includes(value))
|
127
|
-
values.push(value);
|
128
|
-
setFilters === null || setFilters === void 0 ? void 0 : setFilters(__assign(__assign({}, filters), (_a = {}, _a[selectedFilter] = values, _a)));
|
129
|
-
}, removeFilter: function (value) {
|
130
|
-
var _a;
|
131
|
-
var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
|
132
|
-
if (!values)
|
133
|
-
values = [];
|
134
|
-
values = values.filter(function (v) { return v !== value; });
|
135
|
-
setFilters === null || setFilters === void 0 ? void 0 : setFilters(__assign(__assign({}, filters), (_a = {}, _a[selectedFilter] = values, _a)));
|
136
|
-
}, values: (_a = filters === null || filters === void 0 ? void 0 : filters[selectedFilter]) !== null && _a !== void 0 ? _a : [] }) }), toolbarFilters.map(function (filter) {
|
137
|
-
var _a;
|
138
|
-
var values = (_a = filters === null || filters === void 0 ? void 0 : filters[filter.key]) !== null && _a !== void 0 ? _a : [];
|
139
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarFilter, __assign({ categoryName: filter.label, chips: values.map(function (value) {
|
140
|
-
var _a, _b;
|
141
|
-
return 'options' in filter
|
142
|
-
? (_b = (_a = filter.options.find(function (o) { return o.value === value; })) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : value
|
143
|
-
: value;
|
144
|
-
}), deleteChip: function (_group, value) {
|
145
|
-
setFilters === null || setFilters === void 0 ? void 0 : setFilters(function (filters) {
|
146
|
-
//TODO bug here where value is actually select filter option label... need to map
|
147
|
-
var newState = __assign({}, filters);
|
148
|
-
value = typeof value === 'string' ? value : value.key;
|
149
|
-
var values = filters[filter.key];
|
150
|
-
if (values) {
|
151
|
-
values = values.filter(function (v) { return v !== value; });
|
152
|
-
if (values.length === 0) {
|
153
|
-
delete newState[filter.key];
|
154
|
-
}
|
155
|
-
else {
|
156
|
-
newState[filter.key] = values;
|
157
|
-
}
|
158
|
-
}
|
159
|
-
return newState;
|
160
|
-
});
|
161
|
-
}, deleteChipGroup: function () {
|
162
|
-
setFilters === null || setFilters === void 0 ? void 0 : setFilters(function (filters) {
|
163
|
-
var newState = __assign({}, filters);
|
164
|
-
delete newState[filter.key];
|
165
|
-
return newState;
|
166
|
-
});
|
167
|
-
}, showToolbarItem: false }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), filter.label));
|
168
|
-
})] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) })), (0, jsx_runtime_1.jsx)(ToolbarGroupsDiv, {}), (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: [!props.disableColumnManagement && openColumnModal && viewType === 'table' && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Manage columns' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ColumnsIcon, {}), onClick: openColumnModal }) })) })), viewTypeCount > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroup, __assign({ "aria-label": "table view toggle" }, { children: [
|
169
|
-
!props.disableTableView && PageTableViewType_1.PageTableViewTypeE.Table,
|
170
|
-
!props.disableListView && PageTableViewType_1.PageTableViewTypeE.List,
|
171
|
-
!props.disableCardView && PageTableViewType_1.PageTableViewTypeE.Cards,
|
172
|
-
]
|
173
|
-
.filter(function (i) { return i; })
|
174
|
-
.map(function (vt) {
|
175
|
-
switch (vt) {
|
176
|
-
case PageTableViewType_1.PageTableViewTypeE.Cards:
|
177
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Card view', position: "top-end", enableFlip: false }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.ThLargeIcon, {}), isSelected: viewType === PageTableViewType_1.PageTableViewTypeE.Cards, onClick: function () { return setViewType === null || setViewType === void 0 ? void 0 : setViewType(PageTableViewType_1.PageTableViewTypeE.Cards); }, "aria-label": "card view" }) }), vt));
|
178
|
-
case PageTableViewType_1.PageTableViewTypeE.List:
|
179
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'List view', position: "top-end", enableFlip: false }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.ListIcon, {}), isSelected: viewType === PageTableViewType_1.PageTableViewTypeE.List, onClick: function () { return setViewType === null || setViewType === void 0 ? void 0 : setViewType(PageTableViewType_1.PageTableViewTypeE.List); }, "aria-label": "list view" }) }), vt));
|
180
|
-
case PageTableViewType_1.PageTableViewTypeE.Table:
|
181
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Table view', position: "top-end", enableFlip: false }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroupItem, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.TableIcon, {}), isSelected: viewType === PageTableViewType_1.PageTableViewTypeE.Table, onClick: function () { return setViewType === null || setViewType === void 0 ? void 0 : setViewType(PageTableViewType_1.PageTableViewTypeE.Table); }, "aria-label": "table view" }) }), vt));
|
182
|
-
}
|
183
|
-
}) })) }))] })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ visibility: { default: 'hidden', '2xl': 'visible' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.top, isCompact: true, itemCount: itemCount, perPage: perPage, page: page, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: { marginTop: -8, marginBottom: -8 } }) }))] }) })));
|
184
|
-
}
|
185
|
-
exports.PageTableToolbar = PageTableToolbar;
|
186
|
-
function ToolbarFilterInput(props) {
|
187
|
-
var filter = props.filter;
|
188
|
-
switch (filter === null || filter === void 0 ? void 0 : filter.type) {
|
189
|
-
case 'string':
|
190
|
-
return (0, jsx_runtime_1.jsx)(ToolbarTextFilter, __assign({}, props, { placeholder: filter.placeholder }));
|
191
|
-
case 'select':
|
192
|
-
return ((0, jsx_runtime_1.jsx)(ToolbarSelectFilter, __assign({}, props, { options: filter.options, placeholder: filter.placeholder })));
|
193
|
-
}
|
194
|
-
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
195
|
-
}
|
196
|
-
function ToolbarTextFilter(props) {
|
197
|
-
var _a = __read((0, react_1.useState)(''), 2), value = _a[0], setValue = _a[1];
|
198
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.TextInputGroup, __assign({ style: { minWidth: 220 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupMain, { id: props.id, value: value, onChange: function (e, v) {
|
199
|
-
if (typeof e === 'string')
|
200
|
-
setValue(e);
|
201
|
-
else
|
202
|
-
setValue(v);
|
203
|
-
}, onKeyUp: function (event) {
|
204
|
-
if (value && event.key === 'Enter') {
|
205
|
-
props.addFilter(value);
|
206
|
-
setValue('');
|
207
|
-
}
|
208
|
-
}, placeholder: props.placeholder }), value !== '' && ((0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupUtilities, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "plain", "aria-label": "clear filter", onClick: function () { return setValue(''); }, style: { opacity: value ? undefined : 0 }, tabIndex: -1 }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.TimesIcon, {}) })) }))] })), (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: value ? 'primary' : 'control', "aria-label": "apply filter", onClick: function () {
|
209
|
-
props.addFilter(value);
|
210
|
-
setValue('');
|
211
|
-
}, tabIndex: -1, isDisabled: !value }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ArrowRightIcon, {}) }))] }));
|
212
|
-
}
|
213
|
-
function ToolbarSelectFilter(props) {
|
214
|
-
var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
|
215
|
-
var addFilter = props.addFilter, removeFilter = props.removeFilter, options = props.options, values = props.values;
|
216
|
-
var _b = __read((0, react_1.useState)(false), 2), open = _b[0], setOpen = _b[1];
|
217
|
-
var onSelect = (0, react_1.useCallback)(function (e, value) {
|
218
|
-
if (values.includes(value.toString())) {
|
219
|
-
removeFilter(value.toString());
|
220
|
-
}
|
221
|
-
else {
|
222
|
-
addFilter(value.toString());
|
223
|
-
}
|
224
|
-
}, [addFilter, removeFilter, values]);
|
225
|
-
var selections = values;
|
226
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ variant: react_core_1.SelectVariant.checkbox, isOpen: open, onToggle: setOpen, selections: selections, onSelect: onSelect, placeholderText: values.length ? (translations.selectedText) : ((0, jsx_runtime_1.jsx)(SelectionSpan, { children: props.placeholder })) }, { children: options.map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ id: option.value, value: option.value }, { children: option.label }), option.value)); }) })) }));
|
227
|
-
}
|
228
|
-
var templateObject_1, templateObject_2;
|