@ansible/ansible-ui-framework 0.0.607 → 0.0.608
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/{PageForm → framework/PageForm}/Inputs/FormGroupSelect.js +13 -2
- package/cjs/{PageForm → framework/PageForm}/Inputs/FormGroupSelectOption.d.ts +2 -1
- package/cjs/{PageForm → framework/PageForm}/Inputs/FormGroupTextInput.d.ts +1 -1
- package/cjs/{PageForm → framework/PageForm}/Inputs/FormGroupTextInput.js +2 -2
- package/cjs/framework/PageForm/Inputs/FormGroupTypeAheadMultiSelect.d.ts +22 -0
- package/cjs/framework/PageForm/Inputs/FormGroupTypeAheadMultiSelect.js +67 -0
- package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormCheckbox.js +13 -2
- package/cjs/framework/PageForm/Inputs/PageFormCreatableSelect.d.ts +20 -0
- package/cjs/framework/PageForm/Inputs/PageFormCreatableSelect.js +82 -0
- package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormGroup.d.ts +3 -2
- package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormGroup.js +3 -3
- package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormMultiInput.d.ts +3 -1
- package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormMultiInput.js +2 -2
- package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormSelectOption.js +5 -0
- package/cjs/framework/PageForm/Inputs/PageFormSwitch.d.ts +16 -0
- package/cjs/framework/PageForm/Inputs/PageFormSwitch.js +38 -0
- package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormTextInput.d.ts +2 -1
- package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormTextInput.js +6 -7
- package/cjs/{PageTable → framework/PageTable}/PageTable.d.ts +0 -5
- package/cjs/{PageTable → framework/PageTable}/PageTable.js +8 -13
- package/cjs/{PageTable → framework/PageTable}/PageToolbar.js +2 -7
- package/cjs/{components → framework/components}/Help.js +1 -1
- package/cjs/{useSelectDialog.d.ts → framework/useSelectDialog.d.ts} +2 -0
- package/cjs/{useSelectDialog.js → framework/useSelectDialog.js} +7 -7
- package/cjs/frontend/awx/interfaces/Label.d.ts +28 -0
- package/cjs/frontend/awx/interfaces/Label.js +2 -0
- package/package.json +1 -1
- package/cjs/PageForm/Inputs/PageFormSwitch.d.ts +0 -11
- package/cjs/PageForm/Inputs/PageFormSwitch.js +0 -34
- /package/cjs/{BulkActionDialog.d.ts → framework/BulkActionDialog.d.ts} +0 -0
- /package/cjs/{BulkActionDialog.js → framework/BulkActionDialog.js} +0 -0
- /package/cjs/{BulkConfirmationDialog.d.ts → framework/BulkConfirmationDialog.d.ts} +0 -0
- /package/cjs/{BulkConfirmationDialog.js → framework/BulkConfirmationDialog.js} +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageAction.d.ts +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageAction.js +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageActionType.d.ts +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageActionType.js +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageActions.d.ts +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageActions.js +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageBulkAction.d.ts +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageBulkAction.js +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageButtonAction.d.ts +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageButtonAction.js +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageDropdownAction.d.ts +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageDropdownAction.js +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PagePinnedActions.d.ts +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PagePinnedActions.js +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageSingleAction.d.ts +0 -0
- /package/cjs/{PageActions → framework/PageActions}/PageSingleAction.js +0 -0
- /package/cjs/{PageAlertToaster.d.ts → framework/PageAlertToaster.d.ts} +0 -0
- /package/cjs/{PageAlertToaster.js → framework/PageAlertToaster.js} +0 -0
- /package/cjs/{PageAlerts.d.ts → framework/PageAlerts.d.ts} +0 -0
- /package/cjs/{PageAlerts.js → framework/PageAlerts.js} +0 -0
- /package/cjs/{PageBody.d.ts → framework/PageBody.d.ts} +0 -0
- /package/cjs/{PageBody.js → framework/PageBody.js} +0 -0
- /package/cjs/{PageCells → framework/PageCells}/BytesCell.d.ts +0 -0
- /package/cjs/{PageCells → framework/PageCells}/BytesCell.js +0 -0
- /package/cjs/{PageCells → framework/PageCells}/CapacityCell.d.ts +0 -0
- /package/cjs/{PageCells → framework/PageCells}/CapacityCell.js +0 -0
- /package/cjs/{PageCells → framework/PageCells}/CopyCell.d.ts +0 -0
- /package/cjs/{PageCells → framework/PageCells}/CopyCell.js +0 -0
- /package/cjs/{PageCells → framework/PageCells}/DateTimeCell.d.ts +0 -0
- /package/cjs/{PageCells → framework/PageCells}/DateTimeCell.js +0 -0
- /package/cjs/{PageCells → framework/PageCells}/ElapsedTimeCell.d.ts +0 -0
- /package/cjs/{PageCells → framework/PageCells}/ElapsedTimeCell.js +0 -0
- /package/cjs/{PageCells → framework/PageCells}/LabelsCell.d.ts +0 -0
- /package/cjs/{PageCells → framework/PageCells}/LabelsCell.js +0 -0
- /package/cjs/{PageCells → framework/PageCells}/TextCell.d.ts +0 -0
- /package/cjs/{PageCells → framework/PageCells}/TextCell.js +0 -0
- /package/cjs/{PageColumnModal.d.ts → framework/PageColumnModal.d.ts} +0 -0
- /package/cjs/{PageColumnModal.js → framework/PageColumnModal.js} +0 -0
- /package/cjs/{PageDashboard → framework/PageDashboard}/PageChartContainer.d.ts +0 -0
- /package/cjs/{PageDashboard → framework/PageDashboard}/PageChartContainer.js +0 -0
- /package/cjs/{PageDashboard → framework/PageDashboard}/PageDashboardCard.d.ts +0 -0
- /package/cjs/{PageDashboard → framework/PageDashboard}/PageDashboardCard.js +0 -0
- /package/cjs/{PageDashboard → framework/PageDashboard}/PageDashboardChart.d.ts +0 -0
- /package/cjs/{PageDashboard → framework/PageDashboard}/PageDashboardChart.js +0 -0
- /package/cjs/{PageDashboard → framework/PageDashboard}/PageDonutChart.d.ts +0 -0
- /package/cjs/{PageDashboard → framework/PageDashboard}/PageDonutChart.js +0 -0
- /package/cjs/{PageDashboard → framework/PageDashboard}/PageScatterChart.d.ts +0 -0
- /package/cjs/{PageDashboard → framework/PageDashboard}/PageScatterChart.js +0 -0
- /package/cjs/{PageDetails → framework/PageDetails}/PageDetail.d.ts +0 -0
- /package/cjs/{PageDetails → framework/PageDetails}/PageDetail.js +0 -0
- /package/cjs/{PageDetails → framework/PageDetails}/PageDetails.d.ts +0 -0
- /package/cjs/{PageDetails → framework/PageDetails}/PageDetails.js +0 -0
- /package/cjs/{PageDetails → framework/PageDetails}/PageDetailsFromColumns.d.ts +0 -0
- /package/cjs/{PageDetails → framework/PageDetails}/PageDetailsFromColumns.js +0 -0
- /package/cjs/{PageDialog.d.ts → framework/PageDialog.d.ts} +0 -0
- /package/cjs/{PageDialog.js → framework/PageDialog.js} +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/FormGroupSelect.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/FormGroupSelectOption.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/FormGroupTextArea.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/FormGroupTextArea.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormCheckbox.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormFileUpload.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormFileUpload.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormSelect.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormSelect.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormSelectOption.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormSlider.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormSlider.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormTextArea.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormTextArea.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormTextSelect.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Inputs/PageFormTextSelect.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/PageForm.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/PageForm.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/PageFormAlerts.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/PageFormAlerts.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/PageFormButtons.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/PageFormButtons.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/PageFormInputPopover.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/PageFormInputPopover.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/PageFormSchema.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/PageFormSchema.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Utils/PageFormHidden.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Utils/PageFormHidden.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Utils/PageFormSection.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Utils/PageFormSection.js +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Utils/PageFormWatch.d.ts +0 -0
- /package/cjs/{PageForm → framework/PageForm}/Utils/PageFormWatch.js +0 -0
- /package/cjs/{PageFramework.d.ts → framework/PageFramework.d.ts} +0 -0
- /package/cjs/{PageFramework.js → framework/PageFramework.js} +0 -0
- /package/cjs/{PageHeader.d.ts → framework/PageHeader.d.ts} +0 -0
- /package/cjs/{PageHeader.js → framework/PageHeader.js} +0 -0
- /package/cjs/{PageLayout.d.ts → framework/PageLayout.d.ts} +0 -0
- /package/cjs/{PageLayout.js → framework/PageLayout.js} +0 -0
- /package/cjs/{PageTable → framework/PageTable}/PagePagination.d.ts +0 -0
- /package/cjs/{PageTable → framework/PageTable}/PagePagination.js +0 -0
- /package/cjs/{PageTable → framework/PageTable}/PageTableCard.d.ts +0 -0
- /package/cjs/{PageTable → framework/PageTable}/PageTableCard.js +0 -0
- /package/cjs/{PageTable → framework/PageTable}/PageTableCards.d.ts +0 -0
- /package/cjs/{PageTable → framework/PageTable}/PageTableCards.js +0 -0
- /package/cjs/{PageTable → framework/PageTable}/PageTableList.d.ts +0 -0
- /package/cjs/{PageTable → framework/PageTable}/PageTableList.js +0 -0
- /package/cjs/{PageTable → framework/PageTable}/PageTableViewType.d.ts +0 -0
- /package/cjs/{PageTable → framework/PageTable}/PageTableViewType.js +0 -0
- /package/cjs/{PageTable → framework/PageTable}/PageToolbar.d.ts +0 -0
- /package/cjs/{PageTable → framework/PageTable}/useTableItems.d.ts +0 -0
- /package/cjs/{PageTable → framework/PageTable}/useTableItems.js +0 -0
- /package/cjs/{PageTabs.d.ts → framework/PageTabs.d.ts} +0 -0
- /package/cjs/{PageTabs.js → framework/PageTabs.js} +0 -0
- /package/cjs/{Settings.d.ts → framework/Settings.d.ts} +0 -0
- /package/cjs/{Settings.js → framework/Settings.js} +0 -0
- /package/cjs/{components → framework/components}/BulkSelector.d.ts +0 -0
- /package/cjs/{components → framework/components}/BulkSelector.js +0 -0
- /package/cjs/{components → framework/components}/Collapse.d.ts +0 -0
- /package/cjs/{components → framework/components}/Collapse.js +0 -0
- /package/cjs/{components → framework/components}/DetailInfo.d.ts +0 -0
- /package/cjs/{components → framework/components}/DetailInfo.js +0 -0
- /package/cjs/{components → framework/components}/Dotted.d.ts +0 -0
- /package/cjs/{components → framework/components}/Dotted.js +0 -0
- /package/cjs/{components → framework/components}/DropdownControlled.d.ts +0 -0
- /package/cjs/{components → framework/components}/DropdownControlled.js +0 -0
- /package/cjs/{components → framework/components}/EmptyStateCustom.d.ts +0 -0
- /package/cjs/{components → framework/components}/EmptyStateCustom.js +0 -0
- /package/cjs/{components → framework/components}/EmptyStateFilter.d.ts +0 -0
- /package/cjs/{components → framework/components}/EmptyStateFilter.js +0 -0
- /package/cjs/{components → framework/components}/EmptyStateNoData.d.ts +0 -0
- /package/cjs/{components → framework/components}/EmptyStateNoData.js +0 -0
- /package/cjs/{components → framework/components}/EmptyStateUnauthorized.d.ts +0 -0
- /package/cjs/{components → framework/components}/EmptyStateUnauthorized.js +0 -0
- /package/cjs/{components → framework/components}/ErrorBoundary.d.ts +0 -0
- /package/cjs/{components → framework/components}/ErrorBoundary.js +0 -0
- /package/cjs/{components → framework/components}/Help.d.ts +0 -0
- /package/cjs/{components → framework/components}/IconWrapper.d.ts +0 -0
- /package/cjs/{components → framework/components}/IconWrapper.js +0 -0
- /package/cjs/{components → framework/components}/LoadingPage.d.ts +0 -0
- /package/cjs/{components → framework/components}/LoadingPage.js +0 -0
- /package/cjs/{components → framework/components}/LoadingState.d.ts +0 -0
- /package/cjs/{components → framework/components}/LoadingState.js +0 -0
- /package/cjs/{components → framework/components}/Masonry.d.ts +0 -0
- /package/cjs/{components → framework/components}/Masonry.js +0 -0
- /package/cjs/{components → framework/components}/PageGrid.d.ts +0 -0
- /package/cjs/{components → framework/components}/PageGrid.js +0 -0
- /package/cjs/{components → framework/components}/Scrollable.d.ts +0 -0
- /package/cjs/{components → framework/components}/Scrollable.js +0 -0
- /package/cjs/{components → framework/components}/StandardPopover.d.ts +0 -0
- /package/cjs/{components → framework/components}/StandardPopover.js +0 -0
- /package/cjs/{components → framework/components}/icons/RunningIcon.d.ts +0 -0
- /package/cjs/{components → framework/components}/icons/RunningIcon.js +0 -0
- /package/cjs/{components → framework/components}/pfcolors.d.ts +0 -0
- /package/cjs/{components → framework/components}/pfcolors.js +0 -0
- /package/cjs/{components → framework/components}/useBreakPoint.d.ts +0 -0
- /package/cjs/{components → framework/components}/useBreakPoint.js +0 -0
- /package/cjs/{components → framework/components}/useIsMounted.d.ts +0 -0
- /package/cjs/{components → framework/components}/useIsMounted.js +0 -0
- /package/cjs/{components → framework/components}/useOpen.d.ts +0 -0
- /package/cjs/{components → framework/components}/useOpen.js +0 -0
- /package/cjs/{components → framework/components}/usePageNavigate.d.ts +0 -0
- /package/cjs/{components → framework/components}/usePageNavigate.js +0 -0
- /package/cjs/{components → framework/components}/useSearchParams.d.ts +0 -0
- /package/cjs/{components → framework/components}/useSearchParams.js +0 -0
- /package/cjs/{components → framework/components}/useWindowLocation.d.ts +0 -0
- /package/cjs/{components → framework/components}/useWindowLocation.js +0 -0
- /package/cjs/{index.d.ts → framework/index.d.ts} +0 -0
- /package/cjs/{index.js → framework/index.js} +0 -0
- /package/cjs/{useFrameworkTranslations.d.ts → framework/useFrameworkTranslations.d.ts} +0 -0
- /package/cjs/{useFrameworkTranslations.js → framework/useFrameworkTranslations.js} +0 -0
- /package/cjs/{useInMemoryView.d.ts → framework/useInMemoryView.d.ts} +0 -0
- /package/cjs/{useInMemoryView.js → framework/useInMemoryView.js} +0 -0
- /package/cjs/{useSelectMultipleDialog.d.ts → framework/useSelectMultipleDialog.d.ts} +0 -0
- /package/cjs/{useSelectMultipleDialog.js → framework/useSelectMultipleDialog.js} +0 -0
- /package/cjs/{useView.d.ts → framework/useView.d.ts} +0 -0
- /package/cjs/{useView.js → framework/useView.js} +0 -0
- /package/cjs/{utils → framework/utils}/capitalize.d.ts +0 -0
- /package/cjs/{utils → framework/utils}/capitalize.js +0 -0
- /package/cjs/{utils → framework/utils}/compare.d.ts +0 -0
- /package/cjs/{utils → framework/utils}/compare.js +0 -0
- /package/cjs/{utils → framework/utils}/download-file.d.ts +0 -0
- /package/cjs/{utils → framework/utils}/download-file.js +0 -0
- /package/cjs/{utils → framework/utils}/formatDateString.d.ts +0 -0
- /package/cjs/{utils → framework/utils}/formatDateString.js +0 -0
- /package/cjs/{utils → framework/utils}/random-string.d.ts +0 -0
- /package/cjs/{utils → framework/utils}/random-string.js +0 -0
@@ -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;
|
@@ -34,7 +45,7 @@ var react_1 = require("react");
|
|
34
45
|
var PageFormGroup_1 = require("./PageFormGroup");
|
35
46
|
/** A PatternFly FormGroup with a PatternFly Select */
|
36
47
|
function FormGroupSelect(props) {
|
37
|
-
var children = props.children, helperTextInvalid = props.helperTextInvalid, isReadOnly = props.isReadOnly,
|
48
|
+
var value = props.value, onSelect = props.onSelect, children = props.children, helperTextInvalid = props.helperTextInvalid, labelHelpTitle = props.labelHelpTitle, labelHelp = props.labelHelp, helperText = props.helperText, isRequired = props.isRequired, isReadOnly = props.isReadOnly, additionalControls = props.additionalControls, placeholderText = props.placeholderText, selectProps = __rest(props, ["value", "onSelect", "children", "helperTextInvalid", "labelHelpTitle", "labelHelp", "helperText", "isRequired", "isReadOnly", "additionalControls", "placeholderText"]);
|
38
49
|
var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
|
39
50
|
var onToggle = (0, react_1.useCallback)(function () { return setOpen(function (open) { return !open; }); }, []);
|
40
51
|
var onSelectHandler = (0, react_1.useCallback)(function (event, value) {
|
@@ -44,6 +55,6 @@ function FormGroupSelect(props) {
|
|
44
55
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, value.toString());
|
45
56
|
setOpen(false);
|
46
57
|
}, [onSelect]);
|
47
|
-
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({},
|
58
|
+
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({}, selectProps, { label: undefined, placeholderText: placeholderText, 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 })) })));
|
48
59
|
}
|
49
60
|
exports.FormGroupSelect = FormGroupSelect;
|
@@ -1,10 +1,11 @@
|
|
1
|
-
import { ChangeEvent } from 'react';
|
1
|
+
import { ChangeEvent, ReactNode } from 'react';
|
2
2
|
import { FormGroupSelectProps } from './FormGroupSelect';
|
3
3
|
export interface IFormGroupSelectOption<T> {
|
4
4
|
group?: string;
|
5
5
|
label: string;
|
6
6
|
description?: string;
|
7
7
|
value: T;
|
8
|
+
additionalControls?: ReactNode;
|
8
9
|
}
|
9
10
|
export type FormGroupSelectOptionProps<T> = {
|
10
11
|
options: IFormGroupSelectOption<T>[];
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { TextInputProps } from '@patternfly/react-core';
|
2
2
|
import { ReactNode } from 'react';
|
3
3
|
import { PageFormGroupProps } from './PageFormGroup';
|
4
|
-
export type FormGroupTextInputProps = Pick<TextInputProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label' | 'autoComplete' | 'autoFocus' | 'innerRef' | 'minLength' | 'maxLength'> & PageFormGroupProps & {
|
4
|
+
export type FormGroupTextInputProps = Pick<TextInputProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label' | 'autoComplete' | 'autoFocus' | 'innerRef' | 'minLength' | 'maxLength' | 'onBlur'> & PageFormGroupProps & {
|
5
5
|
children?: ReactNode;
|
6
6
|
};
|
7
7
|
/** A PatternFly FormGroup with a PatternFly TextInput */
|
@@ -47,12 +47,12 @@ var PageFormGroup_1 = require("./PageFormGroup");
|
|
47
47
|
/** A PatternFly FormGroup with a PatternFly TextInput */
|
48
48
|
function FormGroupTextInput(props) {
|
49
49
|
var _a = __read((0, react_1.useState)(false), 2), showSecret = _a[0], setShowSecret = _a[1];
|
50
|
-
var
|
50
|
+
var _children = props.children, isReadOnly = props.isReadOnly, placeholder = props.placeholder, formGroupProps = __rest(props, ["children", "isReadOnly", "placeholder"]);
|
51
51
|
var id = props.id
|
52
52
|
? props.id
|
53
53
|
: typeof props.label === 'string'
|
54
54
|
? props.label.toLowerCase().split(' ').join('-')
|
55
55
|
: undefined;
|
56
|
-
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({},
|
56
|
+
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, formGroupProps, { id: id }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInput, { placeholder: placeholder, onChange: props.onChange, id: id, onBlur: props.onBlur, label: undefined, value: props.value, "aria-describedby": id ? "".concat(id, "-form-group") : undefined, validated: props.helperTextInvalid ? 'error' : undefined, type: props.type === 'password' ? (showSecret ? 'text' : 'password') : props.type, readOnlyVariant: isReadOnly ? 'default' : 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, {}) }))), props.children] }) })));
|
57
57
|
}
|
58
58
|
exports.FormGroupTextInput = FormGroupTextInput;
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import { SelectOptionObject, SelectProps, FormGroupProps } from '@patternfly/react-core';
|
2
|
+
import React from 'react';
|
3
|
+
import { Label } from '../../../frontend/awx/interfaces/Label';
|
4
|
+
export type FormGroupSelectProps = Pick<FormGroupProps, 'helperTextInvalid' | 'children'> & Pick<SelectProps, 'footer' | 'isCreatable' | 'isGrouped' | 'placeholderText' | 'value' | 'isDisabled' | 'children' | 'onSelect'> & {
|
5
|
+
isReadOnly?: boolean;
|
6
|
+
placeholderText?: string | React.ReactNode;
|
7
|
+
name: string;
|
8
|
+
options: {
|
9
|
+
value: string | Label;
|
10
|
+
label: string;
|
11
|
+
}[];
|
12
|
+
id?: string;
|
13
|
+
onSelect?: (event: React.MouseEvent | React.ChangeEvent, value: string | SelectOptionObject, isPlaceholder?: boolean) => void;
|
14
|
+
onHandleSelection: (value: string | SelectOptionObject | {
|
15
|
+
name: string;
|
16
|
+
}) => void;
|
17
|
+
isSubmitting: boolean;
|
18
|
+
value: Partial<Label>[];
|
19
|
+
onHandleClear: (chip?: string) => void;
|
20
|
+
};
|
21
|
+
/** A PatternFly FormGroup with a PatternFly Select */
|
22
|
+
export declare function FormGroupTypeAheadMultiSelect(props: FormGroupSelectProps): JSX.Element;
|
@@ -0,0 +1,67 @@
|
|
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 __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
|
+
};
|
24
|
+
var __read = (this && this.__read) || function (o, n) {
|
25
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
26
|
+
if (!m) return o;
|
27
|
+
var i = m.call(o), r, ar = [], e;
|
28
|
+
try {
|
29
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
30
|
+
}
|
31
|
+
catch (error) { e = { error: error }; }
|
32
|
+
finally {
|
33
|
+
try {
|
34
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
35
|
+
}
|
36
|
+
finally { if (e) throw e.error; }
|
37
|
+
}
|
38
|
+
return ar;
|
39
|
+
};
|
40
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
41
|
+
exports.FormGroupTypeAheadMultiSelect = void 0;
|
42
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
43
|
+
var react_core_1 = require("@patternfly/react-core");
|
44
|
+
var react_1 = require("react");
|
45
|
+
var PageFormGroup_1 = require("./PageFormGroup");
|
46
|
+
/** A PatternFly FormGroup with a PatternFly Select */
|
47
|
+
function FormGroupTypeAheadMultiSelect(props) {
|
48
|
+
var onHandleSelection = props.onHandleSelection, onHandleClear = props.onHandleClear, value = props.value, id = props.id, name = props.name, options = props.options, placeholderText = props.placeholderText, isSubmitting = props.isSubmitting, isReadOnly = props.isReadOnly, rest = __rest(props, ["onHandleSelection", "onHandleClear", "value", "id", "name", "options", "placeholderText", "isSubmitting", "isReadOnly"]);
|
49
|
+
var _a = __read((0, react_1.useState)(false), 2), isOpen = _a[0], setIsOpen = _a[1];
|
50
|
+
var chipGroupComponent = function () {
|
51
|
+
if (!value) {
|
52
|
+
return;
|
53
|
+
}
|
54
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.ChipGroup, { children: value.map(function (v) { return ((0, jsx_runtime_1.jsx)(react_core_1.Chip, __assign({ onClick: function () {
|
55
|
+
onHandleClear(v.name);
|
56
|
+
} }, { children: v.name }), v.name)); }) }));
|
57
|
+
};
|
58
|
+
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ chipGroupComponent: chipGroupComponent(), variant: react_core_1.SelectVariant.typeaheadMulti, isCreatable: true, placeholderText: !(value === null || value === void 0 ? void 0 : value.length) && placeholderText, isOpen: isOpen, isCreateOptionOnTop: true, onClear: function () { return onHandleClear(); }, id: id !== null && id !== void 0 ? id : name, selections: value, onToggle: function () {
|
59
|
+
setIsOpen(!isOpen);
|
60
|
+
}, onSelect: function (_, v) {
|
61
|
+
if (typeof v === 'string') {
|
62
|
+
return onHandleSelection({ name: v });
|
63
|
+
}
|
64
|
+
onHandleSelection(v);
|
65
|
+
}, isDisabled: isReadOnly || isSubmitting }, { children: options.map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: option.value }, { children: option.label }), option.label)); }) })) })));
|
66
|
+
}
|
67
|
+
exports.FormGroupTypeAheadMultiSelect = FormGroupTypeAheadMultiSelect;
|
@@ -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
|
Object.defineProperty(exports, "__esModule", { value: true });
|
14
25
|
exports.PageFormCheckbox = void 0;
|
15
26
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
@@ -17,12 +28,12 @@ var react_core_1 = require("@patternfly/react-core");
|
|
17
28
|
var react_hook_form_1 = require("react-hook-form");
|
18
29
|
/** PatternFly Checkbox wrapper for use with react-hook-form */
|
19
30
|
function PageFormCheckbox(props) {
|
20
|
-
var name = props.name, readOnly = props.readOnly, validate = props.validate;
|
31
|
+
var name = props.name, readOnly = props.readOnly, validate = props.validate, rest = __rest(props, ["name", "readOnly", "validate"]);
|
21
32
|
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
|
22
33
|
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, shouldUnregister: true, render: function (_a) {
|
23
34
|
var _b;
|
24
35
|
var _c = _a.field, onChange = _c.onChange, value = _c.value;
|
25
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, __assign({},
|
36
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, __assign({}, rest, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), isChecked: !!value, onChange: onChange, readOnly: readOnly || isSubmitting, minLength: undefined, maxLength: undefined, ref: undefined })));
|
26
37
|
}, rules: { validate: validate } }));
|
27
38
|
}
|
28
39
|
exports.PageFormCheckbox = PageFormCheckbox;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import { ReactElement } from 'react';
|
2
|
+
import { FieldPath, FieldPathValue, FieldValues, Validate } from 'react-hook-form';
|
3
|
+
import { Label } from '../../../frontend/awx/interfaces/Label';
|
4
|
+
export type PageFormSelectOptionProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
|
5
|
+
name: TFieldName;
|
6
|
+
id?: string;
|
7
|
+
options: {
|
8
|
+
value: string | Label;
|
9
|
+
label: string;
|
10
|
+
}[];
|
11
|
+
isRequired?: boolean;
|
12
|
+
label: string;
|
13
|
+
additionalControls?: ReactElement;
|
14
|
+
placeholderText?: string;
|
15
|
+
labelHelp?: string;
|
16
|
+
labelHelpTitle?: string;
|
17
|
+
validate?: Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues> | Record<string, Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues>>;
|
18
|
+
};
|
19
|
+
/** Select wrapper for use with react-hook-form */
|
20
|
+
export declare function PageFormCreatableSelect<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: PageFormSelectOptionProps<TFieldValues, TFieldName>): JSX.Element;
|
@@ -0,0 +1,82 @@
|
|
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 __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
|
+
};
|
24
|
+
var __read = (this && this.__read) || function (o, n) {
|
25
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
26
|
+
if (!m) return o;
|
27
|
+
var i = m.call(o), r, ar = [], e;
|
28
|
+
try {
|
29
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
30
|
+
}
|
31
|
+
catch (error) { e = { error: error }; }
|
32
|
+
finally {
|
33
|
+
try {
|
34
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
35
|
+
}
|
36
|
+
finally { if (e) throw e.error; }
|
37
|
+
}
|
38
|
+
return ar;
|
39
|
+
};
|
40
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
41
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
42
|
+
if (ar || !(i in from)) {
|
43
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
44
|
+
ar[i] = from[i];
|
45
|
+
}
|
46
|
+
}
|
47
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
48
|
+
};
|
49
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
50
|
+
exports.PageFormCreatableSelect = void 0;
|
51
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
52
|
+
var react_hook_form_1 = require("react-hook-form");
|
53
|
+
var capitalize_1 = require("../../utils/capitalize");
|
54
|
+
var FormGroupTypeAheadMultiSelect_1 = require("./FormGroupTypeAheadMultiSelect");
|
55
|
+
/** Select wrapper for use with react-hook-form */
|
56
|
+
function PageFormCreatableSelect(props) {
|
57
|
+
var isRequired = props.isRequired, validate = props.validate, rest = __rest(props, ["isRequired", "validate"]);
|
58
|
+
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting, getValues = _a.getValues;
|
59
|
+
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, shouldUnregister: true, render: function (_a) {
|
60
|
+
var _b;
|
61
|
+
var _c = _a.field, onChange = _c.onChange, value = _c.value, error = _a.fieldState.error;
|
62
|
+
return ((0, jsx_runtime_1.jsx)(FormGroupTypeAheadMultiSelect_1.FormGroupTypeAheadMultiSelect, __assign({}, rest, { id: (_b = props.id) !== null && _b !== void 0 ? _b : props.name, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, value: value, isSubmitting: isSubmitting, onHandleClear: function (chip) {
|
63
|
+
var values = getValues(props.name);
|
64
|
+
onChange(!chip ? [] : values.filter(function (v) { return v.name !== chip; }));
|
65
|
+
}, onHandleSelection: function (v) {
|
66
|
+
var values = getValues(props.name);
|
67
|
+
if (values) {
|
68
|
+
return onChange(__spreadArray(__spreadArray([], __read(values), false), [v], false));
|
69
|
+
}
|
70
|
+
return onChange([v]);
|
71
|
+
} })));
|
72
|
+
}, rules: {
|
73
|
+
required: typeof props.label === 'string' && typeof isRequired === 'boolean'
|
74
|
+
? {
|
75
|
+
value: true,
|
76
|
+
message: "".concat((0, capitalize_1.capitalizeFirstLetter)(props.label.toLocaleLowerCase()), " is required."),
|
77
|
+
}
|
78
|
+
: isRequired,
|
79
|
+
validate: validate,
|
80
|
+
} }));
|
81
|
+
}
|
82
|
+
exports.PageFormCreatableSelect = PageFormCreatableSelect;
|
@@ -1,9 +1,10 @@
|
|
1
1
|
import { FormGroupProps } from '@patternfly/react-core';
|
2
2
|
import { ReactNode } from 'react';
|
3
|
-
export type PageFormGroupProps = Pick<FormGroupProps, 'children' | 'helperText' | 'helperTextInvalid' | 'isRequired' | 'label'> & {
|
3
|
+
export type PageFormGroupProps = Pick<FormGroupProps, 'children' | 'helperText' | 'helperTextInvalid' | 'isRequired' | 'label' | 'labelIcon'> & {
|
4
4
|
id?: string;
|
5
5
|
labelHelpTitle?: string;
|
6
|
-
labelHelp?:
|
6
|
+
labelHelp?: string;
|
7
|
+
additionalControls?: ReactNode;
|
7
8
|
};
|
8
9
|
/** Wrapper over the PatternFly FormGroup making it optional based on if label is given. */
|
9
10
|
export declare function PageFormGroup(props: PageFormGroupProps): JSX.Element;
|
@@ -14,11 +14,11 @@ 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
|
17
|
+
var Help_1 = require("../../components/Help");
|
18
18
|
/** Wrapper over the PatternFly FormGroup making it optional based on if label is given. */
|
19
19
|
function PageFormGroup(props) {
|
20
20
|
var _a;
|
21
|
-
var children = props.children, helperText = props.helperText, helperTextInvalid = props.helperTextInvalid, isRequired = props.isRequired, label = props.label;
|
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,
|
21
|
+
var children = props.children, helperText = props.helperText, helperTextInvalid = props.helperTextInvalid, isRequired = props.isRequired, labelHelp = props.labelHelp, labelHelpTitle = props.labelHelpTitle, label = props.label;
|
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, labelInfo: props.additionalControls, labelIcon: labelHelp ? (0, jsx_runtime_1.jsx)(Help_1.Help, { title: labelHelpTitle, help: labelHelp }) : undefined }, { children: children })));
|
23
23
|
}
|
24
24
|
exports.PageFormGroup = PageFormGroup;
|
@@ -1,15 +1,17 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
+
import { ChipGroupProps } from '@patternfly/react-core';
|
2
3
|
import { FieldPath, FieldValues, Validate, ValidationRule } from 'react-hook-form';
|
3
4
|
import { PageFormGroupProps } from './PageFormGroup';
|
4
5
|
export type PageFormMultiInputProps<T, TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
|
5
6
|
name: TFieldName;
|
7
|
+
placeholder?: string;
|
6
8
|
minLength?: number | ValidationRule<number>;
|
7
9
|
maxLength?: number | ValidationRule<number>;
|
8
10
|
pattern?: ValidationRule<RegExp>;
|
9
11
|
validate?: Validate<T[], TFieldValues>;
|
10
12
|
selectTitle?: string;
|
11
13
|
selectOpen?: (callback: (selection: T[]) => void, title: string) => void;
|
12
|
-
} & Omit<PageFormGroupProps, 'onChange' | 'value'
|
14
|
+
} & Omit<PageFormGroupProps, 'onChange' | 'value'> & ChipGroupProps;
|
13
15
|
interface FieldValuesWithArray<T> extends FieldValues {
|
14
16
|
[key: string]: T[];
|
15
17
|
}
|
@@ -58,7 +58,7 @@ var ChipHolder = styled_components_1.default.div(templateObject_1 || (templateOb
|
|
58
58
|
return props.isDisabled ? 'var(--pf-global--disabled-color--300)' : null;
|
59
59
|
});
|
60
60
|
function PageFormMultiInput(props) {
|
61
|
-
var validate = props.validate, selectTitle = props.selectTitle, selectOpen = props.selectOpen, formGroupInputProps = __rest(props, ["validate", "selectTitle", "selectOpen"]);
|
61
|
+
var validate = props.validate, selectTitle = props.selectTitle, selectOpen = props.selectOpen, placeholder = props.placeholder, formGroupInputProps = __rest(props, ["validate", "selectTitle", "selectOpen", "placeholder"]);
|
62
62
|
var label = props.label, name = props.name, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern;
|
63
63
|
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, setValue = _a.setValue, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
|
64
64
|
var _c = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _c[0];
|
@@ -68,7 +68,7 @@ function PageFormMultiInput(props) {
|
|
68
68
|
var removeItem = function (item) {
|
69
69
|
onChange(value.filter(function (i) { return i.id !== item.id; }));
|
70
70
|
};
|
71
|
-
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, formGroupInputProps, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), helperTextInvalid: !(validate && isValidating) && (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)(ChipHolder, __assign({ isDisabled: isSubmitting, className: "pf-c-form-control" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ChipGroup, __assign({ numChips: 5, expandedText: translations.showLess, collapsedText: translations.countMore.replace('{count}', "".concat((value === null || value === void 0 ? void 0 : value.length) - 5)) }, { children: value === null || value === void 0 ? void 0 : value.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.Chip, __assign({ onClick: function () { return removeItem(item); } }, { children: item.name }), item.id)); }) })) })), selectTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () {
|
71
|
+
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, formGroupInputProps, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message) }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(value === null || value === void 0 ? void 0 : value.length) ? ((0, jsx_runtime_1.jsx)(ChipHolder, __assign({ isDisabled: isSubmitting, className: "pf-c-form-control" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ChipGroup, __assign({ numChips: 5, expandedText: translations.showLess, collapsedText: translations.countMore.replace('{count}', "".concat((value === null || value === void 0 ? void 0 : value.length) - 5)) }, { children: value === null || value === void 0 ? void 0 : value.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.Chip, __assign({ onClick: function () { return removeItem(item); } }, { children: item.name }), item.id)); }) })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.TextInput, { "aria-label": placeholder, isDisabled: true, placeholder: placeholder })), selectTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () {
|
72
72
|
return selectOpen === null || selectOpen === void 0 ? void 0 : selectOpen(function (items) {
|
73
73
|
setValue(name, items, {
|
74
74
|
shouldValidate: true,
|
@@ -23,6 +23,11 @@ function PageFormSelectOption(props) {
|
|
23
23
|
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, shouldUnregister: true, render: function (_a) {
|
24
24
|
var _b;
|
25
25
|
var _c = _a.field, onChange = _c.onChange, value = _c.value, error = _a.fieldState.error;
|
26
|
+
if (value === '') {
|
27
|
+
if (props.options.length === 1 && isRequired) {
|
28
|
+
onChange(props.options[0].value);
|
29
|
+
}
|
30
|
+
}
|
26
31
|
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 })));
|
27
32
|
}, rules: {
|
28
33
|
required: typeof label === 'string' && typeof isRequired === 'boolean'
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { FieldPath, FieldValues, Validate, ValidationRule } from 'react-hook-form';
|
2
|
+
import { SwitchProps } from '@patternfly/react-core';
|
3
|
+
import { ReactElement } from 'react';
|
4
|
+
export type PageFormSwitchProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
|
5
|
+
name: TFieldName;
|
6
|
+
helperText?: string;
|
7
|
+
isRequired?: boolean;
|
8
|
+
pattern?: ValidationRule<RegExp>;
|
9
|
+
validate?: Validate<string, TFieldValues> | Record<string, Validate<string, TFieldValues>>;
|
10
|
+
autoFocus?: boolean;
|
11
|
+
additionalControls?: ReactElement;
|
12
|
+
formLabel?: string;
|
13
|
+
labelHelp?: string;
|
14
|
+
labelHelpTitle?: string;
|
15
|
+
} & Omit<SwitchProps, 'onChange' | 'ref' | 'instance'>;
|
16
|
+
export declare function PageFormSwitch<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: PageFormSwitchProps<TFieldValues, TFieldName>): JSX.Element;
|
@@ -0,0 +1,38 @@
|
|
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 __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
|
+
};
|
24
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
25
|
+
exports.PageFormSwitch = void 0;
|
26
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
27
|
+
var react_core_1 = require("@patternfly/react-core");
|
28
|
+
var react_hook_form_1 = require("react-hook-form");
|
29
|
+
var Help_1 = require("../../components/Help");
|
30
|
+
function PageFormSwitch(props) {
|
31
|
+
var name = props.name, id = props.id, helperText = props.helperText, validate = props.validate, additionalControls = props.additionalControls, formLabel = props.formLabel, labelHelp = props.labelHelp, labelHelpTitle = props.labelHelpTitle, rest = __rest(props, ["name", "id", "helperText", "validate", "additionalControls", "formLabel", "labelHelp", "labelHelpTitle"]);
|
32
|
+
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
|
33
|
+
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, shouldUnregister: true, render: function (_a) {
|
34
|
+
var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
|
35
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message), fieldId: id, label: formLabel, helperText: helperText, validated: (error === null || error === void 0 ? void 0 : error.message) ? 'error' : undefined, labelInfo: additionalControls, labelIcon: labelHelp ? (0, jsx_runtime_1.jsx)(Help_1.Help, { title: labelHelpTitle, help: labelHelp }) : undefined }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Switch, __assign({}, rest, { isChecked: value, onChange: function (e) { return onChange(e); }, isDisabled: isSubmitting })) })));
|
36
|
+
} }));
|
37
|
+
}
|
38
|
+
exports.PageFormSwitch = PageFormSwitch;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
|
1
|
+
import { ReactElement } from 'react';
|
2
2
|
import { FieldPath, FieldPathValue, FieldValues, Validate, ValidationRule } from 'react-hook-form';
|
3
3
|
import { FormGroupTextInputProps } from './FormGroupTextInput';
|
4
4
|
export type PageFormTextInputProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TSelection extends FieldValues = FieldValues> = {
|
@@ -10,6 +10,7 @@ export type PageFormTextInputProps<TFieldValues extends FieldValues = FieldValue
|
|
10
10
|
selectTitle?: string;
|
11
11
|
selectValue?: (selection: TSelection) => FieldPathValue<TSelection, FieldPath<TSelection>>;
|
12
12
|
selectOpen?: (callback: (selection: TSelection) => void, title: string) => void;
|
13
|
+
button?: ReactElement;
|
13
14
|
} & Omit<FormGroupTextInputProps, 'onChange' | 'value'>;
|
14
15
|
/** PatternFly TextInput wrapper for use with react-hook-form */
|
15
16
|
export declare function PageFormTextInput<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TSelection extends FieldValues = FieldValues>(props: PageFormTextInputProps<TFieldValues, TFieldName, TSelection>): JSX.Element;
|
@@ -31,13 +31,12 @@ var capitalize_1 = require("../../utils/capitalize");
|
|
31
31
|
var FormGroupTextInput_1 = require("./FormGroupTextInput");
|
32
32
|
/** PatternFly TextInput wrapper for use with react-hook-form */
|
33
33
|
function PageFormTextInput(props) {
|
34
|
-
var isReadOnly = props.isReadOnly, validate = props.validate, selectTitle = props.selectTitle,
|
35
|
-
var label = props.label
|
36
|
-
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, setValue = _a.setValue, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
|
34
|
+
var name = props.name, isReadOnly = props.isReadOnly, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern, validate = props.validate, selectTitle = props.selectTitle, button = props.button, id = props.id, selectOpen = props.selectOpen, selectValue = props.selectValue, rest = __rest(props, ["name", "isReadOnly", "isRequired", "minLength", "maxLength", "pattern", "validate", "selectTitle", "button", "id", "selectOpen", "selectValue"]);
|
35
|
+
var label = props.label;
|
36
|
+
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, setValue = _a.setValue, trigger = _a.trigger, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
|
37
37
|
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, shouldUnregister: true, render: function (_a) {
|
38
|
-
var _b;
|
39
|
-
|
40
|
-
return ((0, jsx_runtime_1.jsx)(FormGroupTextInput_1.FormGroupTextInput, __assign({}, formGroupInputProps, { id: (_b = props.id) !== null && _b !== void 0 ? _b : name.split('.').join('-'), value: value, onChange: onChange, helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message), isReadOnly: isReadOnly || isSubmitting, minLength: undefined, maxLength: undefined }, { children: selectTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () {
|
38
|
+
var _b = _a.field, onChange = _b.onChange, value = _b.value, name = _b.name, error = _a.fieldState.error;
|
39
|
+
return ((0, jsx_runtime_1.jsx)(FormGroupTextInput_1.FormGroupTextInput, __assign({}, rest, { onBlur: function () { return trigger(name); }, isRequired: isRequired, id: id !== null && id !== void 0 ? id : name.split('.').join('-'), value: value, onChange: onChange, helperTextInvalid: !(validate && isValidating) && (error === null || error === void 0 ? void 0 : error.message), isReadOnly: isReadOnly || isSubmitting, minLength: undefined, maxLength: undefined }, { children: selectTitle && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ ouiaId: "lookup-".concat(name, "-button"), variant: "control", onClick: function () {
|
41
40
|
return selectOpen === null || selectOpen === void 0 ? void 0 : selectOpen(function (item) {
|
42
41
|
if (selectValue) {
|
43
42
|
var value_1 = selectValue(item);
|
@@ -45,7 +44,7 @@ function PageFormTextInput(props) {
|
|
45
44
|
shouldValidate: true,
|
46
45
|
});
|
47
46
|
}
|
48
|
-
},
|
47
|
+
}, selectTitle);
|
49
48
|
}, "aria-label": "Options menu", isDisabled: isSubmitting }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.SearchIcon, {}) }))) })));
|
50
49
|
}, rules: {
|
51
50
|
required: typeof label === 'string' && typeof isRequired === 'boolean'
|
@@ -81,11 +81,6 @@ export interface ITableColumnCommon<T extends object> {
|
|
81
81
|
card?: 'name' | 'subtitle' | 'description' | 'hidden';
|
82
82
|
list?: 'name' | 'subtitle' | 'description' | 'hidden' | 'primary' | 'secondary';
|
83
83
|
}
|
84
|
-
export declare enum TableColumnSomething {
|
85
|
-
'id' = 0,
|
86
|
-
'name' = 1,
|
87
|
-
'description' = 2
|
88
|
-
}
|
89
84
|
export declare enum TableColumnCardType {
|
90
85
|
'description' = 0,
|
91
86
|
'hidden' = 1,
|
@@ -30,7 +30,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
30
30
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
31
31
|
};
|
32
32
|
Object.defineProperty(exports, "__esModule", { value: true });
|
33
|
-
exports.TableColumnCell = exports.TableColumnCardType = exports.
|
33
|
+
exports.TableColumnCell = exports.TableColumnCardType = exports.PageTable = void 0;
|
34
34
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
35
35
|
var react_core_1 = require("@patternfly/react-core");
|
36
36
|
var react_icons_1 = require("@patternfly/react-icons");
|
@@ -180,7 +180,7 @@ function TableHead(props) {
|
|
180
180
|
}, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: "\u00A0" })))] })) }));
|
181
181
|
}
|
182
182
|
function TableRow(props) {
|
183
|
-
var columns = props.columns, selectItem = props.selectItem, unselectItem = props.unselectItem,
|
183
|
+
var columns = props.columns, selectItem = props.selectItem, unselectItem = props.unselectItem, isItemSelected = props.isItemSelected, isSelectMultiple = props.isSelectMultiple, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
|
184
184
|
var _a = __read((0, react_1.useState)(false), 2), expanded = _a[0], setExpanded = _a[1];
|
185
185
|
var settings = (0, Settings_1.useSettings)();
|
186
186
|
var expandedContent = expandedRow === null || expandedRow === void 0 ? void 0 : expandedRow(item);
|
@@ -207,12 +207,13 @@ function TableRow(props) {
|
|
207
207
|
}
|
208
208
|
: undefined, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { select: {
|
209
209
|
rowIndex: rowIndex,
|
210
|
-
onSelect: function () {
|
211
|
-
if (
|
212
|
-
|
210
|
+
onSelect: function (_event, isSelecting) {
|
211
|
+
if (isSelecting) {
|
212
|
+
selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
|
213
|
+
}
|
214
|
+
else {
|
215
|
+
unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
|
213
216
|
}
|
214
|
-
selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
|
215
|
-
onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
|
216
217
|
},
|
217
218
|
isSelected: isItemSelected !== null && isItemSelected !== void 0 ? isItemSelected : false,
|
218
219
|
variant: isSelectMultiple ? 'checkbox' : 'radio',
|
@@ -236,12 +237,6 @@ function TableCells(props) {
|
|
236
237
|
zIndex: actionsExpanded ? 301 : undefined,
|
237
238
|
}, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: rowActions, selectedItem: item, position: react_core_1.DropdownPosition.right, iconOnly: true, onOpen: setActionsExpanded }) })))] }));
|
238
239
|
}
|
239
|
-
var TableColumnSomething;
|
240
|
-
(function (TableColumnSomething) {
|
241
|
-
TableColumnSomething[TableColumnSomething["id"] = 0] = "id";
|
242
|
-
TableColumnSomething[TableColumnSomething["name"] = 1] = "name";
|
243
|
-
TableColumnSomething[TableColumnSomething["description"] = 2] = "description";
|
244
|
-
})(TableColumnSomething = exports.TableColumnSomething || (exports.TableColumnSomething = {}));
|
245
240
|
var TableColumnCardType;
|
246
241
|
(function (TableColumnCardType) {
|
247
242
|
TableColumnCardType[TableColumnCardType["description"] = 0] = "description";
|
@@ -195,9 +195,7 @@ function ToolbarFilterInput(props) {
|
|
195
195
|
}
|
196
196
|
function ToolbarTextFilter(props) {
|
197
197
|
var _a = __read((0, react_1.useState)(''), 2), value = _a[0], setValue = _a[1];
|
198
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.TextInputGroup, __assign({ style: { minWidth: 220 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupMain, { id: props.id,
|
199
|
-
// ref={ref}
|
200
|
-
value: value, onChange: function (e, v) {
|
198
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.TextInputGroup, __assign({ style: { minWidth: 220 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupMain, { id: props.id, value: value, onChange: function (e, v) {
|
201
199
|
if (typeof e === 'string')
|
202
200
|
setValue(e);
|
203
201
|
else
|
@@ -206,11 +204,8 @@ function ToolbarTextFilter(props) {
|
|
206
204
|
if (value && event.key === 'Enter') {
|
207
205
|
props.addFilter(value);
|
208
206
|
setValue('');
|
209
|
-
// ref.current?.focus() // Does not work because PF does not expose ref
|
210
207
|
}
|
211
|
-
}, placeholder: props.placeholder }), value !== '' && ((0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupUtilities, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "plain", "aria-label": "clear filter", onClick: function () { return setValue(''); }, style: { opacity: value ? undefined : 0 },
|
212
|
-
// tabIndex={value ? undefined : -1}
|
213
|
-
tabIndex: -1 }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.TimesIcon, {}) })) }))] })), (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: value ? 'primary' : 'control', "aria-label": "apply filter", onClick: function () {
|
208
|
+
}, placeholder: props.placeholder }), value !== '' && ((0, jsx_runtime_1.jsx)(react_core_1.TextInputGroupUtilities, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "plain", "aria-label": "clear filter", onClick: function () { return setValue(''); }, style: { opacity: value ? undefined : 0 }, tabIndex: -1 }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.TimesIcon, {}) })) }))] })), (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: value ? 'primary' : 'control', "aria-label": "apply filter", onClick: function () {
|
214
209
|
props.addFilter(value);
|
215
210
|
setValue('');
|
216
211
|
}, tabIndex: -1, isDisabled: !value }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ArrowRightIcon, {}) }))] }));
|
@@ -19,6 +19,6 @@ function Help(props) {
|
|
19
19
|
var help = props.help, title = props.title;
|
20
20
|
if (!help)
|
21
21
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
22
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: title, bodyContent: help, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "
|
22
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: title, bodyContent: help, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "plain", style: { padding: 0, marginLeft: '8px', verticalAlign: 'middle' } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) })) })));
|
23
23
|
}
|
24
24
|
exports.Help = Help;
|