@ansible/ansible-ui-framework 0.0.389 → 0.0.391
Sign up to get free protection for your applications and to get access to all the features.
- 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 +72 -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,72 @@
|
|
|
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
|
+
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
|
|
46
|
+
var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
|
|
47
|
+
var handleClear = function (_event) {
|
|
48
|
+
setFilename('');
|
|
49
|
+
onChange(undefined);
|
|
50
|
+
};
|
|
51
|
+
var handleFileReadFinished = function (_fileHandle) {
|
|
52
|
+
setIsLoading(false);
|
|
53
|
+
onChange(_fileHandle);
|
|
54
|
+
};
|
|
55
|
+
// const handleTextOrDataChange = (value: string) => {
|
|
56
|
+
// onChange(value)
|
|
57
|
+
// }
|
|
58
|
+
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { helperTextInvalid: (error === null || error === void 0 ? void 0 : error.type) === 'required'
|
|
59
|
+
? typeof props.label === 'string'
|
|
60
|
+
? "".concat(props.label, " is required")
|
|
61
|
+
: 'Required'
|
|
62
|
+
: 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,
|
|
63
|
+
// onDataChange={handleTextOrDataChange}
|
|
64
|
+
// onTextChange={handleTextOrDataChange}
|
|
65
|
+
onReadStarted: handleFileReadStarted, onReadFinished: handleFileReadFinished, onClearClick: handleClear,
|
|
66
|
+
// isLoading={isLoading}
|
|
67
|
+
allowEditingUploadedText: false,
|
|
68
|
+
// browseButtonText={t('Upload')}
|
|
69
|
+
isReadOnly: props.isReadOnly || isSubmitting, validated: error ? 'error' : undefined }) })));
|
|
70
|
+
} }));
|
|
71
|
+
}
|
|
72
|
+
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 })))] })) }))
|