@ansible/ansible-ui-framework 0.0.278 → 0.0.280
Sign up to get free protection for your applications and to get access to all the features.
- 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/PagePagination.js +2 -2
- package/cjs/cells/ElapsedTimeCell.js +1 -3
- 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/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;
|
@@ -20,9 +20,7 @@ exports.ElapsedTimeCell = void 0;
|
|
20
20
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
21
21
|
var react_core_1 = require("@patternfly/react-core");
|
22
22
|
var react_1 = require("react");
|
23
|
-
var react_i18next_1 = require("react-i18next");
|
24
23
|
function ElapsedTimeCell(props) {
|
25
|
-
var t = (0, react_i18next_1.useTranslation)().t;
|
26
24
|
var start = (0, react_1.useMemo)(function () { var _a; return new Date((_a = props.start) !== null && _a !== void 0 ? _a : 0).valueOf(); }, [props.start]);
|
27
25
|
var finish = (0, react_1.useMemo)(function () { var _a; return new Date((_a = props.finish) !== null && _a !== void 0 ? _a : 0).valueOf(); }, [props.finish]);
|
28
26
|
var _a = __read((0, react_1.useState)(Math.max(0, finish - start.valueOf())), 2), elapsed = _a[0], setElapsed = _a[1];
|
@@ -44,6 +42,6 @@ function ElapsedTimeCell(props) {
|
|
44
42
|
var days = Math.floor(totalSeconds / 60 / 60 / 24);
|
45
43
|
if (!start)
|
46
44
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
47
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, { children: [days !== 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.SplitItem, { children: [days,
|
45
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, { children: [days !== 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.SplitItem, { children: [days, 'd', "\u00A0"] })), hours !== 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.SplitItem, { children: [hours, 'h', "\u00A0"] })), minutes !== 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.SplitItem, { children: [minutes, 'm', "\u00A0"] })), (0, jsx_runtime_1.jsxs)(react_core_1.SplitItem, { children: [seconds, 's'] })] }));
|
48
46
|
}
|
49
47
|
exports.ElapsedTimeCell = ElapsedTimeCell;
|
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;
|