@ansible/ansible-ui-framework 0.0.613 → 0.0.615
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/framework/BulkActionDialog.d.ts +14 -0
- package/framework/BulkConfirmationDialog.d.ts +20 -0
- package/{cjs → framework}/PageActions/PageActions.d.ts +0 -13
- package/{cjs → framework}/PageActions/PageButtonAction.d.ts +0 -1
- package/{cjs → framework}/PageActions/PagePinnedActions.d.ts +0 -4
- package/{cjs → framework}/PageForm/Inputs/FormGroupSelect.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/FormGroupSelectOption.d.ts +0 -5
- package/{cjs → framework}/PageForm/Inputs/FormGroupTextArea.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/FormGroupTextInput.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/FormGroupTypeAheadMultiSelect.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormCheckbox.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormCreatableSelect.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormFileUpload.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormGroup.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormSelect.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormSelectOption.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormTextArea.d.ts +0 -1
- package/{cjs → framework}/PageForm/Inputs/PageFormTextInput.d.ts +0 -1
- package/{cjs → framework}/PageForm/PageFormSchema.d.ts +0 -2
- package/framework/PageFramework.d.ts +6 -0
- package/framework/PageHeader.d.ts +22 -0
- package/framework/PageLayout.d.ts +4 -0
- package/{cjs → framework}/PageTable/PageTable.d.ts +0 -15
- package/{cjs → framework}/components/useBreakPoint.d.ts +0 -1
- package/{cjs → framework}/index.d.ts +1 -0
- package/{cjs → framework}/utils/compare.d.ts +3 -3
- package/index.js +16475 -0
- package/index.umd.cjs +165 -0
- package/package.json +16 -15
- package/style.css +1 -0
- package/cjs/BulkActionDialog.d.ts +0 -34
- package/cjs/BulkActionDialog.js +0 -300
- package/cjs/BulkConfirmationDialog.d.ts +0 -36
- package/cjs/BulkConfirmationDialog.js +0 -135
- package/cjs/PageActions/PageAction.js +0 -2
- package/cjs/PageActions/PageActionType.js +0 -12
- package/cjs/PageActions/PageActions.js +0 -69
- package/cjs/PageActions/PageBulkAction.js +0 -35
- package/cjs/PageActions/PageButtonAction.js +0 -41
- package/cjs/PageActions/PageDropdownAction.js +0 -132
- package/cjs/PageActions/PagePinnedActions.js +0 -55
- package/cjs/PageActions/PageSingleAction.js +0 -38
- package/cjs/PageAlertToaster.js +0 -102
- package/cjs/PageAlerts.js +0 -98
- package/cjs/PageBody.js +0 -52
- package/cjs/PageCells/BytesCell.js +0 -16
- package/cjs/PageCells/CapacityCell.js +0 -67
- package/cjs/PageCells/CopyCell.js +0 -25
- package/cjs/PageCells/DateTimeCell.js +0 -66
- package/cjs/PageCells/ElapsedTimeCell.js +0 -48
- package/cjs/PageCells/LabelsCell.js +0 -20
- package/cjs/PageCells/TextCell.js +0 -39
- package/cjs/PageColumnModal.js +0 -131
- package/cjs/PageDashboard/PageChartContainer.js +0 -69
- package/cjs/PageDashboard/PageDashboardCard.js +0 -22
- package/cjs/PageDashboard/PageDashboardChart.js +0 -54
- package/cjs/PageDashboard/PageDonutChart.js +0 -53
- package/cjs/PageDashboard/PageScatterChart.js +0 -5564
- package/cjs/PageDetails/PageDetail.js +0 -28
- package/cjs/PageDetails/PageDetails.js +0 -41
- package/cjs/PageDetails/PageDetailsFromColumns.js +0 -27
- package/cjs/PageDialog.js +0 -28
- package/cjs/PageForm/Inputs/FormGroupSelect.js +0 -60
- package/cjs/PageForm/Inputs/FormGroupSelectOption.js +0 -61
- package/cjs/PageForm/Inputs/FormGroupTextArea.js +0 -53
- package/cjs/PageForm/Inputs/FormGroupTextInput.js +0 -58
- package/cjs/PageForm/Inputs/FormGroupTypeAheadMultiSelect.js +0 -67
- package/cjs/PageForm/Inputs/PageFormCheckbox.js +0 -39
- package/cjs/PageForm/Inputs/PageFormCodeEditor.js +0 -154
- package/cjs/PageForm/Inputs/PageFormCreatableSelect.js +0 -82
- package/cjs/PageForm/Inputs/PageFormFileUpload.js +0 -72
- package/cjs/PageForm/Inputs/PageFormGroup.js +0 -24
- package/cjs/PageForm/Inputs/PageFormMultiInput.js +0 -102
- package/cjs/PageForm/Inputs/PageFormSelect.js +0 -26
- package/cjs/PageForm/Inputs/PageFormSelectOption.js +0 -42
- package/cjs/PageForm/Inputs/PageFormSlider.js +0 -36
- package/cjs/PageForm/Inputs/PageFormSwitch.js +0 -38
- package/cjs/PageForm/Inputs/PageFormTextArea.js +0 -50
- package/cjs/PageForm/Inputs/PageFormTextInput.js +0 -72
- package/cjs/PageForm/Inputs/PageFormTextSelect.js +0 -40
- package/cjs/PageForm/PageForm.js +0 -146
- package/cjs/PageForm/PageFormAlerts.js +0 -32
- package/cjs/PageForm/PageFormButtons.js +0 -28
- package/cjs/PageForm/PageFormInputPopover.js +0 -2
- package/cjs/PageForm/PageFormSchema.js +0 -138
- package/cjs/PageForm/Utils/PageFormHidden.js +0 -13
- package/cjs/PageForm/Utils/PageFormSection.js +0 -20
- package/cjs/PageForm/Utils/PageFormWatch.js +0 -10
- package/cjs/PageFramework.css +0 -27
- package/cjs/PageFramework.d.ts +0 -12
- package/cjs/PageFramework.js +0 -31
- package/cjs/PageHeader.d.ts +0 -45
- package/cjs/PageHeader.js +0 -111
- package/cjs/PageLayout.d.ts +0 -17
- package/cjs/PageLayout.js +0 -60
- package/cjs/PageTable/PagePagination.js +0 -28
- package/cjs/PageTable/PageTable.js +0 -266
- package/cjs/PageTable/PageTableCard.js +0 -161
- package/cjs/PageTable/PageTableCards.js +0 -38
- package/cjs/PageTable/PageTableList.js +0 -153
- package/cjs/PageTable/PageTableViewType.js +0 -9
- package/cjs/PageTable/PageToolbar.css +0 -7
- package/cjs/PageTable/PageToolbar.js +0 -228
- package/cjs/PageTable/useTableItems.js +0 -507
- package/cjs/PageTabs.js +0 -86
- package/cjs/Settings.js +0 -125
- package/cjs/components/BulkSelector.js +0 -91
- package/cjs/components/Collapse.css +0 -12
- package/cjs/components/Collapse.js +0 -23
- package/cjs/components/DetailInfo.js +0 -21
- package/cjs/components/Dotted.js +0 -19
- package/cjs/components/DropdownControlled.js +0 -28
- package/cjs/components/EmptyStateCustom.js +0 -21
- package/cjs/components/EmptyStateFilter.js +0 -26
- package/cjs/components/EmptyStateNoData.js +0 -11
- package/cjs/components/EmptyStateUnauthorized.js +0 -13
- package/cjs/components/ErrorBoundary.js +0 -45
- package/cjs/components/Help.js +0 -24
- package/cjs/components/IconWrapper.js +0 -53
- package/cjs/components/LoadingPage.js +0 -25
- package/cjs/components/LoadingState.js +0 -20
- package/cjs/components/Masonry.js +0 -113
- package/cjs/components/PageGrid.js +0 -61
- package/cjs/components/Scrollable.js +0 -87
- package/cjs/components/StandardPopover.js +0 -64
- package/cjs/components/icons/RunningIcon.js +0 -36
- package/cjs/components/pfcolors.js +0 -54
- package/cjs/components/useBreakPoint.js +0 -145
- package/cjs/components/useIsMounted.js +0 -28
- package/cjs/components/useOpen.js +0 -36
- package/cjs/components/usePageNavigate.js +0 -37
- package/cjs/components/useSearchParams.js +0 -20
- package/cjs/components/useWindowLocation.js +0 -49
- package/cjs/index.js +0 -67
- package/cjs/useFrameworkTranslations.js +0 -52
- package/cjs/useInMemoryView.js +0 -102
- package/cjs/useSelectDialog.js +0 -96
- package/cjs/useSelectMultipleDialog.js +0 -62
- package/cjs/useView.js +0 -155
- package/cjs/utils/capitalize.js +0 -7
- package/cjs/utils/compare.js +0 -59
- package/cjs/utils/download-file.js +0 -23
- package/cjs/utils/formatDateString.js +0 -11
- package/cjs/utils/random-string.js +0 -17
- /package/{cjs → framework}/PageActions/PageAction.d.ts +0 -0
- /package/{cjs → framework}/PageActions/PageActionType.d.ts +0 -0
- /package/{cjs → framework}/PageActions/PageBulkAction.d.ts +0 -0
- /package/{cjs → framework}/PageActions/PageDropdownAction.d.ts +0 -0
- /package/{cjs → framework}/PageActions/PageSingleAction.d.ts +0 -0
- /package/{cjs → framework}/PageAlertToaster.d.ts +0 -0
- /package/{cjs → framework}/PageAlerts.d.ts +0 -0
- /package/{cjs → framework}/PageBody.d.ts +0 -0
- /package/{cjs → framework}/PageCells/BytesCell.d.ts +0 -0
- /package/{cjs → framework}/PageCells/CapacityCell.d.ts +0 -0
- /package/{cjs → framework}/PageCells/CopyCell.d.ts +0 -0
- /package/{cjs → framework}/PageCells/DateTimeCell.d.ts +0 -0
- /package/{cjs → framework}/PageCells/ElapsedTimeCell.d.ts +0 -0
- /package/{cjs → framework}/PageCells/LabelsCell.d.ts +0 -0
- /package/{cjs → framework}/PageCells/TextCell.d.ts +0 -0
- /package/{cjs → framework}/PageColumnModal.d.ts +0 -0
- /package/{cjs → framework}/PageDashboard/PageChartContainer.d.ts +0 -0
- /package/{cjs → framework}/PageDashboard/PageDashboardCard.d.ts +0 -0
- /package/{cjs → framework}/PageDashboard/PageDashboardChart.d.ts +0 -0
- /package/{cjs → framework}/PageDashboard/PageDonutChart.d.ts +0 -0
- /package/{cjs → framework}/PageDashboard/PageScatterChart.d.ts +0 -0
- /package/{cjs → framework}/PageDetails/PageDetail.d.ts +0 -0
- /package/{cjs → framework}/PageDetails/PageDetails.d.ts +0 -0
- /package/{cjs → framework}/PageDetails/PageDetailsFromColumns.d.ts +0 -0
- /package/{cjs → framework}/PageDialog.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Inputs/PageFormCodeEditor.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Inputs/PageFormMultiInput.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Inputs/PageFormSlider.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Inputs/PageFormSwitch.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Inputs/PageFormTextSelect.d.ts +0 -0
- /package/{cjs → framework}/PageForm/PageForm.d.ts +0 -0
- /package/{cjs → framework}/PageForm/PageFormAlerts.d.ts +0 -0
- /package/{cjs → framework}/PageForm/PageFormButtons.d.ts +0 -0
- /package/{cjs → framework}/PageForm/PageFormInputPopover.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Utils/PageFormHidden.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Utils/PageFormSection.d.ts +0 -0
- /package/{cjs → framework}/PageForm/Utils/PageFormWatch.d.ts +0 -0
- /package/{cjs → framework}/PageTable/PagePagination.d.ts +0 -0
- /package/{cjs → framework}/PageTable/PageTableCard.d.ts +0 -0
- /package/{cjs → framework}/PageTable/PageTableCards.d.ts +0 -0
- /package/{cjs → framework}/PageTable/PageTableList.d.ts +0 -0
- /package/{cjs → framework}/PageTable/PageTableViewType.d.ts +0 -0
- /package/{cjs → framework}/PageTable/PageToolbar.d.ts +0 -0
- /package/{cjs → framework}/PageTable/useTableItems.d.ts +0 -0
- /package/{cjs → framework}/PageTabs.d.ts +0 -0
- /package/{cjs → framework}/Settings.d.ts +0 -0
- /package/{cjs → framework}/components/BulkSelector.d.ts +0 -0
- /package/{cjs → framework}/components/Collapse.d.ts +0 -0
- /package/{cjs → framework}/components/DetailInfo.d.ts +0 -0
- /package/{cjs → framework}/components/Dotted.d.ts +0 -0
- /package/{cjs → framework}/components/DropdownControlled.d.ts +0 -0
- /package/{cjs → framework}/components/EmptyStateCustom.d.ts +0 -0
- /package/{cjs → framework}/components/EmptyStateFilter.d.ts +0 -0
- /package/{cjs → framework}/components/EmptyStateNoData.d.ts +0 -0
- /package/{cjs → framework}/components/EmptyStateUnauthorized.d.ts +0 -0
- /package/{cjs → framework}/components/ErrorBoundary.d.ts +0 -0
- /package/{cjs → framework}/components/Help.d.ts +0 -0
- /package/{cjs → framework}/components/IconWrapper.d.ts +0 -0
- /package/{cjs → framework}/components/LoadingPage.d.ts +0 -0
- /package/{cjs → framework}/components/LoadingState.d.ts +0 -0
- /package/{cjs → framework}/components/Masonry.d.ts +0 -0
- /package/{cjs → framework}/components/PageGrid.d.ts +0 -0
- /package/{cjs → framework}/components/Scrollable.d.ts +0 -0
- /package/{cjs → framework}/components/StandardPopover.d.ts +0 -0
- /package/{cjs → framework}/components/icons/RunningIcon.d.ts +0 -0
- /package/{cjs → framework}/components/pfcolors.d.ts +0 -0
- /package/{cjs → framework}/components/useIsMounted.d.ts +0 -0
- /package/{cjs → framework}/components/useOpen.d.ts +0 -0
- /package/{cjs → framework}/components/usePageNavigate.d.ts +0 -0
- /package/{cjs → framework}/components/useSearchParams.d.ts +0 -0
- /package/{cjs → framework}/components/useWindowLocation.d.ts +0 -0
- /package/{cjs → framework}/useFrameworkTranslations.d.ts +0 -0
- /package/{cjs → framework}/useInMemoryView.d.ts +0 -0
- /package/{cjs → framework}/useSelectDialog.d.ts +0 -0
- /package/{cjs → framework}/useSelectMultipleDialog.d.ts +0 -0
- /package/{cjs → framework}/useView.d.ts +0 -0
- /package/{cjs → framework}/utils/capitalize.d.ts +0 -0
- /package/{cjs → framework}/utils/download-file.d.ts +0 -0
- /package/{cjs → framework}/utils/formatDateString.d.ts +0 -0
- /package/{cjs → framework}/utils/random-string.d.ts +0 -0
package/package.json
CHANGED
|
@@ -1,15 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ansible/ansible-ui-framework",
|
|
3
3
|
"description": "A framework for building applications using PatternFly.",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.615",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
8
|
"url": "https://github.com/ansible/ansible-ui.git"
|
|
9
9
|
},
|
|
10
10
|
"homepage": "https://github.com/ansible/ansible-ui/tree/main/framework#readme",
|
|
11
|
-
"main": "
|
|
12
|
-
"
|
|
11
|
+
"main": "./index.umd.cjs",
|
|
12
|
+
"module": "./index.js",
|
|
13
|
+
"types": "./index.d.ts",
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"import": "./index.js",
|
|
17
|
+
"require": "./index.umd.cjs"
|
|
18
|
+
},
|
|
19
|
+
"./style.css": {
|
|
20
|
+
"import": "./style.css",
|
|
21
|
+
"require": "./style.css"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
13
24
|
"keywords": [
|
|
14
25
|
"ansible",
|
|
15
26
|
"react",
|
|
@@ -17,22 +28,12 @@
|
|
|
17
28
|
"framework"
|
|
18
29
|
],
|
|
19
30
|
"peerDependencies": {
|
|
20
|
-
"@hookform/resolvers": "^2",
|
|
21
31
|
"@patternfly/patternfly": "^4",
|
|
22
32
|
"@patternfly/react-core": "^4",
|
|
23
33
|
"@patternfly/react-icons": "^4",
|
|
24
34
|
"@patternfly/react-table": "^4",
|
|
25
|
-
"@react-hook/resize-observer": "^1",
|
|
26
|
-
"@types/json-schema": "^7",
|
|
27
|
-
"@types/react": "^17 || ^18",
|
|
28
|
-
"@types/react-dom": "^17 || ^18",
|
|
29
|
-
"@types/styled-components": "^5",
|
|
30
|
-
"debounce": "^1",
|
|
31
|
-
"get-value": "^3",
|
|
32
|
-
"luxon": "^3",
|
|
33
|
-
"p-limit": "^4",
|
|
34
35
|
"react": "^17 || ^18",
|
|
35
|
-
"react-
|
|
36
|
-
"
|
|
36
|
+
"react-dom": "^17 || ^18",
|
|
37
|
+
"monaco-editor": "^0.36.1"
|
|
37
38
|
}
|
|
38
39
|
}
|
package/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pf-c-toolbar__content-section{row-gap:16px!important}.pf-c-toolbar__expandable-content.pf-m-expanded{z-index:400}.collapsed{max-height:0;transition:max-height .15s ease-out,opacity .15s ease-out;overflow:hidden;opacity:0}.expanded{max-height:500px;transition:max-height .25s ease-in,opacity .25s ease-in;opacity:1}.border-top{border-top:thin solid var(--pf-global--BorderColor--100)}.border-bottom{border-bottom:thin solid var(--pf-global--BorderColor--100)}.light{background-color:var(--pf-global--BackgroundColor--100)}:root:where(.pf-theme-dark) .dark-0{background-color:var(--pf-global--BackgroundColor--200)}:root:where(.pf-theme-dark) .dark-1{background-color:var(--pf-global--BackgroundColor--100)}:root:where(.pf-theme-dark) .dark-2{background-color:var(--pf-global--BackgroundColor--300)}:root:where(.pf-theme-dark) .dark-3{background-color:var(--pf-global--BackgroundColor--400)}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ITableColumn } from './PageTable/PageTable';
|
|
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
|
-
title: string;
|
|
8
|
-
/** The items to confirm for the bulk action. */
|
|
9
|
-
items: T[];
|
|
10
|
-
/** A function that gets a unique key for each item. */
|
|
11
|
-
keyFn: (item: T) => string | number;
|
|
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
|
-
/**
|
|
28
|
-
* useBulkActionDialog - react hook to open a BulkActionDialog
|
|
29
|
-
*
|
|
30
|
-
* @example
|
|
31
|
-
* const openBulkActionDialog = useBulkActionDialog()
|
|
32
|
-
* openBulkActionDialog(...) // Pass BulkActionDialogProps
|
|
33
|
-
*/
|
|
34
|
-
export declare function useBulkActionDialog<T extends object>(): import("react").Dispatch<import("react").SetStateAction<BulkActionDialogProps<T> | undefined>>;
|
package/cjs/BulkActionDialog.js
DELETED
|
@@ -1,300 +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 __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
|
-
};
|
|
76
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
77
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
78
|
-
if (ar || !(i in from)) {
|
|
79
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
80
|
-
ar[i] = from[i];
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
84
|
-
};
|
|
85
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
86
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
87
|
-
};
|
|
88
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
89
|
-
exports.useBulkActionDialog = void 0;
|
|
90
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
91
|
-
var react_core_1 = require("@patternfly/react-core");
|
|
92
|
-
var react_icons_1 = require("@patternfly/react-icons");
|
|
93
|
-
var p_limit_1 = __importDefault(require("p-limit"));
|
|
94
|
-
var react_1 = require("react");
|
|
95
|
-
var pfcolors_1 = require("./components/pfcolors");
|
|
96
|
-
var PageDialog_1 = require("./PageDialog");
|
|
97
|
-
var PageTable_1 = require("./PageTable/PageTable");
|
|
98
|
-
var useTableItems_1 = require("./PageTable/useTableItems");
|
|
99
|
-
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
|
100
|
-
/**
|
|
101
|
-
* BulkActionDialog is a generic dialog for process bulk actions.
|
|
102
|
-
*
|
|
103
|
-
* It processes the actions in parallel up to 5 concurrently.
|
|
104
|
-
* The easiest way to use the BulkActionDialog is then useBulkActionDialog hook.
|
|
105
|
-
*
|
|
106
|
-
* @param {string} title - The title of the model.
|
|
107
|
-
* @param {T[]} items - The items to confirm for the bulk action.
|
|
108
|
-
* @param {function} keyFn - A function that gets a unique key for each item.
|
|
109
|
-
* @param {Array(ITableColumn<T>)} actionColumns - The columns to display when processing the actions.
|
|
110
|
-
* @param {function} actionFn - The action function to perform on each item
|
|
111
|
-
* @param {function=} onComplete - Callback when all the actions are complete. Returns the successful items.
|
|
112
|
-
* @param {function=} onClose - Callback called when the dialog closes.
|
|
113
|
-
* @param {string=} processingText - The text to show for each item when the action is happening.
|
|
114
|
-
* @param {boolean=} isDanger - Indicates if this is a destructive operation.
|
|
115
|
-
*/
|
|
116
|
-
function BulkActionDialog(props) {
|
|
117
|
-
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;
|
|
118
|
-
var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
|
|
119
|
-
var _b = __read((0, react_1.useState)(true), 2), isProcessing = _b[0], setProcessing = _b[1];
|
|
120
|
-
var _c = __read((0, react_1.useState)(false), 2), isCanceled = _c[0], setCanceled = _c[1];
|
|
121
|
-
var _d = __read((0, react_1.useState)(0), 2), progress = _d[0], setProgress = _d[1];
|
|
122
|
-
var _e = __read((0, react_1.useState)(''), 2), error = _e[0], setError = _e[1];
|
|
123
|
-
var _f = __read((0, react_1.useState)(), 2), statuses = _f[0], setStatuses = _f[1];
|
|
124
|
-
var _g = __read((0, react_1.useState)(function () { return new AbortController(); }), 1), abortController = _g[0];
|
|
125
|
-
var _h = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _h[0], setDialog = _h[1];
|
|
126
|
-
var onCancelClicked = (0, react_1.useCallback)(function () {
|
|
127
|
-
setCanceled(true);
|
|
128
|
-
abortController.abort();
|
|
129
|
-
setProcessing(false);
|
|
130
|
-
setStatuses(function (statuses) {
|
|
131
|
-
var e_1, _a;
|
|
132
|
-
var newStatuses = __assign({}, statuses);
|
|
133
|
-
try {
|
|
134
|
-
for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
|
|
135
|
-
var item = items_1_1.value;
|
|
136
|
-
var key = keyFn(item);
|
|
137
|
-
if (newStatuses[key] === undefined) {
|
|
138
|
-
newStatuses[key] = 'Cancelled';
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
143
|
-
finally {
|
|
144
|
-
try {
|
|
145
|
-
if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
|
|
146
|
-
}
|
|
147
|
-
finally { if (e_1) throw e_1.error; }
|
|
148
|
-
}
|
|
149
|
-
return newStatuses;
|
|
150
|
-
});
|
|
151
|
-
}, [abortController, items, keyFn]);
|
|
152
|
-
var onCloseClicked = (0, react_1.useCallback)(function () {
|
|
153
|
-
setDialog(undefined);
|
|
154
|
-
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
155
|
-
}, [onClose, setDialog]);
|
|
156
|
-
(0, react_1.useEffect)(function () {
|
|
157
|
-
function process() {
|
|
158
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
159
|
-
var limit, progress, successfulItems;
|
|
160
|
-
var _this = this;
|
|
161
|
-
return __generator(this, function (_a) {
|
|
162
|
-
switch (_a.label) {
|
|
163
|
-
case 0:
|
|
164
|
-
limit = (0, p_limit_1.default)(5);
|
|
165
|
-
progress = 0;
|
|
166
|
-
successfulItems = [];
|
|
167
|
-
return [4 /*yield*/, Promise.all(items.map(function (item) {
|
|
168
|
-
return limit(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
169
|
-
var key, err_1, message_1;
|
|
170
|
-
return __generator(this, function (_a) {
|
|
171
|
-
switch (_a.label) {
|
|
172
|
-
case 0:
|
|
173
|
-
if (abortController.signal.aborted)
|
|
174
|
-
return [2 /*return*/];
|
|
175
|
-
key = keyFn(item);
|
|
176
|
-
_a.label = 1;
|
|
177
|
-
case 1:
|
|
178
|
-
_a.trys.push([1, 3, 4, 5]);
|
|
179
|
-
return [4 /*yield*/, actionFn(item, abortController.signal)];
|
|
180
|
-
case 2:
|
|
181
|
-
_a.sent();
|
|
182
|
-
if (!abortController.signal.aborted) {
|
|
183
|
-
setStatuses(function (statuses) {
|
|
184
|
-
var _a;
|
|
185
|
-
return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = null, _a)));
|
|
186
|
-
});
|
|
187
|
-
}
|
|
188
|
-
successfulItems.push(item);
|
|
189
|
-
return [3 /*break*/, 5];
|
|
190
|
-
case 3:
|
|
191
|
-
err_1 = _a.sent();
|
|
192
|
-
if (!abortController.signal.aborted) {
|
|
193
|
-
if (err_1 instanceof Error) {
|
|
194
|
-
message_1 = err_1.message;
|
|
195
|
-
setStatuses(function (statuses) {
|
|
196
|
-
var _a;
|
|
197
|
-
return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = message_1, _a)));
|
|
198
|
-
});
|
|
199
|
-
}
|
|
200
|
-
else {
|
|
201
|
-
setStatuses(function (statuses) {
|
|
202
|
-
var _a;
|
|
203
|
-
return (__assign(__assign({}, (statuses !== null && statuses !== void 0 ? statuses : {})), (_a = {}, _a[key] = "Unknown error", _a)));
|
|
204
|
-
});
|
|
205
|
-
}
|
|
206
|
-
setError(translations.errorText);
|
|
207
|
-
}
|
|
208
|
-
return [3 /*break*/, 5];
|
|
209
|
-
case 4:
|
|
210
|
-
if (!abortController.signal.aborted) {
|
|
211
|
-
setProgress(++progress);
|
|
212
|
-
}
|
|
213
|
-
return [7 /*endfinally*/];
|
|
214
|
-
case 5: return [2 /*return*/];
|
|
215
|
-
}
|
|
216
|
-
});
|
|
217
|
-
}); });
|
|
218
|
-
}))];
|
|
219
|
-
case 1:
|
|
220
|
-
_a.sent();
|
|
221
|
-
if (!abortController.signal.aborted) {
|
|
222
|
-
setProcessing(false);
|
|
223
|
-
}
|
|
224
|
-
onComplete === null || onComplete === void 0 ? void 0 : onComplete(successfulItems);
|
|
225
|
-
return [2 /*return*/];
|
|
226
|
-
}
|
|
227
|
-
});
|
|
228
|
-
});
|
|
229
|
-
}
|
|
230
|
-
void process();
|
|
231
|
-
}, [abortController, actionFn, items, keyFn, onComplete, translations.errorText]);
|
|
232
|
-
var _j = (0, useTableItems_1.usePaged)(items), paged = _j.paged, page = _j.page, perPage = _j.perPage, setPage = _j.setPage, setPerPage = _j.setPerPage;
|
|
233
|
-
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 () {
|
|
234
|
-
onCancelClicked();
|
|
235
|
-
onCloseClicked();
|
|
236
|
-
}, actions: isProcessing
|
|
237
|
-
? [
|
|
238
|
-
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onCancelClicked }, { children: translations.cancelText }), "cancel"),
|
|
239
|
-
]
|
|
240
|
-
: [
|
|
241
|
-
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "secondary", onClick: onCloseClicked }, { children: translations.closeText }), "close"),
|
|
242
|
-
], 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: {
|
|
243
|
-
display: 'flex',
|
|
244
|
-
flexDirection: 'column',
|
|
245
|
-
maxHeight: 560,
|
|
246
|
-
overflow: 'hidden',
|
|
247
|
-
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
|
248
|
-
} }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: __spreadArray([], __read(paged), false), itemCount: items.length, tableColumns: __spreadArray(__spreadArray([], __read(actionColumns), false), [
|
|
249
|
-
{
|
|
250
|
-
header: 'Status',
|
|
251
|
-
cell: function (item) {
|
|
252
|
-
var key = keyFn(item);
|
|
253
|
-
var status = statuses === null || statuses === void 0 ? void 0 : statuses[key];
|
|
254
|
-
if (status === undefined) {
|
|
255
|
-
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] })));
|
|
256
|
-
}
|
|
257
|
-
if (status === null) {
|
|
258
|
-
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] })));
|
|
259
|
-
}
|
|
260
|
-
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]] })));
|
|
261
|
-
},
|
|
262
|
-
},
|
|
263
|
-
], false), keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items", autoHidePagination: true, disableBodyPadding: true }, "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
|
|
264
|
-
? translations.canceledText
|
|
265
|
-
: error
|
|
266
|
-
? translations.errorText
|
|
267
|
-
: !isProcessing
|
|
268
|
-
? translations.successText
|
|
269
|
-
: processingText !== null && processingText !== void 0 ? processingText : translations.processingText, size: react_core_1.ProgressSize.lg, variant: error || isCanceled
|
|
270
|
-
? react_core_1.ProgressVariant.danger
|
|
271
|
-
: progress === items.length
|
|
272
|
-
? react_core_1.ProgressVariant.success
|
|
273
|
-
: undefined }) }))] })));
|
|
274
|
-
}
|
|
275
|
-
/**
|
|
276
|
-
* useBulkActionDialog - react hook to open a BulkActionDialog
|
|
277
|
-
*
|
|
278
|
-
* @example
|
|
279
|
-
* const openBulkActionDialog = useBulkActionDialog()
|
|
280
|
-
* openBulkActionDialog(...) // Pass BulkActionDialogProps
|
|
281
|
-
*/
|
|
282
|
-
function useBulkActionDialog() {
|
|
283
|
-
var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
|
|
284
|
-
var _b = __read((0, react_1.useState)(), 2), props = _b[0], setProps = _b[1];
|
|
285
|
-
(0, react_1.useEffect)(function () {
|
|
286
|
-
if (props) {
|
|
287
|
-
var onCloseHandler = function () {
|
|
288
|
-
var _a;
|
|
289
|
-
setProps(undefined);
|
|
290
|
-
(_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
291
|
-
};
|
|
292
|
-
setDialog((0, jsx_runtime_1.jsx)(BulkActionDialog, __assign({}, props, { onClose: onCloseHandler })));
|
|
293
|
-
}
|
|
294
|
-
else {
|
|
295
|
-
setDialog(undefined);
|
|
296
|
-
}
|
|
297
|
-
}, [props, setDialog]);
|
|
298
|
-
return setProps;
|
|
299
|
-
}
|
|
300
|
-
exports.useBulkActionDialog = useBulkActionDialog;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { BulkActionDialogProps } from './BulkActionDialog';
|
|
3
|
-
import { ITableColumn } from './PageTable/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/description that shows up under the confirmation title. */
|
|
10
|
-
prompt?: string;
|
|
11
|
-
/** Alert prompts that shows up under the confirmation title. */
|
|
12
|
-
alertPrompts?: string[];
|
|
13
|
-
/** The items to confirm for the bulk action. */
|
|
14
|
-
items: T[];
|
|
15
|
-
/** A function that determines that whether an action cannot be performed on a selected item
|
|
16
|
-
* (so that this item can be identified in the confirmation dialog) and returns a tooltip
|
|
17
|
-
* that can be displayed with the non-actionable row */
|
|
18
|
-
isItemNonActionable?: (item: T) => string | undefined;
|
|
19
|
-
/** A function that gets a unique key for each item. */
|
|
20
|
-
keyFn: (item: T) => string | number;
|
|
21
|
-
/** The columns to display for confirmation. */
|
|
22
|
-
confirmationColumns: ITableColumn<T>[];
|
|
23
|
-
/** Callback called when the user confirms. */
|
|
24
|
-
onConfirm: () => void;
|
|
25
|
-
/** Callback called when the dialog closes. */
|
|
26
|
-
onClose?: () => void;
|
|
27
|
-
/** The prompt to show for the user to confirm the bulk action. */
|
|
28
|
-
confirmText: string;
|
|
29
|
-
/** The button text to perform the action. */
|
|
30
|
-
actionButtonText: string;
|
|
31
|
-
/** Indicates if this is a destructive operation */
|
|
32
|
-
isDanger?: boolean;
|
|
33
|
-
}
|
|
34
|
-
declare function BulkConfirmationDialog<T extends object>(props: BulkConfirmationDialog<T>): JSX.Element;
|
|
35
|
-
export declare function useBulkConfirmation<T extends object>(): (options: Omit<BulkConfirmationDialog<T>, 'onConfirm' | 'onClose'> & Omit<BulkActionDialogProps<T>, 'onClose'>) => void;
|
|
36
|
-
export {};
|
|
@@ -1,135 +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 __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
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
30
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
31
|
-
if (ar || !(i in from)) {
|
|
32
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
33
|
-
ar[i] = from[i];
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
37
|
-
};
|
|
38
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
exports.useBulkConfirmation = void 0;
|
|
40
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
41
|
-
var react_core_1 = require("@patternfly/react-core");
|
|
42
|
-
var react_icons_1 = require("@patternfly/react-icons");
|
|
43
|
-
var react_1 = require("react");
|
|
44
|
-
var BulkActionDialog_1 = require("./BulkActionDialog");
|
|
45
|
-
var PageDialog_1 = require("./PageDialog");
|
|
46
|
-
var PageTable_1 = require("./PageTable/PageTable");
|
|
47
|
-
var useTableItems_1 = require("./PageTable/useTableItems");
|
|
48
|
-
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
|
49
|
-
var compare_1 = require("./utils/compare");
|
|
50
|
-
function BulkConfirmationDialog(props) {
|
|
51
|
-
var title = props.title, items = props.items, keyFn = props.keyFn, prompt = props.prompt, alertPrompts = props.alertPrompts, confirmationColumns = props.confirmationColumns, isItemNonActionable = props.isItemNonActionable, onConfirm = props.onConfirm, onClose = props.onClose, confirmText = props.confirmText, actionButtonText = props.actionButtonText, isDanger = props.isDanger;
|
|
52
|
-
var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
|
|
53
|
-
var _b = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _b[0];
|
|
54
|
-
var onCloseClicked = (0, react_1.useCallback)(function () {
|
|
55
|
-
setDialog(undefined);
|
|
56
|
-
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
57
|
-
}, [onClose, setDialog]);
|
|
58
|
-
// Non-actionable rows appear first
|
|
59
|
-
var sortedItems = (0, react_1.useMemo)(function () {
|
|
60
|
-
if (isItemNonActionable && items.some(isItemNonActionable)) {
|
|
61
|
-
return items.sort(function (l, r) { return (0, compare_1.compareStrings)(isItemNonActionable(l), isItemNonActionable(r)); });
|
|
62
|
-
}
|
|
63
|
-
return items;
|
|
64
|
-
}, [items, isItemNonActionable]);
|
|
65
|
-
var _c = (0, useTableItems_1.usePaged)(sortedItems), paged = _c.paged, page = _c.page, perPage = _c.perPage, setPage = _c.setPage, setPerPage = _c.setPerPage;
|
|
66
|
-
var _d = __read((0, react_1.useState)(!confirmText), 2), confirmed = _d[0], setConfirmed = _d[1];
|
|
67
|
-
/**
|
|
68
|
-
* If there are non-actionable rows, the first column will contain exclamation icons
|
|
69
|
-
* to identify the non-actionable rows.
|
|
70
|
-
*/
|
|
71
|
-
var columnsForConfirmation = (0, react_1.useMemo)(function () {
|
|
72
|
-
if (isItemNonActionable && items.some(isItemNonActionable)) {
|
|
73
|
-
return __spreadArray([
|
|
74
|
-
{
|
|
75
|
-
header: '',
|
|
76
|
-
cell: function (item) {
|
|
77
|
-
return isItemNonActionable(item) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: isItemNonActionable(item), trigger: isItemNonActionable(item) ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, __assign({ status: "warning" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ExclamationTriangleIcon, {}) })) }))) : null;
|
|
78
|
-
},
|
|
79
|
-
}
|
|
80
|
-
], __read(confirmationColumns), false);
|
|
81
|
-
}
|
|
82
|
-
return confirmationColumns;
|
|
83
|
-
}, [confirmationColumns, isItemNonActionable, items]);
|
|
84
|
-
var actionableItems = (0, react_1.useMemo)(function () {
|
|
85
|
-
if (isItemNonActionable) {
|
|
86
|
-
return items.filter(function (item) { return !isItemNonActionable(item); });
|
|
87
|
-
}
|
|
88
|
-
return items;
|
|
89
|
-
}, [isItemNonActionable, items]);
|
|
90
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ titleIconVariant: isDanger ? 'warning' : undefined, title: title, "aria-label": title, description: prompt, variant: react_core_1.ModalVariant.medium, isOpen: true, onClose: onCloseClicked, actions: [
|
|
91
|
-
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: isDanger ? 'danger' : 'primary', onClick: function () {
|
|
92
|
-
onCloseClicked();
|
|
93
|
-
onConfirm();
|
|
94
|
-
}, isAriaDisabled: !confirmed }, { children: actionButtonText }), "submit"),
|
|
95
|
-
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onClose }, { children: translations.cancelText }), "cancel"),
|
|
96
|
-
], hasNoBodyWrapper: true }, { children: items.length > 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.ModalBoxBody, __assign({ style: { paddingLeft: 0, paddingRight: 0 } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
|
97
|
-
display: 'flex',
|
|
98
|
-
flexDirection: 'column',
|
|
99
|
-
maxHeight: 560,
|
|
100
|
-
overflow: 'hidden',
|
|
101
|
-
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
|
102
|
-
} }, { children: [alertPrompts &&
|
|
103
|
-
alertPrompts.length > 0 &&
|
|
104
|
-
alertPrompts.map(function (alertPrompt, i) { return ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { isInline: true, title: alertPrompt, variant: "warning" }, i)); }), (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: items.length, tableColumns: columnsForConfirmation, keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items", autoHidePagination: true, disableBodyPadding: true }, "items")] })), confirmText && actionableItems.length > 0 && ((0, jsx_runtime_1.jsx)("div", __assign({ style: { marginLeft: 32, height: 64, display: 'flex', alignItems: 'center' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: "confirm", label: confirmText, isChecked: confirmed, onChange: setConfirmed }) })))] }))) })));
|
|
105
|
-
}
|
|
106
|
-
function useBulkConfirmationDialog() {
|
|
107
|
-
var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
|
|
108
|
-
var _b = __read((0, react_1.useState)(), 2), props = _b[0], setProps = _b[1];
|
|
109
|
-
(0, react_1.useEffect)(function () {
|
|
110
|
-
if (props) {
|
|
111
|
-
var onCloseHandler = function () {
|
|
112
|
-
var _a;
|
|
113
|
-
setProps(undefined);
|
|
114
|
-
(_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
115
|
-
};
|
|
116
|
-
setDialog((0, jsx_runtime_1.jsx)(BulkConfirmationDialog, __assign({}, props, { onClose: onCloseHandler })));
|
|
117
|
-
}
|
|
118
|
-
else {
|
|
119
|
-
setDialog(undefined);
|
|
120
|
-
}
|
|
121
|
-
}, [props, setDialog]);
|
|
122
|
-
return setProps;
|
|
123
|
-
}
|
|
124
|
-
function useBulkConfirmation() {
|
|
125
|
-
var bulkConfirmationDialog = useBulkConfirmationDialog();
|
|
126
|
-
var bulkActionDialog = (0, BulkActionDialog_1.useBulkActionDialog)();
|
|
127
|
-
return (0, react_1.useCallback)(function (options) {
|
|
128
|
-
var bulkActionOptions = Object.assign({}, options);
|
|
129
|
-
if (options.isItemNonActionable && options.isItemNonActionable !== undefined) {
|
|
130
|
-
bulkActionOptions.items = options.items.filter(function (item) { return options.isItemNonActionable !== undefined && !options.isItemNonActionable(item); });
|
|
131
|
-
}
|
|
132
|
-
return bulkConfirmationDialog(__assign(__assign({}, options), { onConfirm: function () { return bulkActionDialog(bulkActionOptions); } }));
|
|
133
|
-
}, [bulkActionDialog, bulkConfirmationDialog]);
|
|
134
|
-
}
|
|
135
|
-
exports.useBulkConfirmation = useBulkConfirmation;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.PageActionType = void 0;
|
|
4
|
-
var PageActionType;
|
|
5
|
-
(function (PageActionType) {
|
|
6
|
-
PageActionType["seperator"] = "seperator";
|
|
7
|
-
PageActionType["button"] = "button";
|
|
8
|
-
PageActionType["single"] = "single";
|
|
9
|
-
PageActionType["singleLink"] = "singleLink";
|
|
10
|
-
PageActionType["bulk"] = "bulk";
|
|
11
|
-
PageActionType["dropdown"] = "dropdown";
|
|
12
|
-
})(PageActionType = exports.PageActionType || (exports.PageActionType = {}));
|
|
@@ -1,69 +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
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
exports.isHiddenAction = exports.PageActions = void 0;
|
|
15
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
|
-
var react_core_1 = require("@patternfly/react-core");
|
|
17
|
-
var react_1 = require("react");
|
|
18
|
-
var useBreakPoint_1 = require("../components/useBreakPoint");
|
|
19
|
-
var PageActionType_1 = require("./PageActionType");
|
|
20
|
-
var PageDropdownAction_1 = require("./PageDropdownAction");
|
|
21
|
-
var PagePinnedActions_1 = require("./PagePinnedActions");
|
|
22
|
-
/**
|
|
23
|
-
* Page actions represent actions used in table rows, toolbars, and page headers.
|
|
24
|
-
* The PageActions component controls the collapsing of the actions at given breakpoints.
|
|
25
|
-
*/
|
|
26
|
-
function PageActions(props) {
|
|
27
|
-
var _a;
|
|
28
|
-
var actions = props.actions, selectedItem = props.selectedItem, selectedItems = props.selectedItems, iconOnly = props.iconOnly;
|
|
29
|
-
var collapseBreakpoint = (0, useBreakPoint_1.useBreakpoint)(props.collapse !== 'never' && props.collapse !== 'always' ? (_a = props.collapse) !== null && _a !== void 0 ? _a : 'lg' : 'lg');
|
|
30
|
-
var collapseButtons = props.collapse !== 'never' && (props.collapse === 'always' || !collapseBreakpoint);
|
|
31
|
-
/** Actions that are visible */
|
|
32
|
-
var visibleActions = (0, react_1.useMemo)(function () { return actions.filter(function (action) { return !isHiddenAction(action, selectedItem); }); }, [actions, selectedItem]);
|
|
33
|
-
/** Actions that show up outside the dropdown */
|
|
34
|
-
var pinnedActions = (0, react_1.useMemo)(function () {
|
|
35
|
-
if (collapseButtons)
|
|
36
|
-
return [];
|
|
37
|
-
return visibleActions === null || visibleActions === void 0 ? void 0 : visibleActions.filter(isPinnedAction);
|
|
38
|
-
}, [collapseButtons, visibleActions]);
|
|
39
|
-
/** Actions that are not pinned and show up inside the dropdown */
|
|
40
|
-
var dropdownActions = (0, react_1.useMemo)(function () {
|
|
41
|
-
var _a;
|
|
42
|
-
if (collapseButtons)
|
|
43
|
-
return visibleActions;
|
|
44
|
-
return (_a = visibleActions === null || visibleActions === void 0 ? void 0 : visibleActions.filter(function (action) { return !isPinnedAction(action); })) !== null && _a !== void 0 ? _a : [];
|
|
45
|
-
}, [collapseButtons, visibleActions]);
|
|
46
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: (!iconOnly && selectedItem !== undefined) || (selectedItems && selectedItems.length > 0) }, { children: [pinnedActions !== undefined && pinnedActions.length > 0 && ((0, jsx_runtime_1.jsx)(PagePinnedActions_1.PagePinnedActions, __assign({}, props, { actions: pinnedActions }))), dropdownActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ isFilled: true, style: { display: 'flex', justifyContent: 'flex-end' } }, { children: (0, jsx_runtime_1.jsx)(PageDropdownAction_1.PageDropdownAction, __assign({}, props, { actions: dropdownActions, onOpen: props.onOpen })) })))] })));
|
|
47
|
-
}
|
|
48
|
-
exports.PageActions = PageActions;
|
|
49
|
-
function isPinnedAction(action) {
|
|
50
|
-
var actionVariants = [
|
|
51
|
-
react_core_1.ButtonVariant.primary,
|
|
52
|
-
react_core_1.ButtonVariant.secondary,
|
|
53
|
-
react_core_1.ButtonVariant.danger,
|
|
54
|
-
];
|
|
55
|
-
return action.type !== PageActionType_1.PageActionType.seperator && actionVariants.includes(action.variant);
|
|
56
|
-
}
|
|
57
|
-
function isHiddenAction(action, selectedItem) {
|
|
58
|
-
switch (action.type) {
|
|
59
|
-
case PageActionType_1.PageActionType.single:
|
|
60
|
-
case PageActionType_1.PageActionType.singleLink:
|
|
61
|
-
case PageActionType_1.PageActionType.dropdown:
|
|
62
|
-
return action.isHidden !== undefined && selectedItem ? action.isHidden(selectedItem) : false;
|
|
63
|
-
case PageActionType_1.PageActionType.bulk:
|
|
64
|
-
case PageActionType_1.PageActionType.seperator:
|
|
65
|
-
case PageActionType_1.PageActionType.button:
|
|
66
|
-
return false;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
exports.isHiddenAction = isHiddenAction;
|