@ansible/ansible-ui-framework 0.0.377 → 0.0.379
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageForm/Inputs/FormGroupSelect.d.ts +8 -0
- package/cjs/{components/PageSelect.js → PageForm/Inputs/FormGroupSelect.js} +9 -14
- package/cjs/PageForm/Inputs/FormGroupSelectOption.d.ts +14 -0
- package/cjs/{components/PageSelectOption.js → PageForm/Inputs/FormGroupSelectOption.js} +7 -7
- package/cjs/PageForm/Inputs/FormGroupTextArea.d.ts +6 -0
- package/cjs/PageForm/Inputs/FormGroupTextArea.js +41 -0
- package/cjs/PageForm/Inputs/FormGroupTextInput.d.ts +6 -0
- package/cjs/PageForm/Inputs/FormGroupTextInput.js +41 -0
- package/cjs/PageForm/Inputs/PageFormGroup.d.ts +9 -0
- package/cjs/{components → PageForm/Inputs}/PageFormGroup.js +2 -6
- package/cjs/PageForm/Inputs/PageFormSelect.d.ts +7 -0
- package/cjs/PageForm/Inputs/PageFormSelect.js +26 -0
- package/cjs/PageForm/Inputs/PageFormSelectOption.d.ts +3 -5
- package/cjs/PageForm/Inputs/PageFormSelectOption.js +4 -7
- package/cjs/PageForm/Inputs/PageFormTextArea.d.ts +5 -9
- package/cjs/PageForm/Inputs/PageFormTextArea.js +7 -8
- package/cjs/PageForm/Inputs/PageFormTextInput.d.ts +5 -9
- package/cjs/PageForm/Inputs/PageFormTextInput.js +7 -29
- package/cjs/PageForm/PageForm.js +2 -2
- package/cjs/PageForm/{PageFormFromSchema.d.ts → PageFormSchema.d.ts} +1 -1
- package/cjs/PageForm/{PageFormFromSchema.js → PageFormSchema.js} +9 -8
- package/cjs/PageTable/PageToolbar.js +2 -2
- package/cjs/Settings.js +6 -6
- package/cjs/index.d.ts +2 -2
- package/cjs/index.js +2 -2
- package/package.json +1 -1
- package/cjs/components/PageFormGroup.d.ts +0 -11
- package/cjs/components/PageSelect.d.ts +0 -16
- package/cjs/components/PageSelectOption.d.ts +0 -14
@@ -0,0 +1,8 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { SelectProps } from '@patternfly/react-core';
|
3
|
+
import { PageFormGroupProps } from './PageFormGroup';
|
4
|
+
export type FormGroupSelectProps = Pick<SelectProps, 'footer' | 'isCreatable' | 'isGrouped' | 'onSelect' | 'placeholder' | 'value' | 'isDisabled'> & PageFormGroupProps & {
|
5
|
+
isReadOnly?: boolean;
|
6
|
+
};
|
7
|
+
/** Thin wrapper combining a PF FormGroup and a PF Select */
|
8
|
+
export declare function FormGroupSelect(props: FormGroupSelectProps): JSX.Element;
|
@@ -27,28 +27,23 @@ var __read = (this && this.__read) || function (o, n) {
|
|
27
27
|
return ar;
|
28
28
|
};
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
30
|
-
exports.
|
30
|
+
exports.FormGroupSelect = void 0;
|
31
31
|
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
|
-
/**
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
function PageSelect(props) {
|
40
|
-
var _a;
|
41
|
-
var children = props.children, footer = props.footer, helperTextInvalid = props.helperTextInvalid, isCreatable = props.isCreatable, isGrouped = props.isGrouped, isReadonly = props.readOnly, label = props.label, onSelect = props.onSelect, placeholder = props.placeholder, value = props.value;
|
42
|
-
var _b = __read((0, react_1.useState)(false), 2), open = _b[0], setOpen = _b[1];
|
35
|
+
/** Thin wrapper combining a PF FormGroup and a PF Select */
|
36
|
+
function FormGroupSelect(props) {
|
37
|
+
var children = props.children, helperTextInvalid = props.helperTextInvalid, isReadOnly = props.isReadOnly, onSelect = props.onSelect, value = props.value;
|
38
|
+
var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
|
43
39
|
var onToggle = (0, react_1.useCallback)(function () { return setOpen(function (open) { return !open; }); }, []);
|
44
40
|
var onSelectHandler = (0, react_1.useCallback)(function (event, value) {
|
45
41
|
if (typeof value === 'string')
|
46
|
-
onSelect(
|
42
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, value);
|
47
43
|
else
|
48
|
-
onSelect(value.toString()
|
44
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, value.toString());
|
49
45
|
setOpen(false);
|
50
46
|
}, [onSelect]);
|
51
|
-
|
52
|
-
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ "aria-describedby": id ? "".concat(id, "-form-group") : undefined, footer: footer, id: id, isCreatable: isCreatable, isGrouped: isGrouped, isInputFilterPersisted: isCreatable, isOpen: open, maxHeight: 280, onSelect: onSelectHandler, onToggle: onToggle, placeholderText: placeholder, selections: value, validated: helperTextInvalid ? 'error' : undefined, variant: react_core_1.SelectVariant.single, isDisabled: isReadonly }, { children: children })) })));
|
47
|
+
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({}, props, { label: undefined, variant: react_core_1.SelectVariant.single, "aria-describedby": props.id ? "".concat(props.id, "-form-group") : undefined, selections: value, onSelect: onSelectHandler, isOpen: open, onToggle: onToggle, maxHeight: 280, validated: helperTextInvalid ? 'error' : undefined, isDisabled: props.isDisabled || isReadOnly }, { children: children })) })));
|
53
48
|
}
|
54
|
-
exports.
|
49
|
+
exports.FormGroupSelect = FormGroupSelect;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { ChangeEvent } from 'react';
|
2
|
+
import { FormGroupSelectProps } from './FormGroupSelect';
|
3
|
+
export interface IFormGroupSelectOption<T> {
|
4
|
+
group?: string;
|
5
|
+
label: string;
|
6
|
+
description?: string;
|
7
|
+
value: T;
|
8
|
+
}
|
9
|
+
export type FormGroupSelectOptionProps<T> = {
|
10
|
+
options: IFormGroupSelectOption<T>[];
|
11
|
+
onSelect: (value: T | undefined, event: React.MouseEvent<Element, MouseEvent> | ChangeEvent<Element>) => void;
|
12
|
+
value: T | undefined;
|
13
|
+
} & Omit<FormGroupSelectProps, 'onSelect' | 'value' | 'children'>;
|
14
|
+
export declare function FormGroupSelectOption<T>(props: FormGroupSelectOptionProps<T>): JSX.Element;
|
@@ -11,16 +11,16 @@ var __assign = (this && this.__assign) || function () {
|
|
11
11
|
return __assign.apply(this, arguments);
|
12
12
|
};
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
-
exports.
|
14
|
+
exports.FormGroupSelectOption = void 0;
|
15
15
|
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
|
-
var
|
19
|
-
function
|
18
|
+
var FormGroupSelect_1 = require("./FormGroupSelect");
|
19
|
+
function FormGroupSelectOption(props) {
|
20
20
|
var onSelect = props.onSelect, value = props.value;
|
21
|
-
var onSelectHandler = (0, react_1.useCallback)(function (
|
21
|
+
var onSelectHandler = (0, react_1.useCallback)(function (event, label) {
|
22
22
|
var _a;
|
23
|
-
onSelect((_a = props.options.find(function (option) { return option.label === label; })) === null || _a === void 0 ? void 0 : _a.value, event);
|
23
|
+
onSelect((_a = props.options.find(function (option) { return option.label === label.toString(); })) === null || _a === void 0 ? void 0 : _a.value, event);
|
24
24
|
}, [onSelect, props.options]);
|
25
25
|
var options = props.options;
|
26
26
|
options.sort(function (l, r) {
|
@@ -49,8 +49,8 @@ function PageSelectOption(props) {
|
|
49
49
|
var isGrouped = Object.keys(groups).length > 1 ||
|
50
50
|
(Object.keys(groups).length === 1 && Object.keys(groups)[0] !== '');
|
51
51
|
var selected = props.options.find(function (option) { return option.value === value; });
|
52
|
-
return ((0, jsx_runtime_1.jsx)(
|
52
|
+
return ((0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({}, props, { value: selected === null || selected === void 0 ? void 0 : selected.label, onSelect: onSelectHandler, isGrouped: isGrouped }, { children: !isGrouped
|
53
53
|
? options.map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: option.label, label: option.label, description: option.description }, { children: option.label }), option.label)); })
|
54
54
|
: Object.keys(groups).map(function (group) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectGroup, __assign({ label: group }, { children: groups[group].map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: option.label, label: option.label, description: option.description }, { children: option.label }), option.label)); }) }), group)); }) })));
|
55
55
|
}
|
56
|
-
exports.
|
56
|
+
exports.FormGroupSelectOption = FormGroupSelectOption;
|
@@ -0,0 +1,6 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { TextAreaProps } from '@patternfly/react-core';
|
3
|
+
import { PageFormGroupProps } from './PageFormGroup';
|
4
|
+
export type FormGroupTextAreaProps = Pick<TextAreaProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label'> & PageFormGroupProps;
|
5
|
+
/** Thin wrapper combining a PF FormGroup and a PF TextArea */
|
6
|
+
export declare function FormGroupTextArea(props: FormGroupTextAreaProps): JSX.Element;
|
@@ -0,0 +1,41 @@
|
|
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.FormGroupTextArea = void 0;
|
31
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
32
|
+
var react_core_1 = require("@patternfly/react-core");
|
33
|
+
var react_icons_1 = require("@patternfly/react-icons");
|
34
|
+
var react_1 = require("react");
|
35
|
+
var PageFormGroup_1 = require("./PageFormGroup");
|
36
|
+
/** Thin wrapper combining a PF FormGroup and a PF TextArea */
|
37
|
+
function FormGroupTextArea(props) {
|
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.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, {}) })))] }) })));
|
40
|
+
}
|
41
|
+
exports.FormGroupTextArea = FormGroupTextArea;
|
@@ -0,0 +1,6 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { TextInputProps } from '@patternfly/react-core';
|
3
|
+
import { PageFormGroupProps } from './PageFormGroup';
|
4
|
+
export type FormGroupTextInputProps = Pick<TextInputProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label'> & PageFormGroupProps;
|
5
|
+
/** Thin wrapper combining a PF FormGroup and a PF TextInput */
|
6
|
+
export declare function FormGroupTextInput(props: FormGroupTextInputProps): JSX.Element;
|
@@ -0,0 +1,41 @@
|
|
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.FormGroupTextInput = void 0;
|
31
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
32
|
+
var react_core_1 = require("@patternfly/react-core");
|
33
|
+
var react_icons_1 = require("@patternfly/react-icons");
|
34
|
+
var react_1 = require("react");
|
35
|
+
var PageFormGroup_1 = require("./PageFormGroup");
|
36
|
+
/** Thin wrapper combining a PF FormGroup and a PF TextInput */
|
37
|
+
function FormGroupTextInput(props) {
|
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, {}) })))] }) })));
|
40
|
+
}
|
41
|
+
exports.FormGroupTextInput = FormGroupTextInput;
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { FormGroupProps } from '@patternfly/react-core';
|
2
|
+
import { ReactNode } from 'react';
|
3
|
+
export type PageFormGroupProps = Pick<FormGroupProps, 'children' | 'label' | 'helperText' | 'helperTextInvalid' | 'isRequired'> & {
|
4
|
+
id: string;
|
5
|
+
labelHelpTitle?: string;
|
6
|
+
labelHelp?: ReactNode;
|
7
|
+
};
|
8
|
+
/** Wrapper over the PatternFly FormGroup making it optional based on if label is given. */
|
9
|
+
export declare function PageFormGroup(props: PageFormGroupProps): JSX.Element;
|
@@ -14,14 +14,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
14
|
exports.PageFormGroup = void 0;
|
15
15
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
16
|
var react_core_1 = require("@patternfly/react-core");
|
17
|
+
var react_icons_1 = require("@patternfly/react-icons");
|
17
18
|
/** Wrapper over the PatternFly FormGroup making it optional based on if label is given. */
|
18
19
|
function PageFormGroup(props) {
|
19
|
-
var _a;
|
20
20
|
var children = props.children, helperText = props.helperText, helperTextInvalid = props.helperTextInvalid, isRequired = props.isRequired, label = props.label;
|
21
|
-
|
22
|
-
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
|
23
|
-
}
|
24
|
-
var id = (_a = props.id) !== null && _a !== void 0 ? _a : label === null || label === void 0 ? void 0 : label.toLocaleLowerCase().split(' ').join('-');
|
25
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ fieldId: id, helperText: helperText, helperTextInvalid: helperTextInvalid, id: "".concat(id, "-form-group"), isRequired: isRequired, label: label, validated: helperTextInvalid ? 'error' : undefined }, { children: children })));
|
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 })));
|
26
22
|
}
|
27
23
|
exports.PageFormGroup = PageFormGroup;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { FormGroupSelectProps } from './FormGroupSelect';
|
3
|
+
export type PageFormSelectProps = {
|
4
|
+
name: string;
|
5
|
+
} & Omit<FormGroupSelectProps, 'onSelect' | 'value'>;
|
6
|
+
/** PatternFly Select wrapper for use with react-hook-form */
|
7
|
+
export declare function PageFormSelect(props: PageFormSelectProps): JSX.Element;
|
@@ -0,0 +1,26 @@
|
|
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
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
+
exports.PageFormSelect = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var react_hook_form_1 = require("react-hook-form");
|
17
|
+
var FormGroupSelect_1 = require("./FormGroupSelect");
|
18
|
+
/** PatternFly Select wrapper for use with react-hook-form */
|
19
|
+
function PageFormSelect(props) {
|
20
|
+
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
|
21
|
+
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
|
22
|
+
var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
|
23
|
+
return ((0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({}, props, { value: value, onSelect: function (_, value) { return onChange(value); }, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })));
|
24
|
+
} }));
|
25
|
+
}
|
26
|
+
exports.PageFormSelect = PageFormSelect;
|
@@ -1,9 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import {
|
2
|
+
import { FormGroupSelectOptionProps } from './FormGroupSelectOption';
|
3
3
|
export type PageFormSelectOptionProps<T> = {
|
4
4
|
name: string;
|
5
|
-
} & Omit<
|
6
|
-
/**
|
7
|
-
* A PageSelectOption for use in PageForms
|
8
|
-
*/
|
5
|
+
} & Omit<FormGroupSelectOptionProps<T>, 'onSelect' | 'value'>;
|
6
|
+
/** Select wrapper for use with react-hook-form */
|
9
7
|
export declare function PageFormSelectOption<T>(props: PageFormSelectOptionProps<T>): JSX.Element;
|
@@ -14,16 +14,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
14
|
exports.PageFormSelectOption = void 0;
|
15
15
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
16
|
var react_hook_form_1 = require("react-hook-form");
|
17
|
-
var
|
18
|
-
/**
|
19
|
-
* A PageSelectOption for use in PageForms
|
20
|
-
*/
|
17
|
+
var FormGroupSelectOption_1 = require("./FormGroupSelectOption");
|
18
|
+
/** Select wrapper for use with react-hook-form */
|
21
19
|
function PageFormSelectOption(props) {
|
22
20
|
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
|
23
|
-
|
24
|
-
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, render: function (_a) {
|
21
|
+
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
|
25
22
|
var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
|
26
|
-
return ((0, jsx_runtime_1.jsx)(
|
23
|
+
return ((0, jsx_runtime_1.jsx)(FormGroupSelectOption_1.FormGroupSelectOption, __assign({}, props, { value: value, onSelect: function (_, value) { return onChange(value); }, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })));
|
27
24
|
} }));
|
28
25
|
}
|
29
26
|
exports.PageFormSelectOption = PageFormSelectOption;
|
@@ -1,11 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
|
3
|
-
|
4
|
-
label: string;
|
2
|
+
import { FormGroupTextAreaProps } from './FormGroupTextArea';
|
3
|
+
export type PageFormTextAreaProps = {
|
5
4
|
name: string;
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
autoFocus?: boolean;
|
10
|
-
placeholder?: string;
|
11
|
-
}): JSX.Element;
|
5
|
+
} & Omit<FormGroupTextAreaProps, 'onChange' | 'value'>;
|
6
|
+
/** PatternFly TextArea wrapper for use with react-hook-form */
|
7
|
+
export declare function PageFormTextArea(props: PageFormTextAreaProps): JSX.Element;
|
@@ -13,15 +13,14 @@ var __assign = (this && this.__assign) || function () {
|
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
14
14
|
exports.PageFormTextArea = void 0;
|
15
15
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
-
var react_core_1 = require("@patternfly/react-core");
|
17
16
|
var react_hook_form_1 = require("react-hook-form");
|
17
|
+
var FormGroupTextArea_1 = require("./FormGroupTextArea");
|
18
|
+
/** PatternFly TextArea wrapper for use with react-hook-form */
|
18
19
|
function PageFormTextArea(props) {
|
19
|
-
var _a;
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
var id = (_a = props.id) !== null && _a !== void 0 ? _a : props.name;
|
25
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(id, "-form-group"), fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message }, { children: (0, jsx_runtime_1.jsx)(react_core_1.TextArea, __assign({ id: id, type: props.secret ? 'password' : 'text', "aria-describedby": "".concat(id, "-form-group"), isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, autoFocus: props.autoFocus, placeholder: props.placeholder }, registration, { onChange: function (v, e) { return void registration.onChange(e); }, resizeOrientation: "vertical", isReadOnly: isSubmitting })) })));
|
20
|
+
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
|
21
|
+
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
|
22
|
+
var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
|
23
|
+
return ((0, jsx_runtime_1.jsx)(FormGroupTextArea_1.FormGroupTextArea, __assign({}, props, { value: value, onChange: onChange, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })));
|
24
|
+
} }));
|
26
25
|
}
|
27
26
|
exports.PageFormTextArea = PageFormTextArea;
|
@@ -1,11 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
|
3
|
-
|
4
|
-
label: string;
|
2
|
+
import { FormGroupTextInputProps } from './FormGroupTextInput';
|
3
|
+
export type PageFormTextInputProps = {
|
5
4
|
name: string;
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
autoFocus?: boolean;
|
10
|
-
placeholder?: string;
|
11
|
-
}): JSX.Element;
|
5
|
+
} & Omit<FormGroupTextInputProps, 'onChange' | 'value'>;
|
6
|
+
/** PatternFly TextInput wrapper for use with react-hook-form */
|
7
|
+
export declare function PageFormTextInput(props: PageFormTextInputProps): JSX.Element;
|
@@ -10,39 +10,17 @@ var __assign = (this && this.__assign) || function () {
|
|
10
10
|
};
|
11
11
|
return __assign.apply(this, arguments);
|
12
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
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
30
14
|
exports.PageFormTextInput = void 0;
|
31
15
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
32
|
-
var react_core_1 = require("@patternfly/react-core");
|
33
|
-
var react_icons_1 = require("@patternfly/react-icons");
|
34
|
-
var react_1 = require("react");
|
35
16
|
var react_hook_form_1 = require("react-hook-form");
|
17
|
+
var FormGroupTextInput_1 = require("./FormGroupTextInput");
|
18
|
+
/** PatternFly TextInput wrapper for use with react-hook-form */
|
36
19
|
function PageFormTextInput(props) {
|
37
|
-
var _a;
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
var id = (_a = props.id) !== null && _a !== void 0 ? _a : props.name;
|
43
|
-
var _c = __read((0, react_1.useState)(false), 2), showSecret = _c[0], setShowSecret = _c[1];
|
44
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(id, "-form-group"), fieldId: id, label: props.label, helperText: props.helperText, isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInput, __assign({ id: id, type: props.secret && !showSecret ? 'password' : 'text', "aria-describedby": "".concat(id, "-form-group"), isRequired: props.required, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, autoFocus: props.autoFocus, placeholder: props.placeholder }, registration, { onChange: function (v, e) {
|
45
|
-
void registration.onChange(e);
|
46
|
-
}, isReadOnly: isSubmitting })), props.secret && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () { return setShowSecret(!showSecret); }, "aria-label": "Options menu", isDisabled: isSubmitting }, { children: showSecret ? (0, jsx_runtime_1.jsx)(react_icons_1.EyeIcon, {}) : (0, jsx_runtime_1.jsx)(react_icons_1.EyeSlashIcon, {}) })))] }) })));
|
20
|
+
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
|
21
|
+
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
|
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.message, isReadOnly: props.isReadOnly || isSubmitting })));
|
24
|
+
} }));
|
47
25
|
}
|
48
26
|
exports.PageFormTextInput = PageFormTextInput;
|
package/cjs/PageForm/PageForm.js
CHANGED
@@ -36,7 +36,7 @@ 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
|
39
|
+
var PageFormSchema_1 = require("./PageFormSchema");
|
40
40
|
function PageForm(props) {
|
41
41
|
var schema = props.schema, defaultValue = props.defaultValue;
|
42
42
|
var form = (0, react_hook_form_1.useForm)({
|
@@ -72,7 +72,7 @@ function PageForm(props) {
|
|
72
72
|
flexGrow: 1,
|
73
73
|
overflow: props.disableScrolling ? undefined : 'hidden',
|
74
74
|
gap: 0,
|
75
|
-
} }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: 24 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: [props.schema && (0, jsx_runtime_1.jsx)(
|
75
|
+
} }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: 24 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: [props.schema && (0, jsx_runtime_1.jsx)(PageFormSchema_1.PageFormSchema, { schema: props.schema }), 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.jsxs)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: [props.schema && (0, jsx_runtime_1.jsx)(PageFormSchema_1.PageFormSchema, { schema: props.schema }), 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
76
|
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--400)' : undefined,
|
77
77
|
padding: 24,
|
78
78
|
} }, { 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 })))] })) }))
|
@@ -1,6 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.
|
3
|
+
exports.PageFormSchema = void 0;
|
4
4
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
5
5
|
var PageFormSelectOption_1 = require("./Inputs/PageFormSelectOption");
|
6
6
|
var PageFormSlider_1 = require("./Inputs/PageFormSlider");
|
@@ -8,7 +8,7 @@ var PageFormSwitch_1 = require("./Inputs/PageFormSwitch");
|
|
8
8
|
var PageFormTextArea_1 = require("./Inputs/PageFormTextArea");
|
9
9
|
var PageFormTextInput_1 = require("./Inputs/PageFormTextInput");
|
10
10
|
var PageFormTextSelect_1 = require("./Inputs/PageFormTextSelect");
|
11
|
-
function
|
11
|
+
function PageFormSchema(props) {
|
12
12
|
var schema = props.schema;
|
13
13
|
var base = props.base ? props.base + '.' : '';
|
14
14
|
var p = [];
|
@@ -20,6 +20,7 @@ function FormSchema(props) {
|
|
20
20
|
continue;
|
21
21
|
}
|
22
22
|
var title = typeof property.title === 'string' ? property.title : propertyName;
|
23
|
+
var description = typeof property.description === 'string' ? property.description : undefined;
|
23
24
|
var placeholder = property.placeholder;
|
24
25
|
placeholder = typeof placeholder === 'string' ? placeholder : undefined;
|
25
26
|
var required = Array.isArray(schema.required) && schema.required.includes(propertyName);
|
@@ -29,7 +30,7 @@ function FormSchema(props) {
|
|
29
30
|
case 'select': {
|
30
31
|
if ('options' in property) {
|
31
32
|
var formSelectProps = property;
|
32
|
-
p.push((0, jsx_runtime_1.jsx)(PageFormSelectOption_1.PageFormSelectOption, { name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, options: formSelectProps.options, footer: formSelectProps.footer }, base + propertyName));
|
33
|
+
p.push((0, jsx_runtime_1.jsx)(PageFormSelectOption_1.PageFormSelectOption, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, options: formSelectProps.options, footer: formSelectProps.footer, labelHelpTitle: title, labelHelp: description }, base + propertyName));
|
33
34
|
}
|
34
35
|
else {
|
35
36
|
p.push((0, jsx_runtime_1.jsx)(PageFormTextSelect_1.FormTextSelect, { name: base + propertyName, label: title, placeholder: placeholder, required: required, selectTitle: property.selectTitle, selectValue: property.selectValue, selectOpen: property.selectOpen }, base + propertyName));
|
@@ -37,13 +38,13 @@ function FormSchema(props) {
|
|
37
38
|
break;
|
38
39
|
}
|
39
40
|
case 'textarea':
|
40
|
-
p.push((0, jsx_runtime_1.jsx)(PageFormTextArea_1.PageFormTextArea, { name: base + propertyName, label: title, placeholder: placeholder,
|
41
|
+
p.push((0, jsx_runtime_1.jsx)(PageFormTextArea_1.PageFormTextArea, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required }, base + propertyName));
|
41
42
|
break;
|
42
43
|
case 'secret':
|
43
|
-
p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { name: base + propertyName, label: title, placeholder: placeholder,
|
44
|
+
p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required, type: "password" }, base + propertyName));
|
44
45
|
break;
|
45
46
|
default:
|
46
|
-
p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { name: base + propertyName, label: title, placeholder: placeholder,
|
47
|
+
p.push((0, jsx_runtime_1.jsx)(PageFormTextInput_1.PageFormTextInput, { id: base + propertyName, name: base + propertyName, label: title, placeholder: placeholder, isRequired: required }, base + propertyName));
|
47
48
|
break;
|
48
49
|
}
|
49
50
|
break;
|
@@ -57,11 +58,11 @@ function FormSchema(props) {
|
|
57
58
|
break;
|
58
59
|
}
|
59
60
|
case 'object': {
|
60
|
-
p.push((0, jsx_runtime_1.jsx)(
|
61
|
+
p.push((0, jsx_runtime_1.jsx)(PageFormSchema, { schema: property, base: base + propertyName }, propertyName));
|
61
62
|
break;
|
62
63
|
}
|
63
64
|
}
|
64
65
|
}
|
65
66
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: p });
|
66
67
|
}
|
67
|
-
exports.
|
68
|
+
exports.PageFormSchema = PageFormSchema;
|
@@ -44,10 +44,10 @@ var react_core_1 = require("@patternfly/react-core");
|
|
44
44
|
var react_icons_1 = require("@patternfly/react-icons");
|
45
45
|
var react_1 = require("react");
|
46
46
|
var BulkSelector_1 = require("../components/BulkSelector");
|
47
|
-
var PageSelect_1 = require("../components/PageSelect");
|
48
47
|
var useBreakPoint_1 = require("../components/useBreakPoint");
|
49
48
|
var PageActions_1 = require("../PageActions/PageActions");
|
50
49
|
var PageActionType_1 = require("../PageActions/PageActionType");
|
50
|
+
var FormGroupSelect_1 = require("../PageForm/Inputs/FormGroupSelect");
|
51
51
|
var Settings_1 = require("../Settings");
|
52
52
|
var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
|
53
53
|
var PageTableViewType_1 = require("./PageTableViewType");
|
@@ -112,7 +112,7 @@ function PageTableToolbar(props) {
|
|
112
112
|
paddingBottom: sm ? undefined : 8,
|
113
113
|
paddingTop: sm ? undefined : 8,
|
114
114
|
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
115
|
-
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(
|
115
|
+
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
|
116
116
|
var _a;
|
117
117
|
var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
|
118
118
|
if (!values)
|
package/cjs/Settings.js
CHANGED
@@ -31,8 +31,8 @@ exports.SettingsDialog = exports.useSettingsDialog = exports.SettingsProvider =
|
|
31
31
|
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
|
-
var PageSelect_1 = require("./components/PageSelect");
|
35
34
|
var PageDialog_1 = require("./PageDialog");
|
35
|
+
var FormGroupSelect_1 = require("./PageForm/Inputs/FormGroupSelect");
|
36
36
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
37
37
|
exports.SettingsContext = (0, react_1.createContext)([
|
38
38
|
{},
|
@@ -110,14 +110,14 @@ function SettingsDialog(props) {
|
|
110
110
|
var _f = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _f[0];
|
111
111
|
return ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ title: "Settings", isOpen: props.open, onClose: onClose, variant: react_core_1.ModalVariant.medium, tabIndex: 0, actions: [
|
112
112
|
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: onClose }, { children: translations.closeText }), "close"),
|
113
|
-
] }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Form, __assign({ isHorizontal: settings.formLayout === 'horizontal' }, { children: [(0, jsx_runtime_1.jsxs)(
|
113
|
+
] }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Form, __assign({ isHorizontal: settings.formLayout === 'horizontal' }, { children: [(0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "theme", label: "Theme", value: (_a = settings.theme) !== null && _a !== void 0 ? _a : 'system', onSelect: function (_, theme) {
|
114
114
|
return setSettings(__assign(__assign({}, settings), { theme: theme }));
|
115
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "system" }, { children: 'System default' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "light" }, { children: 'Light' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "dark" }, { children: 'Dark' }))] })), (0, jsx_runtime_1.jsxs)(
|
115
|
+
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "system" }, { children: 'System default' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "light" }, { children: 'Light' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "dark" }, { children: 'Dark' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "table-layout", label: "Table Layout", value: (_b = settings.tableLayout) !== null && _b !== void 0 ? _b : 'comfortable', onSelect: function (_, tableLayout) {
|
116
116
|
return setSettings(__assign(__assign({}, settings), { tableLayout: tableLayout }));
|
117
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "comfortable" }, { children: 'Comfortable' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "compact" }, { children: 'Compact' }))] })), (0, jsx_runtime_1.jsxs)(
|
117
|
+
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "comfortable" }, { children: 'Comfortable' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "compact" }, { children: 'Compact' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-columns", label: "Form Columns", value: (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple', onSelect: function (_, formColumns) {
|
118
118
|
return setSettings(__assign(__assign({}, settings), { formColumns: formColumns }));
|
119
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "multiple" }, { children: 'Multiple columns' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "single" }, { children: 'Single column' }))] })), (0, jsx_runtime_1.jsxs)(
|
119
|
+
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "multiple" }, { children: 'Multiple columns' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "single" }, { children: 'Single column' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-layout", label: "Form Layout", value: (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical', onSelect: function (_, formLayout) {
|
120
120
|
return setSettings(__assign(__assign({}, settings), { formLayout: formLayout }));
|
121
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: 'Vertical labels' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: 'Horizontal labels' }))] })), (0, jsx_runtime_1.jsxs)(
|
121
|
+
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: 'Vertical labels' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: 'Horizontal labels' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "borders", label: "Borders", value: settings.borders ? 'true' : 'false', onSelect: function (_, value) { return setSettings(__assign(__assign({}, settings), { borders: value === 'true' })); } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "true" }, { children: 'Yes' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "false" }, { children: 'No' }))] }))] })) })));
|
122
122
|
}
|
123
123
|
exports.SettingsDialog = SettingsDialog;
|
package/cjs/index.d.ts
CHANGED
@@ -5,8 +5,6 @@ export * from './components/Collapse';
|
|
5
5
|
export * from './components/Details';
|
6
6
|
export * from './components/Help';
|
7
7
|
export * from './components/icons/RunningIcon';
|
8
|
-
export * from './components/PageSelect';
|
9
|
-
export * from './components/PageSelectOption';
|
10
8
|
export * from './components/pfcolors';
|
11
9
|
export * from './components/Scrollable';
|
12
10
|
export * from './components/useBreakPoint';
|
@@ -24,6 +22,8 @@ export * from './PageCells/LabelsCell';
|
|
24
22
|
export * from './PageCells/TextCell';
|
25
23
|
export * from './PageDataList';
|
26
24
|
export * from './PageDialog';
|
25
|
+
export * from './PageForm/Inputs/FormGroupSelect';
|
26
|
+
export * from './PageForm/Inputs/FormGroupSelectOption';
|
27
27
|
export * from './PageForm/Inputs/PageFormSelectOption';
|
28
28
|
export * from './PageForm/PageForm';
|
29
29
|
export * from './PageFramework';
|
package/cjs/index.js
CHANGED
@@ -21,8 +21,6 @@ __exportStar(require("./components/Collapse"), exports);
|
|
21
21
|
__exportStar(require("./components/Details"), exports);
|
22
22
|
__exportStar(require("./components/Help"), exports);
|
23
23
|
__exportStar(require("./components/icons/RunningIcon"), exports);
|
24
|
-
__exportStar(require("./components/PageSelect"), exports);
|
25
|
-
__exportStar(require("./components/PageSelectOption"), exports);
|
26
24
|
__exportStar(require("./components/pfcolors"), exports);
|
27
25
|
__exportStar(require("./components/Scrollable"), exports);
|
28
26
|
__exportStar(require("./components/useBreakPoint"), exports);
|
@@ -40,6 +38,8 @@ __exportStar(require("./PageCells/LabelsCell"), exports);
|
|
40
38
|
__exportStar(require("./PageCells/TextCell"), exports);
|
41
39
|
__exportStar(require("./PageDataList"), exports);
|
42
40
|
__exportStar(require("./PageDialog"), exports);
|
41
|
+
__exportStar(require("./PageForm/Inputs/FormGroupSelect"), exports);
|
42
|
+
__exportStar(require("./PageForm/Inputs/FormGroupSelectOption"), exports);
|
43
43
|
__exportStar(require("./PageForm/Inputs/PageFormSelectOption"), exports);
|
44
44
|
__exportStar(require("./PageForm/PageForm"), exports);
|
45
45
|
__exportStar(require("./PageFramework"), exports);
|
package/package.json
CHANGED
@@ -1,11 +0,0 @@
|
|
1
|
-
import { ReactNode } from 'react';
|
2
|
-
export type PageFormGroupProps = {
|
3
|
-
children: ReactNode;
|
4
|
-
helperText?: ReactNode | undefined;
|
5
|
-
helperTextInvalid?: ReactNode | undefined;
|
6
|
-
id?: string;
|
7
|
-
isRequired?: boolean;
|
8
|
-
label?: string;
|
9
|
-
};
|
10
|
-
/** Wrapper over the PatternFly FormGroup making it optional based on if label is given. */
|
11
|
-
export declare function PageFormGroup(props: PageFormGroupProps): JSX.Element;
|
@@ -1,16 +0,0 @@
|
|
1
|
-
import React, { ChangeEvent, ReactNode } from 'react';
|
2
|
-
import { PageFormGroupProps } from './PageFormGroup';
|
3
|
-
export type PageSelectProps = {
|
4
|
-
footer?: ReactNode;
|
5
|
-
isCreatable?: boolean;
|
6
|
-
isGrouped?: boolean | undefined;
|
7
|
-
onSelect: (value: string, event: React.MouseEvent<Element, MouseEvent> | ChangeEvent<Element>) => void;
|
8
|
-
placeholder?: string;
|
9
|
-
value: string | undefined;
|
10
|
-
readOnly?: boolean;
|
11
|
-
} & PageFormGroupProps;
|
12
|
-
/** Wrapper over a PatternFly Select.
|
13
|
-
* Simplifies the PatternFly Select.
|
14
|
-
* Supports a PageFormGroup with label if label is specififed.
|
15
|
-
*/
|
16
|
-
export declare function PageSelect(props: PageSelectProps): JSX.Element;
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import { ChangeEvent } from 'react';
|
2
|
-
import { PageSelectProps } from './PageSelect';
|
3
|
-
export interface IPageSelectOption<T> {
|
4
|
-
group?: string;
|
5
|
-
label: string;
|
6
|
-
description?: string;
|
7
|
-
value: T;
|
8
|
-
}
|
9
|
-
export type PageSelectOptionProps<T> = {
|
10
|
-
options: IPageSelectOption<T>[];
|
11
|
-
onSelect: (value: T | undefined, event: React.MouseEvent<Element, MouseEvent> | ChangeEvent<Element>) => void;
|
12
|
-
value: T | undefined;
|
13
|
-
} & Omit<PageSelectProps, 'onSelect' | 'value' | 'children'>;
|
14
|
-
export declare function PageSelectOption<T>(props: PageSelectOptionProps<T>): JSX.Element;
|