@ansible/ansible-ui-framework 0.0.531 → 0.0.532
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.
|
@@ -6,10 +6,16 @@ export interface BulkConfirmationDialog<T extends object> {
|
|
|
6
6
|
* @link https://www.patternfly.org/v4/components/modal/design-guidelines#confirmation-dialogs
|
|
7
7
|
*/
|
|
8
8
|
title: string;
|
|
9
|
-
/** The prompt that shows up under the confirmation title. */
|
|
9
|
+
/** The prompt/description that shows up under the confirmation title. */
|
|
10
10
|
prompt?: string;
|
|
11
|
+
/** Alert prompts that shows up under the confirmation title. */
|
|
12
|
+
alertPrompts?: string[];
|
|
11
13
|
/** The items to confirm for the bulk action. */
|
|
12
14
|
items: T[];
|
|
15
|
+
/** A function that determines that whether an action cannot be performed on a selected item
|
|
16
|
+
* (so that this item can be identified in the confirmation dialog) and returns a tooltip
|
|
17
|
+
* that can be displayed with the non-actionable row */
|
|
18
|
+
isItemNonActionable?: (item: T) => string | undefined;
|
|
13
19
|
/** A function that gets a unique key for each item. */
|
|
14
20
|
keyFn: (item: T) => string | number;
|
|
15
21
|
/** The columns to display for confirmation. */
|
|
@@ -26,39 +26,82 @@ var __read = (this && this.__read) || function (o, n) {
|
|
|
26
26
|
}
|
|
27
27
|
return ar;
|
|
28
28
|
};
|
|
29
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
30
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
31
|
+
if (ar || !(i in from)) {
|
|
32
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
33
|
+
ar[i] = from[i];
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
37
|
+
};
|
|
29
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
39
|
exports.useBulkConfirmation = void 0;
|
|
31
40
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
32
41
|
var react_core_1 = require("@patternfly/react-core");
|
|
42
|
+
var react_icons_1 = require("@patternfly/react-icons");
|
|
33
43
|
var react_1 = require("react");
|
|
34
44
|
var BulkActionDialog_1 = require("./BulkActionDialog");
|
|
35
45
|
var PageDialog_1 = require("./PageDialog");
|
|
36
46
|
var PageTable_1 = require("./PageTable/PageTable");
|
|
37
47
|
var useTableItems_1 = require("./PageTable/useTableItems");
|
|
38
48
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
|
49
|
+
var compare_1 = require("./utils/compare");
|
|
39
50
|
function BulkConfirmationDialog(props) {
|
|
40
|
-
var title = props.title, items = props.items, keyFn = props.keyFn, confirmationColumns = props.confirmationColumns, onConfirm = props.onConfirm, onClose = props.onClose, confirmText = props.confirmText, actionButtonText = props.actionButtonText, isDanger = props.isDanger;
|
|
51
|
+
var title = props.title, items = props.items, keyFn = props.keyFn, prompt = props.prompt, alertPrompts = props.alertPrompts, confirmationColumns = props.confirmationColumns, isItemNonActionable = props.isItemNonActionable, onConfirm = props.onConfirm, onClose = props.onClose, confirmText = props.confirmText, actionButtonText = props.actionButtonText, isDanger = props.isDanger;
|
|
41
52
|
var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
|
|
42
53
|
var _b = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _b[0];
|
|
43
54
|
var onCloseClicked = (0, react_1.useCallback)(function () {
|
|
44
55
|
setDialog(undefined);
|
|
45
56
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
46
57
|
}, [onClose, setDialog]);
|
|
47
|
-
|
|
58
|
+
// Non-actionable rows appear first
|
|
59
|
+
var sortedItems = (0, react_1.useMemo)(function () {
|
|
60
|
+
if (isItemNonActionable && items.some(isItemNonActionable)) {
|
|
61
|
+
return items.sort(function (l, r) { return (0, compare_1.compareStrings)(isItemNonActionable(l), isItemNonActionable(r)); });
|
|
62
|
+
}
|
|
63
|
+
return items;
|
|
64
|
+
}, [items, isItemNonActionable]);
|
|
65
|
+
var _c = (0, useTableItems_1.usePaged)(sortedItems), paged = _c.paged, page = _c.page, perPage = _c.perPage, setPage = _c.setPage, setPerPage = _c.setPerPage;
|
|
48
66
|
var _d = __read((0, react_1.useState)(!confirmText), 2), confirmed = _d[0], setConfirmed = _d[1];
|
|
49
|
-
|
|
67
|
+
/**
|
|
68
|
+
* If there are non-actionable rows, the first column will contain exclamation icons
|
|
69
|
+
* to identify the non-actionable rows.
|
|
70
|
+
*/
|
|
71
|
+
var columnsForConfirmation = (0, react_1.useMemo)(function () {
|
|
72
|
+
if (isItemNonActionable && items.some(isItemNonActionable)) {
|
|
73
|
+
return __spreadArray([
|
|
74
|
+
{
|
|
75
|
+
header: '',
|
|
76
|
+
cell: function (item) {
|
|
77
|
+
return isItemNonActionable(item) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: isItemNonActionable(item), trigger: isItemNonActionable(item) ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, __assign({ status: "danger" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ExclamationCircleIcon, {}) })) }))) : null;
|
|
78
|
+
},
|
|
79
|
+
}
|
|
80
|
+
], __read(confirmationColumns), false);
|
|
81
|
+
}
|
|
82
|
+
return confirmationColumns;
|
|
83
|
+
}, [confirmationColumns, isItemNonActionable, items]);
|
|
84
|
+
var actionableItems = (0, react_1.useMemo)(function () {
|
|
85
|
+
if (isItemNonActionable) {
|
|
86
|
+
return items.filter(function (item) { return !isItemNonActionable(item); });
|
|
87
|
+
}
|
|
88
|
+
return items;
|
|
89
|
+
}, [isItemNonActionable, items]);
|
|
90
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ titleIconVariant: isDanger ? 'warning' : undefined, title: title, description: prompt, variant: react_core_1.ModalVariant.medium, isOpen: true, onClose: onCloseClicked, actions: [
|
|
50
91
|
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: isDanger ? 'danger' : 'primary', onClick: function () {
|
|
51
92
|
onCloseClicked();
|
|
52
93
|
onConfirm();
|
|
53
94
|
}, isAriaDisabled: !confirmed }, { children: actionButtonText }), "submit"),
|
|
54
95
|
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onClose }, { children: translations.cancelText }), "cancel"),
|
|
55
|
-
], hasNoBodyWrapper: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ModalBoxBody, __assign({ style: { paddingLeft: 0, paddingRight: 0 } }, { children: [(0, jsx_runtime_1.
|
|
96
|
+
], hasNoBodyWrapper: true }, { children: items.length > 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.ModalBoxBody, __assign({ style: { paddingLeft: 0, paddingRight: 0 } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
|
56
97
|
display: 'flex',
|
|
57
98
|
flexDirection: 'column',
|
|
58
99
|
maxHeight: 560,
|
|
59
100
|
overflow: 'hidden',
|
|
60
101
|
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
|
61
|
-
} }, { children:
|
|
102
|
+
} }, { children: [alertPrompts &&
|
|
103
|
+
alertPrompts.length > 0 &&
|
|
104
|
+
alertPrompts.map(function (alertPrompt, i) { return ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { isInline: true, title: alertPrompt, variant: "danger" }, i)); }), (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: items.length, tableColumns: columnsForConfirmation, keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items" }, "items")] })), confirmText && actionableItems.length > 0 && ((0, jsx_runtime_1.jsx)("div", __assign({ style: { marginLeft: 32, height: 64, display: 'flex', alignItems: 'center' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: "confirm", label: confirmText, isChecked: confirmed, onChange: setConfirmed }) })))] }))) })));
|
|
62
105
|
}
|
|
63
106
|
function useBulkConfirmationDialog() {
|
|
64
107
|
var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
|
|
@@ -82,7 +125,11 @@ function useBulkConfirmation() {
|
|
|
82
125
|
var bulkConfirmationDialog = useBulkConfirmationDialog();
|
|
83
126
|
var bulkActionDialog = (0, BulkActionDialog_1.useBulkActionDialog)();
|
|
84
127
|
return (0, react_1.useCallback)(function (options) {
|
|
85
|
-
|
|
128
|
+
var bulkActionOptions = Object.assign({}, options);
|
|
129
|
+
if (options.isItemNonActionable && options.isItemNonActionable !== undefined) {
|
|
130
|
+
bulkActionOptions.items = options.items.filter(function (item) { return options.isItemNonActionable !== undefined && !options.isItemNonActionable(item); });
|
|
131
|
+
}
|
|
132
|
+
return bulkConfirmationDialog(__assign(__assign({}, options), { onConfirm: function () { return bulkActionDialog(bulkActionOptions); } }));
|
|
86
133
|
}, [bulkActionDialog, bulkConfirmationDialog]);
|
|
87
134
|
}
|
|
88
135
|
exports.useBulkConfirmation = useBulkConfirmation;
|