@ansible/ansible-ui-framework 0.0.470 → 0.0.471
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -42,6 +42,7 @@ export type PageTableProps<T extends object> = {
|
|
|
42
42
|
disableTableView?: boolean;
|
|
43
43
|
disableListView?: boolean;
|
|
44
44
|
disableCardView?: boolean;
|
|
45
|
+
disableColumnManagement?: boolean;
|
|
45
46
|
defaultTableView?: PageTableViewType;
|
|
46
47
|
disableBodyPadding?: boolean;
|
|
47
48
|
defaultSubtitle?: ReactNode;
|
|
@@ -72,11 +72,12 @@ function PageTable(props) {
|
|
|
72
72
|
// const { disableBodyPadding } = props
|
|
73
73
|
var toolbarActions = props.toolbarActions, filters = props.filters, error = props.error, itemCount = props.itemCount;
|
|
74
74
|
var _b = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _b.openColumnModal, columnModal = _b.columnModal, managedColumns = _b.managedColumns;
|
|
75
|
-
var showSelect =
|
|
76
|
-
|
|
75
|
+
var showSelect = props.showSelect ||
|
|
76
|
+
(toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
|
|
77
|
+
undefined;
|
|
77
78
|
var hasTableViewType = !props.disableTableView;
|
|
78
79
|
var hasListViewType = !props.disableListView;
|
|
79
|
-
// const hasCardViewType = !props.disableCardView
|
|
80
|
+
// const hasCardViewType = !props.disableCardView;
|
|
80
81
|
var _c = __read((0, react_1.useState)(function () {
|
|
81
82
|
var _a;
|
|
82
83
|
return (_a = props.defaultTableView) !== null && _a !== void 0 ? _a : (hasTableViewType
|
|
@@ -56,5 +56,9 @@ export type PagetableToolbarProps<T extends object> = {
|
|
|
56
56
|
showSelect?: boolean;
|
|
57
57
|
viewType: PageTableViewType;
|
|
58
58
|
setViewType: (viewType: PageTableViewType) => void;
|
|
59
|
+
disableTableView?: boolean;
|
|
60
|
+
disableListView?: boolean;
|
|
61
|
+
disableCardView?: boolean;
|
|
62
|
+
disableColumnManagement?: boolean;
|
|
59
63
|
};
|
|
60
64
|
export declare function PageTableToolbar<T extends object>(props: PagetableToolbarProps<T>): JSX.Element;
|
|
@@ -92,6 +92,13 @@ function PageTableToolbar(props) {
|
|
|
92
92
|
return toolbarFilters ? ((toolbarFilters === null || toolbarFilters === void 0 ? void 0 : toolbarFilters.length) > 0 ? toolbarFilters[0].key : '') : '';
|
|
93
93
|
}), 2), selectedFilter = _b[0], setSeletedFilter = _b[1];
|
|
94
94
|
var settings = (0, Settings_1.useSettings)();
|
|
95
|
+
var viewTypeCount = 0;
|
|
96
|
+
if (!props.disableTableView)
|
|
97
|
+
viewTypeCount++;
|
|
98
|
+
if (!props.disableCardView)
|
|
99
|
+
viewTypeCount++;
|
|
100
|
+
if (!props.disableListView)
|
|
101
|
+
viewTypeCount++;
|
|
95
102
|
if (!showToolbar) {
|
|
96
103
|
return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
|
|
97
104
|
}
|
|
@@ -159,7 +166,13 @@ function PageTableToolbar(props) {
|
|
|
159
166
|
return newState;
|
|
160
167
|
});
|
|
161
168
|
}, showToolbarItem: false }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), filter.label));
|
|
162
|
-
})] })) }))), (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)("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, __assign({ "aria-label": "table view toggle" }, { children: [
|
|
169
|
+
})] })) }))), (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)("div", { style: { flexGrow: 1 } }), (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: [
|
|
170
|
+
!props.disableTableView && PageTableViewType_1.PageTableViewTypeE.Table,
|
|
171
|
+
!props.disableListView && PageTableViewType_1.PageTableViewTypeE.List,
|
|
172
|
+
!props.disableCardView && PageTableViewType_1.PageTableViewTypeE.Cards,
|
|
173
|
+
]
|
|
174
|
+
.filter(function (i) { return i; })
|
|
175
|
+
.map(function (vt) {
|
|
163
176
|
switch (vt) {
|
|
164
177
|
case PageTableViewType_1.PageTableViewTypeE.Cards:
|
|
165
178
|
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));
|
|
@@ -168,7 +181,7 @@ function PageTableToolbar(props) {
|
|
|
168
181
|
case PageTableViewType_1.PageTableViewTypeE.Table:
|
|
169
182
|
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));
|
|
170
183
|
}
|
|
171
|
-
}) })) })] })), (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
|
+
}) })) }))] })), (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 } }) }))] }) })));
|
|
172
185
|
}
|
|
173
186
|
exports.PageTableToolbar = PageTableToolbar;
|
|
174
187
|
function ToolbarFilterInput(props) {
|
package/cjs/useSelectDialog.js
CHANGED
|
@@ -76,6 +76,6 @@ function SelectDialog(props) {
|
|
|
76
76
|
flexDirection: 'column',
|
|
77
77
|
maxHeight: 400,
|
|
78
78
|
overflow: 'hidden',
|
|
79
|
-
} }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters, emptyStateTitle: "No organizations found", errorStateTitle: "Error loading organizations" }, view, { onSelect: function () { return null; } })) })) }))] })));
|
|
79
|
+
} }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters, emptyStateTitle: "No organizations found", errorStateTitle: "Error loading organizations" }, view, { onSelect: function () { return null; }, disableCardView: true, disableListView: true, disableColumnManagement: true })) })) }))] })));
|
|
80
80
|
}
|
|
81
81
|
exports.SelectDialog = SelectDialog;
|
|
@@ -51,7 +51,7 @@ function SelectMultipleDialog(props) {
|
|
|
51
51
|
flexDirection: 'column',
|
|
52
52
|
maxHeight: 500,
|
|
53
53
|
overflow: 'hidden',
|
|
54
|
-
} }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters }, view, { emptyStateTitle: (_a = props.emptyStateTitle) !== null && _a !== void 0 ? _a : translations.noItemsFound, errorStateTitle: (_b = props.errorStateTitle) !== null && _b !== void 0 ? _b : translations.errorText, showSelect: true })) })) })));
|
|
54
|
+
} }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters }, view, { emptyStateTitle: (_a = props.emptyStateTitle) !== null && _a !== void 0 ? _a : translations.noItemsFound, errorStateTitle: (_b = props.errorStateTitle) !== null && _b !== void 0 ? _b : translations.errorText, showSelect: true, disableCardView: true, disableListView: true, disableColumnManagement: true })) })) })));
|
|
55
55
|
}
|
|
56
56
|
exports.SelectMultipleDialog = SelectMultipleDialog;
|
|
57
57
|
function useSelectMultipleDialog() {
|