@ansible/ansible-ui-framework 0.0.600 → 0.0.601
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageHeader.js +12 -2
- package/cjs/PageTable/PageToolbar.js +13 -2
- package/package.json +1 -1
package/cjs/PageHeader.js
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
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
|
+
};
|
|
2
6
|
var __assign = (this && this.__assign) || function () {
|
|
3
7
|
__assign = Object.assign || function(t) {
|
|
4
8
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -10,6 +14,9 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
14
|
};
|
|
11
15
|
return __assign.apply(this, arguments);
|
|
12
16
|
};
|
|
17
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
+
};
|
|
13
20
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
21
|
exports.PageHeader = void 0;
|
|
15
22
|
var react_1 = require("react");
|
|
@@ -21,6 +28,8 @@ var useBreakPoint_1 = require("./components/useBreakPoint");
|
|
|
21
28
|
var usePageNavigate_1 = require("./components/usePageNavigate");
|
|
22
29
|
var PageAlerts_1 = require("./PageAlerts");
|
|
23
30
|
require("./PageFramework.css");
|
|
31
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
32
|
+
var PageAlertsDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-bottom: thin solid rgba(0, 0, 0, 0.12);\n"], ["\n border-bottom: thin solid rgba(0, 0, 0, 0.12);\n"])));
|
|
24
33
|
function Breadcrumbs(props) {
|
|
25
34
|
var navigate = (0, usePageNavigate_1.usePageNavigate)();
|
|
26
35
|
if (!props.breadcrumbs)
|
|
@@ -76,10 +85,11 @@ function PageHeader(props) {
|
|
|
76
85
|
} }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) }))] })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: title })))) : ((0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h1" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "160px" }) }))), isMdOrLarger && description && ((0, jsx_runtime_1.jsx)(react_core_1.Text, __assign({ component: "p", style: { paddingTop: xl ? 4 : 2, opacity: 0.8 } }, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: description })) : ((0, jsx_runtime_1.jsx)(react_core_1.Stack, { children: description.map(function (d) { return ((0, jsx_runtime_1.jsx)(react_core_1.StackItem, { children: d }, d)); }) })) })))] })), title && (headerActions || controls) && ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ direction: { default: 'column' }, spaceItems: { default: 'spaceItemsSm', xl: 'spaceItemsMd' }, justifyContent: { default: 'justifyContentCenter' } }, { children: [controls && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ grow: { default: 'grow' } }, { children: controls })), headerActions && (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: headerActions })] })))] })), footer] })) })), (0, jsx_runtime_1.jsx)(PageAlerts_1.PageAlertsContext.Consumer, { children: function (pageAlerts) { return ((0, jsx_runtime_1.jsx)(PageAlerts_1.PageAlertsArrayContext.Consumer, { children: function (pageAlertsArray) {
|
|
77
86
|
if (pageAlertsArray.length === 0)
|
|
78
87
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
79
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
88
|
+
return ((0, jsx_runtime_1.jsx)(PageAlertsDiv, { children: pageAlertsArray.map(function (alertProps, index) {
|
|
80
89
|
var _a, _b;
|
|
81
90
|
return ((0, react_1.createElement)(react_core_1.Alert, __assign({}, alertProps, { key: (_b = (_a = alertProps.key) !== null && _a !== void 0 ? _a : alertProps.id) !== null && _b !== void 0 ? _b : index, actionClose: (0, jsx_runtime_1.jsx)(react_core_1.AlertActionCloseButton, { onClose: function () { return pageAlerts.removeAlert(alertProps); } }), isInline: true, isExpandable: !!alertProps.children })));
|
|
82
|
-
}) }))
|
|
91
|
+
}) }));
|
|
83
92
|
} })); } })] }));
|
|
84
93
|
}
|
|
85
94
|
exports.PageHeader = PageHeader;
|
|
95
|
+
var templateObject_1;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
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
|
+
};
|
|
2
6
|
var __assign = (this && this.__assign) || function () {
|
|
3
7
|
__assign = Object.assign || function(t) {
|
|
4
8
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -37,6 +41,9 @@ var __read = (this && this.__read) || function (o, n) {
|
|
|
37
41
|
}
|
|
38
42
|
return ar;
|
|
39
43
|
};
|
|
44
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
45
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
46
|
+
};
|
|
40
47
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
41
48
|
exports.PageTableToolbar = exports.toolbarActionsHaveBulkActions = void 0;
|
|
42
49
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
@@ -50,7 +57,10 @@ var PageActionType_1 = require("../PageActions/PageActionType");
|
|
|
50
57
|
var FormGroupSelect_1 = require("../PageForm/Inputs/FormGroupSelect");
|
|
51
58
|
var useFrameworkTranslations_1 = require("../useFrameworkTranslations");
|
|
52
59
|
var PageTableViewType_1 = require("./PageTableViewType");
|
|
60
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
53
61
|
require("./PageToolbar.css");
|
|
62
|
+
var ToolbarGroupsDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
|
|
63
|
+
var SelectionSpan = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n opacity: 0.7;\n"], ["\n opacity: 0.7;\n"])));
|
|
54
64
|
function toolbarActionsHaveBulkActions(actions) {
|
|
55
65
|
var e_1, _a;
|
|
56
66
|
if (!actions)
|
|
@@ -155,7 +165,7 @@ function PageTableToolbar(props) {
|
|
|
155
165
|
return newState;
|
|
156
166
|
});
|
|
157
167
|
}, showToolbarItem: false }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), filter.label));
|
|
158
|
-
})] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) })), (0, jsx_runtime_1.jsx)(
|
|
168
|
+
})] })) }))), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: toolbarActions, selectedItems: selectedItems, wrapper: react_core_1.ToolbarItem }) })), (0, jsx_runtime_1.jsx)(ToolbarGroupsDiv, {}), (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "button-group", style: { zIndex: 302 } }, { children: [!props.disableColumnManagement && openColumnModal && viewType === 'table' && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: 'Manage columns' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ColumnsIcon, {}), onClick: openColumnModal }) })) })), viewTypeCount > 1 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToggleGroup, __assign({ "aria-label": "table view toggle" }, { children: [
|
|
159
169
|
!props.disableTableView && PageTableViewType_1.PageTableViewTypeE.Table,
|
|
160
170
|
!props.disableListView && PageTableViewType_1.PageTableViewTypeE.List,
|
|
161
171
|
!props.disableCardView && PageTableViewType_1.PageTableViewTypeE.Cards,
|
|
@@ -218,5 +228,6 @@ function ToolbarSelectFilter(props) {
|
|
|
218
228
|
}
|
|
219
229
|
}, [addFilter, removeFilter, values]);
|
|
220
230
|
var selections = values;
|
|
221
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ variant: react_core_1.SelectVariant.checkbox, isOpen: open, onToggle: setOpen, selections: selections, onSelect: onSelect, placeholderText: values.length ? (translations.selectedText) : ((0, jsx_runtime_1.jsx)(
|
|
231
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ variant: react_core_1.SelectVariant.checkbox, isOpen: open, onToggle: setOpen, selections: selections, onSelect: onSelect, placeholderText: values.length ? (translations.selectedText) : ((0, jsx_runtime_1.jsx)(SelectionSpan, { children: props.placeholder })) }, { children: options.map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ id: option.value, value: option.value }, { children: option.label }), option.value)); }) })) }));
|
|
222
232
|
}
|
|
233
|
+
var templateObject_1, templateObject_2;
|