@ansible/ansible-ui-framework 0.0.556 → 0.0.557
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageForm/Inputs/PageFormMultiInput.d.ts +20 -0
- package/cjs/PageForm/Inputs/PageFormMultiInput.js +86 -0
- package/cjs/PageForm/Inputs/PageFormTextInput.js +17 -6
- package/cjs/PageTable/PageTable.d.ts +1 -0
- package/cjs/PageTable/PageTable.js +7 -5
- package/cjs/useSelectDialog.d.ts +8 -6
- package/cjs/useSelectDialog.js +20 -6
- package/package.json +1 -1
@@ -0,0 +1,20 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { FieldPath, FieldValues, Validate, ValidationRule } from 'react-hook-form';
|
3
|
+
import { PageFormGroupProps } from './PageFormGroup';
|
4
|
+
export type PageFormMultiInputProps<T, TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
|
5
|
+
name: TFieldName;
|
6
|
+
minLength?: number | ValidationRule<number>;
|
7
|
+
maxLength?: number | ValidationRule<number>;
|
8
|
+
pattern?: ValidationRule<RegExp>;
|
9
|
+
validate?: Validate<T[], TFieldValues>;
|
10
|
+
selectTitle?: string;
|
11
|
+
selectOpen?: (callback: (selection: T[]) => void, title: string) => void;
|
12
|
+
} & Omit<PageFormGroupProps, 'onChange' | 'value'>;
|
13
|
+
interface FieldValuesWithArray<T> extends FieldValues {
|
14
|
+
[key: string]: T[];
|
15
|
+
}
|
16
|
+
export declare function PageFormMultiInput<T extends {
|
17
|
+
id: number;
|
18
|
+
name: string;
|
19
|
+
}, TFieldValues extends FieldValuesWithArray<T> = FieldValuesWithArray<T>, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: PageFormMultiInputProps<T, TFieldValues, TFieldName>): JSX.Element;
|
20
|
+
export {};
|
@@ -0,0 +1,86 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
4
|
+
return cooked;
|
5
|
+
};
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
7
|
+
__assign = Object.assign || function(t) {
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
9
|
+
s = arguments[i];
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
11
|
+
t[p] = s[p];
|
12
|
+
}
|
13
|
+
return t;
|
14
|
+
};
|
15
|
+
return __assign.apply(this, arguments);
|
16
|
+
};
|
17
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
18
|
+
var t = {};
|
19
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
20
|
+
t[p] = s[p];
|
21
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
22
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
23
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
24
|
+
t[p[i]] = s[p[i]];
|
25
|
+
}
|
26
|
+
return t;
|
27
|
+
};
|
28
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
29
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
30
|
+
};
|
31
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
32
|
+
exports.PageFormMultiInput = void 0;
|
33
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
34
|
+
var react_core_1 = require("@patternfly/react-core");
|
35
|
+
var react_icons_1 = require("@patternfly/react-icons");
|
36
|
+
var react_i18next_1 = require("react-i18next");
|
37
|
+
var react_hook_form_1 = require("react-hook-form");
|
38
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
39
|
+
var capitalize_1 = require("../../utils/capitalize");
|
40
|
+
var PageFormGroup_1 = require("./PageFormGroup");
|
41
|
+
var ChipHolder = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --pf-c-form-control--Height: auto;\n background-color: ", ";\n"], ["\n --pf-c-form-control--Height: auto;\n background-color: ", ";\n"])), function (props) {
|
42
|
+
return props.isDisabled ? 'var(--pf-global--disabled-color--300)' : null;
|
43
|
+
});
|
44
|
+
function PageFormMultiInput(props) {
|
45
|
+
var validate = props.validate, selectTitle = props.selectTitle, selectOpen = props.selectOpen, formGroupInputProps = __rest(props, ["validate", "selectTitle", "selectOpen"]);
|
46
|
+
var label = props.label, name = props.name, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern;
|
47
|
+
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, setValue = _a.setValue, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
|
48
|
+
var t = (0, react_i18next_1.useTranslation)().t;
|
49
|
+
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, shouldUnregister: true, render: function (_a) {
|
50
|
+
var _b;
|
51
|
+
var _c = _a.field, onChange = _c.onChange, value = _c.value, error = _a.fieldState.error;
|
52
|
+
var removeItem = function (item) {
|
53
|
+
onChange(value.filter(function (i) { return i.id !== item.id; }));
|
54
|
+
};
|
55
|
+
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: t('Show less'), collapsedText: t("".concat((value === null || value === void 0 ? void 0 : value.length) - 5, " more")) }, { 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 () {
|
56
|
+
return selectOpen === null || selectOpen === void 0 ? void 0 : selectOpen(function (items) {
|
57
|
+
setValue(name, items, {
|
58
|
+
shouldValidate: true,
|
59
|
+
});
|
60
|
+
}, props.selectTitle);
|
61
|
+
}, "aria-label": "Options menu", isDisabled: isSubmitting }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.SearchIcon, {}) })))] }) })));
|
62
|
+
}, rules: {
|
63
|
+
required: typeof label === 'string' && typeof isRequired === 'boolean'
|
64
|
+
? {
|
65
|
+
value: true,
|
66
|
+
message: "".concat((0, capitalize_1.capitalizeFirstLetter)(label.toLocaleLowerCase()), " is required."),
|
67
|
+
}
|
68
|
+
: isRequired,
|
69
|
+
minLength: typeof label === 'string' && typeof minLength === 'number'
|
70
|
+
? {
|
71
|
+
value: minLength,
|
72
|
+
message: "".concat((0, capitalize_1.capitalizeFirstLetter)(label.toLocaleLowerCase()), " must be at least ").concat(minLength, " characters."),
|
73
|
+
}
|
74
|
+
: minLength,
|
75
|
+
maxLength: typeof label === 'string' && typeof maxLength === 'number'
|
76
|
+
? {
|
77
|
+
value: maxLength,
|
78
|
+
message: "".concat((0, capitalize_1.capitalizeFirstLetter)(label.toLocaleLowerCase()), " cannot be greater than ").concat(maxLength, " characters."),
|
79
|
+
}
|
80
|
+
: maxLength,
|
81
|
+
pattern: pattern,
|
82
|
+
validate: validate,
|
83
|
+
} }));
|
84
|
+
}
|
85
|
+
exports.PageFormMultiInput = PageFormMultiInput;
|
86
|
+
var templateObject_1;
|
@@ -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.PageFormTextInput = void 0;
|
15
26
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
@@ -20,16 +31,16 @@ var capitalize_1 = require("../../utils/capitalize");
|
|
20
31
|
var FormGroupTextInput_1 = require("./FormGroupTextInput");
|
21
32
|
/** PatternFly TextInput wrapper for use with react-hook-form */
|
22
33
|
function PageFormTextInput(props) {
|
23
|
-
var
|
34
|
+
var isReadOnly = props.isReadOnly, validate = props.validate, selectTitle = props.selectTitle, selectValue = props.selectValue, selectOpen = props.selectOpen, formGroupInputProps = __rest(props, ["isReadOnly", "validate", "selectTitle", "selectValue", "selectOpen"]);
|
35
|
+
var label = props.label, name = props.name, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern;
|
24
36
|
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, setValue = _a.setValue, _b = _a.formState, isSubmitting = _b.isSubmitting, isValidating = _b.isValidating;
|
25
37
|
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, shouldUnregister: true, render: function (_a) {
|
26
38
|
var _b;
|
27
39
|
var _c = _a.field, onChange = _c.onChange, value = _c.value, error = _a.fieldState.error;
|
28
|
-
return ((0, jsx_runtime_1.jsx)(FormGroupTextInput_1.FormGroupTextInput, __assign({},
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
var value_1 = props.selectValue(item);
|
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 () {
|
41
|
+
return selectOpen === null || selectOpen === void 0 ? void 0 : selectOpen(function (item) {
|
42
|
+
if (selectValue) {
|
43
|
+
var value_1 = selectValue(item);
|
33
44
|
setValue(name, value_1, {
|
34
45
|
shouldValidate: true,
|
35
46
|
});
|
@@ -24,6 +24,7 @@ export type PageTableProps<T extends object> = {
|
|
24
24
|
setPerPage: (perPage: number) => void;
|
25
25
|
autoHidePagination?: boolean;
|
26
26
|
isSelected?: (item: T) => boolean;
|
27
|
+
isSelectMultiple?: boolean;
|
27
28
|
selectedItems?: T[];
|
28
29
|
selectItem?: (item: T) => void;
|
29
30
|
unselectItem?: (item: T) => void;
|
@@ -107,7 +107,7 @@ function PageTable(props) {
|
|
107
107
|
}
|
108
108
|
exports.PageTable = PageTable;
|
109
109
|
function PageTableView(props) {
|
110
|
-
var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, onSelect = props.onSelect, unselectAll = props.unselectAll, expandedRow = props.expandedRow;
|
110
|
+
var tableColumns = props.tableColumns, pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, isSelectMultiple = props.isSelectMultiple, keyFn = props.keyFn, rowActions = props.rowActions, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, clearAllFilters = props.clearAllFilters, onSelect = props.onSelect, unselectAll = props.unselectAll, expandedRow = props.expandedRow;
|
111
111
|
var t = props.t;
|
112
112
|
t = t ? t : function (t) { return t; };
|
113
113
|
var showSelect = props.showSelect ||
|
@@ -138,7 +138,7 @@ function PageTableView(props) {
|
|
138
138
|
? new Array(perPage).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsx)(react_table_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_table_1.Td, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }) }, index)); })
|
139
139
|
: pageItems === undefined
|
140
140
|
? new Array(Math.min(perPage, itemCount)).fill(0).map(function (_, index) { return ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, { children: [showSelect && (0, jsx_runtime_1.jsx)(react_table_1.Td, {}), (0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ colSpan: tableColumns.length }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { paddingTop: 5, paddingBottom: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "27px" }) })) }))] }, index)); })
|
141
|
-
: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect, expandedRow: expandedRow }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.SearchIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: t('No results found') })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: t('No results match this filter criteria. Adjust your filters and try again.') }), clearAllFilters && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateSecondaryActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: clearAllFilters }, { children: t('Clear all filters') })) }))] })))] })));
|
141
|
+
: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item, rowIndex) { return ((0, jsx_runtime_1.jsx)(TableRow, { columns: tableColumns, item: item, isItemSelected: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), isSelectMultiple: isSelectMultiple, selectItem: selectItem, unselectItem: unselectItem, rowActions: rowActions, rowIndex: rowIndex, showSelect: showSelect, scrollLeft: scroll.left > 0, scrollRight: scroll.right > 1, unselectAll: unselectAll, onSelect: onSelect, expandedRow: expandedRow }, keyFn ? keyFn(item) : rowIndex)); }) })] })), itemCount === 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.SearchIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: t('No results found') })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: t('No results match this filter criteria. Adjust your filters and try again.') }), clearAllFilters && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateSecondaryActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: clearAllFilters }, { children: t('Clear all filters') })) }))] })))] })));
|
142
142
|
}
|
143
143
|
function TableHead(props) {
|
144
144
|
var columns = props.tableColumns, itemActions = props.rowActions, sort = props.sort, setSort = props.setSort, sortDirection = props.sortDirection, setSortDirection = props.setSortDirection, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
|
@@ -181,7 +181,7 @@ function TableHead(props) {
|
|
181
181
|
}, className: props.scrollRight ? 'pf-m-border-left' : undefined }, { children: "\u00A0" })))] })) }));
|
182
182
|
}
|
183
183
|
function TableRow(props) {
|
184
|
-
var columns = props.columns, selectItem = props.selectItem, unselectItem = props.unselectItem, unselectAll = props.unselectAll, isItemSelected = props.isItemSelected, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
|
184
|
+
var columns = props.columns, selectItem = props.selectItem, unselectItem = props.unselectItem, unselectAll = props.unselectAll, isItemSelected = props.isItemSelected, isSelectMultiple = props.isSelectMultiple, item = props.item, rowActions = props.rowActions, rowIndex = props.rowIndex, showSelect = props.showSelect, onSelect = props.onSelect, expandedRow = props.expandedRow;
|
185
185
|
var _a = __read((0, react_1.useState)(false), 2), expanded = _a[0], setExpanded = _a[1];
|
186
186
|
var settings = (0, Settings_1.useSettings)();
|
187
187
|
var expandedContent = expandedRow === null || expandedRow === void 0 ? void 0 : expandedRow(item);
|
@@ -209,12 +209,14 @@ function TableRow(props) {
|
|
209
209
|
: undefined, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Td, { select: {
|
210
210
|
rowIndex: rowIndex,
|
211
211
|
onSelect: function () {
|
212
|
-
|
212
|
+
if (!isSelectMultiple) {
|
213
|
+
unselectAll === null || unselectAll === void 0 ? void 0 : unselectAll();
|
214
|
+
}
|
213
215
|
selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
|
214
216
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
|
215
217
|
},
|
216
218
|
isSelected: isItemSelected !== null && isItemSelected !== void 0 ? isItemSelected : false,
|
217
|
-
variant: 'radio',
|
219
|
+
variant: isSelectMultiple ? 'checkbox' : 'radio',
|
218
220
|
}, isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), (0, jsx_runtime_1.jsx)(TableCells, { columns: columns, item: item, rowActions: rowActions, scrollLeft: props.scrollLeft, scrollRight: props.scrollRight })] })), expandedRow && expanded && expandedContent && ((0, jsx_runtime_1.jsxs)(react_table_1.Tr, __assign({ className: isItemSelected ? 'selected' : undefined, isExpanded: expanded, style: { boxShadow: 'unset' } }, { children: [(0, jsx_runtime_1.jsx)(react_table_1.Td, {}), showSelect && ((0, jsx_runtime_1.jsx)(react_table_1.Th, { isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft })), onSelect && (0, jsx_runtime_1.jsx)(react_table_1.Td, { isStickyColumn: true, stickyMinWidth: "0px", hasRightBorder: props.scrollLeft }), (0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ colSpan: columns.filter(function (column) { return column.enabled !== false; }).length, style: { paddingBottom: settings.tableLayout === 'compact' ? 12 : 24, paddingTop: 0 } }, { children: (0, jsx_runtime_1.jsx)(react_table_1.CollapseColumn, { children: expandedContent }) })), rowActions !== undefined && rowActions.length > 0 && ((0, jsx_runtime_1.jsx)(react_table_1.Td, __assign({ isActionCell: true, isStickyColumn: true, stickyMinWidth: "0px", style: {
|
219
221
|
right: 0,
|
220
222
|
padding: 0,
|
package/cjs/useSelectDialog.d.ts
CHANGED
@@ -3,7 +3,7 @@ import { ITableColumn } from './PageTable/PageTable';
|
|
3
3
|
import { IToolbarFilter } from './PageTable/PageToolbar';
|
4
4
|
import { ISelected } from './PageTable/useTableItems';
|
5
5
|
import { IView } from './useView';
|
6
|
-
interface ISelectDialogOptions<T extends object> {
|
6
|
+
interface ISelectDialogOptions<T extends object, TMultiple> {
|
7
7
|
view: IView & ISelected<T> & {
|
8
8
|
itemCount?: number;
|
9
9
|
pageItems: T[] | undefined;
|
@@ -13,18 +13,20 @@ interface ISelectDialogOptions<T extends object> {
|
|
13
13
|
confirm: string;
|
14
14
|
cancel: string;
|
15
15
|
selected: string;
|
16
|
+
isMultiple?: TMultiple extends true ? true : false;
|
16
17
|
}
|
17
18
|
export declare function useSelectDialog<T extends {
|
18
19
|
id: number;
|
19
|
-
}>(options: ISelectDialogOptions<T>): (onSelect?: ((item: T) => void) | undefined, title?: string) => void;
|
20
|
-
export type SelectDialogProps<T extends object> = {
|
20
|
+
}, TMultiple = false>(options: ISelectDialogOptions<T, TMultiple>): (onSelect?: (TMultiple extends true ? (item: T[]) => void : (item: T) => void) | undefined, title?: string) => void;
|
21
|
+
export type SelectDialogProps<T extends object, TMultiple> = {
|
21
22
|
title: string;
|
22
23
|
open: boolean;
|
24
|
+
isMultiple?: TMultiple extends true ? true : false;
|
23
25
|
setOpen: (open: boolean) => void;
|
24
|
-
onSelect: (item: T) => void;
|
26
|
+
onSelect: TMultiple extends true ? (item: T[]) => void : (item: T) => void;
|
25
27
|
keyFn: (item: T) => string | number;
|
26
|
-
} & ISelectDialogOptions<T>;
|
28
|
+
} & ISelectDialogOptions<T, TMultiple>;
|
27
29
|
export declare function SelectDialog<T extends {
|
28
30
|
id: number;
|
29
|
-
}>(props: SelectDialogProps<T>): JSX.Element;
|
31
|
+
}, TMultiple = false>(props: SelectDialogProps<T, TMultiple>): JSX.Element;
|
30
32
|
export {};
|
package/cjs/useSelectDialog.js
CHANGED
@@ -35,7 +35,7 @@ var Collapse_1 = require("./components/Collapse");
|
|
35
35
|
var PageDialog_1 = require("./PageDialog");
|
36
36
|
var PageTable_1 = require("./PageTable/PageTable");
|
37
37
|
function useSelectDialog(options) {
|
38
|
-
var view = options.view, tableColumns = options.tableColumns, toolbarFilters = options.toolbarFilters, confirm = options.confirm, cancel = options.cancel, selected = options.selected;
|
38
|
+
var view = options.view, tableColumns = options.tableColumns, toolbarFilters = options.toolbarFilters, confirm = options.confirm, cancel = options.cancel, selected = options.selected, isMultiple = options.isMultiple;
|
39
39
|
var _a = __read((0, react_1.useState)(''), 2), title = _a[0], setTitle = _a[1];
|
40
40
|
var _b = __read((0, react_1.useState)(), 2), onSelect = _b[0], setOnSelect = _b[1];
|
41
41
|
var openSetting = (0, react_1.useCallback)(function (onSelect, title) {
|
@@ -45,24 +45,38 @@ function useSelectDialog(options) {
|
|
45
45
|
var _c = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _c[0], setDialog = _c[1];
|
46
46
|
(0, react_1.useEffect)(function () {
|
47
47
|
if (onSelect !== undefined) {
|
48
|
-
setDialog((0, jsx_runtime_1.jsx)(SelectDialog, { title: title, open: true, setOpen: function () { return setOnSelect(undefined); }, onSelect: onSelect, view: view, tableColumns: tableColumns, toolbarFilters: toolbarFilters, confirm: confirm, cancel: cancel, selected: selected, keyFn: view.keyFn }));
|
48
|
+
setDialog((0, jsx_runtime_1.jsx)(SelectDialog, { title: title, open: true, isMultiple: isMultiple, setOpen: function () { return setOnSelect(undefined); }, onSelect: onSelect, view: view, tableColumns: tableColumns, toolbarFilters: toolbarFilters, confirm: confirm, cancel: cancel, selected: selected, keyFn: view.keyFn }));
|
49
49
|
}
|
50
50
|
else {
|
51
51
|
setDialog(undefined);
|
52
52
|
view.unselectAll();
|
53
53
|
}
|
54
|
-
}, [
|
54
|
+
}, [
|
55
|
+
cancel,
|
56
|
+
confirm,
|
57
|
+
onSelect,
|
58
|
+
selected,
|
59
|
+
setDialog,
|
60
|
+
tableColumns,
|
61
|
+
title,
|
62
|
+
toolbarFilters,
|
63
|
+
view,
|
64
|
+
isMultiple,
|
65
|
+
]);
|
55
66
|
return openSetting;
|
56
67
|
}
|
57
68
|
exports.useSelectDialog = useSelectDialog;
|
58
69
|
function SelectDialog(props) {
|
59
|
-
var title = props.title, open = props.open, setOpen = props.setOpen, onSelect = props.onSelect, view = props.view, tableColumns = props.tableColumns, toolbarFilters = props.toolbarFilters, confirm = props.confirm, cancel = props.cancel, selected = props.selected;
|
70
|
+
var title = props.title, open = props.open, _a = props.isMultiple, isMultiple = _a === void 0 ? false : _a, setOpen = props.setOpen, onSelect = props.onSelect, view = props.view, tableColumns = props.tableColumns, toolbarFilters = props.toolbarFilters, confirm = props.confirm, cancel = props.cancel, selected = props.selected;
|
60
71
|
var onClose = function () { return setOpen(false); };
|
61
72
|
return ((0, jsx_runtime_1.jsxs)(react_core_1.Modal, __assign({ title: title, isOpen: open, onClose: onClose, variant: react_core_1.ModalVariant.medium, tabIndex: 0, actions: [
|
62
73
|
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: function () {
|
63
|
-
if (view.selectedItems.length > 0) {
|
74
|
+
if (!isMultiple && view.selectedItems.length > 0) {
|
64
75
|
onSelect(view.selectedItems[0]);
|
65
76
|
}
|
77
|
+
else if (isMultiple) {
|
78
|
+
onSelect(view.selectedItems);
|
79
|
+
}
|
66
80
|
onClose();
|
67
81
|
}, isAriaDisabled: view.selectedItems.length === 0 }, { children: confirm }), "confirm"),
|
68
82
|
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onClose }, { children: cancel }), "cancel"),
|
@@ -77,6 +91,6 @@ function SelectDialog(props) {
|
|
77
91
|
flexDirection: 'column',
|
78
92
|
maxHeight: 500,
|
79
93
|
overflow: 'hidden',
|
80
|
-
} }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters, emptyStateTitle: "No organizations found", errorStateTitle: "Error loading organizations" }, view, { onSelect: function () { return null; }, disableCardView: true, disableListView: true, disableColumnManagement: true, compact: true })) })) }))] })));
|
94
|
+
} }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters, emptyStateTitle: "No organizations found", errorStateTitle: "Error loading organizations" }, view, { isSelectMultiple: isMultiple, onSelect: function () { return null; }, disableCardView: true, disableListView: true, disableColumnManagement: true, compact: true })) })) }))] })));
|
81
95
|
}
|
82
96
|
exports.SelectDialog = SelectDialog;
|