@ansible/ansible-ui-framework 0.0.614 → 0.0.615
Sign up to get free protection for your applications and to get access to all the features.
- 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/cjs/PageLayout.d.ts
DELETED
@@ -1,17 +0,0 @@
|
|
1
|
-
import { ReactNode } from 'react';
|
2
|
-
/**
|
3
|
-
* The PageLayout is used as the container for the contents of the page.
|
4
|
-
* It enables page components to leverage full page layout and scrolling of sub content.
|
5
|
-
* An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
|
6
|
-
*
|
7
|
-
* @example
|
8
|
-
* <Page>
|
9
|
-
* <PageLayout>
|
10
|
-
* <PageHeader />
|
11
|
-
* ...
|
12
|
-
* </PageLayout>
|
13
|
-
* <Page>
|
14
|
-
*/
|
15
|
-
export declare function PageLayout(props: {
|
16
|
-
children?: ReactNode;
|
17
|
-
}): JSX.Element;
|
package/cjs/PageLayout.js
DELETED
@@ -1,60 +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 __importDefault = (this && this.__importDefault) || function (mod) {
|
30
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
31
|
-
};
|
32
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
33
|
-
exports.PageLayout = void 0;
|
34
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
35
|
-
var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
|
36
|
-
var PageAlerts_1 = require("./PageAlerts");
|
37
|
-
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
38
|
-
/**
|
39
|
-
* The PageLayout is used as the container for the contents of the page.
|
40
|
-
* It enables page components to leverage full page layout and scrolling of sub content.
|
41
|
-
* An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
|
42
|
-
*
|
43
|
-
* @example
|
44
|
-
* <Page>
|
45
|
-
* <PageLayout>
|
46
|
-
* <PageHeader />
|
47
|
-
* ...
|
48
|
-
* </PageLayout>
|
49
|
-
* <Page>
|
50
|
-
*/
|
51
|
-
function PageLayout(props) {
|
52
|
-
var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
|
53
|
-
return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: translations.errorText }, { children: (0, jsx_runtime_1.jsx)(PageAlerts_1.PageAlertsProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
54
|
-
display: 'flex',
|
55
|
-
flexDirection: 'column',
|
56
|
-
height: '100%',
|
57
|
-
maxHeight: '100%',
|
58
|
-
} }, { children: props.children })) }) })));
|
59
|
-
}
|
60
|
-
exports.PageLayout = PageLayout;
|
@@ -1,28 +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.PagePagination = 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
|
-
function PagePagination(props) {
|
20
|
-
var setPage = props.setPage, setPerPage = props.setPerPage;
|
21
|
-
var onSetPage = (0, react_1.useCallback)(function (_event, page) { return setPage(page); }, [setPage]);
|
22
|
-
var onPerPageSelect = (0, react_1.useCallback)(function (_event, perPage) { return setPerPage(perPage); }, [setPerPage]);
|
23
|
-
var compact = !(0, useBreakPoint_1.useBreakpoint)('md');
|
24
|
-
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), { boxShadow: 'none', zIndex: 301,
|
25
|
-
// marginTop: -1,
|
26
|
-
paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6, borderTop: props.topBorder ? 'thin solid var(--pf-global--BorderColor--100)' : undefined }), className: "dark-2" }));
|
27
|
-
}
|
28
|
-
exports.PagePagination = PagePagination;
|
@@ -1,266 +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 __importDefault = (this && this.__importDefault) || function (mod) {
|
30
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
31
|
-
};
|
32
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
33
|
-
exports.TableColumnCell = exports.TableColumnCardType = exports.PageTable = void 0;
|
34
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
35
|
-
var react_core_1 = require("@patternfly/react-core");
|
36
|
-
var react_icons_1 = require("@patternfly/react-icons");
|
37
|
-
var react_table_1 = require("@patternfly/react-table");
|
38
|
-
var resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
|
39
|
-
var react_1 = require("react");
|
40
|
-
var Scrollable_1 = require("../components/Scrollable");
|
41
|
-
var useBreakPoint_1 = require("../components/useBreakPoint");
|
42
|
-
var PageActions_1 = require("../PageActions/PageActions");
|
43
|
-
var PageActionType_1 = require("../PageActions/PageActionType");
|
44
|
-
var PageBody_1 = require("../PageBody");
|
45
|
-
var DateTimeCell_1 = require("../PageCells/DateTimeCell");
|
46
|
-
var LabelsCell_1 = require("../PageCells/LabelsCell");
|
47
|
-
var TextCell_1 = require("../PageCells/TextCell");
|
48
|
-
var PageColumnModal_1 = require("../PageColumnModal");
|
49
|
-
var Settings_1 = require("../Settings");
|
50
|
-
var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
|
51
|
-
var PagePagination_1 = require("./PagePagination");
|
52
|
-
var PageTableCards_1 = require("./PageTableCards");
|
53
|
-
var PageTableList_1 = require("./PageTableList");
|
54
|
-
var PageTableViewType_1 = require("./PageTableViewType");
|
55
|
-
var PageToolbar_1 = require("./PageToolbar");
|
56
|
-
/**
|
57
|
-
* The PageTable component is used for adding a table to a page.
|
58
|
-
*
|
59
|
-
* See the [Table Guide](docs/guides/PageTableGuide.md).
|
60
|
-
*
|
61
|
-
* @example
|
62
|
-
* ```tsx
|
63
|
-
* <Page>
|
64
|
-
* <PageLayout>
|
65
|
-
* <PageHeader ... />
|
66
|
-
* <PageTable ... />
|
67
|
-
* </PageLayout>
|
68
|
-
* </Page>
|
69
|
-
* ```
|
70
|
-
*/
|
71
|
-
function PageTable(props) {
|
72
|
-
var _a, _b;
|
73
|
-
var toolbarActions = props.toolbarActions, filters = props.filters, error = props.error, itemCount = props.itemCount, disableBodyPadding = props.disableBodyPadding;
|
74
|
-
var _c = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _c.openColumnModal, columnModal = _c.columnModal, managedColumns = _c.managedColumns;
|
75
|
-
var showSelect = props.showSelect ||
|
76
|
-
(toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
|
77
|
-
undefined;
|
78
|
-
var hasTableViewType = !props.disableTableView;
|
79
|
-
var hasListViewType = !props.disableListView;
|
80
|
-
// const hasCardViewType = !props.disableCardView;
|
81
|
-
var _d = __read((0, react_1.useState)(function () {
|
82
|
-
var _a;
|
83
|
-
return (_a = props.defaultTableView) !== null && _a !== void 0 ? _a : (hasTableViewType
|
84
|
-
? PageTableViewType_1.PageTableViewTypeE.Table
|
85
|
-
: hasListViewType
|
86
|
-
? PageTableViewType_1.PageTableViewTypeE.List
|
87
|
-
: PageTableViewType_1.PageTableViewTypeE.Cards);
|
88
|
-
}), 2), viewType = _d[0], setViewType = _d[1];
|
89
|
-
var usePadding = (0, useBreakPoint_1.useBreakpoint)('md') && disableBodyPadding !== true;
|
90
|
-
if (error) {
|
91
|
-
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "dark-2", style: { height: '100%' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: props.errorStateTitle })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: error.message })] })) })));
|
92
|
-
}
|
93
|
-
if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
|
94
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: (_a = props.emptyStateIcon) !== null && _a !== void 0 ? _a : react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick, icon: props.emptyStateButtonIcon ? props.emptyStateButtonIcon : null }, { children: props.emptyStateButtonText })))] })) }));
|
95
|
-
}
|
96
|
-
if (itemCount === undefined) {
|
97
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, variant: "light" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Bullseye, { children: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, {}) }) })));
|
98
|
-
}
|
99
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PageToolbar_1.PageTableToolbar, __assign({}, props, { openColumnModal: openColumnModal, showSelect: showSelect, viewType: viewType, setViewType: setViewType, bottomBorder: true })), viewType === PageTableViewType_1.PageTableViewTypeE.Table && ((0, jsx_runtime_1.jsx)(PageBody_1.PageBody, __assign({ disablePadding: disableBodyPadding }, { children: (0, jsx_runtime_1.jsx)(PageTableView, __assign({}, props, { tableColumns: managedColumns })) }))), viewType === PageTableViewType_1.PageTableViewTypeE.List && ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ padding: { default: 'noPadding', md: 'padding' } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
100
|
-
borderLeft: usePadding
|
101
|
-
? 'thin solid var(--pf-global--BorderColor--100)'
|
102
|
-
: undefined,
|
103
|
-
borderRight: usePadding
|
104
|
-
? 'thin solid var(--pf-global--BorderColor--100)'
|
105
|
-
: undefined,
|
106
|
-
} }, { children: (0, jsx_runtime_1.jsx)(PageTableList_1.PageTableList, __assign({}, props, { showSelect: showSelect })) })) })) })), viewType === PageTableViewType_1.PageTableViewTypeE.Cards && ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(PageTableCards_1.PageTableCards, __assign({}, props, { showSelect: showSelect })) })), (!props.autoHidePagination || ((_b = props.itemCount) !== null && _b !== void 0 ? _b : 0) > props.perPage) && ((0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props, { topBorder: true }))), columnModal] }));
|
107
|
-
}
|
108
|
-
exports.PageTable = PageTable;
|
109
|
-
function PageTableView(props) {
|
110
|
-
var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, isSelectMultiple = props.isSelectMultiple, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, onSelect = props.onSelect, unselectAll = props.unselectAll, expandedRow = props.expandedRow;
|
111
|
-
var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
|
112
|
-
var showSelect = props.showSelect ||
|
113
|
-
(toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
|
114
|
-
undefined;
|
115
|
-
var containerRef = (0, react_1.useRef)(null);
|
116
|
-
var _b = __read((0, react_1.useState)({
|
117
|
-
left: 0,
|
118
|
-
right: 0,
|
119
|
-
top: 0,
|
120
|
-
bottom: 0,
|
121
|
-
}), 2), scroll = _b[0], setScroll = _b[1];
|
122
|
-
var updateScroll = (0, react_1.useCallback)(function (div) {
|
123
|
-
if (!div)
|
124
|
-
return;
|
125
|
-
setScroll({
|
126
|
-
top: div.scrollTop,
|
127
|
-
bottom: div.scrollHeight - div.clientHeight - div.scrollTop,
|
128
|
-
left: div.scrollLeft,
|
129
|
-
right: div.scrollWidth - div.clientWidth - div.scrollLeft,
|
130
|
-
});
|
131
|
-
}, []);
|
132
|
-
var onScroll = (0, react_1.useCallback)(function (event) { return updateScroll(event.currentTarget); }, [updateScroll]);
|
133
|
-
(0, resize_observer_1.default)(containerRef, function () { return updateScroll(containerRef.current); });
|
134
|
-
(0, react_1.useEffect)(function () { return updateScroll(containerRef.current); }, [updateScroll]);
|
135
|
-
var settings = (0, Settings_1.useSettings)();
|
136
|
-
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "pf-c-scroll-inner-wrapper", style: { height: '100%', marginBottom: -1 }, ref: containerRef, onScroll: onScroll }, { children: [(0, jsx_runtime_1.jsxs)(react_table_1.TableComposable, __assign({ "aria-label": "Simple table", variant: props.compact ? 'compact' : settings.tableLayout === 'compact' ? 'compact' : undefined, gridBreakPoint: "", isStickyHeader: true }, { children: [itemCount === undefined ? ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Th, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}) }) }) })) : ((0, jsx_runtime_1.jsx)(TableHead, __assign({}, props, { showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, tableColumns: tableColumns, onSelect: onSelect }))), (0, jsx_runtime_1.jsx)(react_table_1.Tbody, { children: itemCount === undefined
|
137
|
-
? new Array(perPage).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Td, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }) }, index)); })
|
138
|
-
: pageItems === undefined
|
139
|
-
? new Array(Math.min(perPage, itemCount)).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, { children: [showSelect && (0, jsx_runtime_1.jsx)(react_table_1.Td, {}), (0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ colSpan: tableColumns.length }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }))] }, index)); })
|
140
|
-
: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), isSelectMultiple: isSelectMultiple, selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect, expandedRow: expandedRow }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.SearchIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: translations.noResultsFound })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: translations.noResultsMatchCriteria }), clearAllFilters && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateSecondaryActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: clearAllFilters }, { children: translations.clearAllFilters })) }))] })))] })));
|
141
|
-
}
|
142
|
-
function TableHead(props) {
|
143
|
-
var columns = props.tableColumns, itemActions = props.rowActions, sort = props.sort, setSort = props.setSort, sortDirection = props.sortDirection, setSortDirection = props.setSortDirection, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
|
144
|
-
var getColumnSort = (0, react_1.useCallback)(function (columnIndex, column) {
|
145
|
-
if (!column.sort)
|
146
|
-
return undefined;
|
147
|
-
return {
|
148
|
-
onSort: function (_event, _columnIndex, sortByDirection) {
|
149
|
-
if (column.sort) {
|
150
|
-
setSort === null || setSort === void 0 ? void 0 : setSort(column.sort);
|
151
|
-
setSortDirection === null || setSortDirection === void 0 ? void 0 : setSortDirection(sortByDirection);
|
152
|
-
}
|
153
|
-
},
|
154
|
-
sortBy: {
|
155
|
-
index: column.sort === sort ? columnIndex : undefined,
|
156
|
-
direction: column.sort === sort ? sortDirection : undefined,
|
157
|
-
defaultDirection: column.defaultSortDirection,
|
158
|
-
},
|
159
|
-
columnIndex: columnIndex,
|
160
|
-
};
|
161
|
-
}, [setSort, setSortDirection, sort, sortDirection]);
|
162
|
-
return ((0, jsx_runtime_1.jsx)(react_table_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: "light dark-2" }, { children: [expandedRow && (0, jsx_runtime_1.jsx)(react_table_1.Th, { style: { padding: 0, backgroundColor: 'inherit' } }), (showSelect || onSelect) && ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft, style: { backgroundColor: 'inherit' } }, { children: "\u00A0" }))), columns
|
163
|
-
.filter(function (column) { return column.enabled !== false; })
|
164
|
-
.map(function (column, index) {
|
165
|
-
return ((0, jsx_runtime_1.jsx)(react_table_1.Th, __assign({ sort: getColumnSort(index, column), style: {
|
166
|
-
minWidth: column.minWidth === 0
|
167
|
-
? '1%'
|
168
|
-
: column.minWidth !== undefined
|
169
|
-
? column.minWidth
|
170
|
-
: undefined,
|
171
|
-
maxWidth: column.maxWidth !== undefined ? column.maxWidth : undefined,
|
172
|
-
backgroundColor: 'inherit',
|
173
|
-
} }, { children: column.header }), column.header));
|
174
|
-
}), itemActions !== undefined && ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ isActionCell: true, isStickyColumn: true, stickyMinWidth: "0px", style: {
|
175
|
-
right: 0,
|
176
|
-
padding: 0,
|
177
|
-
paddingRight: 0,
|
178
|
-
backgroundColor: 'inherit',
|
179
|
-
zIndex: 302,
|
180
|
-
}, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: "\u00A0" })))] })) }));
|
181
|
-
}
|
182
|
-
function TableRow(props) {
|
183
|
-
var columns = props.columns, selectItem = props.selectItem, unselectItem = props.unselectItem, isItemSelected = props.isItemSelected, isSelectMultiple = props.isSelectMultiple, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
|
184
|
-
var _a = __read((0, react_1.useState)(false), 2), expanded = _a[0], setExpanded = _a[1];
|
185
|
-
var settings = (0, Settings_1.useSettings)();
|
186
|
-
var expandedContent = expandedRow === null || expandedRow === void 0 ? void 0 : expandedRow(item);
|
187
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: isItemSelected ? 'selected' : undefined, isRowSelected: expanded, style: {
|
188
|
-
boxShadow: 'unset',
|
189
|
-
borderBottom: expanded ? 'unset' : undefined,
|
190
|
-
} }, { children: [expandedRow && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { expand: expandedContent
|
191
|
-
? {
|
192
|
-
rowIndex: rowIndex,
|
193
|
-
isExpanded: expanded,
|
194
|
-
onToggle: function () { return setExpanded(function (expanded) { return !expanded; }); },
|
195
|
-
}
|
196
|
-
: undefined, style: { paddingLeft: expandedContent ? 8 : 4 } })), showSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Th, { select: isItemSelected !== undefined
|
197
|
-
? {
|
198
|
-
onSelect: function (_event, isSelecting) {
|
199
|
-
if (isSelecting) {
|
200
|
-
selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
|
201
|
-
}
|
202
|
-
else {
|
203
|
-
unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
|
204
|
-
}
|
205
|
-
},
|
206
|
-
isSelected: isItemSelected,
|
207
|
-
}
|
208
|
-
: undefined, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { select: {
|
209
|
-
rowIndex: rowIndex,
|
210
|
-
onSelect: function (_event, isSelecting) {
|
211
|
-
if (isSelecting) {
|
212
|
-
selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
|
213
|
-
}
|
214
|
-
else {
|
215
|
-
unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
|
216
|
-
}
|
217
|
-
},
|
218
|
-
isSelected: isItemSelected !== null && isItemSelected !== void 0 ? isItemSelected : false,
|
219
|
-
variant: isSelectMultiple ? 'checkbox' : 'radio',
|
220
|
-
}, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), (0, jsx_runtime_1.jsx)(TableCells, { columns: columns, item: item, rowActions: rowActions, scrollLeft: props.scrollLeft, scrollRight: props.scrollRight })] })), expandedRow && expanded && expandedContent && ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: isItemSelected ? 'selected' : undefined, isExpanded: expanded, style: { boxShadow: 'unset' } }, { children: [(0, jsx_runtime_1.jsx)(react_table_1.Td, {}), showSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Th, { isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && (0, jsx_runtime_1.jsx)(react_table_1.Td, { isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft }), (0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ colSpan: columns.filter(function (column) { return column.enabled !== false; }).length, style: { paddingBottom: settings.tableLayout === 'compact' ? 12 : 24, paddingTop: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_table_1.CollapseColumn, { children: expandedContent }) })), rowActions !== undefined && rowActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ isActionCell: true, isStickyColumn: true, stickyMinWidth: "0px", style: {
|
221
|
-
right: 0,
|
222
|
-
padding: 0,
|
223
|
-
paddingRight: 0,
|
224
|
-
}, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: "\u00A0" })))] })))] }));
|
225
|
-
}
|
226
|
-
function TableCells(props) {
|
227
|
-
var columns = props.columns, item = props.item, rowActions = props.rowActions;
|
228
|
-
var _a = __read((0, react_1.useState)(false), 2), actionsExpanded = _a[0], setActionsExpanded = _a[1];
|
229
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [columns
|
230
|
-
.filter(function (column) { return column.enabled !== false; })
|
231
|
-
.map(function (column) {
|
232
|
-
return ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ dataLabel: column.header, modifier: "nowrap", style: { width: column.minWidth === 0 ? '0%' : undefined } }, { children: (0, jsx_runtime_1.jsx)(TableColumnCell, { item: item, column: column }) }), column.header));
|
233
|
-
}), rowActions !== undefined && rowActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ isActionCell: true, isStickyColumn: true, stickyMinWidth: "0px", style: {
|
234
|
-
right: 0,
|
235
|
-
padding: 0,
|
236
|
-
paddingRight: 0,
|
237
|
-
zIndex: actionsExpanded ? 301 : undefined,
|
238
|
-
}, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: rowActions, selectedItem: item, position: react_core_1.DropdownPosition.right, iconOnly: true, onOpen: setActionsExpanded }) })))] }));
|
239
|
-
}
|
240
|
-
var TableColumnCardType;
|
241
|
-
(function (TableColumnCardType) {
|
242
|
-
TableColumnCardType[TableColumnCardType["description"] = 0] = "description";
|
243
|
-
TableColumnCardType[TableColumnCardType["hidden"] = 1] = "hidden";
|
244
|
-
TableColumnCardType[TableColumnCardType["count"] = 2] = "count";
|
245
|
-
})(TableColumnCardType = exports.TableColumnCardType || (exports.TableColumnCardType = {}));
|
246
|
-
function TableColumnCell(props) {
|
247
|
-
var _a, _b;
|
248
|
-
var item = props.item, column = props.column;
|
249
|
-
if (!column)
|
250
|
-
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
251
|
-
switch (column.type) {
|
252
|
-
case 'text':
|
253
|
-
return (0, jsx_runtime_1.jsx)(TextCell_1.TextCell, { text: column.value(item) });
|
254
|
-
case 'labels':
|
255
|
-
return (0, jsx_runtime_1.jsx)(LabelsCell_1.LabelsCell, { labels: (_a = column.value(item)) !== null && _a !== void 0 ? _a : [] });
|
256
|
-
case 'description':
|
257
|
-
return (0, jsx_runtime_1.jsx)(TextCell_1.TextCell, { text: column.value(item) });
|
258
|
-
case 'count':
|
259
|
-
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (_b = column.value(item)) !== null && _b !== void 0 ? _b : '-' });
|
260
|
-
case 'datetime':
|
261
|
-
return (0, jsx_runtime_1.jsx)(DateTimeCell_1.SinceCell, { value: column.value(item) });
|
262
|
-
default:
|
263
|
-
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: column.cell(item) });
|
264
|
-
}
|
265
|
-
}
|
266
|
-
exports.TableColumnCell = TableColumnCell;
|
@@ -1,161 +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 __values = (this && this.__values) || function(o) {
|
14
|
-
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
15
|
-
if (m) return m.call(o);
|
16
|
-
if (o && typeof o.length === "number") return {
|
17
|
-
next: function () {
|
18
|
-
if (o && i >= o.length) o = void 0;
|
19
|
-
return { value: o && o[i++], done: !o };
|
20
|
-
}
|
21
|
-
};
|
22
|
-
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
23
|
-
};
|
24
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
25
|
-
exports.useColumnsToTableCardFn = exports.PageTableCard = void 0;
|
26
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
27
|
-
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
28
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
29
|
-
var react_core_1 = require("@patternfly/react-core");
|
30
|
-
var react_1 = require("react");
|
31
|
-
var IconWrapper_1 = require("../components/IconWrapper");
|
32
|
-
var PageActions_1 = require("../PageActions/PageActions");
|
33
|
-
var PageDetail_1 = require("../PageDetails/PageDetail");
|
34
|
-
var PageTable_1 = require("./PageTable");
|
35
|
-
function PageTableCard(props) {
|
36
|
-
var _a;
|
37
|
-
var item = props.item, itemToCardFn = props.itemToCardFn, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, itemActions = props.itemActions, showSelect = props.showSelect, defaultCardSubtitle = props.defaultCardSubtitle;
|
38
|
-
var card = (0, react_1.useMemo)(function () { return itemToCardFn(item); }, [item, itemToCardFn]);
|
39
|
-
var isItemSelected = !!(isSelected === null || isSelected === void 0 ? void 0 : isSelected(item));
|
40
|
-
var onSelectClick = (0, react_1.useCallback)(function () {
|
41
|
-
if (isSelected === null || isSelected === void 0 ? void 0 : isSelected(item)) {
|
42
|
-
unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
|
43
|
-
}
|
44
|
-
else {
|
45
|
-
selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
|
46
|
-
}
|
47
|
-
}, [isSelected, item, selectItem, unselectItem]);
|
48
|
-
var showDropdown = itemActions !== undefined && itemActions.length > 0;
|
49
|
-
var showActions = showSelect || showDropdown;
|
50
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.Card, __assign({ id: card.id, isFlat: true, isLarge: true, isRounded: true, isSelectable: isItemSelected, isSelected: isItemSelected, style: {
|
51
|
-
transition: 'box-shadow 0.25s',
|
52
|
-
cursor: 'default',
|
53
|
-
maxWidth: '100%',
|
54
|
-
} }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CardHeader, __assign({ style: { display: 'flex', flexWrap: 'nowrap', maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', flexWrap: 'nowrap', maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
55
|
-
display: 'flex',
|
56
|
-
flexWrap: 'wrap',
|
57
|
-
alignItems: 'center',
|
58
|
-
gap: 16,
|
59
|
-
maxWidth: '100%',
|
60
|
-
} }, { children: [card.icon && (0, jsx_runtime_1.jsx)(IconWrapper_1.IconWrapper, __assign({ size: "xl" }, { children: card.icon })), (0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: card.title }) }), card.subtitle ? ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: card.subtitle }))) : (defaultCardSubtitle && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "small", style: { opacity: 0.7 } }, { children: defaultCardSubtitle }))))] }))] })), card.badge && card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (e) { return e.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) })) })) })), card.badge && !card.badgeTooltip && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: card.badgeColor }, { children: card.badge })) }))] })), showActions && ((0, jsx_runtime_1.jsxs)(react_core_1.CardActions, { children: [itemActions && itemActions.length && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: itemActions, position: react_core_1.DropdownPosition.right, selectedItem: item, iconOnly: true, collapse: "always" })), showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onChange: onSelectClick,
|
61
|
-
// aria-label="card checkbox example"
|
62
|
-
id: "check-1" }))] }))] })), card.cardBody, card.labels && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
63
|
-
display: 'flex',
|
64
|
-
flexDirection: 'row',
|
65
|
-
alignItems: 'end',
|
66
|
-
gap: 16,
|
67
|
-
} }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { flexGrow: 1 } }, { children: card.labels && ((0, jsx_runtime_1.jsx)(react_core_1.LabelGroup, __assign({ numLabels: 999 }, { children: card.labels.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.Label, __assign({ color: item.color }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: item.label, style: { minWidth: 0 } }) }), item.label)); }) }))) })) })) })), card.alertTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, __assign({ title: card.alertTitle, isInline: true, variant: card.alertVariant }, { children: card.alertContent })))] }), (_a = card.id) !== null && _a !== void 0 ? _a : card.title));
|
68
|
-
}
|
69
|
-
exports.PageTableCard = PageTableCard;
|
70
|
-
function useColumnsToTableCardFn(columns, keyFn) {
|
71
|
-
var data = (0, react_1.useMemo)(function () {
|
72
|
-
var e_1, _a;
|
73
|
-
var nameColumn;
|
74
|
-
var subtitleColumn;
|
75
|
-
var descriptionColumn;
|
76
|
-
var countColumns = [];
|
77
|
-
var labelColumn;
|
78
|
-
var cardColumns = [];
|
79
|
-
try {
|
80
|
-
for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
|
81
|
-
var column = columns_1_1.value;
|
82
|
-
switch (column.type) {
|
83
|
-
case 'description':
|
84
|
-
if (!descriptionColumn)
|
85
|
-
descriptionColumn = column;
|
86
|
-
break;
|
87
|
-
case 'labels':
|
88
|
-
if (!labelColumn)
|
89
|
-
labelColumn = column;
|
90
|
-
break;
|
91
|
-
case 'count':
|
92
|
-
countColumns.push(column);
|
93
|
-
break;
|
94
|
-
default:
|
95
|
-
switch (column.card) {
|
96
|
-
case 'name':
|
97
|
-
nameColumn = column;
|
98
|
-
break;
|
99
|
-
case 'subtitle':
|
100
|
-
subtitleColumn = column;
|
101
|
-
break;
|
102
|
-
case 'description':
|
103
|
-
descriptionColumn = column;
|
104
|
-
break;
|
105
|
-
case 'hidden':
|
106
|
-
break;
|
107
|
-
default:
|
108
|
-
cardColumns.push(column);
|
109
|
-
break;
|
110
|
-
}
|
111
|
-
break;
|
112
|
-
}
|
113
|
-
}
|
114
|
-
}
|
115
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
116
|
-
finally {
|
117
|
-
try {
|
118
|
-
if (columns_1_1 && !columns_1_1.done && (_a = columns_1.return)) _a.call(columns_1);
|
119
|
-
}
|
120
|
-
finally { if (e_1) throw e_1.error; }
|
121
|
-
}
|
122
|
-
return {
|
123
|
-
nameColumn: nameColumn,
|
124
|
-
subtitleColumn: subtitleColumn,
|
125
|
-
descriptionColumn: descriptionColumn,
|
126
|
-
countColumns: countColumns,
|
127
|
-
cardColumns: cardColumns,
|
128
|
-
labelColumn: labelColumn,
|
129
|
-
};
|
130
|
-
}, [columns]);
|
131
|
-
var nameColumn = data.nameColumn, subtitleColumn = data.subtitleColumn, descriptionColumn = data.descriptionColumn, countColumns = data.countColumns, cardColumns = data.cardColumns, labelColumn = data.labelColumn;
|
132
|
-
return (0, react_1.useMemo)(function () {
|
133
|
-
return function (item) {
|
134
|
-
var _a, _b;
|
135
|
-
var hasDescription = descriptionColumn && (!descriptionColumn.value || descriptionColumn.value(item));
|
136
|
-
var pageTableCard = {
|
137
|
-
id: keyFn(item),
|
138
|
-
icon: (_a = nameColumn === null || nameColumn === void 0 ? void 0 : nameColumn.icon) === null || _a === void 0 ? void 0 : _a.call(nameColumn, item),
|
139
|
-
title: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: nameColumn, item: item }),
|
140
|
-
subtitle: subtitleColumn && (!subtitleColumn.value || subtitleColumn.value(item)) && ((0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: subtitleColumn, item: item })),
|
141
|
-
cardBody: ((0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DescriptionList, __assign({ isCompact: true }, { children: [hasDescription && ((0, jsx_runtime_1.jsx)(PageDetail_1.PageDetail, { children: descriptionColumn.type === 'description' ? ((0, jsx_runtime_1.jsx)("div", { children: descriptionColumn.value(item) })) : ((0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: descriptionColumn, item: item })) }, descriptionColumn.id)), cardColumns
|
142
|
-
.filter(function (column) { return !column.value || column.value(item); })
|
143
|
-
.map(function (column) { return ((0, jsx_runtime_1.jsx)(PageDetail_1.PageDetail, __assign({ label: column.header }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }) }), column.id)); }), countColumns.length > 0 && ((0, jsx_runtime_1.jsx)(PageDetail_1.PageDetail, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: 'flex', gap: 16, marginTop: 8, flexWrap: 'wrap' } }, { children: countColumns.map(function (column, i) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', gap: 6, alignItems: 'baseline' } }, { children: [(0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { column: column, item: item }), (0, jsx_runtime_1.jsx)("small", __assign({ style: { opacity: 0.7 } }, { children: column.header }))] }), i)); }) })) }))] })) })),
|
144
|
-
labels: labelColumn && ((_b = labelColumn.value(item)) === null || _b === void 0 ? void 0 : _b.map(function (label) { return ({ label: label }); })),
|
145
|
-
};
|
146
|
-
if (!hasDescription && cardColumns.length === 0 && countColumns.length === 0) {
|
147
|
-
pageTableCard.cardBody = undefined;
|
148
|
-
}
|
149
|
-
return pageTableCard;
|
150
|
-
};
|
151
|
-
}, [
|
152
|
-
cardColumns,
|
153
|
-
countColumns,
|
154
|
-
descriptionColumn,
|
155
|
-
labelColumn,
|
156
|
-
nameColumn,
|
157
|
-
subtitleColumn,
|
158
|
-
keyFn,
|
159
|
-
]);
|
160
|
-
}
|
161
|
-
exports.useColumnsToTableCardFn = useColumnsToTableCardFn;
|
@@ -1,38 +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.PageTableCards = 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 PageGrid_1 = require("../components/PageGrid");
|
19
|
-
var PageTableCard_1 = require("./PageTableCard");
|
20
|
-
function PageTableCards(props) {
|
21
|
-
var keyFn = props.keyFn, items = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, showSelect = props.showSelect, defaultCardSubtitle = props.defaultSubtitle;
|
22
|
-
var itemToCardFn = (0, PageTableCard_1.useColumnsToTableCardFn)(tableColumns, keyFn);
|
23
|
-
var catalogCards = (0, react_1.useMemo)(function () {
|
24
|
-
return ((0, jsx_runtime_1.jsx)(PageGrid_1.PageGrid, __assign({ size: 400 }, { children: items === null || items === void 0 ? void 0 : items.map(function (item) { return ((0, jsx_runtime_1.jsx)(PageTableCard_1.PageTableCard, { item: item, itemToCardFn: itemToCardFn, isSelected: isSelected, selectItem: selectItem, unselectItem: unselectItem, itemActions: rowActions, showSelect: showSelect, defaultCardSubtitle: defaultCardSubtitle }, keyFn(item))); }) })));
|
25
|
-
}, [
|
26
|
-
items,
|
27
|
-
keyFn,
|
28
|
-
itemToCardFn,
|
29
|
-
isSelected,
|
30
|
-
selectItem,
|
31
|
-
unselectItem,
|
32
|
-
rowActions,
|
33
|
-
showSelect,
|
34
|
-
defaultCardSubtitle,
|
35
|
-
]);
|
36
|
-
return (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ style: { flexGrow: 1 } }, { children: catalogCards }));
|
37
|
-
}
|
38
|
-
exports.PageTableCards = PageTableCards;
|