@ansible/ansible-ui-framework 0.0.232 → 0.0.234
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/BulkActionDialog.js +2 -2
- package/cjs/PageBody.js +1 -1
- package/cjs/PageDataList.js +1 -2
- package/cjs/PageHeader.js +2 -2
- package/cjs/PageTable.js +32 -8
- package/cjs/PageTableCard.js +87 -0
- package/cjs/PageTableCards.js +38 -0
- package/cjs/PageTableList.js +79 -0
- package/cjs/PageTableViewType.js +9 -0
- package/cjs/PageToolbar.js +25 -1
- package/cjs/TypedActions/TypedActions.js +13 -4
- package/cjs/components/Details.js +2 -1
- package/cjs/components/patternfly-colors.js +11 -1
- package/cjs/index.js +1 -1
- package/mjs/BulkActionDialog.js +2 -2
- package/mjs/PageBody.d.ts +1 -0
- package/mjs/PageBody.js +1 -1
- package/mjs/PageDataList.js +1 -2
- package/mjs/PageHeader.d.ts +1 -0
- package/mjs/PageHeader.js +2 -2
- package/mjs/PageTable.d.ts +10 -1
- package/mjs/PageTable.js +28 -7
- package/mjs/PageTableCard.d.ts +33 -0
- package/mjs/PageTableCard.js +69 -0
- package/mjs/PageTableCards.d.ts +4 -0
- package/mjs/PageTableCards.js +23 -0
- package/mjs/PageTableList.d.ts +6 -0
- package/mjs/PageTableList.js +62 -0
- package/mjs/PageTableViewType.d.ts +6 -0
- package/mjs/PageTableViewType.js +6 -0
- package/mjs/PageToolbar.d.ts +3 -0
- package/mjs/PageToolbar.js +27 -3
- package/mjs/TypedActions/TypedActions.d.ts +3 -0
- package/mjs/TypedActions/TypedActions.js +14 -5
- package/mjs/components/Details.d.ts +1 -1
- package/mjs/components/Details.js +2 -2
- package/mjs/components/patternfly-colors.d.ts +10 -0
- package/mjs/components/patternfly-colors.js +10 -0
- package/mjs/index.d.ts +1 -1
- package/mjs/index.js +1 -1
- package/package.json +1 -1
- package/cjs/PageCatalog.js +0 -178
- package/mjs/PageCatalog.d.ts +0 -113
- package/mjs/PageCatalog.js +0 -140
package/cjs/BulkActionDialog.js
CHANGED
@@ -190,7 +190,7 @@ function BulkActionDialog(props) {
|
|
190
190
|
maxHeight: 500,
|
191
191
|
overflow: 'hidden',
|
192
192
|
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
193
|
-
} }, { children: !isSubmitting && !isSubmited ? ((0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: props.items.length, tableColumns: props.columns, keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items" }, "items")) : ((0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: __spreadArray([], __read(paged), false), itemCount: props.items.length, tableColumns: __spreadArray(__spreadArray([], __read(props.errorColumns), false), [
|
193
|
+
} }, { children: !isSubmitting && !isSubmited ? ((0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: props.items.length, tableColumns: props.columns, keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items", disableBodyPadding: true }, "items")) : ((0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: __spreadArray([], __read(paged), false), itemCount: props.items.length, tableColumns: __spreadArray(__spreadArray([], __read(props.errorColumns), false), [
|
194
194
|
{
|
195
195
|
header: 'Status',
|
196
196
|
cell: function (item) {
|
@@ -212,6 +212,6 @@ function BulkActionDialog(props) {
|
|
212
212
|
} }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.ExclamationCircleIcon, {}), "\u00A0 ", statuses === null || statuses === void 0 ? void 0 : statuses[key]] })));
|
213
213
|
},
|
214
214
|
},
|
215
|
-
], false), keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items" }, "status")) })), props.confirmText && ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: !isSubmitting && !isSubmited }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { marginLeft: 32, marginTop: 0, marginBottom: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: "confirm", label: props.confirmText, isChecked: confirmed, onChange: setConfirmed }) })) })))] })) })));
|
215
|
+
], false), keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items", disableBodyPadding: true }, "status")) })), props.confirmText && ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: !isSubmitting && !isSubmited }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { marginLeft: 32, marginTop: 0, marginBottom: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: "confirm", label: props.confirmText, isChecked: confirmed, onChange: setConfirmed }) })) })))] })) })));
|
216
216
|
}
|
217
217
|
exports.BulkActionDialog = BulkActionDialog;
|
package/cjs/PageBody.js
CHANGED
@@ -21,7 +21,7 @@ var _1 = require(".");
|
|
21
21
|
var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
|
22
22
|
var Settings_1 = require("./Settings");
|
23
23
|
function PageBody(props) {
|
24
|
-
var usePadding = (0, _1.useBreakpoint)('xxl');
|
24
|
+
var usePadding = (0, _1.useBreakpoint)('xxl') && props.disablePadding !== true;
|
25
25
|
var settings = (0, Settings_1.useSettings)();
|
26
26
|
var t = (0, react_i18next_1.useTranslation)().t;
|
27
27
|
return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: t('Error') }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
package/cjs/PageDataList.js
CHANGED
@@ -21,7 +21,6 @@ var PageBody_1 = require("./PageBody");
|
|
21
21
|
var PageHeader_1 = require("./PageHeader");
|
22
22
|
var PageLayout_1 = require("./PageLayout");
|
23
23
|
var PagePagination_1 = require("./PagePagination");
|
24
|
-
var PageToolbar_1 = require("./PageToolbar");
|
25
24
|
var Settings_1 = require("./Settings");
|
26
25
|
var TypedActions_1 = require("./TypedActions");
|
27
26
|
function DataListPage(props) {
|
@@ -46,7 +45,7 @@ function PageDataList(props) {
|
|
46
45
|
if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
|
47
46
|
return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 64 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })));
|
48
47
|
}
|
49
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(
|
48
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(react_core_1.DataList, __assign({ "aria-label": "Simple data list example" }, { children: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.DataListItem, __assign({ "aria-labelledby": "simple-item1" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DataListItemRow, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.DataListCheck, { "aria-labelledby": "check-action-item1", name: "check-action-check1", isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onClick: function () {
|
50
49
|
if (isSelected === null || isSelected === void 0 ? void 0 : isSelected(item)) {
|
51
50
|
selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
|
52
51
|
}
|
package/cjs/PageHeader.js
CHANGED
@@ -74,7 +74,7 @@ function PageHeader(props) {
|
|
74
74
|
borderTop: settings.theme !== 'light' && settings.borders
|
75
75
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
76
76
|
: undefined,
|
77
|
-
borderBottom: settings.borders
|
77
|
+
borderBottom: !props.disableBorderBottom && settings.borders
|
78
78
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
79
79
|
: undefined,
|
80
80
|
backgroundColor: 'var(--pf-global--BackgroundColor--100)',
|
@@ -84,7 +84,7 @@ function PageHeader(props) {
|
|
84
84
|
borderTop: !navigation && settings.theme !== 'light' && settings.borders
|
85
85
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
86
86
|
: undefined,
|
87
|
-
borderBottom: settings.borders
|
87
|
+
borderBottom: !props.disableBorderBottom && settings.borders
|
88
88
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
89
89
|
: undefined,
|
90
90
|
backgroundColor: settings.theme === 'dark'
|
package/cjs/PageTable.js
CHANGED
@@ -37,20 +37,46 @@ var react_icons_1 = require("@patternfly/react-icons");
|
|
37
37
|
var react_table_1 = require("@patternfly/react-table");
|
38
38
|
var resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
|
39
39
|
var react_1 = require("react");
|
40
|
+
var Scrollable_1 = require("./components/Scrollable");
|
40
41
|
var useBreakPoint_1 = require("./components/useBreakPoint");
|
41
42
|
var PageBody_1 = require("./PageBody");
|
42
43
|
var PageColumnModal_1 = require("./PageColumnModal");
|
43
44
|
var PageHeader_1 = require("./PageHeader");
|
44
45
|
var PageLayout_1 = require("./PageLayout");
|
45
46
|
var PagePagination_1 = require("./PagePagination");
|
47
|
+
var PageTableCards_1 = require("./PageTableCards");
|
48
|
+
var PageTableList_1 = require("./PageTableList");
|
49
|
+
var PageTableViewType_1 = require("./PageTableViewType");
|
46
50
|
var PageToolbar_1 = require("./PageToolbar");
|
47
51
|
var Settings_1 = require("./Settings");
|
48
52
|
var TypedActions_1 = require("./TypedActions");
|
49
53
|
function TablePage(props) {
|
50
|
-
return ((0, jsx_runtime_1.
|
54
|
+
return ((0, jsx_runtime_1.jsxs)(PageLayout_1.PageLayout, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsx)(PageTable, __assign({}, props))] }));
|
51
55
|
}
|
52
56
|
exports.TablePage = TablePage;
|
53
57
|
function PageTable(props) {
|
58
|
+
var _a;
|
59
|
+
var disableBodyPadding = props.disableBodyPadding;
|
60
|
+
disableBodyPadding = true;
|
61
|
+
var toolbarActions = props.toolbarActions;
|
62
|
+
var _b = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _b.openColumnModal, columnModal = _b.columnModal, managedColumns = _b.managedColumns;
|
63
|
+
var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return TypedActions_1.TypedActionType.bulk === toolbarAction.type; })) !==
|
64
|
+
undefined;
|
65
|
+
var hasTableViewType = !props.disableTableView;
|
66
|
+
var hasListViewType = !props.disableListView;
|
67
|
+
// const hasCardViewType = !props.disableCardView
|
68
|
+
var _c = __read((0, react_1.useState)(function () {
|
69
|
+
var _a;
|
70
|
+
return (_a = props.defaultTableView) !== null && _a !== void 0 ? _a : (hasTableViewType
|
71
|
+
? PageTableViewType_1.PageTableViewTypeE.Table
|
72
|
+
: hasListViewType
|
73
|
+
? PageTableViewType_1.PageTableViewTypeE.List
|
74
|
+
: PageTableViewType_1.PageTableViewTypeE.Cards);
|
75
|
+
}), 2), viewType = _c[0], setViewType = _c[1];
|
76
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PageToolbar_1.PageTableToolbar, __assign({}, props, { openColumnModal: openColumnModal, showSelect: showSelect, viewType: viewType, setViewType: setViewType })), viewType === PageTableViewType_1.PageTableViewTypeE.Table && ((0, jsx_runtime_1.jsx)(PageBody_1.PageBody, __assign({ disablePadding: disableBodyPadding }, { children: (0, jsx_runtime_1.jsx)(PageTableView, __assign({}, props, { tableColumns: managedColumns })) }))), viewType === PageTableViewType_1.PageTableViewTypeE.List && ((0, jsx_runtime_1.jsx)(PageBody_1.PageBody, __assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(PageTableList_1.PageTableList, __assign({}, props, { showSelect: showSelect })) }) }))), viewType === PageTableViewType_1.PageTableViewTypeE.Cards && ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(PageTableCards_1.PageTableCards, __assign({}, props, { showSelect: showSelect })) })), (!props.autoHidePagination || ((_a = props.itemCount) !== null && _a !== void 0 ? _a : 0) > props.perPage) && ((0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props))), columnModal] }));
|
77
|
+
}
|
78
|
+
exports.PageTable = PageTable;
|
79
|
+
function PageTableView(props) {
|
54
80
|
var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, filters = props.filters, error = props.error, onSelect = props.onSelect, unselectAll = props.unselectAll;
|
55
81
|
var t = props.t;
|
56
82
|
t = t ? t : function (t) { return t; };
|
@@ -78,7 +104,6 @@ function PageTable(props) {
|
|
78
104
|
(0, resize_observer_1.default)(containerRef, function () { return updateScroll(containerRef.current); });
|
79
105
|
(0, react_1.useEffect)(function () { return updateScroll(containerRef.current); }, [updateScroll]);
|
80
106
|
var settings = (0, Settings_1.useSettings)();
|
81
|
-
var _b = (0, PageColumnModal_1.useColumnModal)(tableColumns), openColumnModal = _b.openColumnModal, columnModal = _b.columnModal, managedColumns = _b.managedColumns;
|
82
107
|
if (error) {
|
83
108
|
return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
84
109
|
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
@@ -90,13 +115,12 @@ function PageTable(props) {
|
|
90
115
|
if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
|
91
116
|
return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 64 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })));
|
92
117
|
}
|
93
|
-
return ((0, jsx_runtime_1.jsxs)(
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
118
|
+
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "pf-c-scroll-inner-wrapper", style: { height: '100%', marginBottom: -1 }, ref: containerRef, onScroll: onScroll }, { children: [(0, jsx_runtime_1.jsxs)(react_table_1.TableComposable, __assign({ "aria-label": "Simple table", variant: props.compact ? 'compact' : settings.tableLayout === 'compact' ? 'compact' : undefined, gridBreakPoint: "", isStickyHeader: true }, { children: [itemCount === undefined ? ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Th, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}) }) }) })) : ((0, jsx_runtime_1.jsx)(TableHead, __assign({}, props, { showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, tableColumns: tableColumns, onSelect: onSelect }))), (0, jsx_runtime_1.jsx)(react_table_1.Tbody, { children: itemCount === undefined
|
119
|
+
? new Array(perPage).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Td, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }) }, index)); })
|
120
|
+
: pageItems === undefined
|
121
|
+
? new Array(Math.min(perPage, itemCount)).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, { children: [showSelect && (0, jsx_runtime_1.jsx)(react_table_1.Td, {}), (0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ colSpan: tableColumns.length }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }))] }, index)); })
|
122
|
+
: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsx)("div", __assign({ style: { margin: 'auto' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.SearchIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: t('No results found') })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: t('No results match this filter criteria. Adjust your filters and try again.') }), clearAllFilters && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateSecondaryActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: clearAllFilters }, { children: t('Clear all filters') })) }))] }) })))] })));
|
98
123
|
}
|
99
|
-
exports.PageTable = PageTable;
|
100
124
|
function TableHead(props) {
|
101
125
|
var columns = props.tableColumns, itemActions = props.rowActions, sort = props.sort, setSort = props.setSort, sortDirection = props.sortDirection, setSortDirection = props.setSortDirection, showSelect = props.showSelect, onSelect = props.onSelect;
|
102
126
|
var settings = (0, Settings_1.useSettings)();
|
@@ -0,0 +1,87 @@
|
|
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
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
+
exports.useColumnsToTableCardFn = exports.PageTableCard = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
17
|
+
/* eslint-disable @typescript-eslint/no-empty-function */
|
18
|
+
var react_core_1 = require("@patternfly/react-core");
|
19
|
+
var react_1 = require("react");
|
20
|
+
var Details_1 = require("./components/Details");
|
21
|
+
var IconWrapper_1 = require("./components/IconWrapper");
|
22
|
+
var TypedActions_1 = require("./TypedActions");
|
23
|
+
function PageTableCard(props) {
|
24
|
+
var _a;
|
25
|
+
var item = props.item, itemToCardFn = props.itemToCardFn, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, itemActions = props.itemActions, showSelect = props.showSelect, defaultCardSubtitle = props.defaultCardSubtitle;
|
26
|
+
var card = (0, react_1.useMemo)(function () { return itemToCardFn(item); }, [item, itemToCardFn]);
|
27
|
+
var isItemSelected = !!(isSelected === null || isSelected === void 0 ? void 0 : isSelected(item));
|
28
|
+
var onSelectClick = (0, react_1.useCallback)(function () {
|
29
|
+
if (isSelected === null || isSelected === void 0 ? void 0 : isSelected(item)) {
|
30
|
+
unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
|
31
|
+
}
|
32
|
+
else {
|
33
|
+
selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
|
34
|
+
}
|
35
|
+
}, [isSelected, item, selectItem, unselectItem]);
|
36
|
+
var showDropdown = itemActions !== undefined && itemActions.length > 0;
|
37
|
+
var showActions = showSelect || showDropdown;
|
38
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.Card, __assign({ id: card.id, isFlat: true, isLarge: true, isRounded: true, isSelectable: isItemSelected, isSelected: isItemSelected, style: {
|
39
|
+
transition: 'box-shadow 0.25s',
|
40
|
+
cursor: 'default',
|
41
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CardHeader, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true, style: { width: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ isFilled: true }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [card.icon && ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
42
|
+
display: 'flex',
|
43
|
+
height: 40,
|
44
|
+
width: 40,
|
45
|
+
marginTop: -20,
|
46
|
+
marginBottom: -20,
|
47
|
+
marginRight: 12,
|
48
|
+
alignItems: 'center',
|
49
|
+
justifyItems: 'stretch',
|
50
|
+
} }, { children: (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "lg" }, { children: card.icon })) }))), (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: card.title }), card.description ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: card.description }))) : (defaultCardSubtitle && (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small" }, { children: defaultCardSubtitle })))] })] })) })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) })) })) })), card.badge && !card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) }))] })), showActions && ((0, jsx_runtime_1.jsxs)(react_core_1.CardActions, { children: [itemActions && itemActions.length && ((0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: itemActions, position: react_core_1.DropdownPosition.right, selectedItem: item })), showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onChange: onSelectClick,
|
51
|
+
// aria-label="card checkbox example"
|
52
|
+
id: "check-1" }))] }))] }), card.cardBody, card.labels && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
53
|
+
display: 'flex',
|
54
|
+
flexDirection: 'row',
|
55
|
+
alignItems: 'end',
|
56
|
+
gap: 16,
|
57
|
+
} }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { flexGrow: 1 } }, { children: card.labels && ((0, jsx_runtime_1.jsx)(react_core_1.LabelGroup, { children: card.labels.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: item.color }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: item.label, style: { minWidth: 0 } }) }), item.label)); }) })) })) })) })), card.alertTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, __assign({ title: card.alertTitle, isInline: true, variant: card.alertVariant }, { children: card.alertContent })))] }), (_a = card.id) !== null && _a !== void 0 ? _a : card.title));
|
58
|
+
}
|
59
|
+
exports.PageTableCard = PageTableCard;
|
60
|
+
function useColumnsToTableCardFn(columns, keyFn) {
|
61
|
+
var cardData = (0, react_1.useMemo)(function () {
|
62
|
+
var cols = columns.filter(function (column) { return column.card !== 'hidden'; });
|
63
|
+
var nameColumn = cols.shift();
|
64
|
+
var descriptionColumn = cols.find(function (column) { return column.card === 'description'; });
|
65
|
+
if (descriptionColumn) {
|
66
|
+
cols = cols.filter(function (column) { return column !== descriptionColumn; });
|
67
|
+
}
|
68
|
+
return {
|
69
|
+
nameColumn: nameColumn,
|
70
|
+
descriptionColumn: descriptionColumn,
|
71
|
+
columns: cols,
|
72
|
+
};
|
73
|
+
}, [columns]);
|
74
|
+
return (0, react_1.useMemo)(function () {
|
75
|
+
return function (item) {
|
76
|
+
var _a, _b;
|
77
|
+
var pageTableCard = {
|
78
|
+
id: keyFn(item),
|
79
|
+
title: (_a = cardData.nameColumn) === null || _a === void 0 ? void 0 : _a.cell(item),
|
80
|
+
description: (_b = cardData.descriptionColumn) === null || _b === void 0 ? void 0 : _b.cell(item),
|
81
|
+
cardBody: ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: cardData.columns.map(function (column) { return ((0, jsx_runtime_1.jsx)(Details_1.Detail, __assign({ label: column.hideLabel ? undefined : column.header }, { children: column.cell(item) }), column.id)); }) })) })),
|
82
|
+
};
|
83
|
+
return pageTableCard;
|
84
|
+
};
|
85
|
+
}, [cardData.columns, cardData.descriptionColumn, cardData.nameColumn, keyFn]);
|
86
|
+
}
|
87
|
+
exports.useColumnsToTableCardFn = useColumnsToTableCardFn;
|
@@ -0,0 +1,38 @@
|
|
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
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
+
exports.PageTableCards = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var react_core_1 = require("@patternfly/react-core");
|
17
|
+
var react_1 = require("react");
|
18
|
+
var Grid_1 = require("./components/Grid");
|
19
|
+
var PageTableCard_1 = require("./PageTableCard");
|
20
|
+
function PageTableCards(props) {
|
21
|
+
var keyFn = props.keyFn, items = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, showSelect = props.showSelect, defaultCardSubtitle = props.defaultCardSubtitle;
|
22
|
+
var itemToCardFn = (0, PageTableCard_1.useColumnsToTableCardFn)(tableColumns, keyFn);
|
23
|
+
var catalogCards = (0, react_1.useMemo)(function () {
|
24
|
+
return ((0, jsx_runtime_1.jsx)(Grid_1.Grid, __assign({ size: 470 }, { children: items === null || items === void 0 ? void 0 : items.map(function (item) { return ((0, jsx_runtime_1.jsx)(PageTableCard_1.PageTableCard, { item: item, itemToCardFn: itemToCardFn, isSelected: isSelected, selectItem: selectItem, unselectItem: unselectItem, itemActions: rowActions, showSelect: showSelect, defaultCardSubtitle: defaultCardSubtitle }, keyFn(item))); }) })));
|
25
|
+
}, [
|
26
|
+
items,
|
27
|
+
keyFn,
|
28
|
+
itemToCardFn,
|
29
|
+
isSelected,
|
30
|
+
selectItem,
|
31
|
+
unselectItem,
|
32
|
+
rowActions,
|
33
|
+
showSelect,
|
34
|
+
defaultCardSubtitle,
|
35
|
+
]);
|
36
|
+
return (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ style: { flexGrow: 1 } }, { children: catalogCards }));
|
37
|
+
}
|
38
|
+
exports.PageTableCards = PageTableCards;
|
@@ -0,0 +1,79 @@
|
|
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
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
+
exports.useColumnsToDataList = exports.PageTableList = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var react_core_1 = require("@patternfly/react-core");
|
17
|
+
var react_1 = require("react");
|
18
|
+
var TypedActions_1 = require("./TypedActions");
|
19
|
+
function PageTableList(props) {
|
20
|
+
var keyFn = props.keyFn, pageItems = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, defaultCardSubtitle = props.defaultCardSubtitle, showSelect = props.showSelect;
|
21
|
+
var columnsToDataList = useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect);
|
22
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.DataList, __assign({ "aria-label": "TODO", style: { marginTop: -1 } }, { children: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(columnsToDataList) })));
|
23
|
+
}
|
24
|
+
exports.PageTableList = PageTableList;
|
25
|
+
function useColumnsToDataList(tableColumns, keyFn, isSelected, selectItem, unselectItem, rowActions, defaultCardSubtitle, showSelect) {
|
26
|
+
var data = (0, react_1.useMemo)(function () {
|
27
|
+
var cols = tableColumns.filter(function (column) { return column.card !== 'hidden'; });
|
28
|
+
var nameColumn = cols.shift();
|
29
|
+
var descriptionColumn = cols.find(function (column) { return column.card === 'description'; });
|
30
|
+
if (descriptionColumn) {
|
31
|
+
cols = cols.filter(function (column) { return column !== descriptionColumn; });
|
32
|
+
}
|
33
|
+
return {
|
34
|
+
nameColumn: nameColumn,
|
35
|
+
descriptionColumn: descriptionColumn,
|
36
|
+
columns: cols.filter(function (column) { return column.list !== 'secondary'; }),
|
37
|
+
secondary: cols.filter(function (column) { return column.list === 'secondary'; }),
|
38
|
+
};
|
39
|
+
}, [tableColumns]);
|
40
|
+
var onSelectClick = (0, react_1.useCallback)(function (item) {
|
41
|
+
if (isSelected === null || isSelected === void 0 ? void 0 : isSelected(item)) {
|
42
|
+
unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
|
43
|
+
}
|
44
|
+
else {
|
45
|
+
selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
|
46
|
+
}
|
47
|
+
}, [isSelected, selectItem, unselectItem]);
|
48
|
+
return (0, react_1.useCallback)(function (item) {
|
49
|
+
var _a;
|
50
|
+
var key = keyFn(item);
|
51
|
+
var isItemSelected = isSelected === null || isSelected === void 0 ? void 0 : isSelected(item);
|
52
|
+
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: [
|
53
|
+
(0, jsx_runtime_1.jsx)(react_core_1.DataListCell, { 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.Stack, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", style: { marginTop: -4 } }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ id: "data-list-".concat(key) }, { children: (_a = data.nameColumn) === null || _a === void 0 ? void 0 : _a.cell(item) })) })), data.descriptionColumn ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: data.descriptionColumn.cell(item) }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: data.columns.map(function (column) {
|
54
|
+
var value = column.cell(item);
|
55
|
+
if (!value)
|
56
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
57
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [!column.hideLabel && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: column.header })) })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: column.cell(item) })] }, column.header));
|
58
|
+
}) }))] })) }) }, "primary"),
|
59
|
+
(0, jsx_runtime_1.jsx)(react_core_1.DataListCell, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: data.secondary.map(function (column) {
|
60
|
+
var value = column.cell(item);
|
61
|
+
if (!value)
|
62
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
63
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [!column.hideLabel && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: column.header })) })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, { children: column.cell(item) })] }, column.header));
|
64
|
+
}) })) }) }, "secondary"),
|
65
|
+
] }), 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)(TypedActions_1.TypedActions, { actions: rowActions, position: react_core_1.DropdownPosition.right, selectedItem: item }) })))] }) }), key));
|
66
|
+
}, [
|
67
|
+
data.columns,
|
68
|
+
data.descriptionColumn,
|
69
|
+
data.nameColumn,
|
70
|
+
data.secondary,
|
71
|
+
defaultCardSubtitle,
|
72
|
+
isSelected,
|
73
|
+
keyFn,
|
74
|
+
onSelectClick,
|
75
|
+
rowActions,
|
76
|
+
showSelect,
|
77
|
+
]);
|
78
|
+
}
|
79
|
+
exports.useColumnsToDataList = useColumnsToDataList;
|
@@ -0,0 +1,9 @@
|
|
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 = {}));
|
package/cjs/PageToolbar.js
CHANGED
@@ -47,6 +47,7 @@ var react_i18next_1 = require("react-i18next");
|
|
47
47
|
var BulkSelector_1 = require("./components/BulkSelector");
|
48
48
|
var SingleSelect_1 = require("./components/SingleSelect");
|
49
49
|
var useBreakPoint_1 = require("./components/useBreakPoint");
|
50
|
+
var PageTableViewType_1 = require("./PageTableViewType");
|
50
51
|
var Settings_1 = require("./Settings");
|
51
52
|
var TypedActions_1 = require("./TypedActions");
|
52
53
|
function toolbarActionsHaveBulkActions(actions) {
|
@@ -74,6 +75,7 @@ function PageTableToolbar(props) {
|
|
74
75
|
var _a;
|
75
76
|
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, disableBorderBottom = props.disableBorderBottom;
|
76
77
|
var sm = (0, useBreakPoint_1.useBreakpoint)('md');
|
78
|
+
var viewType = props.viewType, setViewType = props.setViewType;
|
77
79
|
var toolbarActions = props.toolbarActions;
|
78
80
|
toolbarActions = toolbarActions !== null && toolbarActions !== void 0 ? toolbarActions : [];
|
79
81
|
var onSetPage = (0, react_1.useCallback)(function (_event, page) { return setPage(page); }, [setPage]);
|
@@ -156,7 +158,29 @@ function PageTableToolbar(props) {
|
|
156
158
|
return newState;
|
157
159
|
});
|
158
160
|
}, showToolbarItem: false }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), filter.label));
|
159
|
-
})] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) }) })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: openColumnModal && ((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 }) })) }))
|
161
|
+
})] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(TypedActions_1.TypedActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) }) })), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1 } }), (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: [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 }) })) })), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroup, { children: [PageTableViewType_1.PageTableViewTypeE.Table, PageTableViewType_1.PageTableViewTypeE.List, PageTableViewType_1.PageTableViewTypeE.Cards]
|
162
|
+
// .filter((vt) => {
|
163
|
+
// switch (vt) {
|
164
|
+
// case PageTableViewTypeE.Cards:
|
165
|
+
// return props.itemToCardFn !== undefined
|
166
|
+
// case PageTableViewTypeE.list:
|
167
|
+
// return false
|
168
|
+
// case PageTableViewTypeE.table:
|
169
|
+
// return props.tableColumns !== undefined
|
170
|
+
// default:
|
171
|
+
// return false
|
172
|
+
// }
|
173
|
+
// })
|
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); } }) }), 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); } }) })));
|
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); } }) })));
|
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 } }) }))] }) })));
|
160
184
|
}
|
161
185
|
exports.PageTableToolbar = PageTableToolbar;
|
162
186
|
function ToolbarFilterInput(props) {
|
@@ -52,7 +52,7 @@ var TypedActionType;
|
|
52
52
|
TypedActionType["dropdown"] = "dropdown";
|
53
53
|
})(TypedActionType = exports.TypedActionType || (exports.TypedActionType = {}));
|
54
54
|
function TypedActionsDropdown(props) {
|
55
|
-
var actions = props.actions, label = props.label, _a = props.isPrimary, isPrimary = _a === void 0 ? false : _a, selectedItems = props.selectedItems;
|
55
|
+
var actions = props.actions, label = props.label, _a = props.isPrimary, isPrimary = _a === void 0 ? false : _a, selectedItems = props.selectedItems, selectedItem = props.selectedItem;
|
56
56
|
var _b = __read((0, react_1.useState)(false), 2), dropdownOpen = _b[0], setDropdownOpen = _b[1];
|
57
57
|
var hasItemActions = (0, react_1.useMemo)(function () { return !actions.every(function (action) { return action.type !== TypedActionType.bulk; }); }, [actions]);
|
58
58
|
var hasIcons = (0, react_1.useMemo)(function () {
|
@@ -65,13 +65,22 @@ function TypedActionsDropdown(props) {
|
|
65
65
|
? {
|
66
66
|
color: 'var(--pf-global--Color--light-100)',
|
67
67
|
}
|
68
|
-
: {} }, { children: label })), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(DropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: { zIndex: 201 } }));
|
68
|
+
: {} }, { children: label })), isOpen: dropdownOpen, isPlain: !label, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(DropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: { zIndex: 201 } }));
|
69
69
|
}
|
70
70
|
exports.TypedActionsDropdown = TypedActionsDropdown;
|
71
71
|
function DropdownActionItem(props) {
|
72
|
-
var action = props.action, selectedItems = props.selectedItems, hasIcons = props.hasIcons, index = props.index;
|
73
|
-
// TODO case TypedActionType.single?
|
72
|
+
var action = props.action, selectedItems = props.selectedItems, selectedItem = props.selectedItem, hasIcons = props.hasIcons, index = props.index;
|
74
73
|
switch (action.type) {
|
74
|
+
case TypedActionType.single: {
|
75
|
+
var Icon = action.icon;
|
76
|
+
if (!Icon && hasIcons)
|
77
|
+
Icon = TransparentIcon;
|
78
|
+
var tooltip = action.tooltip;
|
79
|
+
var isDisabled = false;
|
80
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ onClick: function () { return selectedItem && action.onClick(selectedItem); }, isAriaDisabled: isDisabled, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, style: {
|
81
|
+
color: action.isDanger && !isDisabled ? 'var(--pf-global--danger-color--100)' : undefined,
|
82
|
+
} }, { children: action.label })) }), action.label));
|
83
|
+
}
|
75
84
|
case TypedActionType.button:
|
76
85
|
case TypedActionType.bulk: {
|
77
86
|
var Icon = action.icon;
|
@@ -77,9 +77,10 @@ function DetailsList(props) {
|
|
77
77
|
}
|
78
78
|
exports.DetailsList = DetailsList;
|
79
79
|
function Detail(props) {
|
80
|
+
var _a;
|
80
81
|
if (!props.children)
|
81
82
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
82
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: props.label }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: props.label.toLowerCase().split(' ').join('-') }, { children: props.children }))] }));
|
83
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [props.label && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: (0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: props.label })) })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: (_a = props.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().split(' ').join('-') }, { children: props.children }))] }));
|
83
84
|
}
|
84
85
|
exports.Detail = Detail;
|
85
86
|
function DetailsSkeleton() {
|
@@ -1,6 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.pfDisabled = exports.pfInfo = exports.pfWarning = exports.pfDanger = exports.pfSuccess = exports.getPatternflyColor = exports.PatternFlyColor = void 0;
|
3
|
+
exports.LabelColorE = exports.pfDisabled = exports.pfInfo = exports.pfWarning = exports.pfDanger = exports.pfSuccess = exports.getPatternflyColor = exports.PatternFlyColor = void 0;
|
4
4
|
var PatternFlyColor;
|
5
5
|
(function (PatternFlyColor) {
|
6
6
|
PatternFlyColor["Green"] = "green";
|
@@ -30,3 +30,13 @@ exports.pfDanger = 'var(--pf-global--danger-color--100)';
|
|
30
30
|
exports.pfWarning = 'var(--pf-global--warning-color--100)';
|
31
31
|
exports.pfInfo = 'var(--pf-global--info-color--100)';
|
32
32
|
exports.pfDisabled = 'var(--pf-global--disabled-color--100)';
|
33
|
+
var LabelColorE;
|
34
|
+
(function (LabelColorE) {
|
35
|
+
LabelColorE["blue"] = "blue";
|
36
|
+
LabelColorE["cyan"] = "cyan";
|
37
|
+
LabelColorE["green"] = "green";
|
38
|
+
LabelColorE["orange"] = "orange";
|
39
|
+
LabelColorE["purple"] = "purple";
|
40
|
+
LabelColorE["red"] = "red";
|
41
|
+
LabelColorE["grey"] = "grey";
|
42
|
+
})(LabelColorE = exports.LabelColorE || (exports.LabelColorE = {}));
|
package/cjs/index.js
CHANGED
@@ -22,7 +22,6 @@ __exportStar(require("./components/Help"), exports);
|
|
22
22
|
__exportStar(require("./components/patternfly-colors"), exports);
|
23
23
|
__exportStar(require("./components/useBreakPoint"), exports);
|
24
24
|
__exportStar(require("./PageBody"), exports);
|
25
|
-
__exportStar(require("./PageCatalog"), exports);
|
26
25
|
__exportStar(require("./PageCells"), exports);
|
27
26
|
__exportStar(require("./PageDataList"), exports);
|
28
27
|
__exportStar(require("./PageDialog"), exports);
|
@@ -31,6 +30,7 @@ __exportStar(require("./PageFramework"), exports);
|
|
31
30
|
__exportStar(require("./PageHeader"), exports);
|
32
31
|
__exportStar(require("./PageLayout"), exports);
|
33
32
|
__exportStar(require("./PageTable"), exports);
|
33
|
+
__exportStar(require("./PageTableCards"), exports);
|
34
34
|
__exportStar(require("./PageTabs"), exports);
|
35
35
|
__exportStar(require("./PageToolbar"), exports);
|
36
36
|
__exportStar(require("./TypedActions"), exports);
|
package/mjs/BulkActionDialog.js
CHANGED
@@ -78,7 +78,7 @@ export function BulkActionDialog(props) {
|
|
78
78
|
maxHeight: 500,
|
79
79
|
overflow: 'hidden',
|
80
80
|
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
81
|
-
}, children: !isSubmitting && !isSubmited ? (_jsx(PageTable, { pageItems: paged, itemCount: props.items.length, tableColumns: props.columns, keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items" }, "items")) : (_jsx(PageTable, { pageItems: [...paged], itemCount: props.items.length, tableColumns: [
|
81
|
+
}, children: !isSubmitting && !isSubmited ? (_jsx(PageTable, { pageItems: paged, itemCount: props.items.length, tableColumns: props.columns, keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items", disableBodyPadding: true }, "items")) : (_jsx(PageTable, { pageItems: [...paged], itemCount: props.items.length, tableColumns: [
|
82
82
|
...props.errorColumns,
|
83
83
|
{
|
84
84
|
header: 'Status',
|
@@ -100,5 +100,5 @@ export function BulkActionDialog(props) {
|
|
100
100
|
}, children: [_jsx(ExclamationCircleIcon, {}), "\u00A0 ", statuses?.[key]] }));
|
101
101
|
},
|
102
102
|
},
|
103
|
-
], keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items" }, "status")) }), props.confirmText && (_jsx(Collapse, { open: !isSubmitting && !isSubmited, children: _jsx("div", { style: { marginLeft: 32, marginTop: 0, marginBottom: 8 }, children: _jsx(Checkbox, { id: "confirm", label: props.confirmText, isChecked: confirmed, onChange: setConfirmed }) }) }))] }) }));
|
103
|
+
], keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items", disableBodyPadding: true }, "status")) }), props.confirmText && (_jsx(Collapse, { open: !isSubmitting && !isSubmited, children: _jsx("div", { style: { marginLeft: 32, marginTop: 0, marginBottom: 8 }, children: _jsx(Checkbox, { id: "confirm", label: props.confirmText, isChecked: confirmed, onChange: setConfirmed }) }) }))] }) }));
|
104
104
|
}
|
package/mjs/PageBody.d.ts
CHANGED
package/mjs/PageBody.js
CHANGED
@@ -4,7 +4,7 @@ import { useBreakpoint } from '.';
|
|
4
4
|
import ErrorBoundary from './components/ErrorBoundary';
|
5
5
|
import { useSettings } from './Settings';
|
6
6
|
export function PageBody(props) {
|
7
|
-
const usePadding = useBreakpoint('xxl');
|
7
|
+
const usePadding = useBreakpoint('xxl') && props.disablePadding !== true;
|
8
8
|
const settings = useSettings();
|
9
9
|
const { t } = useTranslation();
|
10
10
|
return (_jsx(ErrorBoundary, { message: t('Error'), children: _jsx("div", { style: {
|
package/mjs/PageDataList.js
CHANGED
@@ -7,7 +7,6 @@ import { PageBody } from './PageBody';
|
|
7
7
|
import { PageHeader } from './PageHeader';
|
8
8
|
import { PageLayout } from './PageLayout';
|
9
9
|
import { PagePagination } from './PagePagination';
|
10
|
-
import { PageTableToolbar } from './PageToolbar';
|
11
10
|
import { useSettings } from './Settings';
|
12
11
|
import { TypedActions, TypedActionType } from './TypedActions';
|
13
12
|
export function DataListPage(props) {
|
@@ -31,7 +30,7 @@ export function PageDataList(props) {
|
|
31
30
|
if (itemCount === 0 && Object.keys(filters ?? {}).length === 0) {
|
32
31
|
return (_jsxs(EmptyState, { variant: EmptyStateVariant.large, style: { paddingTop: 64 }, children: [_jsx(EmptyStateIcon, { icon: PlusCircleIcon }), _jsx(Title, { headingLevel: "h4", size: "lg", children: props.emptyStateTitle }), props.emptyStateDescription && (_jsx(EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && (_jsx(Button, { variant: "primary", onClick: props.emptyStateButtonClick, children: props.emptyStateButtonText }))] }));
|
33
32
|
}
|
34
|
-
return (_jsxs(Fragment, { children: [_jsx(
|
33
|
+
return (_jsxs(Fragment, { children: [_jsx(Scrollable, { children: _jsx(DataList, { "aria-label": "Simple data list example", children: pageItems?.map((item) => (_jsx(DataListItem, { "aria-labelledby": "simple-item1", children: _jsxs(DataListItemRow, { children: [showSelect && (_jsx(DataListCheck, { "aria-labelledby": "check-action-item1", name: "check-action-check1", isChecked: isSelected?.(item), onClick: () => {
|
35
34
|
if (isSelected?.(item)) {
|
36
35
|
selectItem?.(item);
|
37
36
|
}
|
package/mjs/PageHeader.d.ts
CHANGED