@ansible/ansible-ui-framework 0.0.542 → 0.0.546
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageHeader.d.ts +2 -0
- package/cjs/PageHeader.js +14 -13
- package/package.json +1 -1
package/cjs/PageHeader.d.ts
CHANGED
|
@@ -17,6 +17,7 @@ export interface PageHeaderProps {
|
|
|
17
17
|
description?: string | string[];
|
|
18
18
|
controls?: ReactNode;
|
|
19
19
|
headerActions?: ReactNode;
|
|
20
|
+
footer?: ReactNode;
|
|
20
21
|
t?: (t: string) => string;
|
|
21
22
|
}
|
|
22
23
|
/**
|
|
@@ -29,6 +30,7 @@ export interface PageHeaderProps {
|
|
|
29
30
|
* @param {string} description - The description of the page.
|
|
30
31
|
* @param {ReactNode} controls - Support for extra page controls.
|
|
31
32
|
* @param {ReactNode} headerActions - The actions for the page.
|
|
33
|
+
* @param {ReactNode} footer - Extra components to render at the bottom of the header.
|
|
32
34
|
*
|
|
33
35
|
* @example
|
|
34
36
|
* <PageLayout>
|
package/cjs/PageHeader.js
CHANGED
|
@@ -45,6 +45,7 @@ function Breadcrumbs(props) {
|
|
|
45
45
|
* @param {string} description - The description of the page.
|
|
46
46
|
* @param {ReactNode} controls - Support for extra page controls.
|
|
47
47
|
* @param {ReactNode} headerActions - The actions for the page.
|
|
48
|
+
* @param {ReactNode} footer - Extra components to render at the bottom of the header.
|
|
48
49
|
*
|
|
49
50
|
* @example
|
|
50
51
|
* <PageLayout>
|
|
@@ -58,27 +59,27 @@ function Breadcrumbs(props) {
|
|
|
58
59
|
* </PageLayout>
|
|
59
60
|
*/
|
|
60
61
|
function PageHeader(props) {
|
|
61
|
-
var navigation = props.navigation, breadcrumbs = props.breadcrumbs, title = props.title, description = props.description, controls = props.controls, headerActions = props.headerActions;
|
|
62
|
+
var navigation = props.navigation, breadcrumbs = props.breadcrumbs, title = props.title, description = props.description, controls = props.controls, headerActions = props.headerActions, footer = props.footer;
|
|
62
63
|
var lg = (0, useBreakPoint_1.useBreakpoint)('lg');
|
|
63
64
|
var xl = (0, useBreakPoint_1.useBreakpoint)('xl');
|
|
64
65
|
var isMdOrLarger = (0, useBreakPoint_1.useBreakpoint)('md');
|
|
65
66
|
var t = props.t;
|
|
66
67
|
t = t ? t : function (t) { return t; };
|
|
67
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [navigation && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, className: "border-top dark-1", style: { paddingLeft: 0, paddingTop: 0, paddingBottom: 0 } }, { 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 })) })) }))),
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
68
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [navigation && ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, className: "border-top dark-1", style: { paddingLeft: 0, paddingTop: 0, paddingBottom: 0 } }, { 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 })) })) }))), (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, className: "border-top border-bottom dark-3", style: {
|
|
69
|
+
paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
|
|
70
|
+
paddingBottom: xl ? 16 : 12,
|
|
71
|
+
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { 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: {
|
|
71
72
|
padding: 0,
|
|
72
73
|
marginTop: 1,
|
|
73
74
|
marginLeft: 8,
|
|
74
75
|
verticalAlign: 'top',
|
|
75
|
-
} }, { 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 })] })))] })) })), (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) {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
76
|
+
} }, { 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
|
+
if (pageAlertsArray.length === 0)
|
|
78
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
79
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { borderBottom: 'thin solid rgba(0, 0, 0, 0.12)' } }, { children: pageAlertsArray.map(function (alertProps, index) {
|
|
80
|
+
var _a, _b;
|
|
81
|
+
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
|
+
}) })));
|
|
83
|
+
} })); } })] }));
|
|
83
84
|
}
|
|
84
85
|
exports.PageHeader = PageHeader;
|