@ansible/ansible-ui-framework 0.0.604 → 0.0.606
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/PageCells/CapacityCell.js +1 -0
- package/cjs/PageCells/DateTimeCell.d.ts +0 -1
- package/cjs/PageCells/DateTimeCell.js +4 -4
- package/cjs/PageCells/ElapsedTimeCell.js +1 -0
- package/cjs/PageColumnModal.d.ts +1 -1
- package/cjs/PageColumnModal.js +5 -4
- package/cjs/PageForm/Inputs/PageFormMultiInput.js +19 -3
- package/cjs/PageForm/PageFormAlerts.js +19 -1
- package/cjs/PageHeader.d.ts +0 -1
- package/cjs/PageHeader.js +20 -4
- package/cjs/PageTable/PageTable.d.ts +0 -1
- package/cjs/PageTable/PageTable.js +5 -5
- package/cjs/PageTable/PageToolbar.js +2 -2
- package/cjs/Settings.js +1 -0
- package/cjs/components/BulkSelector.js +4 -2
- package/cjs/components/StandardPopover.js +19 -3
- package/cjs/useFrameworkTranslations.d.ts +11 -0
- package/cjs/useFrameworkTranslations.js +11 -0
- package/package.json +1 -1
@@ -29,6 +29,7 @@ var __read = (this && this.__read) || function (o, n) {
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
30
30
|
exports.CapacityCell = void 0;
|
31
31
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
32
|
+
/* eslint-disable i18next/no-literal-string */
|
32
33
|
var react_core_1 = require("@patternfly/react-core");
|
33
34
|
var Settings_1 = require("../Settings");
|
34
35
|
var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
|
@@ -32,16 +32,16 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
32
32
|
var react_core_1 = require("@patternfly/react-core");
|
33
33
|
var luxon_1 = require("luxon");
|
34
34
|
var react_1 = require("react");
|
35
|
+
var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
|
35
36
|
function DateCell(props) {
|
36
37
|
var date = new Date(props.value);
|
37
38
|
return ((0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: date.toLocaleDateString() }), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: date.toLocaleTimeString() })] })));
|
38
39
|
}
|
39
40
|
exports.DateCell = DateCell;
|
40
41
|
function SinceCell(props) {
|
41
|
-
var
|
42
|
-
t = t ? t : function (t) { return t; };
|
42
|
+
var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
|
43
43
|
var author = props.author, onClick = props.onClick;
|
44
|
-
var
|
44
|
+
var _b = __read((0, react_1.useState)(null), 2), dateTime = _b[0], setDateTime = _b[1];
|
45
45
|
(0, react_1.useEffect)(function () {
|
46
46
|
if (typeof props.value === 'number') {
|
47
47
|
setDateTime(luxon_1.DateTime.fromMillis(props.value).toRelative());
|
@@ -61,6 +61,6 @@ function SinceCell(props) {
|
|
61
61
|
}, [props.value]);
|
62
62
|
if (props.value === undefined)
|
63
63
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
64
|
-
return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { whiteSpace: 'nowrap' } }, { children: [dateTime, author && (0, jsx_runtime_1.jsxs)("span", { children: ["\u00A0",
|
64
|
+
return ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { whiteSpace: 'nowrap' } }, { children: [dateTime, author && (0, jsx_runtime_1.jsxs)("span", { children: ["\u00A0", translations.by, "\u00A0"] }), onClick ? ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true, onClick: onClick }, { children: author }))) : ((0, jsx_runtime_1.jsx)("span", { children: author }))] })));
|
65
65
|
}
|
66
66
|
exports.SinceCell = SinceCell;
|
@@ -18,6 +18,7 @@ var __read = (this && this.__read) || function (o, n) {
|
|
18
18
|
Object.defineProperty(exports, "__esModule", { value: true });
|
19
19
|
exports.ElapsedTimeCell = void 0;
|
20
20
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
21
|
+
/* eslint-disable i18next/no-literal-string */
|
21
22
|
var react_core_1 = require("@patternfly/react-core");
|
22
23
|
var react_1 = require("react");
|
23
24
|
function ElapsedTimeCell(props) {
|
package/cjs/PageColumnModal.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { ITableColumn } from './PageTable/PageTable';
|
3
|
-
export declare function useColumnModal<T extends object>(columns: ITableColumn<T>[]
|
3
|
+
export declare function useColumnModal<T extends object>(columns: ITableColumn<T>[]): {
|
4
4
|
openColumnModal: () => void;
|
5
5
|
columnModal: JSX.Element;
|
6
6
|
managedColumns: ITableColumn<T>[];
|
package/cjs/PageColumnModal.js
CHANGED
@@ -51,13 +51,14 @@ exports.useColumnModal = void 0;
|
|
51
51
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
52
52
|
var react_core_1 = require("@patternfly/react-core");
|
53
53
|
var react_1 = require("react");
|
54
|
-
|
55
|
-
|
54
|
+
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
55
|
+
function useColumnModal(columns) {
|
56
56
|
var _a = __read((0, react_1.useState)(false), 2), columnModalOpen = _a[0], setColumnModalOpen = _a[1];
|
57
57
|
var openColumnModal = (0, react_1.useCallback)(function () {
|
58
58
|
setColumnModalOpen(true);
|
59
59
|
}, []);
|
60
60
|
var _b = __read((0, react_1.useState)(function () { return columns; }), 2), managedColumns = _b[0], setManagedColumns = _b[1];
|
61
|
+
var _c = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _c[0];
|
61
62
|
(0, react_1.useEffect)(function () {
|
62
63
|
setManagedColumns(function (managedColumns) {
|
63
64
|
return managedColumns.map(function (managedColumn) { var _a; return (_a = columns.find(function (column) { return column.header === managedColumn.header; })) !== null && _a !== void 0 ? _a : managedColumn; });
|
@@ -105,7 +106,7 @@ function useColumnModal(columns, t) {
|
|
105
106
|
});
|
106
107
|
}
|
107
108
|
}, []);
|
108
|
-
var columnModal = ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ variant: react_core_1.ModalVariant.medium, title:
|
109
|
+
var columnModal = ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ variant: react_core_1.ModalVariant.medium, title: translations.manageColumns,
|
109
110
|
// description={
|
110
111
|
// <TextContent>
|
111
112
|
// <Text component={TextVariants.p}>Selected categories will be displayed in the table.</Text>
|
@@ -115,7 +116,7 @@ function useColumnModal(columns, t) {
|
|
115
116
|
// </TextContent>
|
116
117
|
// }
|
117
118
|
isOpen: columnModalOpen, onClose: onClose, actions: [
|
118
|
-
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: onClose }, { children:
|
119
|
+
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: onClose }, { children: translations.closeText }), "save"),
|
119
120
|
// <Button key="cancel" variant="link" onClick={onClose}>
|
120
121
|
// Cancel
|
121
122
|
// </Button>,
|
@@ -25,6 +25,22 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
25
25
|
}
|
26
26
|
return t;
|
27
27
|
};
|
28
|
+
var __read = (this && this.__read) || function (o, n) {
|
29
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
30
|
+
if (!m) return o;
|
31
|
+
var i = m.call(o), r, ar = [], e;
|
32
|
+
try {
|
33
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
34
|
+
}
|
35
|
+
catch (error) { e = { error: error }; }
|
36
|
+
finally {
|
37
|
+
try {
|
38
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
39
|
+
}
|
40
|
+
finally { if (e) throw e.error; }
|
41
|
+
}
|
42
|
+
return ar;
|
43
|
+
};
|
28
44
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
29
45
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
30
46
|
};
|
@@ -33,9 +49,9 @@ exports.PageFormMultiInput = void 0;
|
|
33
49
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
34
50
|
var react_core_1 = require("@patternfly/react-core");
|
35
51
|
var react_icons_1 = require("@patternfly/react-icons");
|
36
|
-
var react_i18next_1 = require("react-i18next");
|
37
52
|
var react_hook_form_1 = require("react-hook-form");
|
38
53
|
var styled_components_1 = __importDefault(require("styled-components"));
|
54
|
+
var useFrameworkTranslations_1 = require("../../useFrameworkTranslations");
|
39
55
|
var capitalize_1 = require("../../utils/capitalize");
|
40
56
|
var PageFormGroup_1 = require("./PageFormGroup");
|
41
57
|
var ChipHolder = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --pf-c-form-control--Height: auto;\n background-color: ", ";\n"], ["\n --pf-c-form-control--Height: auto;\n background-color: ", ";\n"])), function (props) {
|
@@ -45,14 +61,14 @@ function PageFormMultiInput(props) {
|
|
45
61
|
var validate = props.validate, selectTitle = props.selectTitle, selectOpen = props.selectOpen, formGroupInputProps = __rest(props, ["validate", "selectTitle", "selectOpen"]);
|
46
62
|
var label = props.label, name = props.name, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern;
|
47
63
|
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, setValue = _a.setValue, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
|
48
|
-
var
|
64
|
+
var _c = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _c[0];
|
49
65
|
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, shouldUnregister: true, render: function (_a) {
|
50
66
|
var _b;
|
51
67
|
var _c = _a.field, onChange = _c.onChange, value = _c.value, error = _a.fieldState.error;
|
52
68
|
var removeItem = function (item) {
|
53
69
|
onChange(value.filter(function (i) { return i.id !== item.id; }));
|
54
70
|
};
|
55
|
-
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, formGroupInputProps, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message) }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(ChipHolder, __assign({ isDisabled: isSubmitting, className: "pf-c-form-control" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ChipGroup, __assign({ numChips: 5, expandedText:
|
71
|
+
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, formGroupInputProps, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message) }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(ChipHolder, __assign({ isDisabled: isSubmitting, className: "pf-c-form-control" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ChipGroup, __assign({ numChips: 5, expandedText: translations.showLess, collapsedText: translations.countMore.replace('{count}', "".concat((value === null || value === void 0 ? void 0 : value.length) - 5)) }, { children: value === null || value === void 0 ? void 0 : value.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.Chip, __assign({ onClick: function () { return removeItem(item); } }, { children: item.name }), item.id)); }) })) })), selectTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () {
|
56
72
|
return selectOpen === null || selectOpen === void 0 ? void 0 : selectOpen(function (items) {
|
57
73
|
setValue(name, items, {
|
58
74
|
shouldValidate: true,
|
@@ -1,4 +1,20 @@
|
|
1
1
|
"use strict";
|
2
|
+
var __read = (this && this.__read) || function (o, n) {
|
3
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
4
|
+
if (!m) return o;
|
5
|
+
var i = m.call(o), r, ar = [], e;
|
6
|
+
try {
|
7
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
8
|
+
}
|
9
|
+
catch (error) { e = { error: error }; }
|
10
|
+
finally {
|
11
|
+
try {
|
12
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
13
|
+
}
|
14
|
+
finally { if (e) throw e.error; }
|
15
|
+
}
|
16
|
+
return ar;
|
17
|
+
};
|
2
18
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
19
|
exports.PageFormAlerts = void 0;
|
4
20
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
@@ -6,9 +22,11 @@ var react_core_1 = require("@patternfly/react-core");
|
|
6
22
|
var react_1 = require("react");
|
7
23
|
var react_hook_form_1 = require("react-hook-form");
|
8
24
|
var useBreakPoint_1 = require("../components/useBreakPoint");
|
25
|
+
var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
|
9
26
|
function PageFormAlerts() {
|
10
27
|
var errors = (0, react_hook_form_1.useFormState)().errors;
|
11
28
|
var isMd = (0, useBreakPoint_1.useBreakpoint)('md');
|
12
|
-
|
29
|
+
var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
|
30
|
+
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: errors && Object.keys(errors).length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { title: translations.pleaseFixValidationErrors, isInline: true, style: { width: '100%', paddingLeft: isMd ? 190 : undefined }, variant: "danger" })) }));
|
13
31
|
}
|
14
32
|
exports.PageFormAlerts = PageFormAlerts;
|
package/cjs/PageHeader.d.ts
CHANGED
package/cjs/PageHeader.js
CHANGED
@@ -14,6 +14,22 @@ var __assign = (this && this.__assign) || function () {
|
|
14
14
|
};
|
15
15
|
return __assign.apply(this, arguments);
|
16
16
|
};
|
17
|
+
var __read = (this && this.__read) || function (o, n) {
|
18
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
19
|
+
if (!m) return o;
|
20
|
+
var i = m.call(o), r, ar = [], e;
|
21
|
+
try {
|
22
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
23
|
+
}
|
24
|
+
catch (error) { e = { error: error }; }
|
25
|
+
finally {
|
26
|
+
try {
|
27
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
28
|
+
}
|
29
|
+
finally { if (e) throw e.error; }
|
30
|
+
}
|
31
|
+
return ar;
|
32
|
+
};
|
17
33
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
18
34
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
19
35
|
};
|
@@ -24,11 +40,12 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
24
40
|
var react_core_1 = require("@patternfly/react-core");
|
25
41
|
var react_icons_1 = require("@patternfly/react-icons");
|
26
42
|
var react_2 = require("react");
|
43
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
27
44
|
var useBreakPoint_1 = require("./components/useBreakPoint");
|
28
45
|
var usePageNavigate_1 = require("./components/usePageNavigate");
|
29
46
|
var PageAlerts_1 = require("./PageAlerts");
|
30
47
|
require("./PageFramework.css");
|
31
|
-
var
|
48
|
+
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
32
49
|
var PageAlertsDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-bottom: thin solid rgba(0, 0, 0, 0.12);\n"], ["\n border-bottom: thin solid rgba(0, 0, 0, 0.12);\n"])));
|
33
50
|
function Breadcrumbs(props) {
|
34
51
|
var navigate = (0, usePageNavigate_1.usePageNavigate)();
|
@@ -72,12 +89,11 @@ function PageHeader(props) {
|
|
72
89
|
var lg = (0, useBreakPoint_1.useBreakpoint)('lg');
|
73
90
|
var xl = (0, useBreakPoint_1.useBreakpoint)('xl');
|
74
91
|
var isMdOrLarger = (0, useBreakPoint_1.useBreakpoint)('md');
|
75
|
-
var
|
76
|
-
t = t ? t : function (t) { return t; };
|
92
|
+
var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
|
77
93
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [navigation && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, className: "border-top dark-1", style: { paddingLeft: 0, paddingTop: 0, paddingBottom: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, __assign({ direction: { default: 'row' }, flexWrap: { default: 'nowrap' }, style: { maxWidth: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageNavigation, __assign({ style: { paddingTop: 0, flexShrink: 1, flexGrow: 1 } }, { children: navigation })) })) }))), (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, className: "border-top border-bottom dark-3", style: {
|
78
94
|
paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
|
79
95
|
paddingBottom: xl ? 16 : 12,
|
80
|
-
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ flexWrap: { default: 'nowrap' }, alignItems: { default: 'alignItemsStretch' } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(Breadcrumbs, { breadcrumbs: breadcrumbs, style: { paddingBottom: lg ? 6 : 4 } })), title ? (props.titleHelp ? ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: props.titleHelpTitle, bodyContent: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [typeof props.titleHelp === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: props.titleHelp })) : (props.titleHelp.map(function (help, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: help }, index)); })), props.titleDocLink && ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), variant: "link", onClick: function () { return window.open(props.titleDocLink, '_blank'); }, isInline: true }, { children:
|
96
|
+
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ flexWrap: { default: 'nowrap' }, alignItems: { default: 'alignItemsStretch' } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(Breadcrumbs, { breadcrumbs: breadcrumbs, style: { paddingBottom: lg ? 6 : 4 } })), title ? (props.titleHelp ? ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: props.titleHelpTitle, bodyContent: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [typeof props.titleHelp === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: props.titleHelp })) : (props.titleHelp.map(function (help, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: help }, index)); })), props.titleDocLink && ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), variant: "link", onClick: function () { return window.open(props.titleDocLink, '_blank'); }, isInline: true }, { children: translations.documentation })) }))] })), position: "bottom-start", removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: [title, (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", style: {
|
81
97
|
padding: 0,
|
82
98
|
marginTop: 1,
|
83
99
|
marginLeft: 8,
|
@@ -40,7 +40,6 @@ export type PageTableProps<T extends object> = {
|
|
40
40
|
emptyStateButtonIcon?: React.ReactNode;
|
41
41
|
emptyStateButtonText?: string;
|
42
42
|
emptyStateButtonClick?: () => void;
|
43
|
-
t?: (t: string) => string;
|
44
43
|
showSelect?: boolean;
|
45
44
|
disableTableView?: boolean;
|
46
45
|
disableListView?: boolean;
|
@@ -47,6 +47,7 @@ var LabelsCell_1 = require("../PageCells/LabelsCell");
|
|
47
47
|
var TextCell_1 = require("../PageCells/TextCell");
|
48
48
|
var PageColumnModal_1 = require("../PageColumnModal");
|
49
49
|
var Settings_1 = require("../Settings");
|
50
|
+
var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
|
50
51
|
var PagePagination_1 = require("./PagePagination");
|
51
52
|
var PageTableCards_1 = require("./PageTableCards");
|
52
53
|
var PageTableList_1 = require("./PageTableList");
|
@@ -107,18 +108,17 @@ function PageTable(props) {
|
|
107
108
|
exports.PageTable = PageTable;
|
108
109
|
function PageTableView(props) {
|
109
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;
|
110
|
-
var
|
111
|
-
t = t ? t : function (t) { return t; };
|
111
|
+
var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
|
112
112
|
var showSelect = props.showSelect ||
|
113
113
|
(toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
|
114
114
|
undefined;
|
115
115
|
var containerRef = (0, react_1.useRef)(null);
|
116
|
-
var
|
116
|
+
var _b = __read((0, react_1.useState)({
|
117
117
|
left: 0,
|
118
118
|
right: 0,
|
119
119
|
top: 0,
|
120
120
|
bottom: 0,
|
121
|
-
}), 2), scroll =
|
121
|
+
}), 2), scroll = _b[0], setScroll = _b[1];
|
122
122
|
var updateScroll = (0, react_1.useCallback)(function (div) {
|
123
123
|
if (!div)
|
124
124
|
return;
|
@@ -137,7 +137,7 @@ function PageTableView(props) {
|
|
137
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
138
|
: pageItems === undefined
|
139
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:
|
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
141
|
}
|
142
142
|
function TableHead(props) {
|
143
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;
|
@@ -50,6 +50,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
50
50
|
var react_core_1 = require("@patternfly/react-core");
|
51
51
|
var react_icons_1 = require("@patternfly/react-icons");
|
52
52
|
var react_1 = require("react");
|
53
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
53
54
|
var BulkSelector_1 = require("../components/BulkSelector");
|
54
55
|
var useBreakPoint_1 = require("../components/useBreakPoint");
|
55
56
|
var PageActions_1 = require("../PageActions/PageActions");
|
@@ -57,7 +58,6 @@ var PageActionType_1 = require("../PageActions/PageActionType");
|
|
57
58
|
var FormGroupSelect_1 = require("../PageForm/Inputs/FormGroupSelect");
|
58
59
|
var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
|
59
60
|
var PageTableViewType_1 = require("./PageTableViewType");
|
60
|
-
var styled_components_1 = __importDefault(require("styled-components"));
|
61
61
|
require("./PageToolbar.css");
|
62
62
|
var ToolbarGroupsDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
|
63
63
|
var SelectionSpan = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n opacity: 0.7;\n"], ["\n opacity: 0.7;\n"])));
|
@@ -118,7 +118,7 @@ function PageTableToolbar(props) {
|
|
118
118
|
paddingBottom: sm ? undefined : 8,
|
119
119
|
paddingTop: sm ? undefined : 8,
|
120
120
|
borderBottom: bottomBorder ? 'thin solid var(--pf-global--BorderColor--100)' : undefined,
|
121
|
-
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter, placeholderText: "
|
121
|
+
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter, placeholderText: "" }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { id: "filter-input", filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
|
122
122
|
var _a;
|
123
123
|
var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
|
124
124
|
if (!values)
|
package/cjs/Settings.js
CHANGED
@@ -29,6 +29,7 @@ var __read = (this && this.__read) || function (o, n) {
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
30
30
|
exports.SettingsDialog = exports.useSettingsDialog = exports.SettingsProvider = exports.useSettings = exports.SettingsContext = void 0;
|
31
31
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
32
|
+
/* eslint-disable i18next/no-literal-string */
|
32
33
|
var react_core_1 = require("@patternfly/react-core");
|
33
34
|
var react_1 = require("react");
|
34
35
|
var PageDialog_1 = require("./PageDialog");
|
@@ -31,10 +31,12 @@ exports.BulkSelector = void 0;
|
|
31
31
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
32
32
|
var react_core_1 = require("@patternfly/react-core");
|
33
33
|
var react_1 = require("react");
|
34
|
+
var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
|
34
35
|
var useBreakPoint_1 = require("./useBreakPoint");
|
35
36
|
function BulkSelector(props) {
|
36
37
|
var _a = __read((0, react_1.useState)(false), 2), isOpen = _a[0], setIsOpen = _a[1];
|
37
38
|
var isSmallOrLarger = (0, useBreakPoint_1.useBreakpoint)('sm');
|
39
|
+
var _b = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _b[0];
|
38
40
|
var pageItems = props.pageItems, selectedItems = props.selectedItems, selectItems = props.selectItems, unselectAll = props.unselectAll;
|
39
41
|
var allPageItemsSelected = props.itemCount !== undefined &&
|
40
42
|
props.itemCount > 0 &&
|
@@ -74,8 +76,8 @@ function BulkSelector(props) {
|
|
74
76
|
return ((0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ id: "select-none", onClick: function () {
|
75
77
|
unselectAll === null || unselectAll === void 0 ? void 0 : unselectAll();
|
76
78
|
setIsOpen(false);
|
77
|
-
} }, { children: (_a = props.selectNoneText) !== null && _a !== void 0 ? _a :
|
78
|
-
}, [props.selectNoneText, unselectAll]);
|
79
|
+
} }, { children: (_a = props.selectNoneText) !== null && _a !== void 0 ? _a : translations.selectNone }), "select-none"));
|
80
|
+
}, [props.selectNoneText, translations.selectNone, unselectAll]);
|
79
81
|
var selectPageDropdownItem = (0, react_1.useMemo)(function () {
|
80
82
|
var _a;
|
81
83
|
return ((0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, __assign({ id: "select-page", onClick: function () {
|
@@ -25,6 +25,22 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
25
25
|
}
|
26
26
|
return t;
|
27
27
|
};
|
28
|
+
var __read = (this && this.__read) || function (o, n) {
|
29
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
30
|
+
if (!m) return o;
|
31
|
+
var i = m.call(o), r, ar = [], e;
|
32
|
+
try {
|
33
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
34
|
+
}
|
35
|
+
catch (error) { e = { error: error }; }
|
36
|
+
finally {
|
37
|
+
try {
|
38
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
39
|
+
}
|
40
|
+
finally { if (e) throw e.error; }
|
41
|
+
}
|
42
|
+
return ar;
|
43
|
+
};
|
28
44
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
29
45
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
30
46
|
};
|
@@ -33,16 +49,16 @@ exports.StandardPopover = void 0;
|
|
33
49
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
34
50
|
var react_core_1 = require("@patternfly/react-core");
|
35
51
|
var react_icons_1 = require("@patternfly/react-icons");
|
36
|
-
var react_i18next_1 = require("react-i18next");
|
37
52
|
var styled_components_1 = __importDefault(require("styled-components"));
|
53
|
+
var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
|
38
54
|
var PopoverButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: var(--pf-global--spacer--xs);\n margin: -(var(--pf-global--spacer--xs));\n font-size: var(--pf-global--FontSize--sm);\n --pf-c-form__group-label-help--Color: var(--pf-global--Color--200);\n --pf-c-form__group-label-help--hover--Color: var(--pf-global--Color--100);\n"], ["\n padding: var(--pf-global--spacer--xs);\n margin: -(var(--pf-global--spacer--xs));\n font-size: var(--pf-global--FontSize--sm);\n --pf-c-form__group-label-help--Color: var(--pf-global--Color--200);\n --pf-c-form__group-label-help--hover--Color: var(--pf-global--Color--100);\n"])));
|
39
55
|
function StandardPopover(props) {
|
40
56
|
var _a = props.ariaLabel, ariaLabel = _a === void 0 ? '' : _a, content = props.content, header = props.header, _b = props.id, id = _b === void 0 ? '' : _b, _c = props.maxWidth, maxWidth = _c === void 0 ? '' : _c, rest = __rest(props, ["ariaLabel", "content", "header", "id", "maxWidth"]);
|
41
|
-
var
|
57
|
+
var _d = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _d[0];
|
42
58
|
if (!content) {
|
43
59
|
return null;
|
44
60
|
}
|
45
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ bodyContent: content, headerContent: header, hideOnOutsideClick: true, id: id, "data-cy": id, maxWidth: maxWidth }, rest, { children: (0, jsx_runtime_1.jsx)(PopoverButton, __assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel :
|
61
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ bodyContent: content, headerContent: header, hideOnOutsideClick: true, id: id, "data-cy": id, maxWidth: maxWidth }, rest, { children: (0, jsx_runtime_1.jsx)(PopoverButton, __assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : translations.moreInformation, "aria-haspopup": "true", className: "pf-c-form__group-label-help", onClick: function (e) { return e.preventDefault(); }, type: "button" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.HelpIcon, { noVerticalAlign: true }) })) })));
|
46
62
|
}
|
47
63
|
exports.StandardPopover = StandardPopover;
|
48
64
|
var templateObject_1;
|
@@ -13,6 +13,17 @@ export interface IFrameworkTranslations {
|
|
13
13
|
submitText: string;
|
14
14
|
submittingText: string;
|
15
15
|
successText: string;
|
16
|
+
manageColumns: string;
|
17
|
+
moreInformation: string;
|
18
|
+
showLess: string;
|
19
|
+
countMore: string;
|
20
|
+
documentation: string;
|
21
|
+
noResultsFound: string;
|
22
|
+
noResultsMatchCriteria: string;
|
23
|
+
clearAllFilters: string;
|
24
|
+
by: string;
|
25
|
+
selectNone: string;
|
26
|
+
pleaseFixValidationErrors: string;
|
16
27
|
}
|
17
28
|
export declare function FrameworkTranslationsProvider(props: {
|
18
29
|
children: ReactNode;
|
@@ -28,6 +28,17 @@ var defaultTranslations = {
|
|
28
28
|
submitText: 'Submit',
|
29
29
|
submittingText: 'Submitting',
|
30
30
|
successText: 'Success',
|
31
|
+
manageColumns: 'Manage columns',
|
32
|
+
moreInformation: 'More information',
|
33
|
+
showLess: 'Show less',
|
34
|
+
countMore: '{count} more',
|
35
|
+
documentation: 'Documnetation',
|
36
|
+
noResultsFound: 'No results found',
|
37
|
+
noResultsMatchCriteria: 'No results match this filter criteria. Clear all filters and try again.',
|
38
|
+
clearAllFilters: 'Clear all filters',
|
39
|
+
by: 'by',
|
40
|
+
selectNone: 'Select none',
|
41
|
+
pleaseFixValidationErrors: 'Please fix validation errors.',
|
31
42
|
};
|
32
43
|
var FrameworkTranslationsContext = (0, react_1.createContext)([defaultTranslations, function () { return alert('Use FrameworkTranslationsProvider'); }]);
|
33
44
|
function FrameworkTranslationsProvider(props) {
|