@ansible/ansible-ui-framework 0.0.388 → 0.0.390
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/FormGroupTextArea.js +1 -1
- package/cjs/PageForm/Inputs/FormGroupTextInput.js +1 -1
- package/cjs/PageForm/Inputs/PageFormFileUpload.d.ts +9 -0
- package/cjs/PageForm/Inputs/PageFormFileUpload.js +68 -0
- package/cjs/PageForm/Inputs/PageFormGroup.d.ts +1 -1
- package/cjs/PageForm/Inputs/PageFormGroup.js +2 -1
- package/cjs/PageForm/Inputs/PageFormSelectOption.js +3 -2
- package/cjs/PageForm/PageForm.js +1 -2
- package/package.json +1 -1
|
@@ -48,6 +48,6 @@ var PageFormGroup_1 = require("./PageFormGroup");
|
|
|
48
48
|
function FormGroupTextArea(props) {
|
|
49
49
|
var _a = __read((0, react_1.useState)(false), 2), showSecret = _a[0], setShowSecret = _a[1];
|
|
50
50
|
var _helperTextInvalid = props.helperTextInvalid, textAreaProps = __rest(props, ["helperTextInvalid"]);
|
|
51
|
-
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({}, textAreaProps, { 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, {}) })))] }) })));
|
|
51
|
+
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({}, textAreaProps, { id: props.id, label: undefined, "aria-describedby": props.id ? "".concat(props.id, "-form-group") : undefined, 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, {}) })))] }) })));
|
|
52
52
|
}
|
|
53
53
|
exports.FormGroupTextArea = FormGroupTextArea;
|
|
@@ -48,6 +48,6 @@ var PageFormGroup_1 = require("./PageFormGroup");
|
|
|
48
48
|
function FormGroupTextInput(props) {
|
|
49
49
|
var _a = __read((0, react_1.useState)(false), 2), showSecret = _a[0], setShowSecret = _a[1];
|
|
50
50
|
var _helperTextInvalid = props.helperTextInvalid, textInputProps = __rest(props, ["helperTextInvalid"]);
|
|
51
|
-
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({}, textInputProps, { 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, {}) })))] }) })));
|
|
51
|
+
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({}, textInputProps, { id: props.id, label: undefined, "aria-describedby": props.id ? "".concat(props.id, "-form-group") : undefined, 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, {}) })))] }) })));
|
|
52
52
|
}
|
|
53
53
|
exports.FormGroupTextInput = FormGroupTextInput;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PageFormGroupProps } from './PageFormGroup';
|
|
3
|
+
export type PageFormFileUploadProps = {
|
|
4
|
+
name: string;
|
|
5
|
+
isReadOnly?: boolean;
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
} & PageFormGroupProps;
|
|
8
|
+
/** PatternFly Select wrapper for use with react-hook-form */
|
|
9
|
+
export declare function PageFormFileUpload(props: PageFormFileUploadProps): JSX.Element;
|
|
@@ -0,0 +1,68 @@
|
|
|
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
|
+
};
|
|
13
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
14
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
15
|
+
if (!m) return o;
|
|
16
|
+
var i = m.call(o), r, ar = [], e;
|
|
17
|
+
try {
|
|
18
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
19
|
+
}
|
|
20
|
+
catch (error) { e = { error: error }; }
|
|
21
|
+
finally {
|
|
22
|
+
try {
|
|
23
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
24
|
+
}
|
|
25
|
+
finally { if (e) throw e.error; }
|
|
26
|
+
}
|
|
27
|
+
return ar;
|
|
28
|
+
};
|
|
29
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
+
exports.PageFormFileUpload = void 0;
|
|
31
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
32
|
+
var react_core_1 = require("@patternfly/react-core");
|
|
33
|
+
var react_1 = require("react");
|
|
34
|
+
var react_hook_form_1 = require("react-hook-form");
|
|
35
|
+
var PageFormGroup_1 = require("./PageFormGroup");
|
|
36
|
+
/** PatternFly Select wrapper for use with react-hook-form */
|
|
37
|
+
function PageFormFileUpload(props) {
|
|
38
|
+
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
|
|
39
|
+
var _b = __read((0, react_1.useState)(''), 2), filename = _b[0], setFilename = _b[1];
|
|
40
|
+
var _c = __read((0, react_1.useState)(false), 2), isLoading = _c[0], setIsLoading = _c[1];
|
|
41
|
+
var handleFileInputChange = (0, react_1.useCallback)(function (_, file) { return setFilename(file.name); }, []);
|
|
42
|
+
var handleFileReadStarted = function (_fileHandle) {
|
|
43
|
+
setIsLoading(true);
|
|
44
|
+
};
|
|
45
|
+
var handleFileReadFinished = function (_fileHandle) {
|
|
46
|
+
setIsLoading(false);
|
|
47
|
+
};
|
|
48
|
+
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
|
|
49
|
+
var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
|
|
50
|
+
var handleClear = function (_event) {
|
|
51
|
+
setFilename('');
|
|
52
|
+
onChange(undefined);
|
|
53
|
+
};
|
|
54
|
+
var handleTextOrDataChange = function (value) {
|
|
55
|
+
onChange(value);
|
|
56
|
+
};
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { helperTextInvalid: (error === null || error === void 0 ? void 0 : error.type) === 'required'
|
|
58
|
+
? typeof props.label === 'string'
|
|
59
|
+
? "".concat(props.label, " is required")
|
|
60
|
+
: 'Required'
|
|
61
|
+
: error === null || error === void 0 ? void 0 : error.message }, { children: (0, jsx_runtime_1.jsx)(react_core_1.FileUpload, { id: "file-upload", type: "dataURL", value: value, filename: isLoading ? 'loading...' : filename, filenamePlaceholder: props.placeholder, onFileInputChange: handleFileInputChange, onDataChange: handleTextOrDataChange, onTextChange: handleTextOrDataChange, onReadStarted: handleFileReadStarted, onReadFinished: handleFileReadFinished, onClearClick: handleClear,
|
|
62
|
+
// isLoading={isLoading}
|
|
63
|
+
allowEditingUploadedText: false,
|
|
64
|
+
// browseButtonText={t('Upload')}
|
|
65
|
+
isReadOnly: props.isReadOnly || isSubmitting, validated: error ? 'error' : undefined }) })));
|
|
66
|
+
} }));
|
|
67
|
+
}
|
|
68
|
+
exports.PageFormFileUpload = PageFormFileUpload;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FormGroupProps } from '@patternfly/react-core';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
export type PageFormGroupProps = Pick<FormGroupProps, 'children' | 'label' | 'helperText' | 'helperTextInvalid' | 'isRequired'> & {
|
|
4
|
-
id
|
|
4
|
+
id?: string;
|
|
5
5
|
labelHelpTitle?: string;
|
|
6
6
|
labelHelp?: ReactNode;
|
|
7
7
|
};
|
|
@@ -17,7 +17,8 @@ var react_core_1 = require("@patternfly/react-core");
|
|
|
17
17
|
var react_icons_1 = require("@patternfly/react-icons");
|
|
18
18
|
/** Wrapper over the PatternFly FormGroup making it optional based on if label is given. */
|
|
19
19
|
function PageFormGroup(props) {
|
|
20
|
+
var _a;
|
|
20
21
|
var children = props.children, helperText = props.helperText, helperTextInvalid = props.helperTextInvalid, isRequired = props.isRequired, label = props.label;
|
|
21
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(props.id, "-form-group"), fieldId: props.id, label: label, helperText: helperText, helperTextInvalid: helperTextInvalid, validated: helperTextInvalid ? 'error' : undefined, isRequired: isRequired, labelIcon: props.labelHelp ? ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: props.labelHelpTitle, bodyContent: props.labelHelp, position: "bottom-start", removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) })) }))) : undefined }, { children: children })));
|
|
22
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat((_a = props.id) !== null && _a !== void 0 ? _a : '', "-form-group"), fieldId: props.id, label: label, helperText: helperText, helperTextInvalid: helperTextInvalid, validated: helperTextInvalid ? 'error' : undefined, isRequired: isRequired, labelIcon: props.labelHelp ? ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: props.labelHelpTitle, bodyContent: props.labelHelp, position: "bottom-start", removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) })) }))) : undefined }, { children: children })));
|
|
22
23
|
}
|
|
23
24
|
exports.PageFormGroup = PageFormGroup;
|
|
@@ -19,8 +19,9 @@ var FormGroupSelectOption_1 = require("./FormGroupSelectOption");
|
|
|
19
19
|
function PageFormSelectOption(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
|
-
var _b
|
|
23
|
-
|
|
22
|
+
var _b;
|
|
23
|
+
var _c = _a.field, onChange = _c.onChange, value = _c.value, error = _a.fieldState.error;
|
|
24
|
+
return ((0, jsx_runtime_1.jsx)(FormGroupSelectOption_1.FormGroupSelectOption, __assign({}, props, { id: (_b = props.id) !== null && _b !== void 0 ? _b : props.name, value: value, onSelect: function (_, value) { return onChange(value); }, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })));
|
|
24
25
|
} }));
|
|
25
26
|
}
|
|
26
27
|
exports.PageFormSelectOption = PageFormSelectOption;
|
package/cjs/PageForm/PageForm.js
CHANGED
|
@@ -36,7 +36,6 @@ var react_hook_form_1 = require("react-hook-form");
|
|
|
36
36
|
var Scrollable_1 = require("../components/Scrollable");
|
|
37
37
|
var useBreakPoint_1 = require("../components/useBreakPoint");
|
|
38
38
|
var Settings_1 = require("../Settings");
|
|
39
|
-
var PageFormSchema_1 = require("./PageFormSchema");
|
|
40
39
|
function PageForm(props) {
|
|
41
40
|
var schema = props.schema, defaultValue = props.defaultValue;
|
|
42
41
|
var form = (0, react_hook_form_1.useForm)({
|
|
@@ -72,7 +71,7 @@ function PageForm(props) {
|
|
|
72
71
|
flexGrow: 1,
|
|
73
72
|
overflow: props.disableScrolling ? undefined : 'hidden',
|
|
74
73
|
gap: 0,
|
|
75
|
-
} }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: 24 } }, { children: (0, jsx_runtime_1.
|
|
74
|
+
} }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: 24 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: props.children })) }))) : ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, __assign({ style: { height: '100%', flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: 24 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: props.children })) })) }))), error && ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { variant: "danger", title: error !== null && error !== void 0 ? error : '', isInline: true, style: { paddingLeft: isMd && props.onCancel ? 190 : undefined } })), props.onCancel ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
|
76
75
|
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--400)' : undefined,
|
|
77
76
|
padding: 24,
|
|
78
77
|
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ActionGroup, __assign({ style: { marginTop: 0 } }, { children: [(0, jsx_runtime_1.jsx)(PageFormSubmitButton, { children: props.submitText }), props.onCancel && ((0, jsx_runtime_1.jsx)(PageFormCancelButton, __assign({ onCancel: props.onCancel }, { children: props.cancelText })))] })) }))) : ((0, jsx_runtime_1.jsx)(PageFormSubmitButton, __assign({ style: { marginTop: 48 } }, { children: props.submitText })))] })) }))
|