@ansible/ansible-ui-framework 0.0.380 → 0.0.381
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/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;
|