@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.
@@ -1,30 +1,27 @@
1
1
  /// <reference types="react" />
2
2
  import { ITableColumn } from './PageTable';
3
- export interface BulkActionDialogProps {
4
- isDanger?: boolean;
5
- }
6
- export declare function BulkActionDialog<T extends object>(props: {
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
- prompt?: string;
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
- /** These are the columns shown when confirming the bulk actions. */
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
- action: (item: T) => Promise<void>;
29
- onClose?: (items: T[]) => void;
30
- }): JSX.Element;
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>>;
@@ -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.BulkActionDialog = void 0;
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 Collapse_1 = require("./components/Collapse");
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 _a, _b, _c, _d, _e;
91
- var _f = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _f[0], setDialog = _f[1];
92
- var _g = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _g[0];
93
- var _h = __read((0, react_1.useState)(false), 2), isSubmitting = _h[0], setSubmitting = _h[1];
94
- var _j = __read((0, react_1.useState)(false), 2), isSubmited = _j[0], setSubmited = _j[1];
95
- var _k = __read((0, react_1.useState)(0), 2), progress = _k[0], setProgress = _k[1];
96
- var _l = __read((0, react_1.useState)(''), 2), error = _l[0], setError = _l[1];
97
- var _m = __read((0, react_1.useState)(), 2), statuses = _m[0], setStatuses = _m[1];
98
- var onClose = (0, react_1.useCallback)(function () {
99
- var _a;
100
- (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, props.items.filter(function (item) { return (statuses === null || statuses === void 0 ? void 0 : statuses[props.keyFn(item)]) === null; }));
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
- }, [props, setDialog, statuses]);
103
- var onConfirm = function () {
104
- function handleConfirm() {
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
- return [4 /*yield*/, Promise.all(props.items.map(function (item) {
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
- key = props.keyFn(item);
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*/, props.action(item)];
163
+ return [4 /*yield*/, actionFn(item, abortController.signal)];
125
164
  case 2:
126
165
  _a.sent();
127
- setStatuses(function (statuses) {
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] = message_1, _a)));
169
+ return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = null, _a)));
139
170
  });
140
171
  }
141
- else {
142
- setStatuses(function (statuses) {
143
- var _a;
144
- return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = "Unknown error", _a)));
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
- setProgress(++progress);
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
- setSubmitting(false);
160
- setSubmited(true);
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 handleConfirm();
167
- };
168
- var _o = (0, useTableItems_1.usePaged)(props.items), paged = _o.paged, page = _o.page, perPage = _o.perPage, setPage = _o.setPage, setPerPage = _o.setPerPage;
169
- var _p = __read((0, react_1.useState)(!props.confirmText), 2), confirmed = _p[0], setConfirmed = _p[1];
170
- return ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ titleIconVariant: props.isDanger ? 'warning' : undefined, title: props.title, variant: react_core_1.ModalVariant.medium, isOpen: true, onClose: onClose, actions: !isSubmited
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: props.isDanger ? 'danger' : 'primary', onClick: onConfirm, isDisabled: !confirmed || isSubmitting || isSubmited, isLoading: isSubmitting }, { children: isSubmitting
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: onClose }, { children: (_d = props.closeText) !== null && _d !== void 0 ? _d : translations.closeText }), "close"),
179
- ], description: (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: !isSubmitting && !isSubmited }, { children: props.prompt })), hasNoBodyWrapper: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ModalBoxBody, __assign({ style: { paddingLeft: 0, paddingRight: 0 } }, { children: [(0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: isSubmitting || isSubmited }, { children: (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 / props.items.length) * 100, title: error
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: 500,
229
+ maxHeight: 560,
191
230
  overflow: 'hidden',
192
231
  borderTop: 'thin solid var(--pf-global--BorderColor--100)',
193
- } }, { children: !isSubmitting && !isSubmited ? ((0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: props.items.length, tableColumns: props.columns, keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items", disableBodyPadding: true }, "items")) : ((0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: __spreadArray([], __read(paged), false), itemCount: props.items.length, tableColumns: __spreadArray(__spreadArray([], __read(props.errorColumns), false), [
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 _a, _b;
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: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items", disableBodyPadding: true }, "status")) })), props.confirmText && ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: !isSubmitting && !isSubmited }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { marginLeft: 32, marginTop: 0, marginBottom: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: "confirm", label: props.confirmText, isChecked: confirmed, onChange: setConfirmed }) })) })))] })) })));
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.BulkActionDialog = BulkActionDialog;
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;
@@ -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)(useFrameworkTranslations_1.FrameworkTranslationsProvider, { children: (0, jsx_runtime_1.jsx)(Settings_1.SettingsProvider, { children: (0, jsx_runtime_1.jsx)(PageDialog_1.PageDialogProvider, { children: (0, jsx_runtime_1.jsx)(PageAlertToaster_1.PageAlertToasterProvider, { children: (0, jsx_runtime_1.jsx)(usePageNavigate_1.PageNavigateCallbackContextProvider, __assign({ callback: props.navigate }, { children: props.children })) }) }) }) }));
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;
@@ -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)('sm');
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 ? 6 : undefined, paddingBottom: compact ? 6 : undefined, backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined }) }));
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
@@ -1,4 +1,5 @@
1
1
  export * from './BulkActionDialog';
2
+ export * from './BulkConfirmationDialog';
2
3
  export * from './cells/BytesCell';
3
4
  export * from './cells/CapacityCell';
4
5
  export * from './cells/CopyCell';
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,7 +1,7 @@
1
1
  {
2
2
  "name": "@ansible/ansible-ui-framework",
3
3
  "description": "Framework for building consistent responsive web applications using PatternFly.",
4
- "version": "0.0.279",
4
+ "version": "0.0.281",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "repository": {
@@ -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;