@ansible/ansible-ui-framework 0.0.556 → 0.0.558

Sign up to get free protection for your applications and to get access to all the features.
Files changed (8) hide show
  1. package/cjs/PageForm/Inputs/PageFormMultiInput.d.ts +20 -0
  2. package/cjs/PageForm/Inputs/PageFormMultiInput.js +86 -0
  3. package/cjs/PageForm/Inputs/PageFormTextInput.js +17 -6
  4. package/cjs/PageTable/PageTable.d.ts +3 -0
  5. package/cjs/PageTable/PageTable.js +13 -11
  6. package/cjs/useSelectDialog.d.ts +8 -6
  7. package/cjs/useSelectDialog.js +20 -6
  8. package/package.json +1 -1
package/cjs/PageForm/Inputs/PageFormMultiInput.d.ts ADDED
@@ -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 {};
package/cjs/PageForm/Inputs/PageFormMultiInput.js ADDED
@@ -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;
package/cjs/PageForm/Inputs/PageFormTextInput.js CHANGED
@@ -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 label = props.label, name = props.name, isReadOnly = props.isReadOnly, isRequired = props.isRequired, minLength = props.minLength, maxLength = props.maxLength, pattern = props.pattern, validate = props.validate, selectTitle = props.selectTitle;
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({}, props, { 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 () {
29
- var _a;
30
- return (_a = props.selectOpen) === null || _a === void 0 ? void 0 : _a.call(props, function (item) {
31
- if (props.selectValue) {
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
  });
package/cjs/PageTable/PageTable.d.ts CHANGED
@@ -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;
@@ -35,6 +36,8 @@ export type PageTableProps<T extends object> = {
35
36
  error?: Error;
36
37
  emptyStateTitle: string;
37
38
  emptyStateDescription?: string;
39
+ emptyStateIcon?: React.ComponentType<any>;
40
+ emptyStateButtonIcon?: React.ReactNode;
38
41
  emptyStateButtonText?: string;
39
42
  emptyStateButtonClick?: () => void;
40
43
  t?: (t: string) => string;
package/cjs/PageTable/PageTable.js CHANGED
@@ -68,30 +68,30 @@ var PageToolbar_1 = require("./PageToolbar");
68
68
  * ```
69
69
  */
70
70
  function PageTable(props) {
71
- var _a;
71
+ var _a, _b;
72
72
  // const { disableBodyPadding } = props
73
73
  var toolbarActions = props.toolbarActions, filters = props.filters, error = props.error, itemCount = props.itemCount;
74
- var _b = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _b.openColumnModal, columnModal = _b.columnModal, managedColumns = _b.managedColumns;
74
+ var _c = (0, PageColumnModal_1.useColumnModal)(props.tableColumns), openColumnModal = _c.openColumnModal, columnModal = _c.columnModal, managedColumns = _c.managedColumns;
75
75
  var showSelect = props.showSelect ||
76
76
  (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
77
77
  undefined;
78
78
  var hasTableViewType = !props.disableTableView;
79
79
  var hasListViewType = !props.disableListView;
80
80
  // const hasCardViewType = !props.disableCardView;
81
- var _c = __read((0, react_1.useState)(function () {
81
+ var _d = __read((0, react_1.useState)(function () {
82
82
  var _a;
83
83
  return (_a = props.defaultTableView) !== null && _a !== void 0 ? _a : (hasTableViewType
84
84
  ? PageTableViewType_1.PageTableViewTypeE.Table
85
85
  : hasListViewType
86
86
  ? PageTableViewType_1.PageTableViewTypeE.List
87
87
  : PageTableViewType_1.PageTableViewTypeE.Cards);
88
- }), 2), viewType = _c[0], setViewType = _c[1];
88
+ }), 2), viewType = _d[0], setViewType = _d[1];
89
89
  var usePadding = (0, useBreakPoint_1.useBreakpoint)('md') && props.disableBodyPadding !== true;
90
90
  if (error) {
91
91
  return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "dark-2", style: { height: '100%' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: props.errorStateTitle })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: error.message })] })) })));
92
92
  }
93
93
  if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
94
- return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })) }));
94
+ return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 48 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: (_a = props.emptyStateIcon) !== null && _a !== void 0 ? _a : react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick, icon: props.emptyStateButtonIcon ? props.emptyStateButtonIcon : null }, { children: props.emptyStateButtonText })))] })) }));
95
95
  }
96
96
  if (itemCount === undefined) {
97
97
  return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, variant: "light" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Bullseye, { children: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, {}) }) })));
@@ -103,11 +103,11 @@ function PageTable(props) {
103
103
  borderRight: usePadding
104
104
  ? 'thin solid var(--pf-global--BorderColor--100)'
105
105
  : undefined,
106
- } }, { children: (0, jsx_runtime_1.jsx)(PageTableList_1.PageTableList, __assign({}, props, { showSelect: showSelect })) })) })) })), viewType === PageTableViewType_1.PageTableViewTypeE.Cards && ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(PageTableCards_1.PageTableCards, __assign({}, props, { showSelect: showSelect })) })), (!props.autoHidePagination || ((_a = props.itemCount) !== null && _a !== void 0 ? _a : 0) > props.perPage) && ((0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props))), columnModal] }));
106
+ } }, { children: (0, jsx_runtime_1.jsx)(PageTableList_1.PageTableList, __assign({}, props, { showSelect: showSelect })) })) })) })), viewType === PageTableViewType_1.PageTableViewTypeE.Cards && ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(PageTableCards_1.PageTableCards, __assign({}, props, { showSelect: showSelect })) })), (!props.autoHidePagination || ((_b = props.itemCount) !== null && _b !== void 0 ? _b : 0) > props.perPage) && ((0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props))), columnModal] }));
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. Clear all 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: "primary", 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
- unselectAll === null || unselectAll === void 0 ? void 0 : unselectAll();
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
- }, [cancel, confirm, onSelect, selected, setDialog, tableColumns, title, toolbarFilters, view]);
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;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ansible/ansible-ui-framework",
3
3
  "description": "A framework for building applications using PatternFly.",
4
- "version": "0.0.556",
4
+ "version": "0.0.558",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
7
7
  "type": "git",