@ansible/ansible-ui-framework 0.0.379 → 0.0.380
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageForm/Inputs/FormGroupSelect.d.ts +1 -1
- package/cjs/PageForm/Inputs/FormGroupSelect.js +1 -1
- package/cjs/PageForm/Inputs/FormGroupSelectOption.d.ts +5 -0
- package/cjs/PageForm/Inputs/FormGroupSelectOption.js +5 -0
- package/cjs/PageForm/Inputs/FormGroupTextArea.d.ts +1 -1
- package/cjs/PageForm/Inputs/FormGroupTextArea.js +1 -1
- package/cjs/PageForm/Inputs/FormGroupTextInput.d.ts +1 -1
- package/cjs/PageForm/Inputs/FormGroupTextInput.js +2 -2
- package/cjs/PageForm/Inputs/PageFormTextInput.js +5 -1
- package/cjs/PageForm/PageFormSchema.d.ts +12 -0
- package/cjs/PageForm/PageFormSchema.js +66 -2
- package/package.json +1 -1
@@ -4,5 +4,5 @@ import { PageFormGroupProps } from './PageFormGroup';
|
|
4
4
|
export type FormGroupSelectProps = Pick<SelectProps, 'footer' | 'isCreatable' | 'isGrouped' | 'onSelect' | 'placeholder' | 'value' | 'isDisabled'> & PageFormGroupProps & {
|
5
5
|
isReadOnly?: boolean;
|
6
6
|
};
|
7
|
-
/**
|
7
|
+
/** A PatternFly FormGroup with a PatternFly Select */
|
8
8
|
export declare function FormGroupSelect(props: FormGroupSelectProps): JSX.Element;
|
@@ -32,7 +32,7 @@ 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
34
|
var PageFormGroup_1 = require("./PageFormGroup");
|
35
|
-
/**
|
35
|
+
/** A PatternFly FormGroup with a PatternFly Select */
|
36
36
|
function FormGroupSelect(props) {
|
37
37
|
var children = props.children, helperTextInvalid = props.helperTextInvalid, isReadOnly = props.isReadOnly, onSelect = props.onSelect, value = props.value;
|
38
38
|
var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
|
@@ -11,4 +11,9 @@ export type FormGroupSelectOptionProps<T> = {
|
|
11
11
|
onSelect: (value: T | undefined, event: React.MouseEvent<Element, MouseEvent> | ChangeEvent<Element>) => void;
|
12
12
|
value: T | undefined;
|
13
13
|
} & Omit<FormGroupSelectProps, 'onSelect' | 'value' | 'children'>;
|
14
|
+
/**
|
15
|
+
* A PatternFly FormGroup with a PatternFly Select but using IFormGroupSelectOptions for the options.
|
16
|
+
*
|
17
|
+
* This supports easy grouping and options that have values that are objects and not just strings.
|
18
|
+
*/
|
14
19
|
export declare function FormGroupSelectOption<T>(props: FormGroupSelectOptionProps<T>): JSX.Element;
|
@@ -16,6 +16,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
16
|
var react_core_1 = require("@patternfly/react-core");
|
17
17
|
var react_1 = require("react");
|
18
18
|
var FormGroupSelect_1 = require("./FormGroupSelect");
|
19
|
+
/**
|
20
|
+
* A PatternFly FormGroup with a PatternFly Select but using IFormGroupSelectOptions for the options.
|
21
|
+
*
|
22
|
+
* This supports easy grouping and options that have values that are objects and not just strings.
|
23
|
+
*/
|
19
24
|
function FormGroupSelectOption(props) {
|
20
25
|
var onSelect = props.onSelect, value = props.value;
|
21
26
|
var onSelectHandler = (0, react_1.useCallback)(function (event, label) {
|
@@ -2,5 +2,5 @@
|
|
2
2
|
import { TextAreaProps } from '@patternfly/react-core';
|
3
3
|
import { PageFormGroupProps } from './PageFormGroup';
|
4
4
|
export type FormGroupTextAreaProps = Pick<TextAreaProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label'> & PageFormGroupProps;
|
5
|
-
/**
|
5
|
+
/** A PatternFly FormGroup with a PatternFly TextArea */
|
6
6
|
export declare function FormGroupTextArea(props: FormGroupTextAreaProps): JSX.Element;
|
@@ -33,7 +33,7 @@ var react_core_1 = require("@patternfly/react-core");
|
|
33
33
|
var react_icons_1 = require("@patternfly/react-icons");
|
34
34
|
var react_1 = require("react");
|
35
35
|
var PageFormGroup_1 = require("./PageFormGroup");
|
36
|
-
/**
|
36
|
+
/** A PatternFly FormGroup with a PatternFly TextArea */
|
37
37
|
function FormGroupTextArea(props) {
|
38
38
|
var _a = __read((0, react_1.useState)(false), 2), showSecret = _a[0], setShowSecret = _a[1];
|
39
39
|
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextArea, __assign({}, props, { id: props.id, label: undefined, "aria-describedby": "".concat(props.id, "-form-group"), validated: props.helperTextInvalid ? 'error' : undefined })), props.type === 'password' && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () { return setShowSecret(!showSecret); }, isDisabled: props.isDisabled || props.isReadOnly }, { children: showSecret ? (0, jsx_runtime_1.jsx)(react_icons_1.EyeIcon, {}) : (0, jsx_runtime_1.jsx)(react_icons_1.EyeSlashIcon, {}) })))] }) })));
|
@@ -2,5 +2,5 @@
|
|
2
2
|
import { TextInputProps } from '@patternfly/react-core';
|
3
3
|
import { PageFormGroupProps } from './PageFormGroup';
|
4
4
|
export type FormGroupTextInputProps = Pick<TextInputProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label'> & PageFormGroupProps;
|
5
|
-
/**
|
5
|
+
/** A PatternFly FormGroup with a PatternFly TextInput */
|
6
6
|
export declare function FormGroupTextInput(props: FormGroupTextInputProps): JSX.Element;
|
@@ -33,9 +33,9 @@ var react_core_1 = require("@patternfly/react-core");
|
|
33
33
|
var react_icons_1 = require("@patternfly/react-icons");
|
34
34
|
var react_1 = require("react");
|
35
35
|
var PageFormGroup_1 = require("./PageFormGroup");
|
36
|
-
/**
|
36
|
+
/** A PatternFly FormGroup with a PatternFly TextInput */
|
37
37
|
function FormGroupTextInput(props) {
|
38
38
|
var _a = __read((0, react_1.useState)(false), 2), showSecret = _a[0], setShowSecret = _a[1];
|
39
|
-
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInput, __assign({}, props, { id: props.id, label: undefined, "aria-describedby": "".concat(props.id, "-form-group"), validated: props.helperTextInvalid ? 'error' : undefined })), props.type === 'password' && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () { return setShowSecret(!showSecret); }, isDisabled: props.isDisabled || props.isReadOnly }, { children: showSecret ? (0, jsx_runtime_1.jsx)(react_icons_1.EyeIcon, {}) : (0, jsx_runtime_1.jsx)(react_icons_1.EyeSlashIcon, {}) })))] }) })));
|
39
|
+
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInput, __assign({}, props, { id: props.id, label: undefined, "aria-describedby": "".concat(props.id, "-form-group"), validated: props.helperTextInvalid ? 'error' : undefined, type: props.type === 'password' ? (showSecret ? 'text' : 'password') : props.type })), props.type === 'password' && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () { return setShowSecret(!showSecret); }, isDisabled: props.isDisabled || props.isReadOnly }, { children: showSecret ? (0, jsx_runtime_1.jsx)(react_icons_1.EyeIcon, {}) : (0, jsx_runtime_1.jsx)(react_icons_1.EyeSlashIcon, {}) })))] }) })));
|
40
40
|
}
|
41
41
|
exports.FormGroupTextInput = FormGroupTextInput;
|
@@ -20,7 +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)(FormGroupTextInput_1.FormGroupTextInput, __assign({}, props, { value: value, onChange: onChange, helperTextInvalid: error === null || error === void 0 ? void 0 : error.
|
23
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (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 })) }));
|
24
28
|
} }));
|
25
29
|
}
|
26
30
|
exports.PageFormTextInput = PageFormTextInput;
|
@@ -1,6 +1,18 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
+
import { StringOptions } from '@sinclair/typebox';
|
2
3
|
import { JSONSchema6 } from 'json-schema';
|
4
|
+
import { IFormGroupSelectOption } from './Inputs/FormGroupSelectOption';
|
3
5
|
export declare function PageFormSchema(props: {
|
4
6
|
schema: JSONSchema6;
|
5
7
|
base?: string;
|
6
8
|
}): JSX.Element;
|
9
|
+
export type TypeTextInputOptions = StringOptions<string> & {
|
10
|
+
placeholder?: string;
|
11
|
+
};
|
12
|
+
export declare function TypeTextInput(options: TypeTextInputOptions): import("@sinclair/typebox").TString<string>;
|
13
|
+
export declare function TypeSecretInput(options: TypeTextInputOptions): import("@sinclair/typebox").TString<string>;
|
14
|
+
export type TypeSelectOptions<T> = StringOptions<string> & {
|
15
|
+
placeholder?: string;
|
16
|
+
options: IFormGroupSelectOption<T>[];
|
17
|
+
};
|
18
|
+
export declare function TypeSelect<T extends string | number>(options: TypeSelectOptions<T>): import("@sinclair/typebox").TString<string>;
|
@@ -1,7 +1,19 @@
|
|
1
1
|
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
2
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.PageFormSchema = void 0;
|
14
|
+
exports.TypeSelect = exports.TypeSecretInput = exports.TypeTextInput = exports.PageFormSchema = void 0;
|
4
15
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var typebox_1 = require("@sinclair/typebox");
|
5
17
|
var PageFormSelectOption_1 = require("./Inputs/PageFormSelectOption");
|
6
18
|
var PageFormSlider_1 = require("./Inputs/PageFormSlider");
|
7
19
|
var PageFormSwitch_1 = require("./Inputs/PageFormSwitch");
|
@@ -9,6 +21,7 @@ var PageFormTextArea_1 = require("./Inputs/PageFormTextArea");
|
|
9
21
|
var PageFormTextInput_1 = require("./Inputs/PageFormTextInput");
|
10
22
|
var PageFormTextSelect_1 = require("./Inputs/PageFormTextSelect");
|
11
23
|
function PageFormSchema(props) {
|
24
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
12
25
|
var schema = props.schema;
|
13
26
|
var base = props.base ? props.base + '.' : '';
|
14
27
|
var p = [];
|
@@ -21,9 +34,48 @@ function PageFormSchema(props) {
|
|
21
34
|
}
|
22
35
|
var title = typeof property.title === 'string' ? property.title : propertyName;
|
23
36
|
var description = typeof property.description === 'string' ? property.description : undefined;
|
37
|
+
var required = Array.isArray(schema.required) && schema.required.includes(propertyName);
|
38
|
+
var prop = property;
|
39
|
+
prop.errorMessage = (_a = prop.errorMessage) !== null && _a !== void 0 ? _a : {};
|
40
|
+
switch (property.type) {
|
41
|
+
case 'string':
|
42
|
+
switch (prop.variant) {
|
43
|
+
case 'select':
|
44
|
+
{
|
45
|
+
if (!prop.placeholder) {
|
46
|
+
prop.placeholder = "Enter ".concat(((_b = property.title) !== null && _b !== void 0 ? _b : propertyName).toLowerCase());
|
47
|
+
}
|
48
|
+
if (!prop.enum) {
|
49
|
+
prop.enum = (_c = prop.options) === null || _c === void 0 ? void 0 : _c.map(function (option) { return option.value; });
|
50
|
+
}
|
51
|
+
}
|
52
|
+
break;
|
53
|
+
default:
|
54
|
+
{
|
55
|
+
if (!prop.placeholder) {
|
56
|
+
prop.placeholder = "Enter ".concat(((_d = property.title) !== null && _d !== void 0 ? _d : propertyName).toLowerCase());
|
57
|
+
}
|
58
|
+
if (property.minLength) {
|
59
|
+
if (!prop.errorMessage.minLength) {
|
60
|
+
prop.errorMessage.minLength = "".concat((_e = property.title) !== null && _e !== void 0 ? _e : propertyName, " must be at least ").concat(property.minLength, " characters.");
|
61
|
+
}
|
62
|
+
}
|
63
|
+
else if (required) {
|
64
|
+
property.minLength = 1;
|
65
|
+
prop.errorMessage.minLength = "".concat((_f = property.title) !== null && _f !== void 0 ? _f : propertyName, " is required");
|
66
|
+
}
|
67
|
+
if (property.maxLength) {
|
68
|
+
if (!prop.errorMessage.maxLength) {
|
69
|
+
prop.errorMessage.maxLength = "".concat((_g = property.title) !== null && _g !== void 0 ? _g : propertyName, " must be less than ").concat(property.maxLength, " characters.");
|
70
|
+
}
|
71
|
+
}
|
72
|
+
}
|
73
|
+
break;
|
74
|
+
}
|
75
|
+
break;
|
76
|
+
}
|
24
77
|
var placeholder = property.placeholder;
|
25
78
|
placeholder = typeof placeholder === 'string' ? placeholder : undefined;
|
26
|
-
var required = Array.isArray(schema.required) && schema.required.includes(propertyName);
|
27
79
|
switch (property.type) {
|
28
80
|
case 'string': {
|
29
81
|
switch (property.variant) {
|
@@ -66,3 +118,15 @@ function PageFormSchema(props) {
|
|
66
118
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: p });
|
67
119
|
}
|
68
120
|
exports.PageFormSchema = PageFormSchema;
|
121
|
+
function TypeTextInput(options) {
|
122
|
+
return typebox_1.Type.String(__assign({}, options));
|
123
|
+
}
|
124
|
+
exports.TypeTextInput = TypeTextInput;
|
125
|
+
function TypeSecretInput(options) {
|
126
|
+
return typebox_1.Type.String(__assign(__assign({}, options), { variant: 'secret' }));
|
127
|
+
}
|
128
|
+
exports.TypeSecretInput = TypeSecretInput;
|
129
|
+
function TypeSelect(options) {
|
130
|
+
return typebox_1.Type.String(__assign(__assign({}, options), { variant: 'select' }));
|
131
|
+
}
|
132
|
+
exports.TypeSelect = TypeSelect;
|