@ansible/ansible-ui-framework 0.0.402 → 0.0.404
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/PageActions/PageActions.d.ts +1 -1
- package/cjs/PageActions/PageActions.js +2 -2
- package/cjs/PageActions/PageButtonAction.d.ts +1 -0
- package/cjs/PageActions/PageButtonAction.js +7 -4
- package/cjs/PageActions/PagePinnedActions.js +1 -3
- package/cjs/PageHeader.js +2 -2
- package/cjs/PageLayout.d.ts +1 -1
- package/package.json +1 -1
@@ -18,7 +18,7 @@ export declare function PageActions<T extends object>(props: {
|
|
18
18
|
*/
|
19
19
|
wrapper?: ComponentClass | FunctionComponent;
|
20
20
|
/** When to collapse the primary and secondary items into the dropdown menu */
|
21
|
-
collapse?: WindowSize | 'always';
|
21
|
+
collapse?: WindowSize | 'always' | 'never';
|
22
22
|
/** The position for the dropdown */
|
23
23
|
position?: DropdownPosition;
|
24
24
|
/** Indicates if only to show the icon when not collapsed */
|
@@ -26,8 +26,8 @@ var PagePinnedActions_1 = require("./PagePinnedActions");
|
|
26
26
|
function PageActions(props) {
|
27
27
|
var _a;
|
28
28
|
var actions = props.actions, selectedItem = props.selectedItem, selectedItems = props.selectedItems, iconOnly = props.iconOnly;
|
29
|
-
var collapseBreakpoint = (0, useBreakPoint_1.useBreakpoint)(props.collapse !== 'always' ? (_a = props.collapse) !== null && _a !== void 0 ? _a : 'lg' : 'lg');
|
30
|
-
var collapseButtons = props.collapse === 'always' || !collapseBreakpoint;
|
29
|
+
var collapseBreakpoint = (0, useBreakPoint_1.useBreakpoint)(props.collapse !== 'never' && props.collapse !== 'always' ? (_a = props.collapse) !== null && _a !== void 0 ? _a : 'lg' : 'lg');
|
30
|
+
var collapseButtons = props.collapse !== 'never' && (props.collapse === 'always' || !collapseBreakpoint);
|
31
31
|
/** Actions that are visible */
|
32
32
|
var visibleActions = (0, react_1.useMemo)(function () { return actions.filter(function (action) { return !isHiddenAction(action, selectedItem); }); }, [actions, selectedItem]);
|
33
33
|
/** Actions that show up outside the dropdown */
|
@@ -16,19 +16,22 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
16
|
var react_core_1 = require("@patternfly/react-core");
|
17
17
|
var react_1 = require("react");
|
18
18
|
function PageButtonAction(props) {
|
19
|
-
var _a;
|
19
|
+
var _a, _b;
|
20
20
|
var action = props.action, isSecondary = props.isSecondary, wrapper = props.wrapper;
|
21
21
|
var Wrapper = wrapper !== null && wrapper !== void 0 ? wrapper : react_1.Fragment;
|
22
22
|
var Icon = action.icon;
|
23
|
-
var tooltip = action.tooltip;
|
23
|
+
var tooltip = ((_a = action.tooltip) !== null && _a !== void 0 ? _a : props.iconOnly) ? props.action.label : undefined;
|
24
24
|
var isDisabled = false;
|
25
|
-
var variant = (
|
25
|
+
var variant = (_b = action.variant) !== null && _b !== void 0 ? _b : react_core_1.ButtonVariant.secondary;
|
26
26
|
if (isSecondary && [react_core_1.ButtonVariant.primary, react_core_1.ButtonVariant.danger].includes(variant)) {
|
27
27
|
variant = react_core_1.ButtonVariant.secondary;
|
28
28
|
}
|
29
29
|
if (variant === react_core_1.ButtonVariant.primary && action.isDanger) {
|
30
30
|
variant = react_core_1.ButtonVariant.danger;
|
31
31
|
}
|
32
|
-
|
32
|
+
if (props.iconOnly) {
|
33
|
+
variant = react_core_1.ButtonVariant.plain;
|
34
|
+
}
|
35
|
+
return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ id: props.action.label.toLowerCase().split(' ').join('-'), variant: variant, isDanger: action.isDanger, icon: Icon ? ((0, jsx_runtime_1.jsx)("span", __assign({ style: { paddingRight: 4 } }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))) : undefined, isAriaDisabled: isDisabled, onClick: action.onClick }, { children: props.iconOnly && Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : action.shortLabel ? action.shortLabel : action.label })) })) }));
|
33
36
|
}
|
34
37
|
exports.PageButtonAction = PageButtonAction;
|
@@ -42,9 +42,7 @@ function PagePinnedAction(props) {
|
|
42
42
|
}
|
43
43
|
case PageActionType_1.PageActionType.button: {
|
44
44
|
return ((0, jsx_runtime_1.jsx)(PageButtonAction_1.PageButtonAction, { action: action, isSecondary: (selectedItems !== undefined && selectedItems.length !== 0) ||
|
45
|
-
selectedItem !== undefined,
|
46
|
-
// iconOnly={props.iconOnly}
|
47
|
-
wrapper: wrapper }));
|
45
|
+
selectedItem !== undefined, iconOnly: props.iconOnly, wrapper: wrapper }));
|
48
46
|
}
|
49
47
|
case PageActionType_1.PageActionType.dropdown: {
|
50
48
|
var tooltip = action.label;
|
package/cjs/PageHeader.js
CHANGED
@@ -76,9 +76,9 @@ function PageHeader(props) {
|
|
76
76
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
77
77
|
: undefined,
|
78
78
|
backgroundColor: 'var(--pf-global--BackgroundColor--100)',
|
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 })) })) }))),
|
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.jsx)(react_core_1.PageSection, __assign({ variant: react_core_1.PageSectionVariants.light, style: {
|
80
80
|
paddingTop: breadcrumbs ? (xl ? 16 : 12) : xl ? 16 : 12,
|
81
|
-
paddingBottom: xl ?
|
81
|
+
paddingBottom: xl ? 16 : 12,
|
82
82
|
borderTop: !navigation && settings.theme !== 'light' && settings.borders
|
83
83
|
? 'thin solid var(--pf-global--BorderColor--100)'
|
84
84
|
: undefined,
|
package/cjs/PageLayout.d.ts
CHANGED