@ansible/ansible-ui-framework 0.0.380 → 0.0.382
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageActions/PageDropdownAction.js +3 -6
- package/cjs/PageForm/Inputs/FormGroupTextArea.js +13 -1
- package/cjs/PageForm/Inputs/FormGroupTextInput.d.ts +1 -1
- package/cjs/PageForm/Inputs/FormGroupTextInput.js +13 -1
- package/cjs/PageForm/PageFormSchema.d.ts +8 -1
- package/cjs/PageForm/PageFormSchema.js +8 -2
- package/package.json +1 -1
|
@@ -56,13 +56,10 @@ function PageDropdownAction(props) {
|
|
|
56
56
|
if (actions.length === 0)
|
|
57
57
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
58
58
|
var Icon = icon;
|
|
59
|
-
var
|
|
59
|
+
var toggleIcon = Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : label;
|
|
60
60
|
var isPrimary = hasBulkActions && !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length);
|
|
61
|
-
var
|
|
62
|
-
|
|
63
|
-
color: 'var(--pf-global--Color--light-100)',
|
|
64
|
-
}
|
|
65
|
-
: {} }, { children: Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : label })), isOpen: dropdownOpen, isPlain: !label || iconOnly, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(PageDropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: {
|
|
61
|
+
var Toggle = label || Icon ? ((0, jsx_runtime_1.jsx)(react_core_1.DropdownToggle, __assign({ id: "toggle-dropdown", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: isPrimary ? 'primary' : undefined, toggleIndicator: null, style: isPrimary && !label ? { color: 'var(--pf-global--Color--light-100)' } : {} }, { children: toggleIcon }))) : ((0, jsx_runtime_1.jsx)(react_core_1.KebabToggle, __assign({ id: "toggle-kebab", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: isPrimary ? 'primary' : undefined, style: isPrimary && !label ? { color: 'var(--pf-global--Color--light-100)' } : {} }, { children: toggleIcon })));
|
|
62
|
+
var dropdown = ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { onSelect: function () { return setDropdownOpen(false); }, toggle: Toggle, isOpen: dropdownOpen, isPlain: !label || iconOnly, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(PageDropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: {
|
|
66
63
|
zIndex: 201,
|
|
67
64
|
} }));
|
|
68
65
|
return tooltip && (iconOnly || isDisabled) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: dropdown }))) : (__assign({}, dropdown));
|
|
@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
13
24
|
var __read = (this && this.__read) || function (o, n) {
|
|
14
25
|
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
15
26
|
if (!m) return o;
|
|
@@ -36,6 +47,7 @@ var PageFormGroup_1 = require("./PageFormGroup");
|
|
|
36
47
|
/** A PatternFly FormGroup with a PatternFly TextArea */
|
|
37
48
|
function FormGroupTextArea(props) {
|
|
38
49
|
var _a = __read((0, react_1.useState)(false), 2), showSecret = _a[0], setShowSecret = _a[1];
|
|
39
|
-
|
|
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, {}) })))] }) })));
|
|
40
52
|
}
|
|
41
53
|
exports.FormGroupTextArea = FormGroupTextArea;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TextInputProps } from '@patternfly/react-core';
|
|
3
3
|
import { PageFormGroupProps } from './PageFormGroup';
|
|
4
|
-
export type FormGroupTextInputProps = Pick<TextInputProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label'> & PageFormGroupProps;
|
|
4
|
+
export type FormGroupTextInputProps = Pick<TextInputProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label' | 'autoComplete' | 'autoFocus'> & PageFormGroupProps;
|
|
5
5
|
/** A PatternFly FormGroup with a PatternFly TextInput */
|
|
6
6
|
export declare function FormGroupTextInput(props: FormGroupTextInputProps): JSX.Element;
|
|
@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
13
24
|
var __read = (this && this.__read) || function (o, n) {
|
|
14
25
|
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
15
26
|
if (!m) return o;
|
|
@@ -36,6 +47,7 @@ var PageFormGroup_1 = require("./PageFormGroup");
|
|
|
36
47
|
/** A PatternFly FormGroup with a PatternFly TextInput */
|
|
37
48
|
function FormGroupTextInput(props) {
|
|
38
49
|
var _a = __read((0, react_1.useState)(false), 2), showSecret = _a[0], setShowSecret = _a[1];
|
|
39
|
-
|
|
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, {}) })))] }) })));
|
|
40
52
|
}
|
|
41
53
|
exports.FormGroupTextInput = FormGroupTextInput;
|
|
@@ -8,9 +8,16 @@ export declare function PageFormSchema(props: {
|
|
|
8
8
|
}): JSX.Element;
|
|
9
9
|
export type TypeTextInputOptions = StringOptions<string> & {
|
|
10
10
|
placeholder?: string;
|
|
11
|
+
/** https://www.chromium.org/developers/design-documents/create-amazing-password-forms/ */
|
|
12
|
+
autoComplete?: string;
|
|
11
13
|
};
|
|
12
14
|
export declare function TypeTextInput(options: TypeTextInputOptions): import("@sinclair/typebox").TString<string>;
|
|
13
|
-
export
|
|
15
|
+
export type TypeSecretInputOptions = StringOptions<string> & {
|
|
16
|
+
placeholder?: string;
|
|
17
|
+
/** https://www.chromium.org/developers/design-documents/create-amazing-password-forms/ */
|
|
18
|
+
autoComplete: string;
|
|
19
|
+
};
|
|
20
|
+
export declare function TypeSecretInput(options: TypeSecretInputOptions): import("@sinclair/typebox").TString<string>;
|
|
14
21
|
export type TypeSelectOptions<T> = StringOptions<string> & {
|
|
15
22
|
placeholder?: string;
|
|
16
23
|
options: IFormGroupSelectOption<T>[];
|
|
@@ -93,10 +93,16 @@ function PageFormSchema(props) {
|
|
|
93
93
|
p.push((0, jsx_runtime_1.jsx)(PageFormTextArea_1.PageFormTextArea, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required }, base + propertyName));
|
|
94
94
|
break;
|
|
95
95
|
case 'secret':
|
|
96
|
-
|
|
96
|
+
{
|
|
97
|
+
var typeSecretInputOptions = property;
|
|
98
|
+
p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, type: "password", autoComplete: typeSecretInputOptions.autoComplete }, base + propertyName));
|
|
99
|
+
}
|
|
97
100
|
break;
|
|
98
101
|
default:
|
|
99
|
-
|
|
102
|
+
{
|
|
103
|
+
var typeTextInputOptions = property;
|
|
104
|
+
p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, autoComplete: typeTextInputOptions.autoComplete }, base + propertyName));
|
|
105
|
+
}
|
|
100
106
|
break;
|
|
101
107
|
}
|
|
102
108
|
break;
|