@ansible/ansible-ui-framework 0.0.531 → 0.0.533
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/BulkConfirmationDialog.d.ts +7 -1
- package/cjs/BulkConfirmationDialog.js +53 -6
- package/cjs/PageCells/CapacityCell.js +3 -3
- package/cjs/PageDetails/PageDetails.js +1 -1
- package/cjs/PageForm/PageForm.js +3 -1
- package/cjs/PageHeader.js +5 -3
- package/cjs/PageTable/PagePagination.js +1 -1
- package/cjs/PageTable/PageTable.js +1 -1
- package/cjs/PageTable/PageToolbar.js +2 -2
- package/cjs/Settings.js +1 -1
- package/cjs/useSelectDialog.js +4 -3
- package/cjs/useSelectMultipleDialog.js +1 -1
- package/package.json +1 -1
@@ -6,10 +6,16 @@ export interface BulkConfirmationDialog<T extends object> {
|
|
6
6
|
* @link https://www.patternfly.org/v4/components/modal/design-guidelines#confirmation-dialogs
|
7
7
|
*/
|
8
8
|
title: string;
|
9
|
-
/** The prompt that shows up under the confirmation title. */
|
9
|
+
/** The prompt/description that shows up under the confirmation title. */
|
10
10
|
prompt?: string;
|
11
|
+
/** Alert prompts that shows up under the confirmation title. */
|
12
|
+
alertPrompts?: string[];
|
11
13
|
/** The items to confirm for the bulk action. */
|
12
14
|
items: T[];
|
15
|
+
/** A function that determines that whether an action cannot be performed on a selected item
|
16
|
+
* (so that this item can be identified in the confirmation dialog) and returns a tooltip
|
17
|
+
* that can be displayed with the non-actionable row */
|
18
|
+
isItemNonActionable?: (item: T) => string | undefined;
|
13
19
|
/** A function that gets a unique key for each item. */
|
14
20
|
keyFn: (item: T) => string | number;
|
15
21
|
/** The columns to display for confirmation. */
|
@@ -26,39 +26,82 @@ var __read = (this && this.__read) || function (o, n) {
|
|
26
26
|
}
|
27
27
|
return ar;
|
28
28
|
};
|
29
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
30
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
31
|
+
if (ar || !(i in from)) {
|
32
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
33
|
+
ar[i] = from[i];
|
34
|
+
}
|
35
|
+
}
|
36
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
37
|
+
};
|
29
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
30
39
|
exports.useBulkConfirmation = void 0;
|
31
40
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
32
41
|
var react_core_1 = require("@patternfly/react-core");
|
42
|
+
var react_icons_1 = require("@patternfly/react-icons");
|
33
43
|
var react_1 = require("react");
|
34
44
|
var BulkActionDialog_1 = require("./BulkActionDialog");
|
35
45
|
var PageDialog_1 = require("./PageDialog");
|
36
46
|
var PageTable_1 = require("./PageTable/PageTable");
|
37
47
|
var useTableItems_1 = require("./PageTable/useTableItems");
|
38
48
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
49
|
+
var compare_1 = require("./utils/compare");
|
39
50
|
function BulkConfirmationDialog(props) {
|
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;
|
51
|
+
var title = props.title, items = props.items, keyFn = props.keyFn, prompt = props.prompt, alertPrompts = props.alertPrompts, confirmationColumns = props.confirmationColumns, isItemNonActionable = props.isItemNonActionable, onConfirm = props.onConfirm, onClose = props.onClose, confirmText = props.confirmText, actionButtonText = props.actionButtonText, isDanger = props.isDanger;
|
41
52
|
var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
|
42
53
|
var _b = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _b[0];
|
43
54
|
var onCloseClicked = (0, react_1.useCallback)(function () {
|
44
55
|
setDialog(undefined);
|
45
56
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
46
57
|
}, [onClose, setDialog]);
|
47
|
-
|
58
|
+
// Non-actionable rows appear first
|
59
|
+
var sortedItems = (0, react_1.useMemo)(function () {
|
60
|
+
if (isItemNonActionable && items.some(isItemNonActionable)) {
|
61
|
+
return items.sort(function (l, r) { return (0, compare_1.compareStrings)(isItemNonActionable(l), isItemNonActionable(r)); });
|
62
|
+
}
|
63
|
+
return items;
|
64
|
+
}, [items, isItemNonActionable]);
|
65
|
+
var _c = (0, useTableItems_1.usePaged)(sortedItems), paged = _c.paged, page = _c.page, perPage = _c.perPage, setPage = _c.setPage, setPerPage = _c.setPerPage;
|
48
66
|
var _d = __read((0, react_1.useState)(!confirmText), 2), confirmed = _d[0], setConfirmed = _d[1];
|
49
|
-
|
67
|
+
/**
|
68
|
+
* If there are non-actionable rows, the first column will contain exclamation icons
|
69
|
+
* to identify the non-actionable rows.
|
70
|
+
*/
|
71
|
+
var columnsForConfirmation = (0, react_1.useMemo)(function () {
|
72
|
+
if (isItemNonActionable && items.some(isItemNonActionable)) {
|
73
|
+
return __spreadArray([
|
74
|
+
{
|
75
|
+
header: '',
|
76
|
+
cell: function (item) {
|
77
|
+
return isItemNonActionable(item) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: isItemNonActionable(item), trigger: isItemNonActionable(item) ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, __assign({ status: "danger" }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.ExclamationCircleIcon, {}) })) }))) : null;
|
78
|
+
},
|
79
|
+
}
|
80
|
+
], __read(confirmationColumns), false);
|
81
|
+
}
|
82
|
+
return confirmationColumns;
|
83
|
+
}, [confirmationColumns, isItemNonActionable, items]);
|
84
|
+
var actionableItems = (0, react_1.useMemo)(function () {
|
85
|
+
if (isItemNonActionable) {
|
86
|
+
return items.filter(function (item) { return !isItemNonActionable(item); });
|
87
|
+
}
|
88
|
+
return items;
|
89
|
+
}, [isItemNonActionable, items]);
|
90
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.Modal, __assign({ titleIconVariant: isDanger ? 'warning' : undefined, title: title, description: prompt, variant: react_core_1.ModalVariant.medium, isOpen: true, onClose: onCloseClicked, actions: [
|
50
91
|
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: isDanger ? 'danger' : 'primary', onClick: function () {
|
51
92
|
onCloseClicked();
|
52
93
|
onConfirm();
|
53
94
|
}, isAriaDisabled: !confirmed }, { children: actionButtonText }), "submit"),
|
54
95
|
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onClose }, { children: translations.cancelText }), "cancel"),
|
55
|
-
], hasNoBodyWrapper: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ModalBoxBody, __assign({ style: { paddingLeft: 0, paddingRight: 0 } }, { children: [(0, jsx_runtime_1.
|
96
|
+
], hasNoBodyWrapper: true }, { children: items.length > 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.ModalBoxBody, __assign({ style: { paddingLeft: 0, paddingRight: 0 } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: {
|
56
97
|
display: 'flex',
|
57
98
|
flexDirection: 'column',
|
58
99
|
maxHeight: 560,
|
59
100
|
overflow: 'hidden',
|
60
101
|
borderTop: 'thin solid var(--pf-global--BorderColor--100)',
|
61
|
-
} }, { children:
|
102
|
+
} }, { children: [alertPrompts &&
|
103
|
+
alertPrompts.length > 0 &&
|
104
|
+
alertPrompts.map(function (alertPrompt, i) { return ((0, jsx_runtime_1.jsx)(react_core_1.Alert, { isInline: true, title: alertPrompt, variant: "danger" }, i)); }), (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, { pageItems: paged, itemCount: items.length, tableColumns: columnsForConfirmation, keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items" }, "items")] })), confirmText && actionableItems.length > 0 && ((0, jsx_runtime_1.jsx)("div", __assign({ style: { marginLeft: 32, height: 64, display: 'flex', alignItems: 'center' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: "confirm", label: confirmText, isChecked: confirmed, onChange: setConfirmed }) })))] }))) })));
|
62
105
|
}
|
63
106
|
function useBulkConfirmationDialog() {
|
64
107
|
var _a = __read((0, PageDialog_1.usePageDialog)(), 2), _ = _a[0], setDialog = _a[1];
|
@@ -82,7 +125,11 @@ function useBulkConfirmation() {
|
|
82
125
|
var bulkConfirmationDialog = useBulkConfirmationDialog();
|
83
126
|
var bulkActionDialog = (0, BulkActionDialog_1.useBulkActionDialog)();
|
84
127
|
return (0, react_1.useCallback)(function (options) {
|
85
|
-
|
128
|
+
var bulkActionOptions = Object.assign({}, options);
|
129
|
+
if (options.isItemNonActionable && options.isItemNonActionable !== undefined) {
|
130
|
+
bulkActionOptions.items = options.items.filter(function (item) { return options.isItemNonActionable !== undefined && !options.isItemNonActionable(item); });
|
131
|
+
}
|
132
|
+
return bulkConfirmationDialog(__assign(__assign({}, options), { onConfirm: function () { return bulkActionDialog(bulkActionOptions); } }));
|
86
133
|
}, [bulkActionDialog, bulkConfirmationDialog]);
|
87
134
|
}
|
88
135
|
exports.useBulkConfirmation = useBulkConfirmation;
|
@@ -43,9 +43,9 @@ function CapacityCell(props) {
|
|
43
43
|
: ratio >= 0.5
|
44
44
|
? 'var(--pf-global--palette--gold'
|
45
45
|
: 'var(--pf-global--palette--green';
|
46
|
-
var color1 = settings.
|
47
|
-
var color2 = settings.
|
48
|
-
var borderColor = settings.
|
46
|
+
var color1 = settings.activeTheme === 'light' ? "".concat(base, "-100)") : "".concat(base, "-600)");
|
47
|
+
var color2 = settings.activeTheme === 'light' ? "".concat(base, "-400)") : "".concat(base, "-200)");
|
48
|
+
var borderColor = settings.activeTheme === 'light' ? "#0002" : "#fff2";
|
49
49
|
return ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ alignItems: { default: 'alignItemsBaseline' }, spaceItems: { default: 'spaceItemsSm' } }, { children: [props.capacity > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
50
50
|
width: 18,
|
51
51
|
height: 25,
|
@@ -22,7 +22,7 @@ function PageDetails(props) {
|
|
22
22
|
var columns = settings.formColumns;
|
23
23
|
var isCompact = false;
|
24
24
|
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ padding: { default: 'noPadding' }, style: {
|
25
|
-
backgroundColor: settings.
|
25
|
+
backgroundColor: settings.activeTheme === 'dark'
|
26
26
|
? 'var(--pf-global--BackgroundColor--300)'
|
27
27
|
: 'var(--pf-global--BackgroundColor--100)',
|
28
28
|
} }, { children: (0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ orientation: {
|
package/cjs/PageForm/PageForm.js
CHANGED
@@ -128,7 +128,9 @@ function PageForm(props) {
|
|
128
128
|
overflow: props.disableScrolling ? undefined : 'hidden',
|
129
129
|
gap: 0,
|
130
130
|
} }, { children: [props.disableScrolling ? ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: maxWidth, padding: disablePadding ? undefined : 24 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: 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: disablePadding ? undefined : 24 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, span: 12, sm: sm, md: md, lg: lg, xl: xl, xl2: xl2 }, { children: 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: {
|
131
|
-
backgroundColor: settings.
|
131
|
+
backgroundColor: settings.activeTheme === 'dark'
|
132
|
+
? 'var(--pf-global--BackgroundColor--400)'
|
133
|
+
: undefined,
|
132
134
|
padding: disablePadding ? undefined : 24,
|
133
135
|
} }, { 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: (_a = props.cancelText) !== null && _a !== void 0 ? _a : frameworkTranslations.cancelText })))] })) }))) : ((0, jsx_runtime_1.jsx)(PageFormSubmitButton, __assign({ style: { marginTop: 48 } }, { children: props.submitText })))] })) })));
|
134
136
|
if (!disableBody) {
|
package/cjs/PageHeader.js
CHANGED
@@ -69,7 +69,7 @@ function PageHeader(props) {
|
|
69
69
|
paddingLeft: 0,
|
70
70
|
paddingTop: 0,
|
71
71
|
paddingBottom: 0,
|
72
|
-
borderTop: settings.
|
72
|
+
borderTop: settings.activeTheme !== 'light' && settings.borders
|
73
73
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
74
74
|
: undefined,
|
75
75
|
borderBottom: !props.disableBorderBottom && settings.borders
|
@@ -79,13 +79,15 @@ function PageHeader(props) {
|
|
79
79
|
} }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Flex, __assign({ direction: { default: 'row' }, flexWrap: { default: 'nowrap' }, style: { maxWidth: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageNavigation, __assign({ style: { paddingTop: 0, flexShrink: 1, flexGrow: 1 } }, { children: navigation })) })) }))), true && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, style: {
|
80
80
|
paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
|
81
81
|
paddingBottom: xl ? 16 : 12,
|
82
|
-
borderTop: !navigation && settings.
|
82
|
+
borderTop: !navigation && settings.activeTheme !== 'light' && settings.borders
|
83
83
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
84
84
|
: undefined,
|
85
85
|
borderBottom: !props.disableBorderBottom && settings.borders
|
86
86
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
87
87
|
: undefined,
|
88
|
-
backgroundColor: settings.
|
88
|
+
backgroundColor: settings.activeTheme !== 'light'
|
89
|
+
? 'var(--pf-global--BackgroundColor--300)'
|
90
|
+
: undefined,
|
89
91
|
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ flexWrap: { default: 'nowrap' }, alignItems: { default: 'alignItemsStretch' } }, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(Breadcrumbs, { breadcrumbs: breadcrumbs, style: { paddingBottom: lg ? 6 : 4 } })), title ? (props.titleHelp ? ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: props.titleHelpTitle, bodyContent: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [typeof props.titleHelp === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: props.titleHelp })) : (props.titleHelp.map(function (help, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: help }, index)); })), props.titleDocLink && ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), variant: "link", onClick: function () { return window.open(props.titleDocLink, '_blank'); }, isInline: true }, { children: t('Documentation') })) }))] })), position: "bottom-start", removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: [title, (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", style: {
|
90
92
|
padding: 0,
|
91
93
|
marginTop: 1,
|
@@ -25,6 +25,6 @@ function PagePagination(props) {
|
|
25
25
|
var settings = (0, Settings_1.useSettings)();
|
26
26
|
return ((0, jsx_runtime_1.jsx)(react_core_1.Pagination, { variant: react_core_1.PaginationVariant.bottom, itemCount: props.itemCount, page: props.page, perPage: props.perPage, onSetPage: onSetPage, onPerPageSelect: onPerPageSelect, style: __assign(__assign({}, props.style), { borderTop: 'thin solid var(--pf-global--BorderColor--100)', boxShadow: 'none', zIndex: 301,
|
27
27
|
// marginTop: -1,
|
28
|
-
paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6, backgroundColor: settings.
|
28
|
+
paddingTop: compact ? 4 : 6, paddingBottom: compact ? 4 : 6, backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined }) }));
|
29
29
|
}
|
30
30
|
exports.PagePagination = PagePagination;
|
@@ -90,7 +90,7 @@ function PageTable(props) {
|
|
90
90
|
var usePadding = (0, useBreakPoint_1.useBreakpoint)('md') && props.disableBodyPadding !== true;
|
91
91
|
if (error) {
|
92
92
|
return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
93
|
-
backgroundColor: settings.
|
93
|
+
backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
94
94
|
height: '100%',
|
95
95
|
} }, { 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 })] })) })));
|
96
96
|
}
|
@@ -109,7 +109,7 @@ function PageTableToolbar(props) {
|
|
109
109
|
: 'thin solid var(--pf-global--BorderColor--100)',
|
110
110
|
paddingBottom: sm ? undefined : 8,
|
111
111
|
paddingTop: sm ? undefined : 8,
|
112
|
-
backgroundColor: settings.
|
112
|
+
backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
113
113
|
} }, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarContent, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ style: { width: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "36px" }) })) }) })));
|
114
114
|
}
|
115
115
|
return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, __assign({ clearAllFilters: clearAllFilters, style: {
|
@@ -118,7 +118,7 @@ function PageTableToolbar(props) {
|
|
118
118
|
: 'thin solid var(--pf-global--BorderColor--100)',
|
119
119
|
paddingBottom: sm ? undefined : 8,
|
120
120
|
paddingTop: sm ? undefined : 8,
|
121
|
-
backgroundColor: settings.
|
121
|
+
backgroundColor: settings.activeTheme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
122
122
|
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter, placeholderText: "Select filter" }, { 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, { id: "filter-input", filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
|
123
123
|
var _a;
|
124
124
|
var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
|
package/cjs/Settings.js
CHANGED
@@ -74,7 +74,7 @@ function SettingsProvider(props) {
|
|
74
74
|
localStorage.setItem('formColumns', (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple');
|
75
75
|
localStorage.setItem('formLayout', (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical');
|
76
76
|
localStorage.setItem('borders', settings.borders ? 'true' : 'false');
|
77
|
-
var activeTheme = settings.theme
|
77
|
+
var activeTheme = settings.theme !== 'light' && settings.theme !== 'dark'
|
78
78
|
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
79
79
|
? 'dark'
|
80
80
|
: 'light'
|
package/cjs/useSelectDialog.js
CHANGED
@@ -67,15 +67,16 @@ function SelectDialog(props) {
|
|
67
67
|
}, isAriaDisabled: view.selectedItems.length === 0 }, { children: confirm }), "confirm"),
|
68
68
|
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", onClick: onClose }, { children: cancel }), "cancel"),
|
69
69
|
], hasNoBodyWrapper: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalBoxBody, __assign({ style: { overflow: 'hidden' } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Split, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, __assign({ style: { opacity: view.selectedItems.length === 0 ? 0 : undefined } }, { children: selected })), (0, jsx_runtime_1.jsxs)("b", { children: [view.selectedItems.map(function (item, i) {
|
70
|
+
var _a;
|
70
71
|
if (tableColumns && tableColumns.length > 0) {
|
71
|
-
return (0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { item: item, column: tableColumns[0] }, i);
|
72
|
+
return ((0, jsx_runtime_1.jsx)(PageTable_1.TableColumnCell, { item: item, column: (_a = tableColumns.find(function (column) { return column.card === 'name' || column.list === 'name'; })) !== null && _a !== void 0 ? _a : tableColumns[0] }, i));
|
72
73
|
}
|
73
74
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
74
75
|
}), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })] })) })), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: view.itemCount === undefined }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { height: "80px" }) })), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, __assign({ open: view.itemCount !== undefined }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
|
75
76
|
display: 'flex',
|
76
77
|
flexDirection: 'column',
|
77
|
-
maxHeight:
|
78
|
+
maxHeight: 500,
|
78
79
|
overflow: 'hidden',
|
79
|
-
} }, { 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 })) })) }))] })));
|
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 })) })) }))] })));
|
80
81
|
}
|
81
82
|
exports.SelectDialog = SelectDialog;
|
@@ -51,7 +51,7 @@ function SelectMultipleDialog(props) {
|
|
51
51
|
flexDirection: 'column',
|
52
52
|
maxHeight: 500,
|
53
53
|
overflow: 'hidden',
|
54
|
-
} }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters }, view, { emptyStateTitle: (_a = props.emptyStateTitle) !== null && _a !== void 0 ? _a : translations.noItemsFound, errorStateTitle: (_b = props.errorStateTitle) !== null && _b !== void 0 ? _b : translations.errorText, showSelect: true, disableCardView: true, disableListView: true, disableColumnManagement: true })) })) })));
|
54
|
+
} }, { children: (0, jsx_runtime_1.jsx)(PageTable_1.PageTable, __assign({ tableColumns: tableColumns, toolbarFilters: toolbarFilters }, view, { emptyStateTitle: (_a = props.emptyStateTitle) !== null && _a !== void 0 ? _a : translations.noItemsFound, errorStateTitle: (_b = props.errorStateTitle) !== null && _b !== void 0 ? _b : translations.errorText, showSelect: true, disableCardView: true, disableListView: true, disableColumnManagement: true, compact: true })) })) })));
|
55
55
|
}
|
56
56
|
exports.SelectMultipleDialog = SelectMultipleDialog;
|
57
57
|
function useSelectMultipleDialog() {
|