@ansible/ansible-ui-framework 0.0.374 → 0.0.376
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/BulkActionDialog.d.ts +1 -1
- package/cjs/BulkActionDialog.js +2 -2
- package/cjs/BulkConfirmationDialog.d.ts +1 -1
- package/cjs/BulkConfirmationDialog.js +2 -2
- package/cjs/{cells → PageCells}/BytesCell.d.ts +0 -0
- package/cjs/{cells → PageCells}/BytesCell.js +0 -0
- package/cjs/{cells → PageCells}/CapacityCell.d.ts +0 -0
- package/cjs/{cells → PageCells}/CapacityCell.js +0 -0
- package/cjs/{cells → PageCells}/CopyCell.d.ts +0 -0
- package/cjs/{cells → PageCells}/CopyCell.js +0 -0
- package/cjs/{cells → PageCells}/DateTimeCell.d.ts +0 -0
- package/cjs/{cells → PageCells}/DateTimeCell.js +0 -0
- package/cjs/{cells → PageCells}/ElapsedTimeCell.d.ts +0 -0
- package/cjs/{cells → PageCells}/ElapsedTimeCell.js +0 -0
- package/cjs/{cells → PageCells}/LabelsCell.d.ts +0 -0
- package/cjs/{cells → PageCells}/LabelsCell.js +0 -0
- package/cjs/{cells → PageCells}/TextCell.d.ts +0 -0
- package/cjs/{cells → PageCells}/TextCell.js +0 -0
- package/cjs/PageColumnModal.d.ts +1 -1
- package/cjs/PageDataList.d.ts +1 -1
- package/cjs/PageDataList.js +1 -1
- package/cjs/{PageForm.d.ts → PageForm/PageForm.d.ts} +1 -1
- package/cjs/{PageForm.js → PageForm/PageForm.js} +11 -16
- package/cjs/PageForm/PageFormSelectOption.d.ts +9 -0
- package/cjs/PageForm/PageFormSelectOption.js +29 -0
- package/cjs/{PagePagination.d.ts → PageTable/PagePagination.d.ts} +0 -0
- package/cjs/{PagePagination.js → PageTable/PagePagination.js} +2 -2
- package/cjs/{PageTable.d.ts → PageTable/PageTable.d.ts} +2 -2
- package/cjs/{PageTable.js → PageTable/PageTable.js} +12 -12
- package/cjs/{PageTableCard.d.ts → PageTable/PageTableCard.d.ts} +2 -2
- package/cjs/{PageTableCard.js → PageTable/PageTableCard.js} +3 -3
- package/cjs/{PageTableCards.d.ts → PageTable/PageTableCards.d.ts} +0 -0
- package/cjs/{PageTableCards.js → PageTable/PageTableCards.js} +1 -1
- package/cjs/{PageTableDetails.d.ts → PageTable/PageTableDetails.d.ts} +0 -0
- package/cjs/{PageTableDetails.js → PageTable/PageTableDetails.js} +1 -1
- package/cjs/{PageTableList.d.ts → PageTable/PageTableList.d.ts} +1 -1
- package/cjs/{PageTableList.js → PageTable/PageTableList.js} +2 -2
- package/cjs/{PageTableViewType.d.ts → PageTable/PageTableViewType.d.ts} +0 -0
- package/cjs/{PageTableViewType.js → PageTable/PageTableViewType.js} +0 -0
- package/cjs/{PageToolbar.d.ts → PageTable/PageToolbar.d.ts} +1 -1
- package/cjs/{PageToolbar.js → PageTable/PageToolbar.js} +8 -8
- package/cjs/{useTableItems.d.ts → PageTable/useTableItems.d.ts} +0 -0
- package/cjs/{useTableItems.js → PageTable/useTableItems.js} +0 -0
- package/cjs/Settings.js +6 -6
- package/cjs/components/PageFormGroup.d.ts +11 -0
- package/cjs/components/PageFormGroup.js +27 -0
- package/cjs/components/PageSelect.d.ts +16 -0
- package/cjs/components/PageSelect.js +54 -0
- package/cjs/components/PageSelectOption.d.ts +14 -0
- package/cjs/components/PageSelectOption.js +56 -0
- package/cjs/components/useOpen.d.ts +1 -1
- package/cjs/components/useOpen.js +5 -5
- package/cjs/index.d.ts +16 -13
- package/cjs/index.js +16 -13
- package/cjs/useInMemoryView.d.ts +3 -3
- package/cjs/useInMemoryView.js +1 -1
- package/cjs/useSelectDialog.d.ts +3 -3
- package/cjs/useSelectDialog.js +1 -1
- package/cjs/useSelectMultipleDialog.d.ts +3 -3
- package/cjs/useSelectMultipleDialog.js +1 -1
- package/package.json +1 -1
- package/cjs/components/SingleSelect.d.ts +0 -18
- package/cjs/components/SingleSelect.js +0 -70
@@ -1,5 +1,5 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import { ITableColumn } from './PageTable';
|
2
|
+
import { ITableColumn } from './PageTable/PageTable';
|
3
3
|
export interface BulkActionDialogProps<T extends object> {
|
4
4
|
/** The title of the model.
|
5
5
|
* @link https://www.patternfly.org/v4/components/modal/design-guidelines#confirmation-dialogs
|
package/cjs/BulkActionDialog.js
CHANGED
@@ -94,9 +94,9 @@ var p_limit_1 = __importDefault(require("p-limit"));
|
|
94
94
|
var react_1 = require("react");
|
95
95
|
var pfcolors_1 = require("./components/pfcolors");
|
96
96
|
var PageDialog_1 = require("./PageDialog");
|
97
|
-
var PageTable_1 = require("./PageTable");
|
97
|
+
var PageTable_1 = require("./PageTable/PageTable");
|
98
|
+
var useTableItems_1 = require("./PageTable/useTableItems");
|
98
99
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
99
|
-
var useTableItems_1 = require("./useTableItems");
|
100
100
|
/**
|
101
101
|
* BulkActionDialog is a generic dialog for process bulk actions.
|
102
102
|
*
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { BulkActionDialogProps } from './BulkActionDialog';
|
3
|
-
import { ITableColumn } from './PageTable';
|
3
|
+
import { ITableColumn } from './PageTable/PageTable';
|
4
4
|
export interface BulkConfirmationDialog<T extends object> {
|
5
5
|
/** The title of the model.
|
6
6
|
* @link https://www.patternfly.org/v4/components/modal/design-guidelines#confirmation-dialogs
|
@@ -33,9 +33,9 @@ var react_core_1 = require("@patternfly/react-core");
|
|
33
33
|
var react_1 = require("react");
|
34
34
|
var BulkActionDialog_1 = require("./BulkActionDialog");
|
35
35
|
var PageDialog_1 = require("./PageDialog");
|
36
|
-
var PageTable_1 = require("./PageTable");
|
36
|
+
var PageTable_1 = require("./PageTable/PageTable");
|
37
|
+
var useTableItems_1 = require("./PageTable/useTableItems");
|
37
38
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
38
|
-
var useTableItems_1 = require("./useTableItems");
|
39
39
|
function BulkConfirmationDialog(props) {
|
40
40
|
var title = props.title, items = props.items, keyFn = props.keyFn, confirmationColumns = props.confirmationColumns, onConfirm = props.onConfirm, onClose = props.onClose, confirmText = props.confirmText, actionButtonText = props.actionButtonText, isDanger = props.isDanger;
|
41
41
|
var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
package/cjs/PageColumnModal.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import { ITableColumn } from './PageTable';
|
2
|
+
import { ITableColumn } from './PageTable/PageTable';
|
3
3
|
export declare function useColumnModal<T extends object>(columns: ITableColumn<T>[], t?: (t: string) => string): {
|
4
4
|
openColumnModal: () => void;
|
5
5
|
columnModal: JSX.Element;
|
package/cjs/PageDataList.d.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
2
2
|
import { IPageAction } from './PageActions/PageAction';
|
3
3
|
import { PageHeaderProps } from './PageHeader';
|
4
|
-
import { IToolbarFilter } from './PageToolbar';
|
4
|
+
import { IToolbarFilter } from './PageTable/PageToolbar';
|
5
5
|
export type DataListPageProps<T extends object> = PageHeaderProps & PageDataListProps<T> & {
|
6
6
|
error?: Error;
|
7
7
|
};
|
package/cjs/PageDataList.js
CHANGED
@@ -22,7 +22,7 @@ var PageActionType_1 = require("./PageActions/PageActionType");
|
|
22
22
|
var PageBody_1 = require("./PageBody");
|
23
23
|
var PageHeader_1 = require("./PageHeader");
|
24
24
|
var PageLayout_1 = require("./PageLayout");
|
25
|
-
var PagePagination_1 = require("./PagePagination");
|
25
|
+
var PagePagination_1 = require("./PageTable/PagePagination");
|
26
26
|
var Settings_1 = require("./Settings");
|
27
27
|
function DataListPage(props) {
|
28
28
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(PageLayout_1.PageLayout, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsx)(PageBody_1.PageBody, { children: (0, jsx_runtime_1.jsx)(PageDataList, __assign({}, props)) })] }) }));
|
@@ -2,7 +2,7 @@ import { JSONSchema6 } from 'json-schema';
|
|
2
2
|
import { CSSProperties, ReactNode } from 'react';
|
3
3
|
import { DeepPartial, ErrorOption, FieldPath, FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
|
4
4
|
import { PartialDeep } from 'type-fest';
|
5
|
-
import { PageHeaderProps } from '
|
5
|
+
import { PageHeaderProps } from '../PageHeader';
|
6
6
|
export type FormPageProps<T extends object> = PageHeaderProps & {
|
7
7
|
children?: ReactNode;
|
8
8
|
defaultValues?: PartialDeep<T>;
|
@@ -38,10 +38,11 @@ var react_icons_1 = require("@patternfly/react-icons");
|
|
38
38
|
var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
|
39
39
|
var react_1 = require("react");
|
40
40
|
var react_hook_form_1 = require("react-hook-form");
|
41
|
-
var Scrollable_1 = require("
|
42
|
-
var useBreakPoint_1 = require("
|
43
|
-
var PageHeader_1 = require("
|
44
|
-
var Settings_1 = require("
|
41
|
+
var Scrollable_1 = require("../components/Scrollable");
|
42
|
+
var useBreakPoint_1 = require("../components/useBreakPoint");
|
43
|
+
var PageHeader_1 = require("../PageHeader");
|
44
|
+
var Settings_1 = require("../Settings");
|
45
|
+
var PageFormSelectOption_1 = require("./PageFormSelectOption");
|
45
46
|
function FormPage(props) {
|
46
47
|
// const methods = useForm<PartialDeep<T>>({
|
47
48
|
// defaultValues: props.defaultValues,
|
@@ -110,9 +111,7 @@ function FormTextInput(props) {
|
|
110
111
|
var _c = __read((0, react_1.useState)(false), 2), showSecret = _c[0], setShowSecret = _c[1];
|
111
112
|
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) {
|
112
113
|
void registration.onChange(e);
|
113
|
-
},
|
114
|
-
// innerRef={registration.ref}
|
115
|
-
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, {}) })))] }) })));
|
114
|
+
}, 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, {}) })))] }) })));
|
116
115
|
}
|
117
116
|
exports.FormTextInput = FormTextInput;
|
118
117
|
function FormTextArea(props) {
|
@@ -204,7 +203,7 @@ function FormSelect(props) {
|
|
204
203
|
setOpen(false);
|
205
204
|
}, [field, options]);
|
206
205
|
var index = 0;
|
207
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(id, "-form-group"), fieldId: id, label: props.label, helperTextInvalid: error, helperText: props.help, isRequired: props.required, validated: error ? 'error' : undefined }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ id: id, variant: react_core_1.SelectVariant.single, "aria-describedby": "".concat(id, "-helper"), validated: error ? 'error' : undefined }, field, { isOpen: open, onToggle: function () { return setOpen(!open); }, selections: selectedIndex === -1 ? '' : selectedIndex.toString(), onSelect: onSelect, isCreatable: props.create, isInputFilterPersisted: props.create, placeholderText: props.placeholder, isGrouped: isGrouped, footer: ((_b = props.footer) === null || _b === void 0 ? void 0 : _b.label) && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true, onClick: function () {
|
206
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ id: "".concat(id, "-form-group"), fieldId: id, label: props.label, helperTextInvalid: error, helperText: props.help, isRequired: props.required, validated: error ? 'error' : undefined }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ id: id, variant: react_core_1.SelectVariant.single, "aria-describedby": "".concat(id, "-helper"), validated: error ? 'error' : undefined }, field, { isOpen: open, onToggle: function () { return setOpen(!open); }, selections: selectedIndex === -1 ? '' : selectedIndex.toString(), onSelect: onSelect, isCreatable: props.create, isInputFilterPersisted: props.create, placeholderText: props.placeholder, isGrouped: isGrouped, ref: field.ref, footer: ((_b = props.footer) === null || _b === void 0 ? void 0 : _b.label) && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", isInline: true, onClick: function () {
|
208
207
|
var _a, _b;
|
209
208
|
setOpen(false);
|
210
209
|
(_b = (_a = props.footer) === null || _a === void 0 ? void 0 : _a.click) === null || _b === void 0 ? void 0 : _b.call(_a);
|
@@ -282,7 +281,7 @@ function FormSchema(props) {
|
|
282
281
|
case 'select': {
|
283
282
|
if ('options' in property) {
|
284
283
|
var formSelectProps = property;
|
285
|
-
p.push((0, jsx_runtime_1.jsx)(
|
284
|
+
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));
|
286
285
|
}
|
287
286
|
else {
|
288
287
|
p.push((0, jsx_runtime_1.jsx)(FormTextSelect, { name: base + propertyName, label: title, placeholder: placeholder, required: required, selectTitle: property.selectTitle, selectValue: property.selectValue, selectOpen: property.selectOpen }, base + propertyName));
|
@@ -353,14 +352,10 @@ function PageForm(props) {
|
|
353
352
|
flexGrow: 1,
|
354
353
|
overflow: props.disableScrolling ? undefined : 'hidden',
|
355
354
|
gap: 0,
|
356
|
-
} }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)(react_core_1.
|
357
|
-
// padding={{ default: props.onCancel ? 'padding' : 'noPadding' }}
|
358
|
-
variant: "light", style: { maxWidth: maxWidth } }, { 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)(FormSchema, { 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)(react_core_1.PageSection, __assign({ isFilled: true,
|
359
|
-
// padding={{ default: props.onCancel ? 'padding' : 'noPadding' }}
|
360
|
-
variant: "light", style: { maxWidth: maxWidth } }, { 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)(FormSchema, { 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)(react_core_1.PageSection, __assign({ isFilled: false, style: {
|
361
|
-
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
355
|
+
} }, { 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)(FormSchema, { 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)(FormSchema, { 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: {
|
362
356
|
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--400)' : undefined,
|
363
|
-
|
357
|
+
padding: 24,
|
358
|
+
} }, { 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 })))] })) }))
|
364
359
|
// </PageBody>
|
365
360
|
);
|
366
361
|
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { PageSelectOptionProps } from '../components/PageSelectOption';
|
3
|
+
export type PageFormSelectOption<T> = {
|
4
|
+
name: string;
|
5
|
+
} & Omit<PageSelectOptionProps<T>, 'onSelect' | 'value'>;
|
6
|
+
/**
|
7
|
+
* A PageSelectOption for use in PageForms
|
8
|
+
*/
|
9
|
+
export declare function PageFormSelectOption<T>(props: PageFormSelectOption<T>): JSX.Element;
|
@@ -0,0 +1,29 @@
|
|
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.PageFormSelectOption = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var react_hook_form_1 = require("react-hook-form");
|
17
|
+
var PageSelectOption_1 = require("../components/PageSelectOption");
|
18
|
+
/**
|
19
|
+
* A PageSelectOption for use in PageForms
|
20
|
+
*/
|
21
|
+
function PageFormSelectOption(props) {
|
22
|
+
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
|
23
|
+
var name = props.name;
|
24
|
+
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, render: function (_a) {
|
25
|
+
var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
|
26
|
+
return ((0, jsx_runtime_1.jsx)(PageSelectOption_1.PageSelectOption, __assign({}, props, { value: value, onSelect: onChange, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, readOnly: isSubmitting })));
|
27
|
+
} }));
|
28
|
+
}
|
29
|
+
exports.PageFormSelectOption = PageFormSelectOption;
|
File without changes
|
@@ -15,8 +15,8 @@ exports.PagePagination = 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 useBreakPoint_1 = require("
|
19
|
-
var Settings_1 = require("
|
18
|
+
var useBreakPoint_1 = require("../components/useBreakPoint");
|
19
|
+
var Settings_1 = require("../Settings");
|
20
20
|
function PagePagination(props) {
|
21
21
|
var setPage = props.setPage, setPerPage = props.setPerPage;
|
22
22
|
var onSetPage = (0, react_1.useCallback)(function (_event, page) { return setPage(page); }, [setPage]);
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
2
|
-
import { IPageAction } from '
|
3
|
-
import { PageHeaderProps } from '
|
2
|
+
import { IPageAction } from '../PageActions/PageAction';
|
3
|
+
import { PageHeaderProps } from '../PageHeader';
|
4
4
|
import { PageTableViewType } from './PageTableViewType';
|
5
5
|
import { IToolbarFilter } from './PageToolbar';
|
6
6
|
export type TablePageProps<T extends object> = PageHeaderProps & PageTableProps<T> & {
|
@@ -37,23 +37,23 @@ var react_icons_1 = require("@patternfly/react-icons");
|
|
37
37
|
var react_table_1 = require("@patternfly/react-table");
|
38
38
|
var resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
|
39
39
|
var react_1 = require("react");
|
40
|
-
var
|
41
|
-
var
|
42
|
-
var
|
43
|
-
var
|
44
|
-
var
|
45
|
-
var
|
46
|
-
var
|
47
|
-
var
|
48
|
-
var PageColumnModal_1 = require("
|
49
|
-
var PageHeader_1 = require("
|
50
|
-
var PageLayout_1 = require("
|
40
|
+
var Scrollable_1 = require("../components/Scrollable");
|
41
|
+
var useBreakPoint_1 = require("../components/useBreakPoint");
|
42
|
+
var PageActions_1 = require("../PageActions/PageActions");
|
43
|
+
var PageActionType_1 = require("../PageActions/PageActionType");
|
44
|
+
var PageBody_1 = require("../PageBody");
|
45
|
+
var DateTimeCell_1 = require("../PageCells/DateTimeCell");
|
46
|
+
var LabelsCell_1 = require("../PageCells/LabelsCell");
|
47
|
+
var TextCell_1 = require("../PageCells/TextCell");
|
48
|
+
var PageColumnModal_1 = require("../PageColumnModal");
|
49
|
+
var PageHeader_1 = require("../PageHeader");
|
50
|
+
var PageLayout_1 = require("../PageLayout");
|
51
|
+
var Settings_1 = require("../Settings");
|
51
52
|
var PagePagination_1 = require("./PagePagination");
|
52
53
|
var PageTableCards_1 = require("./PageTableCards");
|
53
54
|
var PageTableList_1 = require("./PageTableList");
|
54
55
|
var PageTableViewType_1 = require("./PageTableViewType");
|
55
56
|
var PageToolbar_1 = require("./PageToolbar");
|
56
|
-
var Settings_1 = require("./Settings");
|
57
57
|
function TablePage(props) {
|
58
58
|
return ((0, jsx_runtime_1.jsxs)(PageLayout_1.PageLayout, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsx)(PageTable, __assign({}, props))] }));
|
59
59
|
}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
-
import { LabelColor } from '
|
3
|
-
import { IPageAction } from '
|
2
|
+
import { LabelColor } from '../components/pfcolors';
|
3
|
+
import { IPageAction } from '../PageActions/PageAction';
|
4
4
|
import { ITableColumn } from './PageTable';
|
5
5
|
export interface IPageTableCard {
|
6
6
|
id: string | number;
|
@@ -28,9 +28,9 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
28
28
|
/* eslint-disable @typescript-eslint/no-empty-function */
|
29
29
|
var react_core_1 = require("@patternfly/react-core");
|
30
30
|
var react_1 = require("react");
|
31
|
-
var Details_1 = require("
|
32
|
-
var IconWrapper_1 = require("
|
33
|
-
var PageActions_1 = require("
|
31
|
+
var Details_1 = require("../components/Details");
|
32
|
+
var IconWrapper_1 = require("../components/IconWrapper");
|
33
|
+
var PageActions_1 = require("../PageActions/PageActions");
|
34
34
|
var PageTable_1 = require("./PageTable");
|
35
35
|
function PageTableCard(props) {
|
36
36
|
var _a;
|
File without changes
|
@@ -15,7 +15,7 @@ exports.PageTableCards = 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 Grid_1 = require("
|
18
|
+
var Grid_1 = require("../components/Grid");
|
19
19
|
var PageTableCard_1 = require("./PageTableCard");
|
20
20
|
function PageTableCards(props) {
|
21
21
|
var keyFn = props.keyFn, items = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, showSelect = props.showSelect, defaultCardSubtitle = props.defaultSubtitle;
|
File without changes
|
@@ -15,7 +15,7 @@ exports.TableDetails = void 0;
|
|
15
15
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
16
|
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
17
17
|
/* eslint-disable @typescript-eslint/no-empty-function */
|
18
|
-
var Details_1 = require("
|
18
|
+
var Details_1 = require("../components/Details");
|
19
19
|
var PageTable_1 = require("./PageTable");
|
20
20
|
function TableDetails(props) {
|
21
21
|
var item = props.item, columns = props.columns;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
-
import { IPageAction } from '
|
2
|
+
import { IPageAction } from '../PageActions/PageAction';
|
3
3
|
import { ITableColumn, PageTableProps } from './PageTable';
|
4
4
|
export type PageTableListProps<T extends object> = PageTableProps<T>;
|
5
5
|
export declare function PageTableList<T extends object>(props: PageTableListProps<T>): JSX.Element;
|
@@ -26,8 +26,8 @@ exports.useColumnsToDataList = exports.PageTableList = void 0;
|
|
26
26
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
27
27
|
var react_core_1 = require("@patternfly/react-core");
|
28
28
|
var react_1 = require("react");
|
29
|
-
var IconWrapper_1 = require("
|
30
|
-
var PageActions_1 = require("
|
29
|
+
var IconWrapper_1 = require("../components/IconWrapper");
|
30
|
+
var PageActions_1 = require("../PageActions/PageActions");
|
31
31
|
var PageTable_1 = require("./PageTable");
|
32
32
|
function PageTableList(props) {
|
33
33
|
var keyFn = props.keyFn, pageItems = props.pageItems, tableColumns = props.tableColumns, isSelected = props.isSelected, selectItem = props.selectItem, unselectItem = props.unselectItem, rowActions = props.rowActions, defaultCardSubtitle = props.defaultSubtitle, showSelect = props.showSelect;
|
File without changes
|
File without changes
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { Dispatch, SetStateAction } from 'react';
|
2
|
-
import { IPageAction } from '
|
2
|
+
import { IPageAction } from '../PageActions/PageAction';
|
3
3
|
import { PageTableViewType } from './PageTableViewType';
|
4
4
|
export interface IItemFilter<T extends object> {
|
5
5
|
label: string;
|
@@ -43,14 +43,14 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
43
43
|
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
|
-
var BulkSelector_1 = require("
|
47
|
-
var
|
48
|
-
var useBreakPoint_1 = require("
|
49
|
-
var PageActions_1 = require("
|
50
|
-
var PageActionType_1 = require("
|
46
|
+
var BulkSelector_1 = require("../components/BulkSelector");
|
47
|
+
var PageSelect_1 = require("../components/PageSelect");
|
48
|
+
var useBreakPoint_1 = require("../components/useBreakPoint");
|
49
|
+
var PageActions_1 = require("../PageActions/PageActions");
|
50
|
+
var PageActionType_1 = require("../PageActions/PageActionType");
|
51
|
+
var Settings_1 = require("../Settings");
|
52
|
+
var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
|
51
53
|
var PageTableViewType_1 = require("./PageTableViewType");
|
52
|
-
var Settings_1 = require("./Settings");
|
53
|
-
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
54
54
|
function toolbarActionsHaveBulkActions(actions) {
|
55
55
|
var e_1, _a;
|
56
56
|
if (!actions)
|
@@ -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)(PageSelect_1.PageSelect, __assign({ onSelect: setSeletedFilter, 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)
|
File without changes
|
File without changes
|
package/cjs/Settings.js
CHANGED
@@ -31,7 +31,7 @@ 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
|
34
|
+
var PageSelect_1 = require("./components/PageSelect");
|
35
35
|
var PageDialog_1 = require("./PageDialog");
|
36
36
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
37
37
|
exports.SettingsContext = (0, react_1.createContext)([
|
@@ -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)(PageSelect_1.PageSelect, __assign({ 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)(PageSelect_1.PageSelect, __assign({ 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)(PageSelect_1.PageSelect, __assign({ 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)(PageSelect_1.PageSelect, __assign({ 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)(PageSelect_1.PageSelect, __assign({ 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;
|
@@ -0,0 +1,11 @@
|
|
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;
|
@@ -0,0 +1,27 @@
|
|
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.PageFormGroup = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var react_core_1 = require("@patternfly/react-core");
|
17
|
+
/** Wrapper over the PatternFly FormGroup making it optional based on if label is given. */
|
18
|
+
function PageFormGroup(props) {
|
19
|
+
var _a;
|
20
|
+
var children = props.children, helperText = props.helperText, helperTextInvalid = props.helperTextInvalid, isRequired = props.isRequired, label = props.label;
|
21
|
+
if (!label) {
|
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 })));
|
26
|
+
}
|
27
|
+
exports.PageFormGroup = PageFormGroup;
|
@@ -0,0 +1,16 @@
|
|
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;
|
@@ -0,0 +1,54 @@
|
|
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.PageSelect = void 0;
|
31
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
32
|
+
var react_core_1 = require("@patternfly/react-core");
|
33
|
+
var react_1 = require("react");
|
34
|
+
var PageFormGroup_1 = require("./PageFormGroup");
|
35
|
+
/** Wrapper over a PatternFly Select.
|
36
|
+
* Simplifies the PatternFly Select.
|
37
|
+
* Supports a PageFormGroup with label if label is specififed.
|
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];
|
43
|
+
var onToggle = (0, react_1.useCallback)(function () { return setOpen(function (open) { return !open; }); }, []);
|
44
|
+
var onSelectHandler = (0, react_1.useCallback)(function (event, value) {
|
45
|
+
if (typeof value === 'string')
|
46
|
+
onSelect(value, event);
|
47
|
+
else
|
48
|
+
onSelect(value.toString(), event);
|
49
|
+
setOpen(false);
|
50
|
+
}, [onSelect]);
|
51
|
+
var id = (_a = props.id) !== null && _a !== void 0 ? _a : label === null || label === void 0 ? void 0 : label.toLocaleLowerCase().split(' ').join('-');
|
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 })) })));
|
53
|
+
}
|
54
|
+
exports.PageSelect = PageSelect;
|
@@ -0,0 +1,14 @@
|
|
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;
|
@@ -0,0 +1,56 @@
|
|
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.PageSelectOption = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var react_core_1 = require("@patternfly/react-core");
|
17
|
+
var react_1 = require("react");
|
18
|
+
var PageSelect_1 = require("./PageSelect");
|
19
|
+
function PageSelectOption(props) {
|
20
|
+
var onSelect = props.onSelect, value = props.value;
|
21
|
+
var onSelectHandler = (0, react_1.useCallback)(function (label, event) {
|
22
|
+
var _a;
|
23
|
+
onSelect((_a = props.options.find(function (option) { return option.label === label; })) === null || _a === void 0 ? void 0 : _a.value, event);
|
24
|
+
}, [onSelect, props.options]);
|
25
|
+
var options = props.options;
|
26
|
+
options.sort(function (l, r) {
|
27
|
+
var _a, _b, _c, _d;
|
28
|
+
if (((_a = l.group) !== null && _a !== void 0 ? _a : '') < ((_b = r.group) !== null && _b !== void 0 ? _b : ''))
|
29
|
+
return -1;
|
30
|
+
if (((_c = l.group) !== null && _c !== void 0 ? _c : '') > ((_d = r.group) !== null && _d !== void 0 ? _d : ''))
|
31
|
+
return 1;
|
32
|
+
if (l.label < r.label)
|
33
|
+
return -1;
|
34
|
+
if (l.label > r.label)
|
35
|
+
return 1;
|
36
|
+
return 0;
|
37
|
+
});
|
38
|
+
var groups = options.reduce(function (groups, option) {
|
39
|
+
var _a;
|
40
|
+
var group = (_a = option.group) !== null && _a !== void 0 ? _a : '';
|
41
|
+
var optionsArray = groups[group];
|
42
|
+
if (!optionsArray) {
|
43
|
+
optionsArray = [];
|
44
|
+
groups[group] = optionsArray;
|
45
|
+
}
|
46
|
+
optionsArray.push(option);
|
47
|
+
return groups;
|
48
|
+
}, {});
|
49
|
+
var isGrouped = Object.keys(groups).length > 1 ||
|
50
|
+
(Object.keys(groups).length === 1 && Object.keys(groups)[0] !== '');
|
51
|
+
var selected = props.options.find(function (option) { return option.value === value; });
|
52
|
+
return ((0, jsx_runtime_1.jsx)(PageSelect_1.PageSelect, __assign({}, props, { value: selected === null || selected === void 0 ? void 0 : selected.label, onSelect: onSelectHandler, isGrouped: isGrouped }, { children: !isGrouped
|
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
|
+
: 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
|
+
}
|
56
|
+
exports.PageSelectOption = PageSelectOption;
|
@@ -19,14 +19,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
19
19
|
exports.useOpen = void 0;
|
20
20
|
var react_1 = require("react");
|
21
21
|
function useOpen(props) {
|
22
|
-
var _a = __read((0, react_1.useState)(function () { var _a; return (_a = props.open) !== null && _a !== void 0 ? _a : false; }), 2), open = _a[0], setOpenState = _a[1];
|
22
|
+
var _a = __read((0, react_1.useState)(function () { var _a; return (_a = props === null || props === void 0 ? void 0 : props.open) !== null && _a !== void 0 ? _a : false; }), 2), open = _a[0], setOpenState = _a[1];
|
23
23
|
(0, react_1.useEffect)(function () {
|
24
|
-
if (props.open !== undefined) {
|
25
|
-
setOpenState(props.open);
|
24
|
+
if ((props === null || props === void 0 ? void 0 : props.open) !== undefined) {
|
25
|
+
setOpenState(props === null || props === void 0 ? void 0 : props.open);
|
26
26
|
}
|
27
|
-
}, [props.open, setOpenState]);
|
27
|
+
}, [props === null || props === void 0 ? void 0 : props.open, setOpenState]);
|
28
28
|
var setOpen = (0, react_1.useCallback)(function (open) {
|
29
|
-
props.setOpen ? props.setOpen(open) : setOpenState(open);
|
29
|
+
(props === null || props === void 0 ? void 0 : props.setOpen) ? props === null || props === void 0 ? void 0 : props.setOpen(open) : setOpenState(open);
|
30
30
|
}, [props]);
|
31
31
|
var onToggle = (0, react_1.useCallback)(function () {
|
32
32
|
setOpen(!open);
|
package/cjs/index.d.ts
CHANGED
@@ -1,17 +1,12 @@
|
|
1
1
|
export * from './BulkActionDialog';
|
2
2
|
export * from './BulkConfirmationDialog';
|
3
|
-
export * from './cells/BytesCell';
|
4
|
-
export * from './cells/CapacityCell';
|
5
|
-
export * from './cells/CopyCell';
|
6
|
-
export * from './cells/DateTimeCell';
|
7
|
-
export * from './cells/ElapsedTimeCell';
|
8
|
-
export * from './cells/LabelsCell';
|
9
|
-
export * from './cells/TextCell';
|
10
3
|
export * from './components/BulkSelector';
|
11
4
|
export * from './components/Collapse';
|
12
5
|
export * from './components/Details';
|
13
6
|
export * from './components/Help';
|
14
7
|
export * from './components/icons/RunningIcon';
|
8
|
+
export * from './components/PageSelect';
|
9
|
+
export * from './components/PageSelectOption';
|
15
10
|
export * from './components/pfcolors';
|
16
11
|
export * from './components/Scrollable';
|
17
12
|
export * from './components/useBreakPoint';
|
@@ -20,21 +15,29 @@ export * from './PageActions/PageActions';
|
|
20
15
|
export * from './PageActions/PageActionType';
|
21
16
|
export * from './PageAlertToaster';
|
22
17
|
export * from './PageBody';
|
18
|
+
export * from './PageCells/BytesCell';
|
19
|
+
export * from './PageCells/CapacityCell';
|
20
|
+
export * from './PageCells/CopyCell';
|
21
|
+
export * from './PageCells/DateTimeCell';
|
22
|
+
export * from './PageCells/ElapsedTimeCell';
|
23
|
+
export * from './PageCells/LabelsCell';
|
24
|
+
export * from './PageCells/TextCell';
|
23
25
|
export * from './PageDataList';
|
24
26
|
export * from './PageDialog';
|
25
|
-
export * from './PageForm';
|
27
|
+
export * from './PageForm/PageForm';
|
28
|
+
export * from './PageForm/PageFormSelectOption';
|
26
29
|
export * from './PageFramework';
|
27
30
|
export * from './PageHeader';
|
28
31
|
export * from './PageLayout';
|
29
|
-
export * from './PageTable';
|
30
|
-
export * from './PageTableCards';
|
31
|
-
export * from './PageTableDetails';
|
32
|
+
export * from './PageTable/PageTable';
|
33
|
+
export * from './PageTable/PageTableCards';
|
34
|
+
export * from './PageTable/PageTableDetails';
|
35
|
+
export * from './PageTable/PageToolbar';
|
36
|
+
export * from './PageTable/useTableItems';
|
32
37
|
export * from './PageTabs';
|
33
|
-
export * from './PageToolbar';
|
34
38
|
export * from './Settings';
|
35
39
|
export * from './useFrameworkTranslations';
|
36
40
|
export * from './useInMemoryView';
|
37
41
|
export * from './useSelectDialog';
|
38
42
|
export * from './useSelectMultipleDialog';
|
39
|
-
export * from './useTableItems';
|
40
43
|
export * from './utils/compare';
|
package/cjs/index.js
CHANGED
@@ -16,18 +16,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
17
17
|
__exportStar(require("./BulkActionDialog"), exports);
|
18
18
|
__exportStar(require("./BulkConfirmationDialog"), exports);
|
19
|
-
__exportStar(require("./cells/BytesCell"), exports);
|
20
|
-
__exportStar(require("./cells/CapacityCell"), exports);
|
21
|
-
__exportStar(require("./cells/CopyCell"), exports);
|
22
|
-
__exportStar(require("./cells/DateTimeCell"), exports);
|
23
|
-
__exportStar(require("./cells/ElapsedTimeCell"), exports);
|
24
|
-
__exportStar(require("./cells/LabelsCell"), exports);
|
25
|
-
__exportStar(require("./cells/TextCell"), exports);
|
26
19
|
__exportStar(require("./components/BulkSelector"), exports);
|
27
20
|
__exportStar(require("./components/Collapse"), exports);
|
28
21
|
__exportStar(require("./components/Details"), exports);
|
29
22
|
__exportStar(require("./components/Help"), exports);
|
30
23
|
__exportStar(require("./components/icons/RunningIcon"), exports);
|
24
|
+
__exportStar(require("./components/PageSelect"), exports);
|
25
|
+
__exportStar(require("./components/PageSelectOption"), exports);
|
31
26
|
__exportStar(require("./components/pfcolors"), exports);
|
32
27
|
__exportStar(require("./components/Scrollable"), exports);
|
33
28
|
__exportStar(require("./components/useBreakPoint"), exports);
|
@@ -36,21 +31,29 @@ __exportStar(require("./PageActions/PageActions"), exports);
|
|
36
31
|
__exportStar(require("./PageActions/PageActionType"), exports);
|
37
32
|
__exportStar(require("./PageAlertToaster"), exports);
|
38
33
|
__exportStar(require("./PageBody"), exports);
|
34
|
+
__exportStar(require("./PageCells/BytesCell"), exports);
|
35
|
+
__exportStar(require("./PageCells/CapacityCell"), exports);
|
36
|
+
__exportStar(require("./PageCells/CopyCell"), exports);
|
37
|
+
__exportStar(require("./PageCells/DateTimeCell"), exports);
|
38
|
+
__exportStar(require("./PageCells/ElapsedTimeCell"), exports);
|
39
|
+
__exportStar(require("./PageCells/LabelsCell"), exports);
|
40
|
+
__exportStar(require("./PageCells/TextCell"), exports);
|
39
41
|
__exportStar(require("./PageDataList"), exports);
|
40
42
|
__exportStar(require("./PageDialog"), exports);
|
41
|
-
__exportStar(require("./PageForm"), exports);
|
43
|
+
__exportStar(require("./PageForm/PageForm"), exports);
|
44
|
+
__exportStar(require("./PageForm/PageFormSelectOption"), exports);
|
42
45
|
__exportStar(require("./PageFramework"), exports);
|
43
46
|
__exportStar(require("./PageHeader"), exports);
|
44
47
|
__exportStar(require("./PageLayout"), exports);
|
45
|
-
__exportStar(require("./PageTable"), exports);
|
46
|
-
__exportStar(require("./PageTableCards"), exports);
|
47
|
-
__exportStar(require("./PageTableDetails"), exports);
|
48
|
+
__exportStar(require("./PageTable/PageTable"), exports);
|
49
|
+
__exportStar(require("./PageTable/PageTableCards"), exports);
|
50
|
+
__exportStar(require("./PageTable/PageTableDetails"), exports);
|
51
|
+
__exportStar(require("./PageTable/PageToolbar"), exports);
|
52
|
+
__exportStar(require("./PageTable/useTableItems"), exports);
|
48
53
|
__exportStar(require("./PageTabs"), exports);
|
49
|
-
__exportStar(require("./PageToolbar"), exports);
|
50
54
|
__exportStar(require("./Settings"), exports);
|
51
55
|
__exportStar(require("./useFrameworkTranslations"), exports);
|
52
56
|
__exportStar(require("./useInMemoryView"), exports);
|
53
57
|
__exportStar(require("./useSelectDialog"), exports);
|
54
58
|
__exportStar(require("./useSelectMultipleDialog"), exports);
|
55
|
-
__exportStar(require("./useTableItems"), exports);
|
56
59
|
__exportStar(require("./utils/compare"), exports);
|
package/cjs/useInMemoryView.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
import { ITableColumn } from './PageTable';
|
2
|
-
import { IToolbarFilter } from './PageToolbar';
|
3
|
-
import { ISelected } from './useTableItems';
|
1
|
+
import { ITableColumn } from './PageTable/PageTable';
|
2
|
+
import { IToolbarFilter } from './PageTable/PageToolbar';
|
3
|
+
import { ISelected } from './PageTable/useTableItems';
|
4
4
|
import { IView } from './useView';
|
5
5
|
export type IInMemoryView<T extends object> = IView & ISelected<T> & {
|
6
6
|
itemCount: number | undefined;
|
package/cjs/useInMemoryView.js
CHANGED
@@ -28,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
28
|
exports.useInMemoryView = void 0;
|
29
29
|
var get_value_1 = __importDefault(require("get-value"));
|
30
30
|
var react_1 = require("react");
|
31
|
-
var useTableItems_1 = require("./useTableItems");
|
31
|
+
var useTableItems_1 = require("./PageTable/useTableItems");
|
32
32
|
var useView_1 = require("./useView");
|
33
33
|
var compare_1 = require("./utils/compare");
|
34
34
|
function useInMemoryView(options) {
|
package/cjs/useSelectDialog.d.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import { ITableColumn } from './PageTable';
|
3
|
-
import { IToolbarFilter } from './PageToolbar';
|
4
|
-
import { ISelected } from './useTableItems';
|
2
|
+
import { ITableColumn } from './PageTable/PageTable';
|
3
|
+
import { IToolbarFilter } from './PageTable/PageToolbar';
|
4
|
+
import { ISelected } from './PageTable/useTableItems';
|
5
5
|
import { IView } from './useView';
|
6
6
|
interface ISelectDialogOptions<T extends object> {
|
7
7
|
view: IView & ISelected<T> & {
|
package/cjs/useSelectDialog.js
CHANGED
@@ -33,7 +33,7 @@ var react_core_1 = require("@patternfly/react-core");
|
|
33
33
|
var react_1 = require("react");
|
34
34
|
var Collapse_1 = require("./components/Collapse");
|
35
35
|
var PageDialog_1 = require("./PageDialog");
|
36
|
-
var PageTable_1 = require("./PageTable");
|
36
|
+
var PageTable_1 = require("./PageTable/PageTable");
|
37
37
|
function useSelectDialog(options) {
|
38
38
|
var view = options.view, tableColumns = options.tableColumns, toolbarFilters = options.toolbarFilters, confirm = options.confirm, cancel = options.cancel, selected = options.selected;
|
39
39
|
var _a = __read((0, react_1.useState)(''), 2), title = _a[0], setTitle = _a[1];
|
@@ -1,7 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import { ITableColumn } from './PageTable';
|
3
|
-
import { IToolbarFilter } from './PageToolbar';
|
4
|
-
import { ISelected } from './useTableItems';
|
2
|
+
import { ITableColumn } from './PageTable/PageTable';
|
3
|
+
import { IToolbarFilter } from './PageTable/PageToolbar';
|
4
|
+
import { ISelected } from './PageTable/useTableItems';
|
5
5
|
import { IView } from './useView';
|
6
6
|
export type SelectMultipleDialogProps<T extends object> = {
|
7
7
|
title: string;
|
@@ -32,7 +32,7 @@ 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 PageDialog_1 = require("./PageDialog");
|
35
|
-
var PageTable_1 = require("./PageTable");
|
35
|
+
var PageTable_1 = require("./PageTable/PageTable");
|
36
36
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
37
37
|
function SelectMultipleDialog(props) {
|
38
38
|
var _a, _b;
|
package/package.json
CHANGED
@@ -1,18 +0,0 @@
|
|
1
|
-
import { CSSProperties, ReactNode } from 'react';
|
2
|
-
export declare function SingleSelect(props: {
|
3
|
-
id?: string;
|
4
|
-
label: string;
|
5
|
-
value: string;
|
6
|
-
onChange: (value: string) => void;
|
7
|
-
children: ReactNode;
|
8
|
-
style?: CSSProperties;
|
9
|
-
open?: boolean;
|
10
|
-
setOpen?: (open: boolean) => void;
|
11
|
-
}): JSX.Element;
|
12
|
-
export declare function SingleSelect2(props: {
|
13
|
-
id?: string;
|
14
|
-
children: ReactNode;
|
15
|
-
value?: string;
|
16
|
-
onChange: (value: string) => void;
|
17
|
-
label?: string;
|
18
|
-
}): JSX.Element;
|
@@ -1,70 +0,0 @@
|
|
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.SingleSelect2 = exports.SingleSelect = void 0;
|
31
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
32
|
-
var react_core_1 = require("@patternfly/react-core");
|
33
|
-
var react_1 = require("react");
|
34
|
-
var useOpen_1 = require("./useOpen");
|
35
|
-
function SingleSelect(props) {
|
36
|
-
var _a;
|
37
|
-
var onChange = props.onChange;
|
38
|
-
var _b = __read((0, useOpen_1.useOpen)(props), 3), open = _b[0], setOpen = _b[1], onToggle = _b[2];
|
39
|
-
var onSelect = (0, react_1.useCallback)(function (_e, v) {
|
40
|
-
if (typeof v === 'string') {
|
41
|
-
onChange(v);
|
42
|
-
}
|
43
|
-
else {
|
44
|
-
onChange(v.toString());
|
45
|
-
}
|
46
|
-
setOpen(false);
|
47
|
-
}, [onChange, setOpen]);
|
48
|
-
var id = (_a = props.id) !== null && _a !== void 0 ? _a : props.label.toLocaleLowerCase().split(' ').join('-');
|
49
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ label: props.label, fieldId: id, style: props.style }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ id: id, selections: props.value, isOpen: open, onToggle: onToggle, onSelect: onSelect }, { children: props.children })) })));
|
50
|
-
}
|
51
|
-
exports.SingleSelect = SingleSelect;
|
52
|
-
function SingleSelect2(props) {
|
53
|
-
var onChange = props.onChange;
|
54
|
-
var id = props.id;
|
55
|
-
var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
|
56
|
-
var onToggle = (0, react_1.useCallback)(function () {
|
57
|
-
setOpen(function (open) { return !open; });
|
58
|
-
}, []);
|
59
|
-
var onSelect = (0, react_1.useCallback)(function (_e, v) {
|
60
|
-
if (typeof v === 'string') {
|
61
|
-
onChange(v);
|
62
|
-
}
|
63
|
-
else {
|
64
|
-
onChange(v.toString());
|
65
|
-
}
|
66
|
-
setOpen(false);
|
67
|
-
}, [onChange]);
|
68
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ id: id, selections: props.value, isOpen: open, onToggle: onToggle, onSelect: onSelect }, { children: props.children })));
|
69
|
-
}
|
70
|
-
exports.SingleSelect2 = SingleSelect2;
|