@ansible/ansible-ui-framework 0.0.557 → 0.0.559
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -36,6 +36,8 @@ export type PageTableProps<T extends object> = {
|
|
|
36
36
|
error?: Error;
|
|
37
37
|
emptyStateTitle: string;
|
|
38
38
|
emptyStateDescription?: string;
|
|
39
|
+
emptyStateIcon?: React.ComponentType<any>;
|
|
40
|
+
emptyStateButtonIcon?: React.ReactNode;
|
|
39
41
|
emptyStateButtonText?: string;
|
|
40
42
|
emptyStateButtonClick?: () => void;
|
|
41
43
|
t?: (t: string) => string;
|
|
@@ -68,30 +68,30 @@ var PageToolbar_1 = require("./PageToolbar");
|
|
|
68
68
|
* ```
|
|
69
69
|
*/
|
|
70
70
|
function PageTable(props) {
|
|
71
|
-
var _a;
|
|
71
|
+
var _a, _b;
|
|
72
72
|
// const { disableBodyPadding } = props
|
|
73
73
|
var toolbarActions = props.toolbarActions, filters = props.filters, error = props.error, itemCount = props.itemCount;
|
|
74
|
-
var
|
|
74
|
+
var _c = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _c.openColumnModal, columnModal = _c.columnModal, managedColumns = _c.managedColumns;
|
|
75
75
|
var showSelect = props.showSelect ||
|
|
76
76
|
(toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
|
|
77
77
|
undefined;
|
|
78
78
|
var hasTableViewType = !props.disableTableView;
|
|
79
79
|
var hasListViewType = !props.disableListView;
|
|
80
80
|
// const hasCardViewType = !props.disableCardView;
|
|
81
|
-
var
|
|
81
|
+
var _d = __read((0, react_1.useState)(function () {
|
|
82
82
|
var _a;
|
|
83
83
|
return (_a = props.defaultTableView) !== null && _a !== void 0 ? _a : (hasTableViewType
|
|
84
84
|
? PageTableViewType_1.PageTableViewTypeE.Table
|
|
85
85
|
: hasListViewType
|
|
86
86
|
? PageTableViewType_1.PageTableViewTypeE.List
|
|
87
87
|
: PageTableViewType_1.PageTableViewTypeE.Cards);
|
|
88
|
-
}), 2), viewType =
|
|
88
|
+
}), 2), viewType = _d[0], setViewType = _d[1];
|
|
89
89
|
var usePadding = (0, useBreakPoint_1.useBreakpoint)('md') && props.disableBodyPadding !== true;
|
|
90
90
|
if (error) {
|
|
91
91
|
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "dark-2", style: { height: '100%' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: props.errorStateTitle })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: error.message })] })) })));
|
|
92
92
|
}
|
|
93
93
|
if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
|
|
94
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 48 } }, { 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 })))] })) }));
|
|
94
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: (_a = props.emptyStateIcon) !== null && _a !== void 0 ? _a : 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, icon: props.emptyStateButtonIcon ? props.emptyStateButtonIcon : null }, { children: props.emptyStateButtonText })))] })) }));
|
|
95
95
|
}
|
|
96
96
|
if (itemCount === undefined) {
|
|
97
97
|
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, variant: "light" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Bullseye, { children: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, {}) }) })));
|
|
@@ -103,7 +103,7 @@ function PageTable(props) {
|
|
|
103
103
|
borderRight: usePadding
|
|
104
104
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
|
105
105
|
: undefined,
|
|
106
|
-
} }, { 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 || ((
|
|
106
|
+
} }, { 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 || ((_b = props.itemCount) !== null && _b !== void 0 ? _b : 0) > props.perPage) && ((0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props))), columnModal] }));
|
|
107
107
|
}
|
|
108
108
|
exports.PageTable = PageTable;
|
|
109
109
|
function PageTableView(props) {
|
|
@@ -138,7 +138,7 @@ function PageTableView(props) {
|
|
|
138
138
|
? 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)); })
|
|
139
139
|
: pageItems === undefined
|
|
140
140
|
? 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)); })
|
|
141
|
-
: 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), isSelectMultiple: isSelectMultiple, selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect, expandedRow: expandedRow }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { 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.
|
|
141
|
+
: 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), isSelectMultiple: isSelectMultiple, selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect, expandedRow: expandedRow }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { 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. Clear all 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: "primary", onClick: clearAllFilters }, { children: t('Clear all filters') })) }))] })))] })));
|
|
142
142
|
}
|
|
143
143
|
function TableHead(props) {
|
|
144
144
|
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, expandedRow = props.expandedRow;
|