@ansible/ansible-ui-framework 0.0.603 → 0.0.605
Sign up to get free protection for your applications and to get access to all the features.
- 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) {
|