@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.
@@ -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");
@@ -6,5 +6,4 @@ export declare function SinceCell(props: {
6
6
  value: string | number | undefined | null;
7
7
  author?: string;
8
8
  onClick?: () => void;
9
- t?: (t: string) => string;
10
9
  }): JSX.Element;
@@ -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 t = props.t;
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 _a = __read((0, react_1.useState)(null), 2), dateTime = _a[0], setDateTime = _a[1];
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", t('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 }))] })));
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) {
@@ -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>[], t?: (t: string) => string): {
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>[];
@@ -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
- function useColumnModal(columns, t) {
55
- t = t ? t : function (t) { return t; };
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: "Manage columns",
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: t('Close') }), "save"),
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 t = (0, react_i18next_1.useTranslation)().t;
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: t('Show less'), collapsedText: t("".concat((value === null || value === void 0 ? void 0 : value.length) - 5, " more")) }, { 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 () {
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
- 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: "Please fix validation errors.", isInline: true, style: { width: '100%', paddingLeft: isMd ? 190 : undefined }, variant: "danger" })) }));
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;
@@ -18,7 +18,6 @@ export interface PageHeaderProps {
18
18
  controls?: ReactNode;
19
19
  headerActions?: ReactNode;
20
20
  footer?: ReactNode;
21
- t?: (t: string) => string;
22
21
  }
23
22
  /**
24
23
  * PageHeader enables the responsive layout of the header.
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 styled_components_1 = __importDefault(require("styled-components"));
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 t = props.t;
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: t('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: {
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 t = props.t;
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 _a = __read((0, react_1.useState)({
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 = _a[0], setScroll = _a[1];
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: t('No results found') })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: t('No results match this filter criteria. Clear all filters and try again.') }), 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: t('Clear all filters') })) }))] })))] })));
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: "Select filter" }, { 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) {
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 : 'Select none' }), "select-none"));
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 t = (0, react_i18next_1.useTranslation)().t;
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 : t('More information`'), "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 }) })) })));
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) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ansible/ansible-ui-framework",
3
3
  "description": "A framework for building applications using PatternFly.",
4
- "version": "0.0.604",
4
+ "version": "0.0.606",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
7
7
  "type": "git",