@ansible/ansible-ui-framework 0.0.577 → 0.0.579
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DropdownPosition } from '@patternfly/react-core';
|
|
1
|
+
import { ButtonVariant, DropdownPosition } from '@patternfly/react-core';
|
|
2
2
|
import { ComponentClass, FunctionComponent } from 'react';
|
|
3
3
|
import { IPageAction } from './PageAction';
|
|
4
4
|
export declare function PageDropdownAction<T extends object>(props: {
|
|
@@ -12,5 +12,6 @@ export declare function PageDropdownAction<T extends object>(props: {
|
|
|
12
12
|
position?: DropdownPosition;
|
|
13
13
|
iconOnly?: boolean;
|
|
14
14
|
onOpen?: (open: boolean) => void;
|
|
15
|
+
variant?: ButtonVariant;
|
|
15
16
|
}): JSX.Element;
|
|
16
17
|
export declare function filterActionSeperators<T extends object>(actions: IPageAction<T>[]): IPageAction<T>[];
|
|
@@ -45,7 +45,7 @@ var react_router_dom_1 = require("react-router-dom");
|
|
|
45
45
|
var PageActions_1 = require("./PageActions");
|
|
46
46
|
var PageActionType_1 = require("./PageActionType");
|
|
47
47
|
function PageDropdownAction(props) {
|
|
48
|
-
var label = props.label, icon = props.icon, selectedItems = props.selectedItems, selectedItem = props.selectedItem, iconOnly = props.iconOnly, isDisabled = props.isDisabled, tooltip = props.tooltip;
|
|
48
|
+
var label = props.label, icon = props.icon, selectedItems = props.selectedItems, selectedItem = props.selectedItem, iconOnly = props.iconOnly, isDisabled = props.isDisabled, tooltip = props.tooltip, variant = props.variant;
|
|
49
49
|
var actions = props.actions;
|
|
50
50
|
actions = actions.filter(function (action) { return !(0, PageActions_1.isHiddenAction)(action, selectedItem); });
|
|
51
51
|
actions = filterActionSeperators(actions);
|
|
@@ -62,8 +62,10 @@ function PageDropdownAction(props) {
|
|
|
62
62
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
63
63
|
var Icon = icon;
|
|
64
64
|
var toggleIcon = Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : label;
|
|
65
|
-
var isPrimary = hasBulkActions && !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length);
|
|
66
|
-
|
|
65
|
+
var isPrimary = variant === react_core_1.ButtonVariant.primary || (hasBulkActions && !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length));
|
|
66
|
+
/** Turn primary button to secondary if there are items selected */
|
|
67
|
+
var isSecondary = variant === react_core_1.ButtonVariant.primary && !hasBulkActions && !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length);
|
|
68
|
+
var Toggle = label || Icon ? ((0, jsx_runtime_1.jsx)(react_core_1.DropdownToggle, __assign({ id: "toggle-dropdown", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: isSecondary ? 'secondary' : isPrimary ? 'primary' : undefined, toggleIndicator: Icon && iconOnly ? null : undefined, style: isPrimary && !label ? { color: 'var(--pf-global--Color--light-100)' } : {}, icon: Icon ? (0, jsx_runtime_1.jsx)(Icon, {}) : undefined }, { children: iconOnly ? undefined : label }))) : ((0, jsx_runtime_1.jsx)(react_core_1.KebabToggle, __assign({ id: "toggle-kebab", isDisabled: isDisabled, onToggle: function () { return setDropdownOpen(!dropdownOpen); }, toggleVariant: isPrimary ? 'primary' : undefined, style: isPrimary && !label ? { color: 'var(--pf-global--Color--light-100)' } : {} }, { children: toggleIcon })));
|
|
67
69
|
var dropdown = ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { onSelect: function () { return setDropdownOpen(false); }, toggle: Toggle, isOpen: dropdownOpen, isPlain: !label || iconOnly, dropdownItems: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(PageDropdownActionItem, { action: action, selectedItems: selectedItems !== null && selectedItems !== void 0 ? selectedItems : [], selectedItem: selectedItem, hasIcons: hasIcons, index: index }, 'label' in action ? action.label : "action-".concat(index))); }), position: props.position, style: { zIndex: dropdownOpen ? 201 : undefined } }));
|
|
68
70
|
return tooltip && (iconOnly || isDisabled) ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, __assign({ content: tooltip, trigger: tooltip ? undefined : 'manual' }, { children: dropdown }))) : (__assign({}, dropdown));
|
|
69
71
|
}
|
|
@@ -106,7 +108,7 @@ function PageDropdownActionItem(props) {
|
|
|
106
108
|
var tooltip = action.label;
|
|
107
109
|
var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : '';
|
|
108
110
|
tooltip = isDisabled ? isDisabled : tooltip;
|
|
109
|
-
return ((0, jsx_runtime_1.jsx)(PageDropdownAction, { label: action.label, actions: action.options, selectedItem: selectedItem, isDisabled: Boolean(isDisabled), tooltip: tooltip }, action.label));
|
|
111
|
+
return ((0, jsx_runtime_1.jsx)(PageDropdownAction, { label: action.label, actions: action.options, selectedItem: selectedItem, isDisabled: Boolean(isDisabled), tooltip: tooltip, variant: action.variant }, action.label));
|
|
110
112
|
}
|
|
111
113
|
case PageActionType_1.PageActionType.seperator:
|
|
112
114
|
return (0, jsx_runtime_1.jsx)(react_core_1.DropdownSeparator, {}, "separator-".concat(index));
|
|
@@ -49,7 +49,7 @@ function PagePinnedAction(props) {
|
|
|
49
49
|
var tooltip = action.label;
|
|
50
50
|
var isDisabled = action.isDisabled !== undefined && selectedItem ? action.isDisabled(selectedItem) : '';
|
|
51
51
|
tooltip = isDisabled ? isDisabled : tooltip;
|
|
52
|
-
return ((0, jsx_runtime_1.jsx)(PageDropdownAction_1.PageDropdownAction, { icon: action.icon, label: action.label, actions: action.options, selectedItem: selectedItem, selectedItems: selectedItems, iconOnly: props.iconOnly, position: react_core_1.DropdownPosition.right, isDisabled: Boolean(isDisabled), tooltip: props.iconOnly || isDisabled ? tooltip : undefined }));
|
|
52
|
+
return ((0, jsx_runtime_1.jsx)(PageDropdownAction_1.PageDropdownAction, { icon: action.icon, label: action.label, actions: action.options, selectedItem: selectedItem, selectedItems: selectedItems, iconOnly: props.iconOnly, position: react_core_1.DropdownPosition.right, isDisabled: Boolean(isDisabled), tooltip: props.iconOnly || isDisabled ? tooltip : undefined, variant: action.variant }));
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
}
|