@ansible/ansible-ui-framework 0.0.470 → 0.0.471
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -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() {
|