@ansible/ansible-ui-framework 0.0.391 → 0.0.393
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/PageForm/Inputs/FormGroupSelect.d.ts +3 -2
- package/cjs/PageForm/Inputs/PageFormTextInput.js +5 -5
- package/cjs/PageForm/PageForm.js +58 -4
- package/cjs/PageForm/PageFormSchema.js +2 -2
- package/cjs/PageTable/PageToolbar.js +1 -1
- package/cjs/Settings.js +4 -4
- package/cjs/components/Details.js +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { SelectProps } from '@patternfly/react-core';
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import { PageFormGroupProps } from './PageFormGroup';
|
|
4
|
-
export type FormGroupSelectProps = Pick<SelectProps, 'footer' | 'isCreatable' | 'isGrouped' | 'onSelect' | '
|
|
4
|
+
export type FormGroupSelectProps = Pick<SelectProps, 'footer' | 'isCreatable' | 'isGrouped' | 'onSelect' | 'placeholderText' | 'value' | 'isDisabled'> & PageFormGroupProps & {
|
|
5
5
|
isReadOnly?: boolean;
|
|
6
|
+
placeholderText: string | React.ReactNode;
|
|
6
7
|
};
|
|
7
8
|
/** A PatternFly FormGroup with a PatternFly Select */
|
|
8
9
|
export declare function FormGroupSelect(props: FormGroupSelectProps): JSX.Element;
|
|
@@ -20,11 +20,11 @@ function PageFormTextInput(props) {
|
|
|
20
20
|
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
|
|
21
21
|
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
|
|
22
22
|
var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
|
|
23
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
return ((0, jsx_runtime_1.jsx)(FormGroupTextInput_1.FormGroupTextInput, __assign({}, props, { value: value, onChange: onChange, helperTextInvalid: (error === null || error === void 0 ? void 0 : error.type) === 'required'
|
|
24
|
+
? typeof props.label === 'string'
|
|
25
|
+
? "".concat(props.label, " is required")
|
|
26
|
+
: 'Required'
|
|
27
|
+
: error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })));
|
|
28
28
|
} }));
|
|
29
29
|
}
|
|
30
30
|
exports.PageFormTextInput = PageFormTextInput;
|
package/cjs/PageForm/PageForm.js
CHANGED
|
@@ -10,6 +10,42 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
14
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
15
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
16
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
17
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
18
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
19
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
23
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
24
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
25
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
26
|
+
function step(op) {
|
|
27
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
28
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
29
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
30
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
31
|
+
switch (op[0]) {
|
|
32
|
+
case 0: case 1: t = op; break;
|
|
33
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
34
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
35
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
36
|
+
default:
|
|
37
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
38
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
39
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
40
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
41
|
+
if (t[2]) _.ops.pop();
|
|
42
|
+
_.trys.pop(); continue;
|
|
43
|
+
}
|
|
44
|
+
op = body.call(thisArg, _);
|
|
45
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
46
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
47
|
+
}
|
|
48
|
+
};
|
|
13
49
|
var __read = (this && this.__read) || function (o, n) {
|
|
14
50
|
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
15
51
|
if (!m) return o;
|
|
@@ -37,6 +73,7 @@ var Scrollable_1 = require("../components/Scrollable");
|
|
|
37
73
|
var useBreakPoint_1 = require("../components/useBreakPoint");
|
|
38
74
|
var Settings_1 = require("../Settings");
|
|
39
75
|
function PageForm(props) {
|
|
76
|
+
var _this = this;
|
|
40
77
|
var schema = props.schema, defaultValue = props.defaultValue;
|
|
41
78
|
var form = (0, react_hook_form_1.useForm)({
|
|
42
79
|
defaultValues: defaultValue !== null && defaultValue !== void 0 ? defaultValue : {},
|
|
@@ -62,10 +99,27 @@ function PageForm(props) {
|
|
|
62
99
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
63
100
|
, __assign({
|
|
64
101
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
65
|
-
onSubmit: handleSubmit(function (data) {
|
|
66
|
-
|
|
67
|
-
return
|
|
68
|
-
|
|
102
|
+
onSubmit: handleSubmit(function (data) { return __awaiter(_this, void 0, void 0, function () {
|
|
103
|
+
var err_1;
|
|
104
|
+
return __generator(this, function (_a) {
|
|
105
|
+
switch (_a.label) {
|
|
106
|
+
case 0:
|
|
107
|
+
setError('');
|
|
108
|
+
_a.label = 1;
|
|
109
|
+
case 1:
|
|
110
|
+
_a.trys.push([1, 3, , 4]);
|
|
111
|
+
return [4 /*yield*/, props.onSubmit(data, setError, setFieldError)];
|
|
112
|
+
case 2:
|
|
113
|
+
_a.sent();
|
|
114
|
+
return [3 /*break*/, 4];
|
|
115
|
+
case 3:
|
|
116
|
+
err_1 = _a.sent();
|
|
117
|
+
setError(err_1 instanceof Error ? err_1.message : 'Unknown error');
|
|
118
|
+
return [3 /*break*/, 4];
|
|
119
|
+
case 4: return [2 /*return*/];
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
}); }), isHorizontal: isHorizontal, style: {
|
|
69
123
|
display: 'flex',
|
|
70
124
|
flexDirection: 'column',
|
|
71
125
|
flexGrow: 1,
|
|
@@ -43,7 +43,7 @@ function PageFormSchema(props) {
|
|
|
43
43
|
case 'select':
|
|
44
44
|
{
|
|
45
45
|
if (!prop.placeholder) {
|
|
46
|
-
prop.placeholder = "
|
|
46
|
+
prop.placeholder = "Select ".concat(((_b = property.title) !== null && _b !== void 0 ? _b : propertyName).toLowerCase());
|
|
47
47
|
}
|
|
48
48
|
if (!prop.enum) {
|
|
49
49
|
prop.enum = (_c = prop.options) === null || _c === void 0 ? void 0 : _c.map(function (option) { return option.value; });
|
|
@@ -82,7 +82,7 @@ function PageFormSchema(props) {
|
|
|
82
82
|
case 'select': {
|
|
83
83
|
if ('options' in property) {
|
|
84
84
|
var formSelectProps = property;
|
|
85
|
-
p.push((0, jsx_runtime_1.jsx)(PageFormSelectOption_1.PageFormSelectOption, { id: base + propertyName, name: base + propertyName, label: title,
|
|
85
|
+
p.push((0, jsx_runtime_1.jsx)(PageFormSelectOption_1.PageFormSelectOption, { id: base + propertyName, name: base + propertyName, label: title, placeholderText: placeholder, isRequired: required, options: formSelectProps.options, footer: formSelectProps.footer, labelHelpTitle: title, labelHelp: description }, base + propertyName));
|
|
86
86
|
}
|
|
87
87
|
else {
|
|
88
88
|
p.push((0, jsx_runtime_1.jsx)(PageFormTextSelect_1.FormTextSelect, { name: base + propertyName, label: title, placeholder: placeholder, required: required, selectTitle: property.selectTitle, selectValue: property.selectValue, selectOpen: property.selectOpen }, base + propertyName));
|
|
@@ -112,7 +112,7 @@ function PageTableToolbar(props) {
|
|
|
112
112
|
paddingBottom: sm ? undefined : 8,
|
|
113
113
|
paddingTop: sm ? undefined : 8,
|
|
114
114
|
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
|
115
|
-
} }, { 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 }, { 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, { filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
|
|
115
|
+
} }, { 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, { filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
|
|
116
116
|
var _a;
|
|
117
117
|
var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
|
|
118
118
|
if (!values)
|
package/cjs/Settings.js
CHANGED
|
@@ -112,12 +112,12 @@ function SettingsDialog(props) {
|
|
|
112
112
|
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: onClose }, { children: translations.closeText }), "close"),
|
|
113
113
|
] }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Form, __assign({ isHorizontal: settings.formLayout === 'horizontal' }, { children: [(0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "theme", label: "Theme", value: (_a = settings.theme) !== null && _a !== void 0 ? _a : 'system', onSelect: function (_, theme) {
|
|
114
114
|
return setSettings(__assign(__assign({}, settings), { theme: theme }));
|
|
115
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "system" }, { children: 'System default' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "light" }, { children: 'Light' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "dark" }, { children: 'Dark' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "table-layout", label: "Table Layout", value: (_b = settings.tableLayout) !== null && _b !== void 0 ? _b : 'comfortable', onSelect: function (_, tableLayout) {
|
|
115
|
+
}, placeholderText: "Select theme" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "system" }, { children: 'System default' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "light" }, { children: 'Light' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "dark" }, { children: 'Dark' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "table-layout", label: "Table Layout", value: (_b = settings.tableLayout) !== null && _b !== void 0 ? _b : 'comfortable', onSelect: function (_, tableLayout) {
|
|
116
116
|
return setSettings(__assign(__assign({}, settings), { tableLayout: tableLayout }));
|
|
117
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "comfortable" }, { children: 'Comfortable' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "compact" }, { children: 'Compact' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-columns", label: "Form Columns", value: (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple', onSelect: function (_, formColumns) {
|
|
117
|
+
}, placeholderText: "Select table layout" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "comfortable" }, { children: 'Comfortable' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "compact" }, { children: 'Compact' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-columns", label: "Form Columns", value: (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple', onSelect: function (_, formColumns) {
|
|
118
118
|
return setSettings(__assign(__assign({}, settings), { formColumns: formColumns }));
|
|
119
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "multiple" }, { children: 'Multiple columns' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "single" }, { children: 'Single column' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-layout", label: "Form Layout", value: (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical', onSelect: function (_, formLayout) {
|
|
119
|
+
}, placeholderText: "Select form columns" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "multiple" }, { children: 'Multiple columns' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "single" }, { children: 'Single column' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-layout", label: "Form Layout", value: (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical', onSelect: function (_, formLayout) {
|
|
120
120
|
return setSettings(__assign(__assign({}, settings), { formLayout: formLayout }));
|
|
121
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: 'Vertical labels' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: 'Horizontal labels' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "borders", label: "Borders", value: settings.borders ? 'true' : 'false', onSelect: function (_, value) { return setSettings(__assign(__assign({}, settings), { borders: value === 'true' })); } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "true" }, { children: 'Yes' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "false" }, { children: 'No' }))] }))] })) })));
|
|
121
|
+
}, placeholderText: "Select form layout" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: 'Vertical labels' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: 'Horizontal labels' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "borders", label: "Borders", value: settings.borders ? 'true' : 'false', onSelect: function (_, value) { return setSettings(__assign(__assign({}, settings), { borders: value === 'true' })); }, placeholderText: "Select borders" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "true" }, { children: 'Yes' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "false" }, { children: 'No' }))] }))] })) })));
|
|
122
122
|
}
|
|
123
123
|
exports.SettingsDialog = SettingsDialog;
|
|
@@ -50,7 +50,7 @@ function Detail(props) {
|
|
|
50
50
|
var _a;
|
|
51
51
|
if (!props.children)
|
|
52
52
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
53
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [props.label && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children:
|
|
53
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [props.label && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: props.label })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: (_a = props.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().split(' ').join('-') }, { children: props.children }))] }));
|
|
54
54
|
}
|
|
55
55
|
exports.Detail = Detail;
|
|
56
56
|
function DetailsSkeleton() {
|