@ansible/ansible-ui-framework 0.0.279 → 0.0.281
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.
- package/cjs/BulkActionDialog.d.ts +22 -25
- package/cjs/BulkActionDialog.js +134 -74
- package/cjs/BulkConfirmationDialog.d.ts +30 -0
- package/cjs/BulkConfirmationDialog.js +88 -0
- package/cjs/PageFramework.js +1 -1
- package/cjs/PagePagination.js +2 -2
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +1 -0
- package/cjs/useFrameworkTranslations.d.ts +2 -1
- package/cjs/useFrameworkTranslations.js +3 -2
- package/package.json +1 -1
- package/cjs/BulkProgressDialog.d.ts +0 -20
- package/cjs/BulkProgressDialog.js +0 -240
@@ -1,30 +1,27 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { ITableColumn } from './PageTable';
|
3
|
-
export interface BulkActionDialogProps {
|
4
|
-
|
5
|
-
|
6
|
-
|
3
|
+
export interface BulkActionDialogProps<T extends object> {
|
4
|
+
/** The title of the model.
|
5
|
+
* @link https://www.patternfly.org/v4/components/modal/design-guidelines#confirmation-dialogs
|
6
|
+
*/
|
7
7
|
title: string;
|
8
|
-
|
9
|
-
submitting: string;
|
10
|
-
submittingTitle: string;
|
11
|
-
submitText: string;
|
12
|
-
confirmText: string;
|
13
|
-
cancelText?: string;
|
14
|
-
error: string;
|
15
|
-
closeText?: string;
|
16
|
-
successText?: string;
|
17
|
-
pendingText?: string;
|
18
|
-
isDanger?: boolean;
|
8
|
+
/** The items to confirm for the bulk action. */
|
19
9
|
items: T[];
|
20
|
-
/**
|
21
|
-
columns: ITableColumn<T>[];
|
22
|
-
/**
|
23
|
-
* These are the columns shown when processing the bulk actions plus an error column.
|
24
|
-
* @note This is usually the name column, unless the name column is not unique enough to identify the item.
|
25
|
-
*/
|
26
|
-
errorColumns: ITableColumn<T>[];
|
10
|
+
/** A function that gets a unique key for each item. */
|
27
11
|
keyFn: (item: T) => string | number;
|
28
|
-
|
29
|
-
|
30
|
-
|
12
|
+
/** The columns to display when processing the actions. */
|
13
|
+
actionColumns: ITableColumn<T>[];
|
14
|
+
/** The action function to perform on each item. */
|
15
|
+
actionFn: (item: T, signal: AbortSignal) => Promise<unknown>;
|
16
|
+
/** Callback when all the actions are complete. Returns the successful items. */
|
17
|
+
onComplete?: (successfulItems: T[]) => void;
|
18
|
+
/** Callback called when the dialog closes. */
|
19
|
+
onClose?: () => void;
|
20
|
+
/** The text to show for each item when the action is happening.
|
21
|
+
* @example Deleting jobs...
|
22
|
+
*/
|
23
|
+
processingText?: string;
|
24
|
+
/** Indicates if this is a destructive operation */
|
25
|
+
isDanger?: boolean;
|
26
|
+
}
|
27
|
+
export declare function useBulkActionDialog<T extends object>(): import("react").Dispatch<import("react").SetStateAction<BulkActionDialogProps<T> | undefined>>;
|
package/cjs/BulkActionDialog.js
CHANGED
@@ -62,6 +62,17 @@ var __read = (this && this.__read) || function (o, n) {
|
|
62
62
|
}
|
63
63
|
return ar;
|
64
64
|
};
|
65
|
+
var __values = (this && this.__values) || function(o) {
|
66
|
+
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
67
|
+
if (m) return m.call(o);
|
68
|
+
if (o && typeof o.length === "number") return {
|
69
|
+
next: function () {
|
70
|
+
if (o && i >= o.length) o = void 0;
|
71
|
+
return { value: o && o[i++], done: !o };
|
72
|
+
}
|
73
|
+
};
|
74
|
+
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
75
|
+
};
|
65
76
|
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
66
77
|
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
67
78
|
if (ar || !(i in from)) {
|
@@ -75,79 +86,114 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
75
86
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
76
87
|
};
|
77
88
|
Object.defineProperty(exports, "__esModule", { value: true });
|
78
|
-
exports.
|
89
|
+
exports.useBulkActionDialog = void 0;
|
79
90
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
80
91
|
var react_core_1 = require("@patternfly/react-core");
|
81
92
|
var react_icons_1 = require("@patternfly/react-icons");
|
82
93
|
var p_limit_1 = __importDefault(require("p-limit"));
|
83
94
|
var react_1 = require("react");
|
84
|
-
var
|
95
|
+
var pfcolors_1 = require("./components/pfcolors");
|
85
96
|
var PageDialog_1 = require("./PageDialog");
|
86
97
|
var PageTable_1 = require("./PageTable");
|
87
98
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
88
99
|
var useTableItems_1 = require("./useTableItems");
|
89
100
|
function BulkActionDialog(props) {
|
90
|
-
var
|
91
|
-
var
|
92
|
-
var
|
93
|
-
var
|
94
|
-
var
|
95
|
-
var
|
96
|
-
var
|
97
|
-
var
|
98
|
-
var
|
99
|
-
|
100
|
-
(
|
101
|
+
var title = props.title, items = props.items, keyFn = props.keyFn, actionColumns = props.actionColumns, actionFn = props.actionFn, onComplete = props.onComplete, onClose = props.onClose, processingText = props.processingText, isDanger = props.isDanger;
|
102
|
+
var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
|
103
|
+
var _b = __read((0, react_1.useState)(true), 2), isProcessing = _b[0], setProcessing = _b[1];
|
104
|
+
var _c = __read((0, react_1.useState)(false), 2), isCanceled = _c[0], setCanceled = _c[1];
|
105
|
+
var _d = __read((0, react_1.useState)(0), 2), progress = _d[0], setProgress = _d[1];
|
106
|
+
var _e = __read((0, react_1.useState)(''), 2), error = _e[0], setError = _e[1];
|
107
|
+
var _f = __read((0, react_1.useState)(), 2), statuses = _f[0], setStatuses = _f[1];
|
108
|
+
var _g = __read((0, react_1.useState)(function () { return new AbortController(); }), 1), abortController = _g[0];
|
109
|
+
var _h = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _h[0], setDialog = _h[1];
|
110
|
+
var onCancelClicked = (0, react_1.useCallback)(function () {
|
111
|
+
setCanceled(true);
|
112
|
+
abortController.abort();
|
113
|
+
setProcessing(false);
|
114
|
+
setStatuses(function (statuses) {
|
115
|
+
var e_1, _a;
|
116
|
+
var newStatuses = __assign({}, statuses);
|
117
|
+
try {
|
118
|
+
for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
|
119
|
+
var item = items_1_1.value;
|
120
|
+
var key = keyFn(item);
|
121
|
+
if (newStatuses[key] === undefined) {
|
122
|
+
newStatuses[key] = 'Cancelled';
|
123
|
+
}
|
124
|
+
}
|
125
|
+
}
|
126
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
127
|
+
finally {
|
128
|
+
try {
|
129
|
+
if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
|
130
|
+
}
|
131
|
+
finally { if (e_1) throw e_1.error; }
|
132
|
+
}
|
133
|
+
return newStatuses;
|
134
|
+
});
|
135
|
+
}, [abortController, items, keyFn]);
|
136
|
+
var onCloseClicked = (0, react_1.useCallback)(function () {
|
101
137
|
setDialog(undefined);
|
102
|
-
|
103
|
-
|
104
|
-
|
138
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
139
|
+
}, [onClose, setDialog]);
|
140
|
+
(0, react_1.useEffect)(function () {
|
141
|
+
function process() {
|
105
142
|
return __awaiter(this, void 0, void 0, function () {
|
106
|
-
var limit, progress;
|
143
|
+
var limit, progress, successfulItems;
|
107
144
|
var _this = this;
|
108
145
|
return __generator(this, function (_a) {
|
109
146
|
switch (_a.label) {
|
110
147
|
case 0:
|
111
148
|
limit = (0, p_limit_1.default)(5);
|
112
|
-
setSubmitting(true);
|
113
149
|
progress = 0;
|
114
|
-
|
150
|
+
successfulItems = [];
|
151
|
+
return [4 /*yield*/, Promise.all(items.map(function (item) {
|
115
152
|
return limit(function () { return __awaiter(_this, void 0, void 0, function () {
|
116
153
|
var key, err_1, message_1;
|
117
154
|
return __generator(this, function (_a) {
|
118
155
|
switch (_a.label) {
|
119
156
|
case 0:
|
120
|
-
|
157
|
+
if (abortController.signal.aborted)
|
158
|
+
return [2 /*return*/];
|
159
|
+
key = keyFn(item);
|
121
160
|
_a.label = 1;
|
122
161
|
case 1:
|
123
162
|
_a.trys.push([1, 3, 4, 5]);
|
124
|
-
return [4 /*yield*/,
|
163
|
+
return [4 /*yield*/, actionFn(item, abortController.signal)];
|
125
164
|
case 2:
|
126
165
|
_a.sent();
|
127
|
-
|
128
|
-
var _a;
|
129
|
-
return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = null, _a)));
|
130
|
-
});
|
131
|
-
return [3 /*break*/, 5];
|
132
|
-
case 3:
|
133
|
-
err_1 = _a.sent();
|
134
|
-
if (err_1 instanceof Error) {
|
135
|
-
message_1 = err_1.message;
|
166
|
+
if (!abortController.signal.aborted) {
|
136
167
|
setStatuses(function (statuses) {
|
137
168
|
var _a;
|
138
|
-
return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] =
|
169
|
+
return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = null, _a)));
|
139
170
|
});
|
140
171
|
}
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
172
|
+
successfulItems.push(item);
|
173
|
+
return [3 /*break*/, 5];
|
174
|
+
case 3:
|
175
|
+
err_1 = _a.sent();
|
176
|
+
if (!abortController.signal.aborted) {
|
177
|
+
if (err_1 instanceof Error) {
|
178
|
+
message_1 = err_1.message;
|
179
|
+
setStatuses(function (statuses) {
|
180
|
+
var _a;
|
181
|
+
return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = message_1, _a)));
|
182
|
+
});
|
183
|
+
}
|
184
|
+
else {
|
185
|
+
setStatuses(function (statuses) {
|
186
|
+
var _a;
|
187
|
+
return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = "Unknown error", _a)));
|
188
|
+
});
|
189
|
+
}
|
190
|
+
setError(translations.errorText);
|
146
191
|
}
|
147
|
-
setError(props.error);
|
148
192
|
return [3 /*break*/, 5];
|
149
193
|
case 4:
|
150
|
-
|
194
|
+
if (!abortController.signal.aborted) {
|
195
|
+
setProgress(++progress);
|
196
|
+
}
|
151
197
|
return [7 /*endfinally*/];
|
152
198
|
case 5: return [2 /*return*/];
|
153
199
|
}
|
@@ -156,62 +202,76 @@ function BulkActionDialog(props) {
|
|
156
202
|
}))];
|
157
203
|
case 1:
|
158
204
|
_a.sent();
|
159
|
-
|
160
|
-
|
205
|
+
if (!abortController.signal.aborted) {
|
206
|
+
setProcessing(false);
|
207
|
+
}
|
208
|
+
onComplete === null || onComplete === void 0 ? void 0 : onComplete(successfulItems);
|
161
209
|
return [2 /*return*/];
|
162
210
|
}
|
163
211
|
});
|
164
212
|
});
|
165
213
|
}
|
166
|
-
void
|
167
|
-
};
|
168
|
-
var
|
169
|
-
|
170
|
-
|
214
|
+
void process();
|
215
|
+
}, [abortController, actionFn, items, keyFn, onComplete, translations.errorText]);
|
216
|
+
var _j = (0, useTableItems_1.usePaged)(items), paged = _j.paged, page = _j.page, perPage = _j.perPage, setPage = _j.setPage, setPerPage = _j.setPerPage;
|
217
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.Modal, __assign({ titleIconVariant: isDanger ? 'warning' : undefined, title: title, variant: react_core_1.ModalVariant.medium, isOpen: true, onClose: function () {
|
218
|
+
onCancelClicked();
|
219
|
+
onCloseClicked();
|
220
|
+
}, actions: isProcessing
|
171
221
|
? [
|
172
|
-
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant:
|
173
|
-
? (_a = props.submitting) !== null && _a !== void 0 ? _a : translations.submittingText
|
174
|
-
: (_b = props.submitText) !== null && _b !== void 0 ? _b : translations.submitText }), "submit"),
|
175
|
-
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onClose }, { children: (_c = props.cancelText) !== null && _c !== void 0 ? _c : translations.cancelText }), "cancel"),
|
222
|
+
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onCancelClicked }, { children: translations.cancelText }), "cancel"),
|
176
223
|
]
|
177
224
|
: [
|
178
|
-
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "secondary", onClick:
|
179
|
-
],
|
180
|
-
? props.error
|
181
|
-
: progress === props.items.length
|
182
|
-
? (_e = props.successText) !== null && _e !== void 0 ? _e : translations.successText
|
183
|
-
: props.submittingTitle, size: react_core_1.ProgressSize.lg, variant: error
|
184
|
-
? react_core_1.ProgressVariant.danger
|
185
|
-
: progress === props.items.length
|
186
|
-
? react_core_1.ProgressVariant.success
|
187
|
-
: undefined, measureLocation: error && progress === props.items.length ? react_core_1.ProgressMeasureLocation.none : undefined }) })) })), (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
225
|
+
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "secondary", onClick: onCloseClicked }, { children: translations.closeText }), "close"),
|
226
|
+
], hasNoBodyWrapper: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, __assign({ style: { paddingBottom: 0, paddingLeft: 0, paddingRight: 0 } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
188
227
|
display: 'flex',
|
189
228
|
flexDirection: 'column',
|
190
|
-
maxHeight:
|
229
|
+
maxHeight: 560,
|
191
230
|
overflow: 'hidden',
|
192
231
|
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
193
|
-
} }, { children:
|
232
|
+
} }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: __spreadArray([], __read(paged), false), itemCount: items.length, tableColumns: __spreadArray(__spreadArray([], __read(actionColumns), false), [
|
194
233
|
{
|
195
234
|
header: 'Status',
|
196
235
|
cell: function (item) {
|
197
|
-
var
|
198
|
-
var key = props.keyFn(item);
|
236
|
+
var key = keyFn(item);
|
199
237
|
var status = statuses === null || statuses === void 0 ? void 0 : statuses[key];
|
200
238
|
if (status === undefined) {
|
201
|
-
return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: {
|
202
|
-
color: 'var(--pf-global--info-color--100)',
|
203
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.PendingIcon, {}), "\u00A0 ", (_a = props.pendingText) !== null && _a !== void 0 ? _a : translations.pendingText, ' ', JSON.stringify(status)] })));
|
239
|
+
return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { color: pfcolors_1.pfInfo } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.PendingIcon, {}), "\u00A0 ", translations.pendingText] })));
|
204
240
|
}
|
205
241
|
if (status === null) {
|
206
|
-
return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: {
|
207
|
-
color: 'var(--pf-global--success-color--100)',
|
208
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.CheckCircleIcon, {}), "\u00A0", ' ', (_b = props.successText) !== null && _b !== void 0 ? _b : translations.successText] })));
|
242
|
+
return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { color: pfcolors_1.pfSuccess } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.CheckCircleIcon, {}), "\u00A0 ", translations.successText] })));
|
209
243
|
}
|
210
|
-
return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: {
|
211
|
-
color: 'var(--pf-global--danger-color--100)',
|
212
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.ExclamationCircleIcon, {}), "\u00A0 ", statuses === null || statuses === void 0 ? void 0 : statuses[key]] })));
|
244
|
+
return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { color: pfcolors_1.pfDanger } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.ExclamationCircleIcon, {}), "\u00A0 ", statuses === null || statuses === void 0 ? void 0 : statuses[key]] })));
|
213
245
|
},
|
214
246
|
},
|
215
|
-
], false), keyFn:
|
247
|
+
], false), keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items" }, "status") })) })), (0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, __assign({ style: { paddingTop: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Progress, { value: (progress / items.length) * 100, title: abortController.signal.aborted
|
248
|
+
? translations.canceledText
|
249
|
+
: error
|
250
|
+
? translations.errorText
|
251
|
+
: !isProcessing
|
252
|
+
? translations.successText
|
253
|
+
: processingText !== null && processingText !== void 0 ? processingText : translations.processingText, size: react_core_1.ProgressSize.lg, variant: error || isCanceled
|
254
|
+
? react_core_1.ProgressVariant.danger
|
255
|
+
: progress === items.length
|
256
|
+
? react_core_1.ProgressVariant.success
|
257
|
+
: undefined }) }))] })));
|
258
|
+
}
|
259
|
+
function useBulkActionDialog() {
|
260
|
+
var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
|
261
|
+
var _b = __read((0, react_1.useState)(), 2), props = _b[0], setProps = _b[1];
|
262
|
+
(0, react_1.useEffect)(function () {
|
263
|
+
if (props) {
|
264
|
+
var onCloseHandler = function () {
|
265
|
+
var _a;
|
266
|
+
setProps(undefined);
|
267
|
+
(_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
|
268
|
+
};
|
269
|
+
setDialog((0, jsx_runtime_1.jsx)(BulkActionDialog, __assign({}, props, { onClose: onCloseHandler })));
|
270
|
+
}
|
271
|
+
else {
|
272
|
+
setDialog(undefined);
|
273
|
+
}
|
274
|
+
}, [props, setDialog]);
|
275
|
+
return setProps;
|
216
276
|
}
|
217
|
-
exports.
|
277
|
+
exports.useBulkActionDialog = useBulkActionDialog;
|
@@ -0,0 +1,30 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { BulkActionDialogProps } from './BulkActionDialog';
|
3
|
+
import { ITableColumn } from './PageTable';
|
4
|
+
export interface BulkConfirmationDialog<T extends object> {
|
5
|
+
/** The title of the model.
|
6
|
+
* @link https://www.patternfly.org/v4/components/modal/design-guidelines#confirmation-dialogs
|
7
|
+
*/
|
8
|
+
title: string;
|
9
|
+
/** The prompt that shows up under the confirmation title. */
|
10
|
+
prompt?: string;
|
11
|
+
/** The items to confirm for the bulk action. */
|
12
|
+
items: T[];
|
13
|
+
/** A function that gets a unique key for each item. */
|
14
|
+
keyFn: (item: T) => string | number;
|
15
|
+
/** The columns to display for confirmation. */
|
16
|
+
confirmationColumns: ITableColumn<T>[];
|
17
|
+
/** Callback called when the user confirms. */
|
18
|
+
onConfirm: () => void;
|
19
|
+
/** Callback called when the dialog closes. */
|
20
|
+
onClose?: () => void;
|
21
|
+
/** The prompt to show for the user to confirm the bulk action. */
|
22
|
+
confirmText: string;
|
23
|
+
/** The button text to perform the action. */
|
24
|
+
actionButtonText: string;
|
25
|
+
/** Indicates if this is a destructive operation */
|
26
|
+
isDanger?: boolean;
|
27
|
+
}
|
28
|
+
declare function BulkConfirmationDialog<T extends object>(props: BulkConfirmationDialog<T>): JSX.Element;
|
29
|
+
export declare function useBulkConfirmation<T extends object>(): (options: Omit<BulkConfirmationDialog<T>, 'onConfirm' | 'onClose'> & Omit<BulkActionDialogProps<T>, 'onClose'>) => void;
|
30
|
+
export {};
|
@@ -0,0 +1,88 @@
|
|
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
|
+
var __read = (this && this.__read) || function (o, n) {
|
14
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
15
|
+
if (!m) return o;
|
16
|
+
var i = m.call(o), r, ar = [], e;
|
17
|
+
try {
|
18
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
19
|
+
}
|
20
|
+
catch (error) { e = { error: error }; }
|
21
|
+
finally {
|
22
|
+
try {
|
23
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
24
|
+
}
|
25
|
+
finally { if (e) throw e.error; }
|
26
|
+
}
|
27
|
+
return ar;
|
28
|
+
};
|
29
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
30
|
+
exports.useBulkConfirmation = void 0;
|
31
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
32
|
+
var react_core_1 = require("@patternfly/react-core");
|
33
|
+
var react_1 = require("react");
|
34
|
+
var BulkActionDialog_1 = require("./BulkActionDialog");
|
35
|
+
var PageDialog_1 = require("./PageDialog");
|
36
|
+
var PageTable_1 = require("./PageTable");
|
37
|
+
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
38
|
+
var useTableItems_1 = require("./useTableItems");
|
39
|
+
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;
|
41
|
+
var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
|
42
|
+
var _b = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _b[0];
|
43
|
+
var onCloseClicked = (0, react_1.useCallback)(function () {
|
44
|
+
setDialog(undefined);
|
45
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
46
|
+
}, [onClose, setDialog]);
|
47
|
+
var _c = (0, useTableItems_1.usePaged)(items), paged = _c.paged, page = _c.page, perPage = _c.perPage, setPage = _c.setPage, setPerPage = _c.setPerPage;
|
48
|
+
var _d = __read((0, react_1.useState)(!confirmText), 2), confirmed = _d[0], setConfirmed = _d[1];
|
49
|
+
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
|
+
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: isDanger ? 'danger' : 'primary', onClick: function () {
|
51
|
+
onCloseClicked();
|
52
|
+
onConfirm();
|
53
|
+
}, isAriaDisabled: !confirmed }, { children: actionButtonText }), "submit"),
|
54
|
+
(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.jsx)("div", __assign({ style: {
|
56
|
+
display: 'flex',
|
57
|
+
flexDirection: 'column',
|
58
|
+
maxHeight: 560,
|
59
|
+
overflow: 'hidden',
|
60
|
+
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
61
|
+
} }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: items.length, tableColumns: confirmationColumns, keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items" }, "items") })), confirmText && ((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
|
+
}
|
63
|
+
function useBulkConfirmationDialog() {
|
64
|
+
var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
|
65
|
+
var _b = __read((0, react_1.useState)(), 2), props = _b[0], setProps = _b[1];
|
66
|
+
(0, react_1.useEffect)(function () {
|
67
|
+
if (props) {
|
68
|
+
var onCloseHandler = function () {
|
69
|
+
var _a;
|
70
|
+
setProps(undefined);
|
71
|
+
(_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
|
72
|
+
};
|
73
|
+
setDialog((0, jsx_runtime_1.jsx)(BulkConfirmationDialog, __assign({}, props, { onClose: onCloseHandler })));
|
74
|
+
}
|
75
|
+
else {
|
76
|
+
setDialog(undefined);
|
77
|
+
}
|
78
|
+
}, [props, setDialog]);
|
79
|
+
return setProps;
|
80
|
+
}
|
81
|
+
function useBulkConfirmation() {
|
82
|
+
var bulkConfirmationDialog = useBulkConfirmationDialog();
|
83
|
+
var bulkActionDialog = (0, BulkActionDialog_1.useBulkActionDialog)();
|
84
|
+
return (0, react_1.useCallback)(function (options) {
|
85
|
+
return bulkConfirmationDialog(__assign(__assign({}, options), { onConfirm: function () { return bulkActionDialog(options); } }));
|
86
|
+
}, [bulkActionDialog, bulkConfirmationDialog]);
|
87
|
+
}
|
88
|
+
exports.useBulkConfirmation = useBulkConfirmation;
|
package/cjs/PageFramework.js
CHANGED
@@ -19,6 +19,6 @@ var PageDialog_1 = require("./PageDialog");
|
|
19
19
|
var Settings_1 = require("./Settings");
|
20
20
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
21
21
|
function PageFramework(props) {
|
22
|
-
return ((0, jsx_runtime_1.jsx)(
|
22
|
+
return ((0, jsx_runtime_1.jsx)(usePageNavigate_1.PageNavigateCallbackContextProvider, __assign({ callback: props.navigate }, { children: (0, jsx_runtime_1.jsx)(useFrameworkTranslations_1.FrameworkTranslationsProvider, { children: (0, jsx_runtime_1.jsx)(PageAlertToaster_1.PageAlertToasterProvider, { children: (0, jsx_runtime_1.jsx)(PageDialog_1.PageDialogProvider, { children: (0, jsx_runtime_1.jsx)(Settings_1.SettingsProvider, { children: props.children }) }) }) }) })));
|
23
23
|
}
|
24
24
|
exports.PageFramework = PageFramework;
|
package/cjs/PagePagination.js
CHANGED
@@ -21,10 +21,10 @@ function PagePagination(props) {
|
|
21
21
|
var setPage = props.setPage, setPerPage = props.setPerPage;
|
22
22
|
var onSetPage = (0, react_1.useCallback)(function (_event, page) { return setPage(page); }, [setPage]);
|
23
23
|
var onPerPageSelect = (0, react_1.useCallback)(function (_event, perPage) { return setPerPage(perPage); }, [setPerPage]);
|
24
|
-
var compact = !(0, useBreakPoint_1.useBreakpoint)('
|
24
|
+
var compact = !(0, useBreakPoint_1.useBreakpoint)('md');
|
25
25
|
var settings = (0, Settings_1.useSettings)();
|
26
26
|
return ((0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.bottom, itemCount: props.itemCount, page: props.page, perPage: props.perPage, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: __assign(__assign({}, props.style), { borderTop: 'thin solid var(--pf-global--BorderColor--100)', boxShadow: 'none', zIndex: 301,
|
27
27
|
// marginTop: -1,
|
28
|
-
paddingTop: compact ?
|
28
|
+
paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6, backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined }) }));
|
29
29
|
}
|
30
30
|
exports.PagePagination = PagePagination;
|
package/cjs/index.d.ts
CHANGED
package/cjs/index.js
CHANGED
@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
15
15
|
};
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
17
17
|
__exportStar(require("./BulkActionDialog"), exports);
|
18
|
+
__exportStar(require("./BulkConfirmationDialog"), exports);
|
18
19
|
__exportStar(require("./cells/BytesCell"), exports);
|
19
20
|
__exportStar(require("./cells/CapacityCell"), exports);
|
20
21
|
__exportStar(require("./cells/CopyCell"), exports);
|
@@ -1,17 +1,18 @@
|
|
1
1
|
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
2
2
|
export interface IFrameworkTranslations {
|
3
3
|
cancelText: string;
|
4
|
+
canceledText: string;
|
4
5
|
closeText: string;
|
5
6
|
confirmText: string;
|
6
7
|
errorText: string;
|
7
8
|
noItemsFound: string;
|
9
|
+
ofText: string;
|
8
10
|
pendingText: string;
|
9
11
|
processingText: string;
|
10
12
|
selectedText: string;
|
11
13
|
submitText: string;
|
12
14
|
submittingText: string;
|
13
15
|
successText: string;
|
14
|
-
ofText: string;
|
15
16
|
}
|
16
17
|
export declare function FrameworkTranslationsProvider(props: {
|
17
18
|
children: ReactNode;
|
@@ -16,17 +16,18 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
16
|
var react_1 = require("react");
|
17
17
|
var defaultTranslations = {
|
18
18
|
cancelText: 'Cancel',
|
19
|
+
canceledText: 'Canceled',
|
19
20
|
closeText: 'Close',
|
20
21
|
confirmText: 'Confirm',
|
21
22
|
errorText: 'Error',
|
22
23
|
noItemsFound: 'No items found',
|
24
|
+
ofText: 'of',
|
23
25
|
pendingText: 'Pending',
|
24
26
|
processingText: 'Processing',
|
27
|
+
selectedText: 'Selected',
|
25
28
|
submitText: 'Submit',
|
26
29
|
submittingText: 'Submitting',
|
27
30
|
successText: 'Success',
|
28
|
-
selectedText: 'Selected',
|
29
|
-
ofText: 'of',
|
30
31
|
};
|
31
32
|
var FrameworkTranslationsContext = (0, react_1.createContext)([defaultTranslations, function () { return alert('Use FrameworkTranslationsProvider'); }]);
|
32
33
|
function FrameworkTranslationsProvider(props) {
|
package/package.json
CHANGED
@@ -1,20 +0,0 @@
|
|
1
|
-
/// <reference types="react" />
|
2
|
-
import { ITableColumn } from './PageTable';
|
3
|
-
export interface BulkProgressDialogProps<T extends object> {
|
4
|
-
title: string;
|
5
|
-
keyFn: (item: T) => string | number;
|
6
|
-
items: T[];
|
7
|
-
columns: ITableColumn<T>[];
|
8
|
-
actionFn: (item: T, signal: AbortSignal) => Promise<unknown>;
|
9
|
-
onClose?: (items: T[]) => void;
|
10
|
-
processingText?: string;
|
11
|
-
errorText?: string;
|
12
|
-
successText?: string;
|
13
|
-
itemPendingText?: string;
|
14
|
-
itemSuccessText?: string;
|
15
|
-
cancelText?: string;
|
16
|
-
closeText?: string;
|
17
|
-
isDanger?: boolean;
|
18
|
-
}
|
19
|
-
export declare function BulkProgressDialog<T extends object>(props: BulkProgressDialogProps<T>): JSX.Element;
|
20
|
-
export declare function useBulkProgressDialog<T extends object>(): import("react").Dispatch<import("react").SetStateAction<BulkProgressDialogProps<T> | undefined>>;
|
@@ -1,240 +0,0 @@
|
|
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
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
14
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
15
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
16
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
17
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
18
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
19
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
20
|
-
});
|
21
|
-
};
|
22
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
23
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
24
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
25
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
26
|
-
function step(op) {
|
27
|
-
if (f) throw new TypeError("Generator is already executing.");
|
28
|
-
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
29
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
30
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
31
|
-
switch (op[0]) {
|
32
|
-
case 0: case 1: t = op; break;
|
33
|
-
case 4: _.label++; return { value: op[1], done: false };
|
34
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
35
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
36
|
-
default:
|
37
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
38
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
39
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
40
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
41
|
-
if (t[2]) _.ops.pop();
|
42
|
-
_.trys.pop(); continue;
|
43
|
-
}
|
44
|
-
op = body.call(thisArg, _);
|
45
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
46
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
47
|
-
}
|
48
|
-
};
|
49
|
-
var __read = (this && this.__read) || function (o, n) {
|
50
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
51
|
-
if (!m) return o;
|
52
|
-
var i = m.call(o), r, ar = [], e;
|
53
|
-
try {
|
54
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
55
|
-
}
|
56
|
-
catch (error) { e = { error: error }; }
|
57
|
-
finally {
|
58
|
-
try {
|
59
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
60
|
-
}
|
61
|
-
finally { if (e) throw e.error; }
|
62
|
-
}
|
63
|
-
return ar;
|
64
|
-
};
|
65
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
66
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
67
|
-
if (ar || !(i in from)) {
|
68
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
69
|
-
ar[i] = from[i];
|
70
|
-
}
|
71
|
-
}
|
72
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
73
|
-
};
|
74
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
75
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
76
|
-
};
|
77
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
78
|
-
exports.useBulkProgressDialog = exports.BulkProgressDialog = void 0;
|
79
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
80
|
-
var react_core_1 = require("@patternfly/react-core");
|
81
|
-
var react_icons_1 = require("@patternfly/react-icons");
|
82
|
-
var p_limit_1 = __importDefault(require("p-limit"));
|
83
|
-
var react_1 = require("react");
|
84
|
-
var PageDialog_1 = require("./PageDialog");
|
85
|
-
var PageTable_1 = require("./PageTable");
|
86
|
-
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
87
|
-
var useTableItems_1 = require("./useTableItems");
|
88
|
-
function BulkProgressDialog(props) {
|
89
|
-
var title = props.title, keyFn = props.keyFn, items = props.items, columns = props.columns, actionFn = props.actionFn, onClose = props.onClose, processingText = props.processingText, errorText = props.errorText, itemPendingText = props.itemPendingText, itemSuccessText = props.itemSuccessText, successText = props.successText, cancelText = props.cancelText, closeText = props.closeText, isDanger = props.isDanger;
|
90
|
-
var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
|
91
|
-
var _b = __read((0, react_1.useState)(true), 2), isProcessing = _b[0], setProcessing = _b[1];
|
92
|
-
var _c = __read((0, react_1.useState)(0), 2), progress = _c[0], setProgress = _c[1];
|
93
|
-
var _d = __read((0, react_1.useState)(''), 2), error = _d[0], setError = _d[1];
|
94
|
-
var _e = __read((0, react_1.useState)(), 2), statuses = _e[0], setStatuses = _e[1];
|
95
|
-
var _f = __read((0, react_1.useState)(function () { return new AbortController(); }), 1), abortController = _f[0];
|
96
|
-
var onCancelClicked = (0, react_1.useCallback)(function () {
|
97
|
-
abortController.abort();
|
98
|
-
setProcessing(false);
|
99
|
-
}, [abortController]);
|
100
|
-
var onCloseClicked = (0, react_1.useCallback)(function () {
|
101
|
-
onClose === null || onClose === void 0 ? void 0 : onClose(items.filter(function (item) { return (statuses === null || statuses === void 0 ? void 0 : statuses[keyFn(item)]) === null; }));
|
102
|
-
}, [items, keyFn, onClose, statuses]);
|
103
|
-
(0, react_1.useEffect)(function () {
|
104
|
-
function process() {
|
105
|
-
return __awaiter(this, void 0, void 0, function () {
|
106
|
-
var limit, progress;
|
107
|
-
var _this = this;
|
108
|
-
return __generator(this, function (_a) {
|
109
|
-
switch (_a.label) {
|
110
|
-
case 0:
|
111
|
-
limit = (0, p_limit_1.default)(5);
|
112
|
-
progress = 0;
|
113
|
-
return [4 /*yield*/, Promise.all(items.map(function (item) {
|
114
|
-
return limit(function () { return __awaiter(_this, void 0, void 0, function () {
|
115
|
-
var key, err_1, message_1;
|
116
|
-
return __generator(this, function (_a) {
|
117
|
-
switch (_a.label) {
|
118
|
-
case 0:
|
119
|
-
if (abortController.signal.aborted)
|
120
|
-
return [2 /*return*/];
|
121
|
-
key = keyFn(item);
|
122
|
-
_a.label = 1;
|
123
|
-
case 1:
|
124
|
-
_a.trys.push([1, 3, 4, 5]);
|
125
|
-
return [4 /*yield*/, actionFn(item, abortController.signal)];
|
126
|
-
case 2:
|
127
|
-
_a.sent();
|
128
|
-
if (!abortController.signal.aborted) {
|
129
|
-
setStatuses(function (statuses) {
|
130
|
-
var _a;
|
131
|
-
return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = null, _a)));
|
132
|
-
});
|
133
|
-
}
|
134
|
-
return [3 /*break*/, 5];
|
135
|
-
case 3:
|
136
|
-
err_1 = _a.sent();
|
137
|
-
if (!abortController.signal.aborted) {
|
138
|
-
if (err_1 instanceof Error) {
|
139
|
-
message_1 = err_1.message;
|
140
|
-
setStatuses(function (statuses) {
|
141
|
-
var _a;
|
142
|
-
return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = message_1, _a)));
|
143
|
-
});
|
144
|
-
}
|
145
|
-
else {
|
146
|
-
setStatuses(function (statuses) {
|
147
|
-
var _a;
|
148
|
-
return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = "Unknown error", _a)));
|
149
|
-
});
|
150
|
-
}
|
151
|
-
setError(errorText !== null && errorText !== void 0 ? errorText : translations.errorText);
|
152
|
-
}
|
153
|
-
return [3 /*break*/, 5];
|
154
|
-
case 4:
|
155
|
-
if (!abortController.signal.aborted) {
|
156
|
-
setProgress(++progress);
|
157
|
-
}
|
158
|
-
return [7 /*endfinally*/];
|
159
|
-
case 5: return [2 /*return*/];
|
160
|
-
}
|
161
|
-
});
|
162
|
-
}); });
|
163
|
-
}))];
|
164
|
-
case 1:
|
165
|
-
_a.sent();
|
166
|
-
if (!abortController.signal.aborted) {
|
167
|
-
setProcessing(false);
|
168
|
-
}
|
169
|
-
return [2 /*return*/];
|
170
|
-
}
|
171
|
-
});
|
172
|
-
});
|
173
|
-
}
|
174
|
-
void process();
|
175
|
-
}, [abortController, actionFn, errorText, items, keyFn, translations.errorText]);
|
176
|
-
var _g = (0, useTableItems_1.usePaged)(items), paged = _g.paged, page = _g.page, perPage = _g.perPage, setPage = _g.setPage, setPerPage = _g.setPerPage;
|
177
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.Modal, __assign({ titleIconVariant: isDanger ? 'warning' : undefined, title: title, variant: react_core_1.ModalVariant.medium, isOpen: true, onClose: function () {
|
178
|
-
onCancelClicked();
|
179
|
-
onCloseClicked();
|
180
|
-
}, actions: isProcessing
|
181
|
-
? [
|
182
|
-
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onCancelClicked }, { children: cancelText !== null && cancelText !== void 0 ? cancelText : translations.cancelText }), "cancel"),
|
183
|
-
]
|
184
|
-
: [
|
185
|
-
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "secondary", onClick: onCloseClicked }, { children: closeText !== null && closeText !== void 0 ? closeText : translations.closeText }), "close"),
|
186
|
-
], hasNoBodyWrapper: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, { children: (0, jsx_runtime_1.jsx)(react_core_1.Progress, { value: (progress / items.length) * 100, title: abortController.signal.aborted
|
187
|
-
? 'Cancelled'
|
188
|
-
: error
|
189
|
-
? errorText !== null && errorText !== void 0 ? errorText : translations.errorText
|
190
|
-
: progress === items.length
|
191
|
-
? successText !== null && successText !== void 0 ? successText : translations.successText
|
192
|
-
: processingText !== null && processingText !== void 0 ? processingText : translations.processingText, size: react_core_1.ProgressSize.lg, variant: error
|
193
|
-
? react_core_1.ProgressVariant.danger
|
194
|
-
: progress === items.length
|
195
|
-
? react_core_1.ProgressVariant.success
|
196
|
-
: undefined }) }), (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
197
|
-
display: 'flex',
|
198
|
-
flexDirection: 'column',
|
199
|
-
maxHeight: 560,
|
200
|
-
overflow: 'hidden',
|
201
|
-
paddingTop: 16,
|
202
|
-
} }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: __spreadArray([], __read(paged), false), itemCount: items.length, tableColumns: __spreadArray(__spreadArray([], __read(columns), false), [
|
203
|
-
{
|
204
|
-
header: 'Status',
|
205
|
-
cell: function (item) {
|
206
|
-
var key = keyFn(item);
|
207
|
-
var status = statuses === null || statuses === void 0 ? void 0 : statuses[key];
|
208
|
-
if (status === undefined) {
|
209
|
-
return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { color: 'var(--pf-global--info-color--100)' } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.PendingIcon, {}), "\u00A0 ", itemPendingText !== null && itemPendingText !== void 0 ? itemPendingText : translations.pendingText, ' ', JSON.stringify(status)] })));
|
210
|
-
}
|
211
|
-
if (status === null) {
|
212
|
-
return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: {
|
213
|
-
color: 'var(--pf-global--success-color--100)',
|
214
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.CheckCircleIcon, {}), "\u00A0 ", itemSuccessText !== null && itemSuccessText !== void 0 ? itemSuccessText : translations.successText] })));
|
215
|
-
}
|
216
|
-
return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { color: 'var(--pf-global--danger-color--100)' } }, { children: [(0, jsx_runtime_1.jsx)(react_icons_1.ExclamationCircleIcon, {}), "\u00A0 ", statuses === null || statuses === void 0 ? void 0 : statuses[key]] })));
|
217
|
-
},
|
218
|
-
},
|
219
|
-
], false), keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items" }, "status") }))] })));
|
220
|
-
}
|
221
|
-
exports.BulkProgressDialog = BulkProgressDialog;
|
222
|
-
function useBulkProgressDialog() {
|
223
|
-
var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
|
224
|
-
var _b = __read((0, react_1.useState)(), 2), props = _b[0], setProps = _b[1];
|
225
|
-
(0, react_1.useEffect)(function () {
|
226
|
-
if (props) {
|
227
|
-
var onCloseHandler = function (items) {
|
228
|
-
var _a;
|
229
|
-
setProps(undefined);
|
230
|
-
(_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, items);
|
231
|
-
};
|
232
|
-
setDialog((0, jsx_runtime_1.jsx)(BulkProgressDialog, __assign({}, props, { onClose: onCloseHandler })));
|
233
|
-
}
|
234
|
-
else {
|
235
|
-
setDialog(undefined);
|
236
|
-
}
|
237
|
-
}, [props, setDialog]);
|
238
|
-
return setProps;
|
239
|
-
}
|
240
|
-
exports.useBulkProgressDialog = useBulkProgressDialog;
|